Merge pull request #16 from WebReflection/issue-15

Fix #15 - avoid removing nodes that do not belong to their parent

Author: WebReflection

cjs/utils.js

@@ -87,14 +87,8 @@ const next = (get, list, i, length, before) => i < length ?
 exports.next = next;
 
 const remove = (get, parent, children, start, end) => {
-  if ((end - start) < 2)
-    parent.removeChild(get(children[start], -1));
-  else {
-    const range = parent.ownerDocument.createRange();
-    range.setStartBefore(get(children[start], -1));
-    range.setEndAfter(get(children[end - 1], -1));
-    range.deleteContents();
-  }
+  while (start < end)
+    removeChild(get(children[start++], -1), parent);
 };
 exports.remove = remove;
 
@@ -386,3 +380,20 @@ const smartDiff = (
   );
 };
 exports.smartDiff = smartDiff;
+
+let removeChild = (child, parentNode) => {
+  /* istanbul ignore if */
+  if ('remove' in child) {
+    removeChild = child => {
+      child.remove();
+    };
+  }
+  else {
+    removeChild = (child, parentNode) => {
+      /* istanbul ignore else */
+      if (child.parentNode === parentNode)
+        parentNode.removeChild(child);
+    };
+  }
+  removeChild(child, parentNode);
+};

esm/utils.js

@@ -80,14 +80,8 @@ export const next = (get, list, i, length, before) => i < length ?
                 before);
 
 export const remove = (get, parent, children, start, end) => {
-  if ((end - start) < 2)
-    parent.removeChild(get(children[start], -1));
-  else {
-    const range = parent.ownerDocument.createRange();
-    range.setStartBefore(get(children[start], -1));
-    range.setEndAfter(get(children[end - 1], -1));
-    range.deleteContents();
-  }
+  while (start < end)
+    removeChild(get(children[start++], -1), parent);
 };
 
 // - - - - - - - - - - - - - - - - - - -
@@ -377,3 +371,20 @@ export const smartDiff = (
     before
   );
 };
+
+let removeChild = (child, parentNode) => {
+  /* istanbul ignore if */
+  if ('remove' in child) {
+    removeChild = child => {
+      child.remove();
+    };
+  }
+  else {
+    removeChild = (child, parentNode) => {
+      /* istanbul ignore else */
+      if (child.parentNode === parentNode)
+        parentNode.removeChild(child);
+    };
+  }
+  removeChild(child, parentNode);
+};

index.js

@@ -99,11 +99,8 @@ var next = function next(get, list, i, length, before) {
 };
 
 var remove = function remove(get, parent, children, start, end) {
-  if (end - start < 2) parent.removeChild(get(children[start], -1));else {
-    var range = parent.ownerDocument.createRange();
-    range.setStartBefore(get(children[start], -1));
-    range.setEndAfter(get(children[end - 1], -1));
-    range.deleteContents();
+  while (start < end) {
+    _removeChild(get(children[start++], -1), parent);
   }
 };
 
@@ -296,6 +293,21 @@ var smartDiff = function smartDiff(get, parentNode, futureNodes, futureStart, fu
   applyDiff(OND(futureNodes, futureStart, futureChanges, currentNodes, currentStart, currentChanges, compare) || HS(futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges), get, parentNode, futureNodes, futureStart, currentNodes, currentStart, currentLength, before);
 };
 
+var _removeChild = function removeChild(child, parentNode) {
+  /* istanbul ignore if */
+  if ('remove' in child) {
+    _removeChild = function removeChild(child) {
+      child.remove();
+    };
+  } else {
+    _removeChild = function removeChild(child, parentNode) {
+      /* istanbul ignore else */
+      if (child.parentNode === parentNode) parentNode.removeChild(child);
+    };
+  }
+  _removeChild(child, parentNode);
+};
+
 /*! (c) 2018 Andrea Giammarchi (ISC) */
 
 var domdiff = function domdiff(parentNode, // where changes happen

min.js

@@ -18,28 +18,24 @@ global.document = {
         var cn = [];
         return {
           appendChild: function (node) {
+            node.parentNode = this;
             cn.push(node);
           }
         };
-      },
-      createRange: function () {
-        return {
-          setStartBefore: function () {},
-          setEndAfter: function () {},
-          deleteContents: function () {}
-        };
       }
     },
     childNodes: [],
     insertBefore: function (before, after) {
       var cn = this.childNodes;
       var i = cn.indexOf(before);
       if (-1 < i) cn.splice(i, 1);
+      before.parentNode = this;
       if (after == null) cn.push(before);
       else cn.splice(cn.indexOf(after), 0, before);
     },
     removeChild: function (child) {
       var cn = this.childNodes;
+      delete child.parentNode;
       cn.splice(cn.indexOf(child), 1);
     }
   }

test/node.js

@@ -1266,6 +1266,25 @@ newState = domdiff(
 );
 console.assert(document.body.selectedIndex === 2, 'partial selectedIndex is OK');
 
+var parent1 = document.createDocumentFragment();
+var parent2 = document.createDocumentFragment();
+var nodeA = document.createTextNode('option');
+var nodeB = document.createTextNode('option');
+var nodeC = document.createTextNode('option');
+var nodeD = document.createTextNode('option');
+
+domdiff(
+  parent1,
+  [nodeA, nodeB],
+  [nodeA, nodeB, nodeC]
+);
+
+domdiff(
+  parent2,
+  [nodeC, nodeD],
+  [nodeD]
+);
+
 // */
 
 tressa.end();