Let's try and get removal right

Author: natefaubion

src/Halogen/VDom/DOM.js

@@ -24,6 +24,15 @@ exports.createElementNS = function (ns, name, doc) {
   };
 };
 
+exports.tryRemoveChild = function (a, b) {
+  return function () {
+    try {
+      b.removeChild(a);
+    } catch (e) {
+    }
+  };
+};
+
 exports.removeLastChild = function (a) {
   return function () {
     a.removeChild(a.lastChild);
@@ -41,9 +50,3 @@ exports.unsafeChildIx = function (i, d) {
     return d.childNodes.item(i);
   };
 };
-
-exports.nodeLength = function (a) {
-  return function () {
-    return a.childNodes.length | 0;
-  };
-};

src/Halogen/VDom/DOM.purs

@@ -13,7 +13,6 @@ module Halogen.VDom.DOM
 import Prelude
 import Control.Monad.Eff (Eff, foreachE)
 
-import Data.Array as Array
 import Data.Function.Uncurried as Fn
 import Data.Maybe (Maybe(..))
 import Data.Tuple (Tuple(..), fst)
@@ -24,9 +23,7 @@ import DOM.Node.Types (Element, Node, Document, elementToNode) as DOM
 import Halogen.VDom.Machine (Step(..), Machine)
 import Halogen.VDom.Machine as Machine
 import Halogen.VDom.Types (VDom(..), ElemSpec(..), ElemName, Namespace(..), runGraft)
-import Halogen.VDom.Util (forE, forInE, replicateE, diffWithIxE, diffWithKeyAndIxE, strMapWithIxE, refEq)
-
-data Quaple a b c d = Quaple a b c d
+import Halogen.VDom.Util (forE, forInE, diffWithIxE, diffWithKeyAndIxE, strMapWithIxE, refEq)
 
 type VDomMachine eff a b = Machine (Eff eff) a b
 
@@ -106,24 +103,23 @@ buildElem (VDomSpec spec) = render
       Fn.runFn4 patch node attrs es1 ch1 (runGraft g)
     Elem es2@(ElemSpec ns2 name2 as2) ch2 | Fn.runFn2 eqElemSpec es1 es2 → do
       let
-        onThese = Fn.mkFn3 \ix (Step _ step halt) vdom → do
+        onThese = Fn.mkFn3 \ix (Step n step halt) vdom → do
           res@Step n' m' h' ← step vdom
-          n ← Fn.runFn2 unsafeChildIx ix node
           case Fn.runFn2 refEq n' n of
             true → pure res
             _ → do
               halt
+              Fn.runFn2 tryRemoveChild n node
               Fn.runFn3 insertChildIx ix n' node
               pure res
-        onThis = Fn.mkFn2 \ix (Step _ _ halt) → do
+        onThis = Fn.mkFn2 \ix (Step n _ halt) → do
           halt
+          Fn.runFn2 tryRemoveChild n node
         onThat = Fn.mkFn2 \ix vdom → do
           res@Step n m h ← buildVDom (VDomSpec spec) vdom
           Fn.runFn3 insertChildIx ix n node
           pure res
       steps ← Fn.runFn5 diffWithIxE ch1 ch2 onThese onThis onThat
-      len ← nodeLength node
-      Fn.runFn2 replicateE (len - Array.length ch2) (removeLastChild node)
       attrs' ← Machine.step attrs as2
       pure
         (Step node
@@ -149,9 +145,9 @@ buildKeyed (VDomSpec spec) = render
     let
       node = DOM.elementToNode el
       onChild = Fn.mkFn3 \k ix (Tuple _ vdom) → do
-        Step n m h ← buildVDom (VDomSpec spec) vdom
+        res@Step n m h ← buildVDom (VDomSpec spec) vdom
         Fn.runFn3 insertChildIx ix n node
-        pure (Quaple k ix m h)
+        pure (Tuple ix res)
     steps ← Fn.runFn3 strMapWithIxE ch1 fst onChild
     attrs ← spec.buildAttributes el as1
     pure
@@ -164,32 +160,29 @@ buildKeyed (VDomSpec spec) = render
       Fn.runFn4 patch node attrs es1 ch1 (runGraft g)
     Keyed es2@(ElemSpec ns2 name2 as2) ch2 | Fn.runFn2 eqElemSpec es1 es2 → do
       let
-        onThese = Fn.mkFn4 \k ix (Quaple _ ix' step halt) (Tuple _ vdom) →
+        onThese = Fn.mkFn4 \k ix' (Tuple ix (Step n step halt)) (Tuple _ vdom) →
           if ix == ix'
             then do
-              Step n' m' h' ← step vdom
-              n ← Fn.runFn2 unsafeChildIx ix node
-              let
-                res = Quaple k ix m' h'
-              case Fn.runFn2 refEq n' n of
-                true → pure res
+              res@Step n' m' h' ← step vdom
+              case Fn.runFn2 refEq n n' of
+                true → pure (Tuple ix' res)
                 _ → do
                   halt
-                  Fn.runFn3 insertChildIx ix n' node
-                  pure res
+                  Fn.runFn2 tryRemoveChild n node
+                  Fn.runFn3 insertChildIx ix' n' node
+                  pure (Tuple ix' res)
             else do
-              Step n' m' h' ← step vdom
-              Fn.runFn3 insertChildIx ix n' node
-              pure (Quaple k ix m' h')
-        onThis = Fn.mkFn2 \k (Quaple _ _ _ halt) → do
+              res@Step n' m' h' ← step vdom
+              Fn.runFn3 insertChildIx ix' n' node
+              pure (Tuple ix' res)
+        onThis = Fn.mkFn2 \k (Tuple _ (Step n _ halt)) → do
           halt
+          Fn.runFn2 tryRemoveChild n node
         onThat = Fn.mkFn3 \k ix (Tuple _ vdom) → do
-          Step n' m' h' ← buildVDom (VDomSpec spec) vdom
+          res@Step n' m' h' ← buildVDom (VDomSpec spec) vdom
           Fn.runFn3 insertChildIx ix n' node
-          pure (Quaple k ix m' h')
+          pure (Tuple ix res)
       steps ← Fn.runFn6 diffWithKeyAndIxE ch1 ch2 fst onThese onThis onThat
-      len ← nodeLength node
-      Fn.runFn2 replicateE (len - Array.length ch2) (removeLastChild node)
       attrs' ← Machine.step attrs as2
       pure
         (Step node
@@ -199,7 +192,7 @@ buildKeyed (VDomSpec spec) = render
       buildVDom (VDomSpec spec) vdom
 
   done = Fn.mkFn2 \attrs steps → do
-    Fn.runFn2 forInE steps (Fn.mkFn2 \_ (Quaple _ _ _ halt) → halt)
+    Fn.runFn2 forInE steps (Fn.mkFn2 \_ (Tuple _ (Step _ _ halt)) → halt)
     Machine.halt attrs
 
 buildWidget
@@ -261,6 +254,10 @@ foreign import createElementNS
   ∷ ∀ eff
   . Fn.Fn3 Namespace ElemName DOM.Document (Eff (dom ∷ DOM | eff) DOM.Element)
 
+foreign import tryRemoveChild
+  ∷ ∀ eff
+  . Fn.Fn2 DOM.Node DOM.Node (Eff (dom ∷ DOM | eff) Unit)
+
 foreign import removeLastChild
   ∷ ∀ eff
   . DOM.Node → (Eff (dom ∷ DOM | eff) Unit)
@@ -272,7 +269,3 @@ foreign import insertChildIx
 foreign import unsafeChildIx
   ∷ ∀ eff
   . Fn.Fn2 Int DOM.Node (Eff (dom ∷ DOM | eff) DOM.Node)
-
-foreign import nodeLength
-  ∷ ∀ eff
-  . DOM.Node → (Eff (dom ∷ DOM | eff) Int)

src/Halogen/VDom/Util.js

@@ -20,14 +20,6 @@ exports.forInE = function (o, f) {
   };
 };
 
-exports.replicateE = function (n, f) {
-  return function () {
-    for (var i = 0; i < n; i++) {
-      f();
-    }
-  };
-};
-
 exports.diffWithIxE = function (a1, a2, f1, f2, f3) {
   return function () {
     var a3 = [];

src/Halogen/VDom/Util.purs

@@ -1,7 +1,6 @@
 module Halogen.VDom.Util
   ( forE
   , forInE
-  , replicateE
   , diffWithIxE
   , diffWithKeyAndIxE
   , strMapWithIxE
@@ -27,13 +26,6 @@ foreign import forInE
       (Fn.Fn2 String a (Eff eff Unit))
       (Eff eff Unit)
 
-foreign import replicateE
-  ∷ ∀ eff a
-  . Fn.Fn2
-      Int
-      (Eff eff a)
-      (Eff eff Unit)
-
 foreign import diffWithIxE
   ∷ ∀ eff b c d
   . Fn.Fn5