Merge pull request #517 from dmjio/prepend-key

Support base case for prepending keys.
dmjio · Aug 1, 2019 · 4529ee1 · 4529ee1
2 parents 5647cfd + b943cd1
commit 4529ee1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/jsbits/diff.js b/jsbits/diff.js
@@ -199,7 +199,11 @@ window['syncChildren'] = function syncChildren(os, ns, parent, doc) {
       window['diff'](null, nFirst, parent, doc);
       /* insertBefore's semantics will append a node if the second argument provided is `null` or `undefined`.
          Otherwise, it will insert node['domRef'] before oLast['domRef']. */
-      parent.insertBefore(oLast['domRef'], nFirst['domRef']);
+      if (!oLast) {
+        parent.insertBefore(nFirst['domRef'], oFirst['domRef']);
+      } else {
+        parent.insertBefore(oLast['domRef'], nFirst['domRef']);
+      }
       os.splice(newFirstIndex, 0, nFirst);
       newFirstIndex++;
     }

diff --git a/tests/diff.test.js b/tests/diff.test.js
@@ -553,6 +553,23 @@ test('Should execute left-hand side happy path key-window diffing case', () => {
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
 });
 
+test('Should diff keys properly when keys are prepended', () => {
+    var document = new jsdom.JSDOM().window.document;
+    var body = document.body;
+    var destroy = 0;
+    var currentNode =
+        vnode('div', [vnodeKeyed('div', '1')], {}, {}, "html", null, null, null, "key-1");
+    window['diff'](null, currentNode, body, document)
+    var newNode =
+	vnode('div', [vnodeKeyed('div', '2'), vnodeKeyed('div', '1')], {}, {}, "html", null, null, null, "key-1");
+    window['diff'](currentNode, newNode, body, document)
+    expect(newNode.children.length).toBe(2);
+    expect(newNode.children.length).toBe(currentNode.children.length);
+    expect(currentNode.children).toEqual(newNode.children);
+    expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
+    expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
+});
+
 test('Should execute right-hand side happy path key-window diffing case', () => {
     var document = new jsdom.JSDOM().window.document;
     var body = document.body;