fix(runtime-core): hydrate Static vnode (#6015)

fix #6008

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index c3976a8f07688614c7941280b61919208e83e6af..17ffbb40092bb82c21b0beafc1fda116c65ab978 100644 (file)
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -97,6 +97,28 @@ describe('SSR hydration', () => {
     expect(s.children).toBe(staticContent)
   })
 
+  // #6008
+  test('static (with text node as starting node)', () => {
+    const html = ` A <span>foo</span> B`
+    const { vnode, container } = mountWithHydration(html, () =>
+      createStaticVNode(` A <span>foo</span> B`, 3)
+    )
+    expect(vnode.el).toBe(container.firstChild)
+    expect(vnode.anchor).toBe(container.lastChild)
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('static with content adoption', () => {
+    const html = ` A <span>foo</span> B`
+    const { vnode, container } = mountWithHydration(html, () =>
+      createStaticVNode(``, 3)
+    )
+    expect(vnode.el).toBe(container.firstChild)
+    expect(vnode.anchor).toBe(container.lastChild)
+    expect(vnode.children).toBe(html)
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+  })
+
   test('element with text children', async () => {
     const msg = ref('foo')
     const { vnode, container } = mountWithHydration(

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 3637a09b2aaa6c54911a10bc294d58b9cbeb9f06..8ada97b166be8166c69139b5dc22725a15975db2 100644 (file)
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -150,7 +150,7 @@ export function createHydrationFunctions(
         }
         break
       case Static:
-        if (domType !== DOMNodeTypes.ELEMENT) {
+        if (domType !== DOMNodeTypes.ELEMENT && domType !== DOMNodeTypes.TEXT) {
           nextNode = onMismatch()
         } else {
           // determine anchor, adopt content
@@ -160,7 +160,10 @@ export function createHydrationFunctions(
           const needToAdoptContent = !(vnode.children as string).length
           for (let i = 0; i < vnode.staticCount!; i++) {
             if (needToAdoptContent)
-              vnode.children += (nextNode as Element).outerHTML
+              vnode.children +=
+                nextNode.nodeType === DOMNodeTypes.ELEMENT
+                  ? (nextNode as Element).outerHTML
+                  : (nextNode as Text).data
             if (i === vnode.staticCount! - 1) {
               vnode.anchor = nextNode
             }