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