stop reordering old elements when new elements are prepended

test/keys.js

@@ -405,6 +405,76 @@ test("add to front and remove", function (assert) {
     assert.end()
 })
 
+test("prepending a single key doesn't cause removal of old keys", function (assert) {
+    var leftNode = h("div", [
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var rightNode = h("div", [
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var patches = diff(leftNode, rightNode)
+    assert.notOk(reorderRemovesSome(patches, ["b", "c"]))
+    assert.end()
+})
+
+test("prepending several keys doesn't cause removal of old keys", function (assert) {
+    var leftNode = h("div", [
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var rightNode = h("div", [
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "d" }, "d"),
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var patches = diff(leftNode, rightNode)
+    assert.notOk(reorderRemovesSome(patches, ["b", "c"]))
+    assert.end()
+})
+
+test("appending a single key doesn't cause removal of old keys", function (assert) {
+    var leftNode = h("div", [
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var rightNode = h("div", [
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c"),
+        h("div", { key: "a" }, "a")
+    ])
+
+    var patches = diff(leftNode, rightNode)
+    assert.notOk(reorderRemovesSome(patches, ["b", "c"]))
+    assert.end()
+})
+
+test("appending several keys doesn't cause removal of old keys", function (assert) {
+    var leftNode = h("div", [
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c")
+    ])
+
+    var rightNode = h("div", [
+        h("div", { key: "b" }, "b"),
+        h("div", { key: "c" }, "c"),
+        h("div", { key: "a" }, "a"),
+        h("div", { key: "d" }, "d"),
+    ])
+
+    var patches = diff(leftNode, rightNode)
+    assert.notOk(reorderRemovesSome(patches, ["b", "c"]))
+    assert.end()
+})
+
 test("adding multiple widgets", function (assert) {
     function FooWidget(foo) {
         this.foo = foo
@@ -791,9 +861,16 @@ function childNodesArray(node) {
 function getReorderPatch(patches) {
     for (var key in patches) {
         if (key !== "a" && patches.hasOwnProperty(key)) {
-            var patch = patches[key]
-            if (patch.type === VPatch.ORDER) {
-                return patch
+            var content = patches[key]
+            if (Array.isArray(content)) {
+                for (var i = 0; i < content.length; i++) {
+                    if (content[i].type === VPatch.ORDER) {
+                        return content[i]
+                    }
+                }
+            }
+            else if (content.type === VPatch.ORDER) {
+                return content
             }
         }
     }
@@ -806,3 +883,18 @@ function assertReorderEquals(assert, patches, expected) {
 
     assert.deepEqual(reorderPatch.patch, expected)
 }
+
+function reorderRemovesSome(patches, keys) {
+    var reorderPatch = getReorderPatch(patches)
+    if (reorderPatch && reorderPatch.patch && reorderPatch.patch.removes) {
+        var removes = reorderPatch.patch.removes
+        for (var i = 0; i < removes.length; i++) {
+            for (var j = 0; j < keys.length; j++) {
+                if (removes[i].key === keys[j]) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false
+}

vtree/diff.js

@@ -311,6 +311,38 @@ function reorder(aChildren, bChildren) {
     var inserts = []
     var simulateItem
 
+    // handle prepends without reordering old elements
+    var shift = bChildren.length - aChildren.length
+    if (shift > 0 && simulate.length === bChildren.length) {
+        var prepend = true
+        for (var i = 0; prepend && i < simulate.length; i++) {
+            prepend = simulate[i] && simulate[i].key
+        }
+        for (var i = 0; prepend && i < aChildren.length; i++) {
+            prepend = aChildren[i].key === bChildren[i + shift].key
+        }
+
+        if (prepend) {
+            for (var i = 0; i < shift; i++) {
+                removes.push({
+                    from: aChildren.length,
+                    key: bChildren[i].key
+                })
+                inserts.push({
+                    to: i,
+                    key: bChildren[i].key
+                })
+            }
+            return {
+                children: newChildren,
+                moves: {
+                    removes: removes,
+                    inserts: inserts
+                }
+            }
+        }
+    }
+
     for (var k = 0; k < bChildren.length;) {
         var wantedItem = bChildren[k]
         simulateItem = simulate[simulateIndex]