Detect opportunity to insert new vnode earlier for more efficient DOM manipulation

src/init.ts

@@ -1,5 +1,5 @@
 import { Module } from "./modules/module";
-import { vnode, VNode } from "./vnode";
+import { Key, vnode, VNode } from "./vnode";
 import * as is from "./is";
 import { htmlDomApi, DOMAPI } from "./htmldomapi";
 
@@ -49,7 +49,7 @@ function isDocumentFragment(
   return api.isDocumentFragment!(vnode as any);
 }
 
-type KeyToIndexMap = { [key: string]: number };
+type KeyToIndexMap = { [key: Key]: number };
 
 type ArraysOf<T> = {
   [K in keyof T]: Array<T[K]>;
@@ -66,7 +66,7 @@ function createKeyToOldIdx(
   for (let i = beginIdx; i <= endIdx; ++i) {
     const key = children[i]?.key;
     if (key !== undefined) {
-      map[key as string] = i;
+      map[key] = i;
     }
   }
   return map;
@@ -352,15 +352,26 @@ export function init(
         if (oldKeyToIdx === undefined) {
           oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
         }
-        idxInOld = oldKeyToIdx[newStartVnode.key as string];
+        idxInOld = oldKeyToIdx[newStartVnode.key!];
         if (isUndef(idxInOld)) {
-          // New element
+          // `newStartVnode` is new, create and insert it in beginning
           api.insertBefore(
             parentElm,
             createElm(newStartVnode, insertedVnodeQueue),
             oldStartVnode.elm!
           );
+          newStartVnode = newCh[++newStartIdx];
+        } else if (isUndef(oldKeyToIdx[newEndVnode.key!])) {
+          // `newEndVnode` is new, create and insert it in the end
+          api.insertBefore(
+            parentElm,
+            createElm(newEndVnode, insertedVnodeQueue),
+            api.nextSibling(oldEndVnode.elm!)
+          );
+          newEndVnode = newCh[--newEndIdx];
         } else {
+          // Neither of the new endpoints are new vnodes, so we make progress by
+          // moving `newStartVnode` into position
           elmToMove = oldCh[idxInOld];
           if (elmToMove.sel !== newStartVnode.sel) {
             api.insertBefore(
@@ -373,8 +384,8 @@ export function init(
             oldCh[idxInOld] = undefined as any;
             api.insertBefore(parentElm, elmToMove.elm!, oldStartVnode.elm!);
           }
+          newStartVnode = newCh[++newStartIdx];
         }
-        newStartVnode = newCh[++newStartIdx];
       }
     }
 

test/unit/core.ts

@@ -19,7 +19,8 @@ import {
   DestroyHook,
   UpdateHook,
   Key,
-  fragment
+  fragment,
+  DOMAPI
 } from "../../src/index";
 
 const hasSvgClassList = "classList" in SVGElement.prototype;
@@ -837,6 +838,44 @@ describe("snabbdom", function () {
           assert.equal(elm.children[1].innerHTML, "symbol");
           assert.equal(elm.children[2].innerHTML, "symbol");
         });
+        it("simultaneous addition in beginning and removal in end", function () {
+          let insertCount = 0;
+          const domApi: DOMAPI = {
+            ...htmlDomApi,
+            insertBefore: (a, b, c) => {
+              insertCount++;
+              htmlDomApi.insertBefore(a, b, c);
+            }
+          };
+          const patch = init([], domApi);
+          const vnode1 = h("span", [2, 3, 4, 5].map(spanNum));
+          const vnode2 = h("span", [1, 2, 3, 4].map(spanNum));
+          elm = patch(vnode0, vnode1).elm;
+          assert.deepEqual(map(inner, elm.children), ["2", "3", "4", "5"]);
+          elm = patch(vnode1, vnode2).elm;
+          assert.deepEqual(map(inner, elm.children), ["1", "2", "3", "4"]);
+          assert.strictEqual(insertCount, 1);
+        });
+        it("simultaneous removal in beginning and addition in end", function () {
+          let insertCount = 0;
+          const domApi: DOMAPI = {
+            ...htmlDomApi,
+            insertBefore: (a, b, c) => {
+              insertCount++;
+              htmlDomApi.insertBefore(a, b, c);
+            }
+          };
+          const patch = init([], domApi);
+          const vnode1 = h("span", [1, 2, 3, 4].map(spanNum));
+          const vnode2 = h("span", [2, 3, 4, 5].map(spanNum));
+          elm = patch(vnode0, vnode1).elm;
+          assert.equal(elm.children.length, 4);
+          assert.deepEqual(map(inner, elm.children), ["1", "2", "3", "4"]);
+          elm = patch(vnode1, vnode2).elm;
+          assert.equal(elm.children.length, 4);
+          assert.deepEqual(map(inner, elm.children), ["2", "3", "4", "5"]);
+          assert.strictEqual(insertCount, 1);
+        });
       });
       it("reverses elements", function () {
         const vnode1 = h("span", [1, 2, 3, 4, 5, 6, 7, 8].map(spanNum));