瀏覽代碼

fix(runtime-vapor): restore outer hydration cursor after prepended multi-root child

daiwei 2 月之前
父節點
當前提交
8ff013662e
共有 2 個文件被更改,包括 36 次插入1 次删除
  1. 35 0
      packages/runtime-vapor/__tests__/hydration.spec.ts
  2. 1 1
      packages/runtime-vapor/src/component.ts

+ 35 - 0
packages/runtime-vapor/__tests__/hydration.spec.ts

@@ -10362,4 +10362,39 @@ describe('VDOM interop', () => {
       '<!--[--><svg><path></path></svg><span>Vapor</span><!--]-->',
     )
   })
+
+  test('hydrate prepended multi-root component with trailing empty if should restore outer cursor', async () => {
+    const { container } = await testWithVaporApp(
+      `<script setup>
+        const components = _components
+      </script>
+      <template>
+        <div>
+          <components.Child />
+          <span>inside</span>
+        </div>
+        <p>after</p>
+      </template>`,
+      {
+        Child: {
+          code: `<template>
+            <span>child</span>
+            <template v-if="false"></template>
+          </template>`,
+          vapor: true,
+        },
+      },
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><div>
+      <!--[--><span>child</span><!----><!--]-->
+      <span>inside</span></div><p>after</p><!--]-->
+      "
+      `,
+    )
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+  })
 })

+ 1 - 1
packages/runtime-vapor/src/component.ts

@@ -417,7 +417,7 @@ export function createComponent(
       mountComponent(instance, _insertionParent!, _insertionAnchor)
     }
 
-    if (isHydrating && _insertionAnchor !== undefined) {
+    if (isHydrating && _isLastInsertion) {
       advanceHydrationNode(_insertionParent!)
     }