wip: save

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,8 @@ export const createFor = (
           previousKeyIndexPairs.length = previousKeyIndexInsertIndex
 
           const previousKeyIndexMap = new Map(previousKeyIndexPairs)
-          const blocksToMount: [
-            blockIndex: number,
-            blockItem: ReturnType<typeof getItem>,
-            blockKey: any,
-            anchorOffset: number,
-          ][] = []
+
+          let mountCounter = 0
 
           const relocateOrMountBlock = (
             blockIndex: number,
@@ -272,21 +268,27 @@ export const createFor = (
               const reusedBlock = (newBlocks[blockIndex] =
                 oldBlocks[previousIndex])
               update(reusedBlock, ...blockItem)
-              insert(
-                reusedBlock,
-                parent!,
+              if (previousIndex !== blockIndex) {
+                insert(
+                  reusedBlock,
+                  parent!,
+                  anchorOffset === -1
+                    ? anchorFallback
+                    : normalizeAnchor(newBlocks[anchorOffset].nodes),
+                )
+              }
+              previousKeyIndexMap.delete(blockKey)
+            } else {
+              mountCounter++
+              mount(
+                source,
+                blockIndex,
                 anchorOffset === -1
                   ? anchorFallback
                   : normalizeAnchor(newBlocks[anchorOffset].nodes),
-              )
-              previousKeyIndexMap.delete(blockKey)
-            } else {
-              blocksToMount.push([
-                blockIndex,
                 blockItem,
                 blockKey,
-                anchorOffset,
-              ])
+              )
             }
           }
 
@@ -306,7 +308,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(
@@ -324,23 +326,6 @@ export const createFor = (
               parent!.appendChild(parentAnchor)
             }
           }
-
-          for (const [
-            blockIndex,
-            blockItem,
-            blockKey,
-            anchorOffset,
-          ] of blocksToMount) {
-            mount(
-              source,
-              blockIndex,
-              anchorOffset === -1
-                ? anchorFallback
-                : normalizeAnchor(newBlocks[anchorOffset].nodes),
-              blockItem,
-              blockKey,
-            )
-          }
         }
       }
     }