refactor(runtime-vapor): redo v-for updating

Author: johnsoncodehk

packages/runtime-vapor/__tests__/for.spec.ts

@@ -94,7 +94,7 @@ describe('createFor', () => {
           })
           return span
         },
-        item => item.name,
+        item => item,
       )
       return n1
     }).render()

packages/runtime-vapor/src/apiCreateFor.ts

@@ -11,7 +11,7 @@ import {
   toReactive,
   watch,
 } from '@vue/reactivity'
-import { getSequence, isArray, isObject, isString } from '@vue/shared'
+import { isArray, isObject, isString } from '@vue/shared'
 import { createComment, createTextNode } from './dom/node'
 import {
   type Block,
@@ -134,149 +134,90 @@ export const createFor = (
           unmount(oldBlocks[i])
         }
       } else {
-        let i = 0
-        let e1 = oldLength - 1 // prev ending index
-        let e2 = newLength - 1 // next ending index
-
-        // 1. sync from start
-        // (a b) c
-        // (a b) d e
-        while (i <= e1 && i <= e2) {
-          if (tryPatchIndex(source, i)) {
-            i++
-          } else {
-            break
+        const commonLength = Math.min(oldLength, newLength)
+        const oldKeyToIndexMap = new Map<any, number>()
+        const pendingNews: [
+          index: number,
+          item: ReturnType<typeof getItem>,
+          key: any,
+        ][] = []
+
+        let defaultAnchor: Node = parentAnchor
+        let right = 0
+        let left = 0
+
+        while (right < commonLength) {
+          const index = newLength - right - 1
+          const item = getItem(source, index)
+          const key = getKey.apply(null, item)
+          const block = oldBlocks[oldLength - right - 1]
+          if (block.key === key) {
+            update(block, ...item)
+            newBlocks[index] = block
+            right++
+            continue
+          }
+          if (right !== 0) {
+            defaultAnchor = normalizeAnchor(newBlocks[index + 1].nodes)
           }
+          break
         }
 
-        // 2. sync from end
-        // a (b c)
-        // d e (b c)
-        while (i <= e1 && i <= e2) {
-          if (tryPatchIndex(source, i)) {
-            e1--
-            e2--
+        while (left < commonLength - right) {
+          const item = getItem(source, left)
+          const key = getKey.apply(null, item)
+          const oldBlock = oldBlocks[left]
+          const oldKey = oldBlock.key
+          if (oldKey === key) {
+            update((newBlocks[left] = oldBlock), item[0])
           } else {
-            break
+            pendingNews.push([left, item, key])
+            oldKeyToIndexMap.set(oldKey, left)
           }
+          left++
         }
 
-        // 3. common sequence + mount
-        // (a b)
-        // (a b) c
-        // i = 2, e1 = 1, e2 = 2
-        // (a b)
-        // c (a b)
-        // i = 0, e1 = -1, e2 = 0
-        if (i > e1) {
-          if (i <= e2) {
-            const nextPos = e2 + 1
-            const anchor =
-              nextPos < newLength
-                ? normalizeAnchor(newBlocks[nextPos].nodes)
-                : parentAnchor
-            while (i <= e2) {
-              mount(source, i, anchor)
-              i++
-            }
-          }
+        for (let i = left; i < oldLength - right; i++) {
+          oldKeyToIndexMap.set(oldBlocks[i].key, i)
         }
 
-        // 4. common sequence + unmount
-        // (a b) c
-        // (a b)
-        // i = 2, e1 = 2, e2 = 1
-        // a (b c)
-        // (b c)
-        // i = 0, e1 = 0, e2 = -1
-        else if (i > e2) {
-          while (i <= e1) {
-            unmount(oldBlocks[i])
-            i++
+        const moveOrMount = (
+          index: number,
+          item: ReturnType<typeof getItem>,
+          key: any,
+          anchor: Node,
+        ) => {
+          const oldIndex = oldKeyToIndexMap.get(key)
+          if (oldIndex !== undefined) {
+            const block = (newBlocks[index] = oldBlocks[oldIndex])
+            update(block, ...item)
+            insert(block, parent!, anchor)
+            oldKeyToIndexMap.delete(key)
+          } else {
+            mount(source, index, item, key, anchor)
           }
         }
 
-        // 5. unknown sequence
-        // [i ... e1 + 1]: a b [c d e] f g
-        // [i ... e2 + 1]: a b [e d c h] f g
-        // i = 2, e1 = 4, e2 = 5
-        else {
-          const s1 = i // prev starting index
-          const s2 = i // next starting index
-
-          // 5.1 build key:index map for newChildren
-          const keyToNewIndexMap = new Map()
-          for (i = s2; i <= e2; i++) {
-            keyToNewIndexMap.set(getKey(...getItem(source, i)), i)
-          }
+        for (let i = pendingNews.length - 1; i >= 0; i--) {
+          const [index, item, key] = pendingNews[i]
+          moveOrMount(
+            index,
+            item,
+            key,
+            index < commonLength - 1
+              ? normalizeAnchor(newBlocks[index + 1].nodes)
+              : defaultAnchor,
+          )
+        }
 
-          // 5.2 loop through old children left to be patched and try to patch
-          // matching nodes & remove nodes that are no longer present
-          let j
-          let patched = 0
-          const toBePatched = e2 - s2 + 1
-          let moved = false
-          // used to track whether any node has moved
-          let maxNewIndexSoFar = 0
-          // works as Map<newIndex, oldIndex>
-          // Note that oldIndex is offset by +1
-          // and oldIndex = 0 is a special value indicating the new node has
-          // no corresponding old node.
-          // used for determining longest stable subsequence
-          const newIndexToOldIndexMap = new Array(toBePatched).fill(0)
-
-          for (i = s1; i <= e1; i++) {
-            const prevBlock = oldBlocks[i]
-            if (patched >= toBePatched) {
-              // all new children have been patched so this can only be a removal
-              unmount(prevBlock)
-            } else {
-              const newIndex = keyToNewIndexMap.get(prevBlock.key)
-              if (newIndex == null) {
-                unmount(prevBlock)
-              } else {
-                newIndexToOldIndexMap[newIndex - s2] = i + 1
-                if (newIndex >= maxNewIndexSoFar) {
-                  maxNewIndexSoFar = newIndex
-                } else {
-                  moved = true
-                }
-                update(
-                  (newBlocks[newIndex] = prevBlock),
-                  ...getItem(source, newIndex),
-                )
-                patched++
-              }
-            }
-          }
+        for (let i = left; i < newLength - right; i++) {
+          const item = getItem(source, i)
+          const key = getKey.apply(null, item)
+          moveOrMount(i, item, key, defaultAnchor)
+        }
 
-          // 5.3 move and mount
-          // generate longest stable subsequence only when nodes have moved
-          const increasingNewIndexSequence = moved
-            ? getSequence(newIndexToOldIndexMap)
-            : []
-          j = increasingNewIndexSequence.length - 1
-          // looping backwards so that we can use last patched node as anchor
-          for (i = toBePatched - 1; i >= 0; i--) {
-            const nextIndex = s2 + i
-            const anchor =
-              nextIndex + 1 < newLength
-                ? normalizeAnchor(newBlocks[nextIndex + 1].nodes)
-                : parentAnchor
-            if (newIndexToOldIndexMap[i] === 0) {
-              // mount new
-              mount(source, nextIndex, anchor)
-            } else if (moved) {
-              // move if:
-              // There is no stable subsequence (e.g. a reverse)
-              // OR current node is not among the stable sequence
-              if (j < 0 || i !== increasingNewIndexSequence[j]) {
-                insert(newBlocks[nextIndex].nodes, parent!, anchor)
-              } else {
-                j--
-              }
-            }
-          }
+        for (const i of oldKeyToIndexMap.values()) {
+          unmount(oldBlocks[i])
         }
       }
     }
@@ -295,9 +236,10 @@ export const createFor = (
   const mount = (
     source: ResolvedSource,
     idx: number,
+    [item, key, index] = getItem(source, idx),
+    key2 = getKey && getKey(item, key, index),
     anchor: Node | undefined = parentAnchor,
   ): ForBlock => {
-    const [item, key, index] = getItem(source, idx)
     const itemRef = shallowRef(item)
     // avoid creating refs if the render fn doesn't need it
     const keyRef = needKey ? shallowRef(key) : undefined
@@ -321,23 +263,14 @@ export const createFor = (
       itemRef,
       keyRef,
       indexRef,
-      getKey && getKey(item, key, index),
+      key2,
     ))
 
     if (parent) insert(block.nodes, parent, anchor)
 
     return block
   }
 
-  const tryPatchIndex = (source: any, idx: number) => {
-    const block = oldBlocks[idx]
-    const [item, key, index] = getItem(source, idx)
-    if (block.key === getKey!(item, key, index)) {
-      update((newBlocks[idx] = block), item)
-      return true
-    }
-  }
-
   const update = (
     { itemRef, keyRef, indexRef }: ForBlock,
     newItem: any,