theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ssr): hide comment anchors during hydration in dev mode

Browse Source
This commit is contained in:
Evan You 2020-03-13 11:35:17 -04:00
parent a3cc970030
commit cad5bcce40
1 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/runtime-core/src/hydration.ts
View File

@ -76,9 +76,15 @@ export function createHydrationFunctions(
parentSuspense: SuspenseBoundary | null,
optimized = false
): Node | null => {
const isFragmentStart = isComment(node) && node.data === '1'
if (__DEV__ && isFragmentStart) {
// in dev mode, replace comment anchors with invisible text nodes
// for easier debugging
node = replaceAnchor(node, parentNode(node)!)
}
const { type, shapeFlag } = vnode
const domType = node.nodeType
vnode.el = node
switch (type) {
@ -108,7 +114,7 @@ export function createHydrationFunctions(
}
return nextSibling(node)
case Fragment:
if (domType !== DOMNodeTypes.COMMENT) {
if (domType !== (__DEV__ ? DOMNodeTypes.TEXT : DOMNodeTypes.COMMENT)) {
return handleMismtach(node, vnode, parentComponent, parentSuspense)
}
return hydrateFragment(
@ -152,7 +158,7 @@ export function createHydrationFunctions(
} else {
// no subTree means this is an async component
// try to locate the ending node
return isComment(node) && node.data === '1'
return isFragmentStart
? locateClosingAsyncAnchor(node)
: nextSibling(node)
}
@ -319,16 +325,19 @@ export function createHydrationFunctions(
parentSuspense: SuspenseBoundary | null,
optimized: boolean
) => {
return nextSibling(
(vnode.anchor = hydrateChildren(
nextSibling(node)!,
vnode,
parentNode(node)!,
parentComponent,
parentSuspense,
optimized
)!)
)
const container = parentNode(node)!
let next = hydrateChildren(
nextSibling(node)!,
vnode,
container,
parentComponent,
parentSuspense,
optimized
)!
if (__DEV__) {
next = replaceAnchor(next, container)
}
return nextSibling((vnode.anchor = next))
}
const hydratePortal = (
@ -377,7 +386,6 @@ export function createHydrationFunctions(
const next = nextSibling(node)
const container = parentNode(node)!
container.removeChild(node)
// TODO Suspense
patch(
null,
vnode,
@ -408,5 +416,12 @@ export function createHydrationFunctions(
return node
}
const replaceAnchor = (node: Node, parent: Element): Node => {
const text = document.createTextNode('')
parent.insertBefore(text, node)
parent.removeChild(node)
return text
}
return [hydrate, hydrateNode] as const
}