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

fix #6008
This commit is contained in:
liulinboyi 2022-05-26 21:03:08 +08:00 committed by Evan You
parent eb22a62798
commit 11e17a1a29
2 changed files with 27 additions and 2 deletions

View File

@ -97,6 +97,28 @@ describe('SSR hydration', () => {
expect(s.children).toBe(staticContent) 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 () => { test('element with text children', async () => {
const msg = ref('foo') const msg = ref('foo')
const { vnode, container } = mountWithHydration( const { vnode, container } = mountWithHydration(

View File

@ -150,7 +150,7 @@ export function createHydrationFunctions(
} }
break break
case Static: case Static:
if (domType !== DOMNodeTypes.ELEMENT) { if (domType !== DOMNodeTypes.ELEMENT && domType !== DOMNodeTypes.TEXT) {
nextNode = onMismatch() nextNode = onMismatch()
} else { } else {
// determine anchor, adopt content // determine anchor, adopt content
@ -160,7 +160,10 @@ export function createHydrationFunctions(
const needToAdoptContent = !(vnode.children as string).length const needToAdoptContent = !(vnode.children as string).length
for (let i = 0; i < vnode.staticCount!; i++) { for (let i = 0; i < vnode.staticCount!; i++) {
if (needToAdoptContent) 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) { if (i === vnode.staticCount! - 1) {
vnode.anchor = nextNode vnode.anchor = nextNode
} }