fix: handling v-for on component with non-hydration node

Author: edison1105

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

@@ -1766,8 +1766,8 @@ describe('Vapor Mode hydration', () => {
         <!--[-->
         <!--[--><span>a</span><!--]-->
         <!--[--><span>b</span><!--]-->
-        <!--[--><span>c</span><!--for--><!--]-->
-        </div>"
+        <!--[--><span>c</span><!--]-->
+        <!--for--></div>"
       `,
       )
 
@@ -1779,8 +1779,8 @@ describe('Vapor Mode hydration', () => {
         <!--[-->
         <!--[--><span>a</span><!--]-->
         <!--[--><span>b</span><!--]-->
-        <!--[--><span>c</span><span>d</span><!--slot--><!--for--><!--]-->
-        </div>"
+        <!--[--><span>c</span><!--]-->
+        <span>d</span><!--slot--><!--for--></div>"
       `,
       )
     })
@@ -1821,6 +1821,57 @@ describe('Vapor Mode hydration', () => {
       `,
       )
     })
+
+    test('on component with non-hydration node', async () => {
+      const data = ref({ show: true, msg: 'foo' })
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <components.Child v-for="item in 2" :key="item"/>
+          </div>
+        </template>`,
+        {
+          Child: `<template>
+            <div>
+              <div>
+                <div v-if="data.show">{{ data.msg }}</div>
+              </div>
+              <span>non-hydration node</span>
+            </div>
+          </template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `,
+      )
+
+      data.value.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `,
+      )
+
+      data.value.show = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "<div>
+        <!--[--><div><div><!--if--></div><span>non-hydration node</span></div><div><div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `)
+
+      data.value.show = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "<div>
+        <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `)
+    })
   })
 
   describe('slots', () => {

packages/runtime-vapor/src/apiCreateFor.ts

@@ -16,6 +16,7 @@ import { createComment, createTextNode } from './dom/node'
 import {
   type Block,
   VaporFragment,
+  findLastChild,
   insert,
   remove as removeBlock,
 } from './block'
@@ -29,6 +30,7 @@ import {
   isHydrating,
   locateFragmentEndAnchor,
   locateHydrationNode,
+  setCurrentHydrationNode,
 } from './dom/hydration'
 import {
   insertionAnchor,
@@ -126,10 +128,20 @@ export const createFor = (
     if (!isMounted) {
       isMounted = true
       for (let i = 0; i < newLength; i++) {
+        if (isHydrating && isComponent && i > 0) {
+          setCurrentHydrationNode(
+            findLastChild(newBlocks[i - 1].nodes)!.nextSibling,
+          )
+        }
         mount(source, i)
       }
 
       if (isHydrating) {
+        if (isComponent) {
+          setCurrentHydrationNode(
+            findLastChild(newBlocks[newLength - 1].nodes)!.nextSibling,
+          )
+        }
         parentAnchor = locateFragmentEndAnchor()!
         if (__DEV__) {
           if (!parentAnchor) {