From 11e17a1a29cf3d0b37628241d63ff3e8d8525f95 Mon Sep 17 00:00:00 2001
From: liulinboyi <814921718@qq.com>
Date: Thu, 26 May 2022 21:03:08 +0800
Subject: [PATCH] fix(runtime-core): hydrate Static vnode (#6015)

fix #6008
---
 .../runtime-core/__tests__/hydration.spec.ts  | 22 +++++++++++++++++++
 packages/runtime-core/src/hydration.ts        |  7 ++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index c3976a8f0..17ffbb400 100644
--- 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 3637a09b2..8ada97b16 100644
--- 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
             }