Skip to content

Commit

Permalink
fix(ssr): fix hydration mismatch when entire multi-root template is s…
Browse files Browse the repository at this point in the history
…tringified

fix #6637
  • Loading branch information
yyx990803 committed Sep 28, 2022
1 parent 0382019 commit 9698dd3
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 5 deletions.
8 changes: 8 additions & 0 deletions packages/runtime-core/__tests__/hydration.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -982,6 +982,14 @@ describe('SSR hydration', () => {
expect((container as any)._vnode).toBe(null)
})

// #6637
test('stringified root fragment', () => {
mountWithHydration(`<!--[--><div></div><!--]-->`, () =>
createStaticVNode(`<div></div>`, 1)
)
expect(`mismatch`).not.toHaveBeenWarned()
})

describe('mismatch handling', () => {
test('text node', () => {
const { container } = mountWithHydration(`foo`, () => 'bar')
Expand Down
15 changes: 10 additions & 5 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function createHydrationFunctions(
)

const { type, ref, shapeFlag, patchFlag } = vnode
const domType = node.nodeType
let domType = node.nodeType
vnode.el = node

if (patchFlag === PatchFlags.BAIL) {
Expand Down Expand Up @@ -150,9 +150,12 @@ export function createHydrationFunctions(
}
break
case Static:
if (domType !== DOMNodeTypes.ELEMENT && domType !== DOMNodeTypes.TEXT) {
nextNode = onMismatch()
} else {
if (isFragmentStart) {
// entire template is static but SSRed as a fragment
node = nextSibling(node)!
domType = node.nodeType
}
if (domType === DOMNodeTypes.ELEMENT || domType === DOMNodeTypes.TEXT) {
// determine anchor, adopt content
nextNode = node
// if the static vnode has its content stripped during build,
Expand All @@ -169,7 +172,9 @@ export function createHydrationFunctions(
}
nextNode = nextSibling(nextNode)!
}
return nextNode
return isFragmentStart ? nextSibling(nextNode) : nextNode
} else {
onMismatch()
}
break
case Fragment:
Expand Down

0 comments on commit 9698dd3

Please sign in to comment.