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,9 +1058,7 @@ describe('createFor', () => {
       expect(html()).toBe(`<span>4</span><span>6</span><!--for-->`)
     })
 
-    test.todo(
+    test('moved and set to undefined element ending at the end', async () => {
-      '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)
@@ -1074,8 +1072,7 @@ describe('createFor', () => {
       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,6 +254,7 @@ export const createFor = (
           previousKeyIndexPairs.length = previousKeyIndexInsertIndex
 
           const previousKeyIndexMap = new Map(previousKeyIndexPairs)
+          const blocksToMove: (() => void)[] = []
           const blocksToMount: [
             blockIndex: number,
             blockItem: ReturnType<typeof getItem>,
@@ -272,6 +273,7 @@ export const createFor = (
               const reusedBlock = (newBlocks[blockIndex] =
                 oldBlocks[previousIndex])
               update(reusedBlock, ...blockItem)
+              blocksToMove.push(() => {
                 insert(
                   reusedBlock,
                   parent!,
@@ -279,6 +281,7 @@ export const createFor = (
                     ? anchorFallback
                     : normalizeAnchor(newBlocks[anchorOffset].nodes),
                 )
+              })
               previousKeyIndexMap.delete(blockKey)
             } else {
               blocksToMount.push([
@@ -341,6 +344,16 @@ export const createFor = (
               blockKey,
             )
           }
+
+          if (blocksToMove.length > 0) {
+            // update anchorFallback to the last block if any new mounted blocks used it
+            if (blocksToMount.some(move => move[3] === -1)) {
+              anchorFallback = normalizeAnchor(
+                newBlocks[newBlocks.length - 1].nodes,
+              )
+            }
+            blocksToMove.forEach(move => move())
+          }
         }
       }
     }