wip: save

Author: edison1105

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

@@ -940,7 +940,7 @@ describe('createFor', () => {
       )
     })
 
-    test.todo('remove from beginning and insert at end', async () => {
+    test('remove from beginning and insert at end', async () => {
       const arr = ref<number[]>([1, 2, 3])
       const { host, html } = render(arr)
       expect(host.children.length).toBe(3)
@@ -1028,7 +1028,7 @@ describe('createFor', () => {
       )
     })
 
-    test.todo('move to left & replace', async () => {
+    test('move to left & replace', async () => {
       const arr = ref<number[]>([1, 2, 3, 4, 5])
       const { host, html } = render(arr)
       expect(host.children.length).toBe(5)
@@ -1044,7 +1044,7 @@ describe('createFor', () => {
       )
     })
 
-    test.todo('move to left and leaves hold', async () => {
+    test('move to left and leaves hold', async () => {
       const arr = ref<number[]>([1, 4, 5])
       const { host, html } = render(arr)
       expect(host.children.length).toBe(3)
@@ -1058,24 +1058,21 @@ describe('createFor', () => {
       expect(html()).toBe(`<span>4</span><span>6</span><!--for-->`)
     })
 
-    test.todo(
-      'moved and set to undefined element ending at the end',
-      async () => {
-        const arr = ref<number[]>([2, 4, 5])
-        const { host, html } = render(arr)
-        expect(host.children.length).toBe(3)
-        expect(html()).toBe(
-          `<span>2</span><span>4</span><span>5</span><!--for-->`,
-        )
+    test('moved and set to undefined element ending at the end', async () => {
+      const arr = ref<number[]>([2, 4, 5])
+      const { host, html } = render(arr)
+      expect(host.children.length).toBe(3)
+      expect(html()).toBe(
+        `<span>2</span><span>4</span><span>5</span><!--for-->`,
+      )
 
-        arr.value = [4, 5, 3]
-        await nextTick()
-        expect(host.children.length).toBe(3)
-        expect(html()).toBe(
-          `<span>4</span><span>5</span><span>3</span><!--for-->`,
-        )
-      },
-    )
+      arr.value = [4, 5, 3]
+      await nextTick()
+      expect(host.children.length).toBe(3)
+      expect(html()).toBe(
+        `<span>4</span><span>5</span><span>3</span><!--for-->`,
+      )
+    })
 
     test('reverse element', async () => {
       const arr = ref<number[]>([1, 2, 3, 4, 5, 6, 7, 8])
@@ -1323,7 +1320,7 @@ describe('createFor', () => {
       }).render()
     }
 
-    test.todo('move a key in non-keyed nodes with a size up', async () => {
+    test('move a key in non-keyed nodes with a size up', async () => {
       const arr = ref<any[]>([1, 'a', 'b', 'c'])
       const { host, html } = define({
         setup() {

packages/runtime-vapor/src/apiCreateFor.ts

@@ -254,12 +254,19 @@ export const createFor = (
           previousKeyIndexPairs.length = previousKeyIndexInsertIndex
 
           const previousKeyIndexMap = new Map(previousKeyIndexPairs)
-          const blocksToMount: [
-            blockIndex: number,
-            blockItem: ReturnType<typeof getItem>,
-            blockKey: any,
-            anchorOffset: number,
-          ][] = []
+          const actions: (
+            | [
+                type: 'mount',
+                source: ResolvedSource,
+                index: number,
+                item: ReturnType<typeof getItem>,
+                key: any,
+                anchorOffset: number,
+              ]
+            | [type: 'insert', block: ForBlock, anchorOffset: number]
+          )[] = []
+
+          let mountCounter = 0
 
           const relocateOrMountBlock = (
             blockIndex: number,
@@ -272,16 +279,13 @@ export const createFor = (
               const reusedBlock = (newBlocks[blockIndex] =
                 oldBlocks[previousIndex])
               update(reusedBlock, ...blockItem)
-              insert(
-                reusedBlock,
-                parent!,
-                anchorOffset === -1
-                  ? anchorFallback
-                  : normalizeAnchor(newBlocks[anchorOffset].nodes),
-              )
+              actions.push(['insert', reusedBlock, anchorOffset])
               previousKeyIndexMap.delete(blockKey)
             } else {
-              blocksToMount.push([
+              mountCounter++
+              actions.push([
+                'mount',
+                source,
                 blockIndex,
                 blockItem,
                 blockKey,
@@ -306,7 +310,7 @@ export const createFor = (
             relocateOrMountBlock(i, blockItem, blockKey, -1)
           }
 
-          const useFastRemove = blocksToMount.length === newLength
+          const useFastRemove = mountCounter === newLength
 
           for (const leftoverIndex of previousKeyIndexMap.values()) {
             unmount(
@@ -325,21 +329,26 @@ export const createFor = (
             }
           }
 
-          for (const [
-            blockIndex,
-            blockItem,
-            blockKey,
-            anchorOffset,
-          ] of blocksToMount) {
-            mount(
-              source,
-              blockIndex,
-              anchorOffset === -1
-                ? anchorFallback
-                : normalizeAnchor(newBlocks[anchorOffset].nodes),
-              blockItem,
-              blockKey,
-            )
+          for (const action of actions) {
+            if (action[0] === 'mount') {
+              mount(
+                action[1],
+                action[2],
+                action[5] === -1
+                  ? anchorFallback
+                  : normalizeAnchor(newBlocks[action[5]].nodes),
+                action[3],
+                action[4],
+              )
+            } else {
+              insert(
+                action[1],
+                parent!,
+                action[2] === -1
+                  ? anchorFallback
+                  : normalizeAnchor(newBlocks[action[2]].nodes),
+              )
+            }
           }
         }
       }