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

wip: handle move and unmount for suspense

Browse Source
This commit is contained in:
Evan You 2019-09-09 16:44:25 -04:00
parent d5e9682040
commit e688e69b1f
2 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/runtime-core/src/createRenderer.ts
View File

@ -617,8 +617,8 @@ export function createRenderer<
suspense.onRetry(() => { suspense.onRetry(() => {
processFragment( processFragment(
suspense.oldContentTree, suspense.oldSubTree,
suspense.contentTree as HostVNode, suspense.subTree as HostVNode,
contentContainer, contentContainer,
null, null,
parentComponent, parentComponent,
@ -635,10 +635,10 @@ export function createRenderer<
suspense.onResolve(() => { suspense.onResolve(() => {
// move content from off-dom container to actual container // move content from off-dom container to actual container
;(suspense.contentTree as any).children.forEach((vnode: HostVNode) => { ;(suspense.subTree as any).children.forEach((vnode: HostVNode) => {
move(vnode, container, anchor) move(vnode, container, anchor)
}) })
suspense.vnode.el = (suspense.contentTree as HostVNode).el suspense.vnode.el = (suspense.subTree as HostVNode).el
// check if there is a pending parent suspense // check if there is a pending parent suspense
let parent = suspense.parent let parent = suspense.parent
let hasUnresolvedAncestor = false let hasUnresolvedAncestor = false
@ -667,12 +667,12 @@ export function createRenderer<
// start mounting the subtree off-dom // start mounting the subtree off-dom
// TODO should buffer postQueue jobs on current boundary // TODO should buffer postQueue jobs on current boundary
const contentTree = (suspense.contentTree = suspense.oldContentTree = childrenToFragment( const subTree = (suspense.subTree = suspense.oldSubTree = childrenToFragment(
n2 n2
)) ))
processFragment( processFragment(
null, null,
contentTree as HostVNode, subTree as HostVNode,
contentContainer, contentContainer,
null, null,
parentComponent, parentComponent,
@ -692,14 +692,14 @@ export function createRenderer<
HostElement HostElement
> >
suspense.vnode = n2 suspense.vnode = n2
const oldContentTree = (suspense.oldContentTree = suspense.contentTree) const oldSubTree = (suspense.oldSubTree = suspense.subTree)
const newContentTree = (suspense.contentTree = childrenToFragment(n2)) const newContentTree = (suspense.subTree = childrenToFragment(n2))
if (!suspense.isResolved) { if (!suspense.isResolved) {
suspense.retry() suspense.retry()
} else { } else {
// just normal patch inner content as a fragment // just normal patch inner content as a fragment
processFragment( processFragment(
oldContentTree, oldSubTree,
newContentTree, newContentTree,
container, container,
null, null,
@ -1259,6 +1259,10 @@ export function createRenderer<
move(vnode.component.subTree, container, anchor) move(vnode.component.subTree, container, anchor)
return return
} }
if (__FEATURE_SUSPENSE__ && vnode.type === Suspense) {
move((vnode.suspense as any).subTree, container, anchor)
return
}
if (vnode.type === Fragment) { if (vnode.type === Fragment) {
hostInsert(vnode.el as HostNode, container, anchor) hostInsert(vnode.el as HostNode, container, anchor)
const children = vnode.children as HostVNode[] const children = vnode.children as HostVNode[]
@ -1281,6 +1285,7 @@ export function createRenderer<
ref, ref,
type, type,
component, component,
suspense,
children, children,
dynamicChildren, dynamicChildren,
shapeFlag, shapeFlag,
@ -1297,6 +1302,11 @@ export function createRenderer<
return return
} }
if (__FEATURE_SUSPENSE__ && suspense != null) {
unmount(suspense.subTree as HostVNode, parentComponent, doRemove)
return
}
if (props != null && props.vnodeBeforeUnmount != null) { if (props != null && props.vnodeBeforeUnmount != null) {
invokeDirectiveHook(props.vnodeBeforeUnmount, parentComponent, vnode) invokeDirectiveHook(props.vnodeBeforeUnmount, parentComponent, vnode)
} }

8
packages/runtime-core/src/suspense.ts
View File

@ -9,8 +9,8 @@ export interface SuspenseBoundary<
> { > {
vnode: HostVNode vnode: HostVNode
parent: SuspenseBoundary<HostNode, HostElement> | null parent: SuspenseBoundary<HostNode, HostElement> | null
contentTree: HostVNode | null subTree: HostVNode | null
oldContentTree: HostVNode | null oldSubTree: HostVNode | null
fallbackTree: HostVNode | null fallbackTree: HostVNode | null
oldFallbackTree: HostVNode | null oldFallbackTree: HostVNode | null
deps: number deps: number
@ -32,8 +32,8 @@ export function createSuspenseBoundary<HostNode, HostElement>(
vnode, vnode,
parent, parent,
deps: 0, deps: 0,
contentTree: null, subTree: null,
oldContentTree: null, oldSubTree: null,
fallbackTree: null, fallbackTree: null,
oldFallbackTree: null, oldFallbackTree: null,
isResolved: false, isResolved: false,