fix(main): fix replace error when the old node has been deleted or moved

.size-snapshot.json

@@ -1,7 +1,7 @@
 {
   "dist/valyrian.min.js": {
-    "bundled": 11980,
-    "minified": 4906,
-    "gzipped": 2001
+    "bundled": 11997,
+    "minified": 4920,
+    "gzipped": 2005
   }
 }

CHANGELOG.md

@@ -1,31 +1,26 @@
 # [4.0.0](https://github.com/Masquerade-Circus/valyrian.js/compare/3.3.4...4.0.0) (2020-01-26)
 
-
 ### Bug Fixes
 
-* **main:** handle TextVnode as newVnode ([f29cec3](https://github.com/Masquerade-Circus/valyrian.js/commit/f29cec3c47310c2f4aa8719f5fd0659f52f8388d))
-* **main (directives):** fix use of v-if with v-for trigger an error ([dec8522](https://github.com/Masquerade-Circus/valyrian.js/commit/dec8522ec4328c7321d526fa77fb6bd308081541))
-* **main (keyed lists):** fix error replaced vnode with undefined node and updating with defined node ([782dbe7](https://github.com/Masquerade-Circus/valyrian.js/commit/782dbe77856965df3f18602ff4dd713ac622d949))
-
+-   **main:** handle TextVnode as newVnode ([f29cec3](https://github.com/Masquerade-Circus/valyrian.js/commit/f29cec3c47310c2f4aa8719f5fd0659f52f8388d))
+-   **main (directives):** fix use of v-if with v-for trigger an error ([dec8522](https://github.com/Masquerade-Circus/valyrian.js/commit/dec8522ec4328c7321d526fa77fb6bd308081541))
+-   **main (keyed lists):** fix error replaced vnode with undefined node and updating with defined node ([782dbe7](https://github.com/Masquerade-Circus/valyrian.js/commit/782dbe77856965df3f18602ff4dd713ac622d949))
 
 ### Features
 
-* **main:** add a reserved model property to pass data to the vnodes ([496f3ce](https://github.com/Masquerade-Circus/valyrian.js/commit/496f3ce15d84b187cdaa897d415a77138120ae55))
-
+-   **main:** add a reserved model property to pass data to the vnodes ([496f3ce](https://github.com/Masquerade-Circus/valyrian.js/commit/496f3ce15d84b187cdaa897d415a77138120ae55))
 
 ### improvement
 
-* **main:** rename lifecycle methods to write more easily in object props ([25b1eba](https://github.com/Masquerade-Circus/valyrian.js/commit/25b1eba52a34a54bcfdbf1e8304c0e7ad0de65b7))
-
+-   **main:** rename lifecycle methods to write more easily in object props ([25b1eba](https://github.com/Masquerade-Circus/valyrian.js/commit/25b1eba52a34a54bcfdbf1e8304c0e7ad0de65b7))
 
 ### Performance Improvements
 
-* **main:** increase performance for all new changes ([b4b1a0d](https://github.com/Masquerade-Circus/valyrian.js/commit/b4b1a0d440ba8d699827b5a155a2d877c69d6c47))
-
+-   **main:** increase performance for all new changes ([b4b1a0d](https://github.com/Masquerade-Circus/valyrian.js/commit/b4b1a0d440ba8d699827b5a155a2d877c69d6c47))
 
 ### BREAKING CHANGES
 
-* **main:** Lifecycle methods renamed.
+-   **main:** Lifecycle methods renamed.
 
 ## [3.3.4](https://github.com/Masquerade-Circus/valyrian.js/compare/v3.3.3...v3.3.4) (2020-01-24)
 

lib/index.js

@@ -330,7 +330,7 @@ function patch(parentNode, oldParentNode) {
             lifecycleCall(oldNode, onremove);
             newNode.dom = createElement(newNode.name, newNode.isSVG);
             updateProps(newNode, emptyNode);
-            parentNode.dom.replaceChild(newNode.dom, oldNode.dom);
+            parentNode.dom.replaceChild(newNode.dom, parentNode.dom.childNodes[i]);
             lifecycleCall(newNode, oncreate);
             patch(newNode, emptyNode);
           }

plugins/utils/dom.js

@@ -73,6 +73,14 @@ function createAttributeFilter(name) {
   return o => toLower(o.nodeName) === toLower(name);
 }
 
+function isChildNode(node, child) {
+  let index = node.childNodes ? findWhere(node.childNodes, child, true, true) : -1;
+  if (index === -1) {
+    throw new Error('The node is not child of this element');
+  }
+  return true;
+}
+
 let selfClosingTags = [
   'area',
   'base',
@@ -142,19 +150,22 @@ class Node {
     return child;
   }
   replaceChild(child, ref) {
-    if (ref.parentNode === this) {
+    if (isChildNode(this, ref)) {
       this.insertBefore(child, ref);
       ref.remove();
       return ref;
     }
   }
   removeChild(child) {
-    splice(this.childNodes, child, false, true);
-    return child;
+    if (isChildNode(this, child)) {
+      child.remove();
+      return child;
+    }
   }
   remove() {
     if (this.parentNode) {
-      this.parentNode.removeChild(this);
+      splice(this.parentNode.childNodes, this, false, true);
+      this.parentNode = null;
     }
   }
 }

test/keyed_test.js

@@ -18,11 +18,16 @@ describe('Keyed lists', () => {
     {name: 'Replaced with undefined', set: [1, 3, 2, , 5, 4]},
     {name: 'Added, remove and replaced with undefined', set: [6, 7, 8, 9,, 10]}
   ];
-  let beforeString = '<ul>';
-  for (let key of set) {
-    beforeString += '<li>' + key + '</li>';
+
+  function getString(set) {
+    let str = '<ul>';
+    for (let key of set) {
+      str += key ? `<li>${key}</li>` : '';
+    }
+    str += '</ul>';
+    return str;
   }
-  beforeString += '</ul>';
+  let beforeString = getString(set);
 
   tests.forEach(test => {
     it('Keyed list: ' + test.name, () => {
@@ -37,11 +42,7 @@ describe('Keyed lists', () => {
       keys = [...test.set];
       let after = v.update();
 
-      let afterString = '<ul>';
-      for (let key of test.set) {
-        afterString += key ? `<li>${key}</li>` : '';
-      }
-      afterString += '</ul>';
+      let afterString = getString(test.set);
 
       expect(before).toEqual(beforeString);
       expect(after).toEqual(afterString);
@@ -61,20 +62,12 @@ describe('Keyed lists', () => {
     keys = [6, 7, 8, 9,, 10];
     let after = v.update();
 
-    let afterString = '<ul>';
-    for (let key of keys) {
-      afterString += key ? `<li>${key}</li>` : '';
-    }
-    afterString += '</ul>';
+    let afterString = getString(keys);
 
     keys = [1, 2, 3, 4, 5];
     let afterUpdate = v.update();
 
-    let afterUpdateString = '<ul>';
-    for (let key of set) {
-      afterUpdateString += key ? `<li>${key}</li>` : '';
-    }
-    afterUpdateString += '</ul>';
+    let afterUpdateString = getString(keys);
 
     expect(before).toEqual(beforeString);
     expect(after).toEqual(afterString);