revert(#b385b50)

Author: Serhii Khoma

GUIDE.md

@@ -14,14 +14,12 @@ render ∷ MyState → MyVDom
 
 main = do
   -- Build the initial machine
-  (machine1 :: VDomMachine a w) ← V.buildVDom myVDomSpec (render state1)
+  machine1 ← V.buildVDom myVDomSpec (render state1)
 
-  -- `machine1` contains a new `DOM.Node` (output node) in it's state
-  -- Attach that output node to the DOM
+  -- Attach the output node to the DOM
   appendChildToBody (V.extract machine1)
 
   -- Patch
-  -- `V.step` patches previous `DOM.Node` (stored in `machine1`) by running effects
   machine2 ← V.step machine1 (render state2)
   machine3 ← V.step machine2 (render state3)
   ...

src/Halogen/VDom/DOM.purs

@@ -44,8 +44,8 @@ buildVDom ∷ ∀ a w. VDomSpec a w → VDomMachine a w
 buildVDom spec = build
   where
   build = EFn.mkEffectFn1 case _ of
-    Text s → EFn.runEffectFn3 buildText spec build s -- build text machine
+    Text s → EFn.runEffectFn3 buildText spec build s
     Elem namespace elemName a childrenVdoms → EFn.runEffectFn6 buildElem spec build namespace elemName a childrenVdoms
     Keyed namespace elemName a keyedChildrenVdoms → EFn.runEffectFn6 buildKeyed spec build namespace elemName a keyedChildrenVdoms
-    Widget w → EFn.runEffectFn3 buildWidget spec build w -- machine that has full control of it's lifecycle
-    Grafted g → EFn.runEffectFn1 build (runGraft g) -- optimization
+    Widget w → EFn.runEffectFn3 buildWidget spec build w
+    Grafted g → EFn.runEffectFn1 build (runGraft g)

src/Halogen/VDom/DOM/Elem.purs

@@ -88,7 +88,7 @@ buildElem = EFn.mkEffectFn6 \(VDomSpec spec) build ns1 name1 as1 ch1 → do
       EFn.runEffectFn3 Util.insertChildIx ix (extract res) node
       pure res
   children ← EFn.runEffectFn2 Util.forE ch1 onChild
-  attrs ← EFn.runEffectFn1 (spec.buildAttributes el) as1 -- build machine that takes attributes
+  attrs ← EFn.runEffectFn1 (spec.buildAttributes el) as1
   let
     state =
       { build

src/Halogen/VDom/DOM/Prop.purs

@@ -52,11 +52,6 @@ hydrateProp emit el = renderProp
 
     extraAttributeNames ← mkExtraAttributeNames el
 
-    -- for each prop in array:
-    --   if prop is attr - dont set attr to element, store attr under "attr/XXX" key in a returned object
-    --   if prop is property - dont set property to element, store property under "prop/XXX" key in a returned object
-    --   if prop is handler for DOM.EventType - start listen and add listener to `events` mutable map, store handler under "handler/EVENTTYPE" in a returned object
-    --   if prop is ref updater - store `emitterInputBuilder` in under a `ref` key in a returned object, call `emitter` on creation of all props (now) and on halt of all props (later)
     (props ∷ Object.Object (Prop a)) ← EFn.runEffectFn3 Util.strMapWithIxE ps1 propToStrKey (Fn.runFn4 hydrateApplyProp extraAttributeNames el emit events)
     let
       (state ∷ PropState a) =
@@ -75,19 +70,9 @@ buildProp
   . BuildPropFunction a
 buildProp emit el = renderProp
   where
-  -- what it does - creates a machine, that contains state
-  -- on next step - patches prop
-  -- on halt - all ref watchers are notified that element is removed
-
   renderProp ∷ EFn.EffectFn1 (Array (Prop a)) (Step (Array (Prop a)) Unit)
   renderProp = EFn.mkEffectFn1 \ps1 → do
     (events ∷ STObject' (EventListenerAndCurrentEmitterInputBuilder a)) ← Util.newMutMap
-
-    -- for each prop in array:
-    --   if prop is attr - set attr to element, store attr under "attr/XXX" key in a returned object
-    --   if prop is property - set property to element, store property under "prop/XXX" key in a returned object
-    --   if prop is handler for DOM.EventType - start listen and add listener to `events` mutable map, store handler under "handler/EVENTTYPE" in a returned object
-    --   if prop is ref updater - store `emitterInputBuilder` in under a `ref` key in a returned object, call `emitter` on creation of all props (now) and on halt of all props (later)
     (props ∷ Object.Object (Prop a)) ← EFn.runEffectFn3 Util.strMapWithIxE ps1 propToStrKey (Fn.runFn3 applyProp el emit events)
     let
       (state ∷ PropState a) =

src/Halogen/VDom/DOM/Prop/Types.purs

@@ -88,6 +88,6 @@ type PropState a =
   }
 
 type BuildPropFunction a
-  = (a → Effect Unit) -- emitter, for example the global broadcaster function for all elements in halogen component
+  = (a → Effect Unit) -- Emitter, for example the global broadcaster function for all elements in halogen component
   → DOM.Element
-  → Machine (Array (Prop a)) Unit -- Machine takes array of properties for that element, outputs nothing
+  → Machine (Array (Prop a)) Unit

src/Halogen/VDom/DOM/Prop/Utils.purs

@@ -29,9 +29,9 @@ unsafeGetProperty = Util.unsafeGetAny
 
 removeProperty ∷ EFn.EffectFn2 String DOM.Element Unit
 removeProperty = EFn.mkEffectFn2 \key el →
-  EFn.runEffectFn3 Util.hasAttribute (null ∷ Nullable Namespace) key el >>= if _ -- If attr exists on element
-    then EFn.runEffectFn3 Util.removeAttribute (null ∷ Nullable Namespace) key el -- remove it using el.removeAttribute()
-    else case typeOf (Fn.runFn2 Util.unsafeGetAny key el) of -- If it's property - set to following
+  EFn.runEffectFn3 Util.hasAttribute (null ∷ Nullable Namespace) key el >>= if _
+    then EFn.runEffectFn3 Util.removeAttribute (null ∷ Nullable Namespace) key el
+    else case typeOf (Fn.runFn2 Util.unsafeGetAny key el) of
       "string" → EFn.runEffectFn3 Util.unsafeSetAny key "" el
       _        → case key of
         "rowSpan" → EFn.runEffectFn3 Util.unsafeSetAny key 1 el

src/Halogen/VDom/DOM/Types.purs

@@ -9,15 +9,12 @@ import Web.DOM.Document (Document) as DOM
 import Web.DOM.Element (Element) as DOM
 import Web.DOM.Node (Node) as DOM
 
--- A function, that takes `VDom a w` and builds a `DOM.Node`
 type VDomMachine a w = Machine (VDom a w) DOM.Node
 
 type VDomStep a w = Step (VDom a w) DOM.Node
 
 type VDomInit i a w = EFn.EffectFn1 i (VDomStep a w)
 
--- Equal to
--- (VDomSpec a w) -> (VDOM a w -> Step (VDOM a w) DOM.Node) -> i -> Effect (Step (VDOM a w) DOM.Node)
 type VDomBuilder i a w = EFn.EffectFn3 (VDomSpec a w) (VDomMachine a w) i (VDomStep a w)
 
 type VDomHydrator i a w
@@ -48,13 +45,7 @@ type VDomHydrator4 i j k l a w
 newtype VDomSpec a w = VDomSpec
   { buildWidget ∷ VDomSpec a w → Machine w DOM.Node -- `buildWidget` takes a circular reference to the `VDomSpec`
   , hydrateWidget ∷ VDomSpec a w → DOM.Element → Machine w DOM.Node
-  -- example:
 
-  -- buildAttributes = buildProps handler
-  -- https://github.com/purescript-halogen/purescript-halogen/blob/bb715fe5c06ba3048f4d8b377ec842cd8cf37833/src/Halogen/VDom/Driver.purs#L68-L71
-
-  -- what is handler
-  -- https://github.com/purescript-halogen/purescript-halogen/blob/bb715fe5c06ba3048f4d8b377ec842cd8cf37833/src/Halogen/Aff/Driver.purs#L203
   , buildAttributes ∷ DOM.Element → Machine a Unit
   , hydrateAttributes ∷ DOM.Element → Machine a Unit
 

src/Halogen/VDom/Machine.purs

@@ -14,31 +14,12 @@ import Prelude
 import Effect.Uncurried (EffectFn1, EffectFn2, mkEffectFn1, mkEffectFn2, runEffectFn1, runEffectFn2)
 import Unsafe.Coerce (unsafeCoerce)
 
-{-
-
-type Machine is equal to:
-
-a -> Step a b
-a -> forall state . Step b state (state -> a -> Step a b) (state -> Unit)
-a -> forall state . Step b state (state -> Machine a b) (state -> Unit)
-
-where
-
-a is input
-b is output
-state is hidden state
-(state -> a -> Step a b) is a functon from state and input to the new Step
-(state -> Unit) is finalizer
-
--}
-
 type Machine a b = EffectFn1 a (Step a b)
 
 data Step' a b s = Step b s (EffectFn2 s a (Step a b)) (EffectFn1 s Unit)
 
 foreign import data Step ∷ Type → Type → Type
 
--- hides state type, makes it exsistential
 mkStep ∷ ∀ a b s. Step' a b s → Step a b
 mkStep = unsafeCoerce
 

src/Halogen/VDom/Util.js

@@ -44,26 +44,36 @@ exports.replicateE = function (n, f) {
   }
 };
 
-exports.diffWithIxE = function (oldElems, newElems, onBothElements, onOldElement, onNewElement) {
-  var outputs = [];
-  var oldElemsLength = oldElems.length;
-  var newElemsLength = newElems.length;
+exports.diffWithIxE = function (a1, a2, f1, f2, f3) {
+  var a3 = [];
+  var l1 = a1.length;
+  var l2 = a2.length;
   var i  = 0;
   while (1) {
-    if (i < oldElemsLength) {
-      if (i < newElemsLength) {
-        outputs.push(onBothElements(i, oldElems[i], newElems[i]));
+    if (i < l1) {
+      if (i < l2) {
+        a3.push(f1(i, a1[i], a2[i]));
       } else {
-        onOldElement(i, oldElems[i]);
+        f2(i, a1[i]);
       }
-    } else if (i < newElemsLength) {
-      outputs.push(onNewElement(i, newElems[i]));
+    } else if (i < l2) {
+      a3.push(f3(i, a2[i]));
     } else {
       break;
     }
     i++;
   }
-  return outputs;
+  return a3;
+};
+
+exports.strMapWithIxE = function (as, fk, f) {
+  var o = {};
+  for (var i = 0; i < as.length; i++) {
+    var a = as[i];
+    var k = fk(a);
+    o[k] = f(k, i, a);
+  }
+  return o;
 };
 
 exports.diffWithKeyAndIxE = function (o1, as, fk, f1, f2, f3) {
@@ -86,16 +96,6 @@ exports.diffWithKeyAndIxE = function (o1, as, fk, f1, f2, f3) {
   return o2;
 };
 
-exports.strMapWithIxE = function (children, propToStrKey, f) {
-  var o = {};
-  for (var i = 0; i < children.length; i++) {
-    var child = children[i];
-    var key = propToStrKey(child);
-    o[key] = f(key, i, child);
-  }
-  return o;
-};
-
 exports.refEq = function (a, b) {
   return a === b;
 };
@@ -116,22 +116,21 @@ exports.createElement = function (ns, name, doc) {
   }
 };
 
-exports.insertChildIx = function (i, elem, parent) {
-  var referenceNode = parent.childNodes.item(i) || null;
-  if (referenceNode !== elem) {
-    // insert before referenceNode, if referenceNode is null - inserted at the end
-    parent.insertBefore(elem, referenceNode);
+exports.insertChildIx = function (i, a, b) {
+  var n = b.childNodes.item(i) || null;
+  if (n !== a) {
+    b.insertBefore(a, n);
   }
 };
 
-exports.removeChild = function (elem, parent) {
-  if (parent && elem.parentNode === parent) {
-    parent.removeChild(elem);
+exports.removeChild = function (a, b) {
+  if (b && a.parentNode === b) {
+    b.removeChild(a);
   }
 };
 
-exports.parentNode = function (elem) {
-  return elem.parentNode;
+exports.parentNode = function (a) {
+  return a.parentNode;
 };
 
 exports.setAttribute = function (ns, attr, val, el) {

src/Halogen/VDom/Util.purs

@@ -1,6 +1,6 @@
 module Halogen.VDom.Util where
 
-import Prelude (Unit, unit, (<>), (==))
+import Prelude (Unit, (<>), (==))
 
 import Data.Function.Uncurried as Fn
 import Data.Nullable (Nullable)
@@ -75,33 +75,33 @@ foreign import replicateE
       Unit
 
 foreign import diffWithIxE
-  ∷ ∀ oldElem newElem output dismissed
+  ∷ ∀ b c d
   . EFn.EffectFn5
-      (Array oldElem) -- e.g. list of vdom elements
-      (Array newElem) -- e.g. list of vdom elements
-      (EFn.EffectFn3 Int oldElem newElem output) -- execute action when both elems are found in oldElems array and newElems array under the same index (usually used to remove old element from DOM and add new element to DOM)
-      (EFn.EffectFn2 Int oldElem dismissed) -- execute action when only oldElem is found, there are no elems left in `Array newElem` (happens when array of old elements is bigger than array of new elements)
-      (EFn.EffectFn2 Int newElem output) -- execute action when only newElem is found, there are no elems left in `Array oldElem` (happens when array of new elements is bigger than array of old elements)
-      (Array output) -- e.g. list of dom elements
+      (Array b)
+      (Array c)
+      (EFn.EffectFn3 Int b c d)
+      (EFn.EffectFn2 Int b Unit)
+      (EFn.EffectFn2 Int c d)
+      (Array d)
 
 foreign import diffWithKeyAndIxE
-  ∷ ∀ oldElem newElemWithKey output dismissed
+  ∷ ∀ a b c d
   . EFn.EffectFn6
-      (Object.Object oldElem)
-      (Array newElemWithKey)
-      (newElemWithKey → String)
-      (EFn.EffectFn4 String Int oldElem newElemWithKey output)
-      (EFn.EffectFn2 String oldElem dismissed)
-      (EFn.EffectFn3 String Int newElemWithKey output)
-      (Object.Object output)
+      (Object.Object a)
+      (Array b)
+      (b → String)
+      (EFn.EffectFn4 String Int a b c)
+      (EFn.EffectFn2 String a d)
+      (EFn.EffectFn3 String Int b c)
+      (Object.Object c)
 
 foreign import strMapWithIxE
-  ∷ ∀ child outputVal
+  ∷ ∀ a b
   . EFn.EffectFn3
-      (Array child) -- children
-      (child → String) -- propToStrKey
-      (EFn.EffectFn3 String Int child outputVal) -- action, executed on each array element, (StrKey -> Index -> child -> outputVal)
-      (Object.Object outputVal) -- key is StrKey, val type is outputVal
+      (Array a)
+      (a → String)
+      (EFn.EffectFn3 String Int a b)
+      (Object.Object b)
 
 foreign import refEq
   ∷ ∀ a b. Fn.Fn2 a b Boolean
@@ -115,9 +115,6 @@ foreign import setTextContent
 foreign import createElement
   ∷ EFn.EffectFn3 (Nullable Namespace) ElemName DOM.Document DOM.Element
 
--- Insert new child at index
--- (if there is already an element on that index, that old element is moved below).
--- If there are not enough elements - new child is moved at the end of the list.
 foreign import insertChildIx
   ∷ EFn.EffectFn3 Int DOM.Node DOM.Node Unit
 
@@ -153,9 +150,6 @@ foreign import warnAny ∷ ∀ a . EFn.EffectFn2 String a Unit
 
 foreign import logAny ∷ ∀ a . EFn.EffectFn2 String a Unit
 
-undefined :: ∀ a . a
-undefined = unsafeCoerce unit
-
 fullAttributeName ∷ Maybe Namespace → ElemName → String
 fullAttributeName maybeNamespace elemName =
   case maybeNamespace of