See https://github.com/vuejs/vue-next/pull/2099 for details.
const app = createApp({
render: () =>
h(Suspense, null, {
- default: () => [h(Foo), ' & ', h(Foo)],
+ default: () => h('div', [h(Foo), ' & ', h(Foo)]),
fallback: () => 'loading'
})
})
resolve!(() => 'resolved')
await timeout()
- expect(serializeInner(root)).toBe('resolved & resolved')
+ expect(serializeInner(root)).toBe('<div>resolved & resolved</div>')
})
test('suspensible: false', async () => {
const app = createApp({
render: () =>
h(Suspense, null, {
- default: () => [h(Foo), ' & ', h(Foo)],
+ default: () => h('div', [h(Foo), ' & ', h(Foo)]),
fallback: () => 'loading'
})
})
app.mount(root)
// should not show suspense fallback
- expect(serializeInner(root)).toBe('<!----> & <!---->')
+ expect(serializeInner(root)).toBe('<div><!----> & <!----></div>')
resolve!(() => 'resolved')
await timeout()
- expect(serializeInner(root)).toBe('resolved & resolved')
+ expect(serializeInner(root)).toBe('<div>resolved & resolved</div>')
})
test('suspense with error handling', async () => {
const app = createApp({
render: () =>
h(Suspense, null, {
- default: () => [h(Foo), ' & ', h(Foo)],
+ default: () => h('div', [h(Foo), ' & ', h(Foo)]),
fallback: () => 'loading'
})
})
reject!(new Error('no'))
await timeout()
expect(handler).toHaveBeenCalled()
- expect(serializeInner(root)).toBe('<!----> & <!---->')
+ expect(serializeInner(root)).toBe('<div><!----> & <!----></div>')
})
test('retry (success)', async () => {
watch,
watchEffect,
onUnmounted,
- onErrorCaptured
+ onErrorCaptured,
+ shallowRef
} from '@vue/runtime-test'
describe('Suspense', () => {
setup() {
return () =>
h(Suspense, null, {
- default: [h(AsyncOuter), h(Inner)],
+ default: h('div', [h(AsyncOuter), h(Inner)]),
fallback: h('div', 'fallback outer')
})
}
await deps[0]
await nextTick()
expect(serializeInner(root)).toBe(
- `<div>async outer</div><div>fallback inner</div>`
+ `<div><div>async outer</div><div>fallback inner</div></div>`
)
expect(calls).toEqual([`outer mounted`])
await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe(
- `<div>async outer</div><div>async inner</div>`
+ `<div><div>async outer</div><div>async inner</div></div>`
)
expect(calls).toEqual([`outer mounted`, `inner mounted`])
})
setup() {
return () =>
h(Suspense, null, {
- default: [h(AsyncOuter), h(Inner)],
+ default: h('div', [h(AsyncOuter), h(Inner)]),
fallback: h('div', 'fallback outer')
})
}
await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe(
- `<div>async outer</div><div>async inner</div>`
+ `<div><div>async outer</div><div>async inner</div></div>`
)
expect(calls).toEqual([`inner mounted`, `outer mounted`])
})
setup() {
return () =>
h(Suspense, null, {
- default: [
+ default: h('div', [
h(MiddleComponent),
h(AsyncChildParent, {
msg: 'root async'
})
- ],
+ ]),
fallback: h('div', 'root fallback')
})
}
await deps[3]
await nextTick()
expect(serializeInner(root)).toBe(
- `<div>nested fallback</div><div>root async</div>`
+ `<div><div>nested fallback</div><div>root async</div></div>`
)
expect(calls).toEqual([0, 1, 3])
await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe(
- `<div>nested changed</div><div>root async</div>`
+ `<div><div>nested changed</div><div>root async</div></div>`
)
expect(calls).toEqual([0, 1, 3, 2])
msg.value = 'nested changed again'
await nextTick()
expect(serializeInner(root)).toBe(
- `<div>nested changed again</div><div>root async</div>`
+ `<div><div>nested changed again</div><div>root async</div></div>`
)
})
- test('new async dep after resolve should cause suspense to restart', async () => {
- const toggle = ref(false)
+ test('switching branches', async () => {
+ const calls: string[] = []
+ const toggle = ref(true)
- const ChildA = defineAsyncComponent({
+ const Foo = defineAsyncComponent({
setup() {
- return () => h('div', 'Child A')
+ onMounted(() => {
+ calls.push('foo mounted')
+ })
+ onUnmounted(() => {
+ calls.push('foo unmounted')
+ })
+ return () => h('div', ['foo', h(FooNested)])
}
})
- const ChildB = defineAsyncComponent({
+ const FooNested = defineAsyncComponent(
+ {
+ setup() {
+ onMounted(() => {
+ calls.push('foo nested mounted')
+ })
+ onUnmounted(() => {
+ calls.push('foo nested unmounted')
+ })
+ return () => h('div', 'foo nested')
+ }
+ },
+ 10
+ )
+
+ const Bar = defineAsyncComponent(
+ {
+ setup() {
+ onMounted(() => {
+ calls.push('bar mounted')
+ })
+ onUnmounted(() => {
+ calls.push('bar unmounted')
+ })
+ return () => h('div', 'bar')
+ }
+ },
+ 10
+ )
+
+ const Comp = {
setup() {
- return () => h('div', 'Child B')
+ return () =>
+ h(Suspense, null, {
+ default: toggle.value ? h(Foo) : h(Bar),
+ fallback: h('div', 'fallback')
+ })
}
- })
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(Comp), root)
+ expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+ expect(calls).toEqual([])
+
+ await deps[0]
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+ expect(calls).toEqual([])
+
+ await Promise.all(deps)
+ await nextTick()
+ expect(calls).toEqual([`foo mounted`, `foo nested mounted`])
+ expect(serializeInner(root)).toBe(`<div>foo<div>foo nested</div></div>`)
+
+ // toggle
+ toggle.value = false
+ await nextTick()
+ expect(deps.length).toBe(3)
+ // should remain on current view
+ expect(calls).toEqual([`foo mounted`, `foo nested mounted`])
+ expect(serializeInner(root)).toBe(`<div>foo<div>foo nested</div></div>`)
+
+ await Promise.all(deps)
+ await nextTick()
+ const tempCalls = [
+ `foo mounted`,
+ `foo nested mounted`,
+ `bar mounted`,
+ `foo nested unmounted`,
+ `foo unmounted`
+ ]
+ expect(calls).toEqual(tempCalls)
+ expect(serializeInner(root)).toBe(`<div>bar</div>`)
+
+ // toggle back
+ toggle.value = true
+ await nextTick()
+ // should remain
+ expect(calls).toEqual(tempCalls)
+ expect(serializeInner(root)).toBe(`<div>bar</div>`)
+
+ await deps[3]
+ await nextTick()
+ // still pending...
+ expect(calls).toEqual(tempCalls)
+ expect(serializeInner(root)).toBe(`<div>bar</div>`)
+
+ await Promise.all(deps)
+ await nextTick()
+ expect(calls).toEqual([
+ ...tempCalls,
+ `foo mounted`,
+ `foo nested mounted`,
+ `bar unmounted`
+ ])
+ expect(serializeInner(root)).toBe(`<div>foo<div>foo nested</div></div>`)
+ })
+
+ test('branch switch to 3rd branch before resolve', async () => {
+ const calls: string[] = []
+
+ const makeComp = (name: string, delay = 0) =>
+ defineAsyncComponent(
+ {
+ setup() {
+ onMounted(() => {
+ calls.push(`${name} mounted`)
+ })
+ onUnmounted(() => {
+ calls.push(`${name} unmounted`)
+ })
+ return () => h('div', [name])
+ }
+ },
+ delay
+ )
+
+ const One = makeComp('one')
+ const Two = makeComp('two', 10)
+ const Three = makeComp('three', 20)
+
+ const view = shallowRef(One)
const Comp = {
setup() {
return () =>
h(Suspense, null, {
- default: [h(ChildA), toggle.value ? h(ChildB) : null],
- fallback: h('div', 'root fallback')
+ default: h(view.value),
+ fallback: h('div', 'fallback')
})
}
}
const root = nodeOps.createElement('div')
render(h(Comp), root)
- expect(serializeInner(root)).toBe(`<div>root fallback</div>`)
+ expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+ expect(calls).toEqual([])
await deps[0]
await nextTick()
- expect(serializeInner(root)).toBe(`<div>Child A</div><!---->`)
+ expect(serializeInner(root)).toBe(`<div>one</div>`)
+ expect(calls).toEqual([`one mounted`])
- toggle.value = true
+ view.value = Two
await nextTick()
- expect(serializeInner(root)).toBe(`<div>root fallback</div>`)
+ expect(deps.length).toBe(2)
+
+ // switch before two resovles
+ view.value = Three
+ await nextTick()
+ expect(deps.length).toBe(3)
+ // dep for two resolves
await deps[1]
await nextTick()
- expect(serializeInner(root)).toBe(`<div>Child A</div><div>Child B</div>`)
+ // should still be on view one
+ expect(serializeInner(root)).toBe(`<div>one</div>`)
+ expect(calls).toEqual([`one mounted`])
+
+ await deps[2]
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>three</div>`)
+ expect(calls).toEqual([`one mounted`, `three mounted`, `one unmounted`])
})
- test.todo('teleport inside suspense')
+ test('branch switch back before resolve', async () => {
+ const calls: string[] = []
+
+ const makeComp = (name: string, delay = 0) =>
+ defineAsyncComponent(
+ {
+ setup() {
+ onMounted(() => {
+ calls.push(`${name} mounted`)
+ })
+ onUnmounted(() => {
+ calls.push(`${name} unmounted`)
+ })
+ return () => h('div', [name])
+ }
+ },
+ delay
+ )
+
+ const One = makeComp('one')
+ const Two = makeComp('two', 10)
+
+ const view = shallowRef(One)
+
+ const Comp = {
+ setup() {
+ return () =>
+ h(Suspense, null, {
+ default: h(view.value),
+ fallback: h('div', 'fallback')
+ })
+ }
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(Comp), root)
+ expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+ expect(calls).toEqual([])
+
+ await deps[0]
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>one</div>`)
+ expect(calls).toEqual([`one mounted`])
+
+ view.value = Two
+ await nextTick()
+ expect(deps.length).toBe(2)
+
+ // switch back before two resovles
+ view.value = One
+ await nextTick()
+ expect(deps.length).toBe(2)
+
+ // dep for two resolves
+ await deps[1]
+ await nextTick()
+ // should still be on view one
+ expect(serializeInner(root)).toBe(`<div>one</div>`)
+ expect(calls).toEqual([`one mounted`])
+ })
+
+ test('branch switch timeout + fallback', async () => {
+ const calls: string[] = []
+
+ const makeComp = (name: string, delay = 0) =>
+ defineAsyncComponent(
+ {
+ setup() {
+ onMounted(() => {
+ calls.push(`${name} mounted`)
+ })
+ onUnmounted(() => {
+ calls.push(`${name} unmounted`)
+ })
+ return () => h('div', [name])
+ }
+ },
+ delay
+ )
+
+ const One = makeComp('one')
+ const Two = makeComp('two', 20)
+
+ const view = shallowRef(One)
+
+ const Comp = {
+ setup() {
+ return () =>
+ h(
+ Suspense,
+ {
+ timeout: 10
+ },
+ {
+ default: h(view.value),
+ fallback: h('div', 'fallback')
+ }
+ )
+ }
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(Comp), root)
+ expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+ expect(calls).toEqual([])
+
+ await deps[0]
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>one</div>`)
+ expect(calls).toEqual([`one mounted`])
+
+ view.value = Two
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>one</div>`)
+ expect(calls).toEqual([`one mounted`])
+
+ await new Promise(r => setTimeout(r, 10))
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+ expect(calls).toEqual([`one mounted`, `one unmounted`])
+
+ await deps[1]
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>two</div>`)
+ expect(calls).toEqual([`one mounted`, `one unmounted`, `two mounted`])
+ })
})
const App = {
template: `
<Suspense @resolve="done">
- <AsyncChild :n="1" />
- <AsyncChild :n="2" />
+ <div>
+ <AsyncChild :n="1" />
+ <AsyncChild :n="2" />
+ </div>
</Suspense>`,
components: {
AsyncChild
// server render
container.innerHTML = await renderToString(h(App))
expect(container.innerHTML).toMatchInlineSnapshot(
- `"<!--[--><span>1</span><span>2</span><!--]-->"`
+ `"<div><span>1</span><span>2</span></div>"`
)
// reset asyncDeps from ssr
asyncDeps.length = 0
// should flush buffered effects
expect(mountedCalls).toMatchObject([1, 2])
- expect(container.innerHTML).toMatch(`<span>1</span><span>2</span>`)
+ expect(container.innerHTML).toMatch(
+ `<div><span>1</span><span>2</span></div>`
+ )
const span1 = container.querySelector('span')!
triggerEvent('click', span1)
await nextTick()
- expect(container.innerHTML).toMatch(`<span>2</span><span>2</span>`)
+ expect(container.innerHTML).toMatch(
+ `<div><span>2</span><span>2</span></div>`
+ )
const span2 = span1.nextSibling as Element
triggerEvent('click', span2)
await nextTick()
- expect(container.innerHTML).toMatch(`<span>2</span><span>3</span>`)
+ expect(container.innerHTML).toMatch(
+ `<div><span>2</span><span>3</span></div>`
+ )
})
test('async component', async () => {
* @internal
*/
suspense: SuspenseBoundary | null
+ /**
+ * suspense pending batch id
+ * @internal
+ */
+ suspenseId: number
/**
* @internal
*/
// suspense related
suspense,
+ suspenseId: suspense ? suspense.pendingId : 0,
asyncDep: null,
asyncResolved: false,
export interface TransitionHooks<
HostElement extends RendererElement = RendererElement
> {
+ mode: BaseTransitionProps['mode']
persisted: boolean
beforeEnter(el: HostElement): void
enter(el: HostElement): void
leave(el: HostElement, remove: () => void): void
+ clone(vnode: VNode): TransitionHooks<HostElement>
+ // optional
afterLeave?(): void
delayLeave?(
el: HostElement,
return emptyPlaceholder(child)
}
- const enterHooks = (innerChild.transition = resolveTransitionHooks(
+ const enterHooks = resolveTransitionHooks(
innerChild,
rawProps,
state,
instance
- ))
+ )
+ setTransitionHooks(innerChild, enterHooks)
const oldChild = instance.subTree
const oldInnerChild = oldChild && getKeepAliveChild(oldChild)
// and will be called at appropriate timing in the renderer.
export function resolveTransitionHooks(
vnode: VNode,
- {
+ props: BaseTransitionProps<any>,
+ state: TransitionState,
+ instance: ComponentInternalInstance
+): TransitionHooks {
+ const {
appear,
+ mode,
persisted = false,
onBeforeEnter,
onEnter,
onAppear,
onAfterAppear,
onAppearCancelled
- }: BaseTransitionProps<any>,
- state: TransitionState,
- instance: ComponentInternalInstance
-): TransitionHooks {
+ } = props
const key = String(vnode.key)
const leavingVNodesCache = getLeavingNodesForType(state, vnode)
}
const hooks: TransitionHooks<TransitionElement> = {
+ mode,
persisted,
beforeEnter(el) {
let hook = onBeforeEnter
} else {
done()
}
+ },
+
+ clone(vnode) {
+ return resolveTransitionHooks(vnode, props, state, instance)
}
}
export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks) {
if (vnode.shapeFlag & ShapeFlags.COMPONENT && vnode.component) {
setTransitionHooks(vnode.component.subTree, hooks)
+ } else if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
+ vnode.ssContent!.transition = hooks.clone(vnode.ssContent!)
+ vnode.ssFallback!.transition = hooks.clone(vnode.ssFallback!)
} else {
vnode.transition = hooks
}
const cacheSubtree = () => {
// fix #1621, the pendingCacheKey could be 0
if (pendingCacheKey != null) {
- cache.set(pendingCacheKey, instance.subTree)
+ cache.set(pendingCacheKey, getInnerChild(instance.subTree))
}
}
onMounted(cacheSubtree)
onBeforeUnmount(() => {
cache.forEach(cached => {
const { subTree, suspense } = instance
- if (cached.type === subTree.type) {
+ const vnode = getInnerChild(subTree)
+ if (cached.type === vnode.type) {
// current instance will be unmounted as part of keep-alive's unmount
- resetShapeFlag(subTree)
+ resetShapeFlag(vnode)
// but invoke its deactivated hook here
- const da = subTree.component!.da
+ const da = vnode.component!.da
da && queuePostRenderEffect(da, suspense)
return
}
}
const children = slots.default()
- let vnode = children[0]
+ const rawVNode = children[0]
if (children.length > 1) {
if (__DEV__) {
warn(`KeepAlive should contain exactly one component child.`)
current = null
return children
} else if (
- !isVNode(vnode) ||
- !(vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT)
+ !isVNode(rawVNode) ||
+ (!(rawVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) &&
+ !(rawVNode.shapeFlag & ShapeFlags.SUSPENSE))
) {
current = null
- return vnode
+ return rawVNode
}
+ let vnode = getInnerChild(rawVNode)
const comp = vnode.type as ConcreteComponent
const name = getName(comp)
const { include, exclude, max } = props
(include && (!name || !matches(include, name))) ||
(exclude && name && matches(exclude, name))
) {
- return (current = vnode)
+ current = vnode
+ return rawVNode
}
const key = vnode.key == null ? comp : vnode.key
// clone vnode if it's reused because we are going to mutate it
if (vnode.el) {
vnode = cloneVNode(vnode)
+ if (rawVNode.shapeFlag & ShapeFlags.SUSPENSE) {
+ rawVNode.ssContent = vnode
+ }
}
// #1513 it's possible for the returned vnode to be cloned due to attr
// fallthrough or scopeId, so the vnode here may not be the final vnode
vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
current = vnode
- return vnode
+ return rawVNode
}
}
}
}
vnode.shapeFlag = shapeFlag
}
+
+function getInnerChild(vnode: VNode) {
+ return vnode.shapeFlag & ShapeFlags.SUSPENSE ? vnode.ssContent! : vnode
+}
-import { VNode, normalizeVNode, VNodeChild, VNodeProps } from '../vnode'
-import { isFunction, isArray, ShapeFlags } from '@vue/shared'
+import {
+ VNode,
+ normalizeVNode,
+ VNodeChild,
+ VNodeProps,
+ isSameVNodeType
+} from '../vnode'
+import { isFunction, isArray, ShapeFlags, toNumber } from '@vue/shared'
import { ComponentInternalInstance, handleSetupResult } from '../component'
import { Slots } from '../componentSlots'
import {
RendererNode,
RendererElement
} from '../renderer'
-import { queuePostFlushCb, queueJob } from '../scheduler'
-import { updateHOCHostEl } from '../componentRenderUtils'
-import { pushWarningContext, popWarningContext } from '../warning'
+import { queuePostFlushCb } from '../scheduler'
+import { filterSingleRoot, updateHOCHostEl } from '../componentRenderUtils'
+import { pushWarningContext, popWarningContext, warn } from '../warning'
import { handleError, ErrorCodes } from '../errorHandling'
export interface SuspenseProps {
onResolve?: () => void
- onRecede?: () => void
+ onPending?: () => void
+ onFallback?: () => void
+ timeout?: string | number
}
export const isSuspense = (type: any): boolean => type.__isSuspense
)
}
},
- hydrate: hydrateSuspense
+ hydrate: hydrateSuspense,
+ create: createSuspenseBoundary
}
// Force-casted public typing for h and TSX props inference
}
function mountSuspense(
- n2: VNode,
+ vnode: VNode,
container: RendererElement,
anchor: RendererNode | null,
parentComponent: ComponentInternalInstance | null,
o: { createElement }
} = rendererInternals
const hiddenContainer = createElement('div')
- const suspense = (n2.suspense = createSuspenseBoundary(
- n2,
+ const suspense = (vnode.suspense = createSuspenseBoundary(
+ vnode,
parentSuspense,
parentComponent,
container,
// start mounting the content subtree in an off-dom container
patch(
null,
- suspense.subTree,
+ (suspense.pendingBranch = vnode.ssContent!),
hiddenContainer,
null,
parentComponent,
)
// now check if we have encountered any async deps
if (suspense.deps > 0) {
+ // has async
// mount the fallback tree
patch(
null,
- suspense.fallbackTree,
+ vnode.ssFallback!,
container,
anchor,
parentComponent,
isSVG,
optimized
)
- n2.el = suspense.fallbackTree.el
+ setActiveBranch(suspense, vnode.ssFallback!)
} else {
// Suspense has no async deps. Just resolve.
suspense.resolve()
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean,
- { p: patch }: RendererInternals
+ { p: patch, um: unmount, o: { createElement } }: RendererInternals
) {
const suspense = (n2.suspense = n1.suspense)!
suspense.vnode = n2
- const { content, fallback } = normalizeSuspenseChildren(n2)
- const oldSubTree = suspense.subTree
- const oldFallbackTree = suspense.fallbackTree
- if (!suspense.isResolved) {
- patch(
- oldSubTree,
- content,
- suspense.hiddenContainer,
- null,
- parentComponent,
- suspense,
- isSVG,
- optimized
- )
- if (suspense.deps > 0) {
- // still pending. patch the fallback tree.
+ n2.el = n1.el
+ const newBranch = n2.ssContent!
+ const newFallback = n2.ssFallback!
+
+ const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense
+ if (pendingBranch) {
+ suspense.pendingBranch = newBranch
+ if (isSameVNodeType(newBranch, pendingBranch)) {
+ // same root type but content may have changed.
patch(
- oldFallbackTree,
- fallback,
+ pendingBranch,
+ newBranch,
+ suspense.hiddenContainer,
+ null,
+ parentComponent,
+ suspense,
+ isSVG,
+ optimized
+ )
+ if (suspense.deps <= 0) {
+ suspense.resolve()
+ } else if (isInFallback) {
+ patch(
+ activeBranch,
+ newFallback,
+ container,
+ anchor,
+ parentComponent,
+ null, // fallback tree will not have suspense context
+ isSVG,
+ optimized
+ )
+ setActiveBranch(suspense, newFallback)
+ }
+ } else {
+ // toggled before pending tree is resolved
+ suspense.pendingId++
+ if (isHydrating) {
+ // if toggled before hydration is finished, the current DOM tree is
+ // no longer valid. set it as the active branch so it will be unmounted
+ // when resolved
+ suspense.isHydrating = false
+ suspense.activeBranch = pendingBranch
+ } else {
+ unmount(pendingBranch, parentComponent, null)
+ }
+ // increment pending ID. this is used to invalidate async callbacks
+ // reset suspense state
+ suspense.deps = 0
+ suspense.effects.length = 0
+ // discard previous container
+ suspense.hiddenContainer = createElement('div')
+
+ if (isInFallback) {
+ // already in fallback state
+ patch(
+ null,
+ newBranch,
+ suspense.hiddenContainer,
+ null,
+ parentComponent,
+ suspense,
+ isSVG,
+ optimized
+ )
+ if (suspense.deps <= 0) {
+ suspense.resolve()
+ } else {
+ patch(
+ activeBranch,
+ newFallback,
+ container,
+ anchor,
+ parentComponent,
+ null, // fallback tree will not have suspense context
+ isSVG,
+ optimized
+ )
+ setActiveBranch(suspense, newFallback)
+ }
+ } else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+ // toggled "back" to current active branch
+ patch(
+ activeBranch,
+ newBranch,
+ container,
+ anchor,
+ parentComponent,
+ suspense,
+ isSVG,
+ optimized
+ )
+ // force resolve
+ suspense.resolve(true)
+ } else {
+ // switched to a 3rd branch
+ patch(
+ null,
+ newBranch,
+ suspense.hiddenContainer,
+ null,
+ parentComponent,
+ suspense,
+ isSVG,
+ optimized
+ )
+ if (suspense.deps <= 0) {
+ suspense.resolve()
+ }
+ }
+ }
+ } else {
+ if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
+ // root did not change, just normal patch
+ patch(
+ activeBranch,
+ newBranch,
container,
anchor,
parentComponent,
- null, // fallback tree will not have suspense context
+ suspense,
isSVG,
optimized
)
- n2.el = fallback.el
+ setActiveBranch(suspense, newBranch)
+ } else {
+ // root node toggled
+ // invoke @pending event
+ const onPending = n2.props && n2.props.onPending
+ if (isFunction(onPending)) {
+ onPending()
+ }
+ // mount pending branch in off-dom container
+ suspense.pendingBranch = newBranch
+ suspense.pendingId++
+ patch(
+ null,
+ newBranch,
+ suspense.hiddenContainer,
+ null,
+ parentComponent,
+ suspense,
+ isSVG,
+ optimized
+ )
+ if (suspense.deps <= 0) {
+ // incoming branch has no async deps, resolve now.
+ suspense.resolve()
+ } else {
+ const { timeout, pendingId } = suspense
+ if (timeout > 0) {
+ setTimeout(() => {
+ if (suspense.pendingId === pendingId) {
+ suspense.fallback(newFallback)
+ }
+ }, timeout)
+ } else if (timeout === 0) {
+ suspense.fallback(newFallback)
+ }
+ }
}
- // If deps somehow becomes 0 after the patch it means the patch caused an
- // async dep component to unmount and removed its dep. It will cause the
- // suspense to resolve and we don't need to do anything here.
- } else {
- // just normal patch inner content as a fragment
- patch(
- oldSubTree,
- content,
- container,
- anchor,
- parentComponent,
- suspense,
- isSVG,
- optimized
- )
- n2.el = content.el
}
- suspense.subTree = content
- suspense.fallbackTree = fallback
}
export interface SuspenseBoundary {
container: RendererElement
hiddenContainer: RendererElement
anchor: RendererNode | null
- subTree: VNode
- fallbackTree: VNode
+ activeBranch: VNode | null
+ pendingBranch: VNode | null
deps: number
+ pendingId: number
+ timeout: number
+ isInFallback: boolean
isHydrating: boolean
- isResolved: boolean
isUnmounted: boolean
effects: Function[]
- resolve(): void
- recede(): void
+ resolve(force?: boolean): void
+ fallback(fallbackVNode: VNode): void
move(
container: RendererElement,
anchor: RendererNode | null,
m: move,
um: unmount,
n: next,
- o: { parentNode }
+ o: { parentNode, remove }
} = rendererInternals
- const getCurrentTree = () =>
- suspense.isResolved || suspense.isHydrating
- ? suspense.subTree
- : suspense.fallbackTree
-
- const { content, fallback } = normalizeSuspenseChildren(vnode)
+ const timeout = toNumber(vnode.props && vnode.props.timeout)
const suspense: SuspenseBoundary = {
vnode,
parent,
hiddenContainer,
anchor,
deps: 0,
- subTree: content,
- fallbackTree: fallback,
+ pendingId: 0,
+ timeout: typeof timeout === 'number' ? timeout : -1,
+ activeBranch: null,
+ pendingBranch: null,
+ isInFallback: true,
isHydrating,
- isResolved: false,
isUnmounted: false,
effects: [],
- resolve() {
+ resolve(resume = false) {
if (__DEV__) {
- if (suspense.isResolved) {
+ if (!resume && !suspense.pendingBranch) {
throw new Error(
- `resolveSuspense() is called on an already resolved suspense boundary.`
+ `suspense.resolve() is called without a pending branch.`
)
}
if (suspense.isUnmounted) {
throw new Error(
- `resolveSuspense() is called on an already unmounted suspense boundary.`
+ `suspense.resolve() is called on an already unmounted suspense boundary.`
)
}
}
const {
vnode,
- subTree,
- fallbackTree,
+ activeBranch,
+ pendingBranch,
+ pendingId,
effects,
parentComponent,
container
if (suspense.isHydrating) {
suspense.isHydrating = false
- } else {
+ } else if (!resume) {
+ const delayEnter =
+ activeBranch &&
+ pendingBranch!.transition &&
+ pendingBranch!.transition.mode === 'out-in'
+ if (delayEnter) {
+ activeBranch!.transition!.afterLeave = () => {
+ if (pendingId === suspense.pendingId) {
+ move(pendingBranch!, container, anchor, MoveType.ENTER)
+ }
+ }
+ }
// this is initial anchor on mount
let { anchor } = suspense
- // unmount fallback tree
- if (fallbackTree.el) {
+ // unmount current active tree
+ if (activeBranch) {
// if the fallback tree was mounted, it may have been moved
// as part of a parent suspense. get the latest anchor for insertion
- anchor = next(fallbackTree)
- unmount(fallbackTree, parentComponent, suspense, true)
+ anchor = next(activeBranch)
+ unmount(activeBranch, parentComponent, suspense, true)
+ }
+ if (!delayEnter) {
+ // move content from off-dom container to actual container
+ move(pendingBranch!, container, anchor, MoveType.ENTER)
}
- // move content from off-dom container to actual container
- move(subTree, container, anchor, MoveType.ENTER)
}
- const el = (vnode.el = subTree.el!)
- // suspense as the root node of a component...
- if (parentComponent && parentComponent.subTree === vnode) {
- parentComponent.vnode.el = el
- updateHOCHostEl(parentComponent, el)
- }
+ setActiveBranch(suspense, pendingBranch!)
+ suspense.pendingBranch = null
+ suspense.isInFallback = false
+
+ // flush buffered effects
// check if there is a pending parent suspense
let parent = suspense.parent
let hasUnresolvedAncestor = false
while (parent) {
- if (!parent.isResolved) {
+ if (parent.pendingBranch) {
// found a pending parent suspense, merge buffered post jobs
// into that parent
parent.effects.push(...effects)
if (!hasUnresolvedAncestor) {
queuePostFlushCb(effects)
}
- suspense.isResolved = true
suspense.effects = []
+
// invoke @resolve event
const onResolve = vnode.props && vnode.props.onResolve
if (isFunction(onResolve)) {
}
},
- recede() {
- suspense.isResolved = false
+ fallback(fallbackVNode) {
+ if (!suspense.pendingBranch) {
+ return
+ }
+
const {
vnode,
- subTree,
- fallbackTree,
+ activeBranch,
parentComponent,
container,
- hiddenContainer,
isSVG,
optimized
} = suspense
- // move content tree back to the off-dom container
- const anchor = next(subTree)
- move(subTree, hiddenContainer, null, MoveType.LEAVE)
- // remount the fallback tree
- patch(
- null,
- fallbackTree,
- container,
- anchor,
+ // invoke @recede event
+ const onFallback = vnode.props && vnode.props.onFallback
+ if (isFunction(onFallback)) {
+ onFallback()
+ }
+
+ const anchor = next(activeBranch!)
+ const mountFallback = () => {
+ if (!suspense.isInFallback) {
+ return
+ }
+ // mount the fallback tree
+ patch(
+ null,
+ fallbackVNode,
+ container,
+ anchor,
+ parentComponent,
+ null, // fallback tree will not have suspense context
+ isSVG,
+ optimized
+ )
+ setActiveBranch(suspense, fallbackVNode)
+ }
+
+ const delayEnter =
+ fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in'
+ if (delayEnter) {
+ activeBranch!.transition!.afterLeave = mountFallback
+ }
+ // unmount current active branch
+ unmount(
+ activeBranch!,
parentComponent,
- null, // fallback tree will not have suspense context
- isSVG,
- optimized
+ null, // no suspense so unmount hooks fire now
+ true // shouldRemove
)
- const el = (vnode.el = fallbackTree.el!)
- // suspense as the root node of a component...
- if (parentComponent && parentComponent.subTree === vnode) {
- parentComponent.vnode.el = el
- updateHOCHostEl(parentComponent, el)
- }
- // invoke @recede event
- const onRecede = vnode.props && vnode.props.onRecede
- if (isFunction(onRecede)) {
- onRecede()
+ suspense.isInFallback = true
+ if (!delayEnter) {
+ mountFallback()
}
},
move(container, anchor, type) {
- move(getCurrentTree(), container, anchor, type)
+ suspense.activeBranch &&
+ move(suspense.activeBranch, container, anchor, type)
suspense.container = container
},
next() {
- return next(getCurrentTree())
+ return suspense.activeBranch && next(suspense.activeBranch)
},
registerDep(instance, setupRenderEffect) {
- // suspense is already resolved, need to recede.
- // use queueJob so it's handled synchronously after patching the current
- // suspense tree
- if (suspense.isResolved) {
- queueJob(() => {
- suspense.recede()
- })
+ if (!suspense.pendingBranch) {
+ return
}
const hydratedEl = instance.vnode.el
.then(asyncSetupResult => {
// retry when the setup() promise resolves.
// component may have been unmounted before resolve.
- if (instance.isUnmounted || suspense.isUnmounted) {
+ if (
+ instance.isUnmounted ||
+ suspense.isUnmounted ||
+ suspense.pendingId !== instance.suspenseId
+ ) {
return
}
suspense.deps--
// async dep is resolved.
vnode.el = hydratedEl
}
+ const placeholder = !hydratedEl && instance.subTree.el
setupRenderEffect(
instance,
vnode,
// component may have been moved before resolve.
// if this is not a hydration, instance.subTree will be the comment
// placeholder.
- hydratedEl
- ? parentNode(hydratedEl)!
- : parentNode(instance.subTree.el!)!,
+ parentNode(hydratedEl || instance.subTree.el!)!,
// anchor will not be used if this is hydration, so only need to
// consider the comment placeholder case.
hydratedEl ? null : next(instance.subTree),
isSVG,
optimized
)
+ if (placeholder) {
+ remove(placeholder)
+ }
updateHOCHostEl(instance, vnode.el)
if (__DEV__) {
popWarningContext()
unmount(parentSuspense, doRemove) {
suspense.isUnmounted = true
- unmount(suspense.subTree, parentComponent, parentSuspense, doRemove)
- if (!suspense.isResolved) {
+ if (suspense.activeBranch) {
+ unmount(
+ suspense.activeBranch,
+ parentComponent,
+ parentSuspense,
+ doRemove
+ )
+ }
+ if (suspense.pendingBranch) {
unmount(
- suspense.fallbackTree,
+ suspense.pendingBranch,
parentComponent,
parentSuspense,
doRemove
// need to construct a suspense boundary first
const result = hydrateNode(
node,
- suspense.subTree,
+ (suspense.pendingBranch = vnode.ssContent!),
parentComponent,
suspense,
optimized
fallback: VNode
} {
const { shapeFlag, children } = vnode
+ let content: VNode
+ let fallback: VNode
if (shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
- const { default: d, fallback } = children as Slots
- return {
- content: normalizeVNode(isFunction(d) ? d() : d),
- fallback: normalizeVNode(isFunction(fallback) ? fallback() : fallback)
- }
+ content = normalizeSuspenseSlot((children as Slots).default)
+ fallback = normalizeSuspenseSlot((children as Slots).fallback)
} else {
- return {
- content: normalizeVNode(children as VNodeChild),
- fallback: normalizeVNode(null)
+ content = normalizeSuspenseSlot(children as VNodeChild)
+ fallback = normalizeVNode(null)
+ }
+ return {
+ content,
+ fallback
+ }
+}
+
+function normalizeSuspenseSlot(s: any) {
+ if (isFunction(s)) {
+ s = s()
+ }
+ if (isArray(s)) {
+ const singleChild = filterSingleRoot(s)
+ if (__DEV__ && !singleChild) {
+ warn(`<Suspense> slots expect a single root node.`)
}
+ s = singleChild
}
+ return normalizeVNode(s)
}
export function queueEffectWithSuspense(
fn: Function | Function[],
suspense: SuspenseBoundary | null
): void {
- if (suspense && !suspense.isResolved) {
+ if (suspense && suspense.pendingBranch) {
if (isArray(fn)) {
suspense.effects.push(...fn)
} else {
queuePostFlushCb(fn)
}
}
+
+function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
+ suspense.activeBranch = branch
+ const { vnode, parentComponent } = suspense
+ const el = (vnode.el = branch.el)
+ // in case suspense is the root node of a component,
+ // recursively update the HOC el
+ if (parentComponent && parentComponent.subTree === vnode) {
+ parentComponent.vnode.el = el
+ updateHOCHostEl(parentComponent, el)
+ }
+}
const hydrateChildren = (
node: Node | null,
- vnode: VNode,
+ parentVNode: VNode,
container: Element,
parentComponent: ComponentInternalInstance | null,
parentSuspense: SuspenseBoundary | null,
optimized: boolean
): Node | null => {
- optimized = optimized || !!vnode.dynamicChildren
- const children = vnode.children as VNode[]
+ optimized = optimized || !!parentVNode.dynamicChildren
+ const children = parentVNode.children as VNode[]
const l = children.length
let hasWarned = false
for (let i = 0; i < l; i++) {
setCurrentRenderingInstance
} from './componentRenderUtils'
import { isVNode, normalizeVNode } from './vnode'
-import { normalizeSuspenseChildren } from './components/Suspense'
const _ssrUtils = {
createComponentInstance,
renderComponentRoot,
setCurrentRenderingInstance,
isVNode,
- normalizeVNode,
- normalizeSuspenseChildren
+ normalizeVNode
}
/**
// #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved
// #1689 For inside suspense + suspense resolved case, just call it
const needCallTransitionHooks =
- (!parentSuspense || (parentSuspense && parentSuspense!.isResolved)) &&
+ (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
transition &&
!transition.persisted
if (needCallTransitionHooks) {
// setup() is async. This component relies on async logic to be resolved
// before proceeding
if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
- if (!parentSuspense) {
- if (__DEV__) warn('async setup() is used without a suspense boundary!')
- return
- }
-
- parentSuspense.registerDep(instance, setupRenderEffect)
+ parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)
// Give it a placeholder if this is not hydration
+ // TODO handle self-defined fallback
if (!initialVNode.el) {
const placeholder = (instance.subTree = createVNode(Comment))
processCommentNode(null, placeholder, container!, anchor)
if (
__FEATURE_SUSPENSE__ &&
parentSuspense &&
- !parentSuspense.isResolved &&
+ parentSuspense.pendingBranch &&
!parentSuspense.isUnmounted &&
instance.asyncDep &&
- !instance.asyncResolved
+ !instance.asyncResolved &&
+ instance.suspenseId === parentSuspense.pendingId
) {
parentSuspense.deps--
if (parentSuspense.deps === 0) {
import {
SuspenseImpl,
isSuspense,
- SuspenseBoundary
+ SuspenseBoundary,
+ normalizeSuspenseChildren
} from './components/Suspense'
import { DirectiveBinding } from './directives'
import { TransitionHooks } from './components/BaseTransition'
scopeId: string | null // SFC only
children: VNodeNormalizedChildren
component: ComponentInternalInstance | null
- suspense: SuspenseBoundary | null
dirs: DirectiveBinding[] | null
transition: TransitionHooks<HostElement> | null
targetAnchor: HostNode | null // teleport target anchor
staticCount: number // number of elements contained in a static vnode
+ // suspense
+ suspense: SuspenseBoundary | null
+ ssContent: VNode | null
+ ssFallback: VNode | null
+
// optimization only
shapeFlag: number
patchFlag: number
children: null,
component: null,
suspense: null,
+ ssContent: null,
+ ssFallback: null,
dirs: null,
transition: null,
el: null,
normalizeChildren(vnode, children)
+ // normalize suspense children
+ if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
+ const { content, fallback } = normalizeSuspenseChildren(vnode)
+ vnode.ssContent = content
+ vnode.ssFallback = fallback
+ }
+
if (
shouldTrack > 0 &&
// avoid a block node from tracking itself
// they will simply be overwritten.
component: vnode.component,
suspense: vnode.suspense,
+ ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
+ ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
el: vnode.el,
anchor: vnode.anchor
}
prefix: string
) {
if (__FEATURE_SUSPENSE__ && vnode.shapeFlag & ShapeFlags.SUSPENSE) {
- const { isResolved, isHydrating, fallbackTree, subTree } = vnode.suspense!
- if (isResolved || isHydrating) {
- vnode = subTree
- } else {
- vnode.suspense!.effects.push(() => {
- setVarsOnVNode(subTree, vars, prefix)
+ const suspense = vnode.suspense!
+ vnode = suspense.activeBranch!
+ if (suspense.pendingBranch && !suspense.isHydrating) {
+ suspense.effects.push(() => {
+ setVarsOnVNode(suspense.activeBranch!, vars, prefix)
})
- vnode = fallbackTree
}
}
{ default: renderContent }: Record<string, (() => void) | undefined>
) {
if (renderContent) {
- push(`<!--[-->`)
renderContent()
- push(`<!--]-->`)
} else {
push(`<!---->`)
}
setCurrentRenderingInstance,
setupComponent,
renderComponentRoot,
- normalizeVNode,
- normalizeSuspenseChildren
+ normalizeVNode
} = ssrUtils
export type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean }
} else if (shapeFlag & ShapeFlags.TELEPORT) {
renderTeleportVNode(push, vnode, parentComponent)
} else if (shapeFlag & ShapeFlags.SUSPENSE) {
- renderVNode(
- push,
- normalizeSuspenseChildren(vnode).content,
- parentComponent
- )
+ renderVNode(push, vnode.ssContent!, parentComponent)
} else {
warn(
'[@vue/server-renderer] Invalid VNode type:',
createApp({
template: `
<div id="container">
- <Suspense>
- <transition @enter="onEnterSpy"
- @leave="onLeaveSpy">
+ <transition @enter="onEnterSpy" @leave="onLeaveSpy">
+ <Suspense>
<Comp v-if="toggle" class="test">content</Comp>
- </transition>
- </Suspense>
+ </Suspense>
+ </transition>
</div>
<button id="toggleBtn" @click="click">button</button>
`,
}
}).mount('#app')
})
+
+ expect(onEnterSpy).toBeCalledTimes(1)
+ await nextFrame()
+ expect(await html('#container')).toBe(
+ '<div class="test v-enter-active v-enter-to">content</div>'
+ )
+ await transitionFinish()
expect(await html('#container')).toBe('<div class="test">content</div>')
// leave
'v-enter-active',
'v-enter-from'
])
- expect(onEnterSpy).toBeCalledTimes(1)
+ expect(onEnterSpy).toBeCalledTimes(2)
await nextFrame()
expect(await classList('.test')).toStrictEqual([
'test',
createApp({
template: `
<div id="container">
- <Suspense>
- <transition>
+ <transition>
+ <Suspense>
<div v-if="toggle" class="test">content</div>
- </transition>
- </Suspense>
+ </Suspense>
+ </transition>
</div>
<button id="toggleBtn" @click="click">button</button>
`,
},
E2E_TIMEOUT
)
+
+ test(
+ 'out-in mode with Suspense',
+ async () => {
+ const onLeaveSpy = jest.fn()
+ const onEnterSpy = jest.fn()
+
+ await page().exposeFunction('onLeaveSpy', onLeaveSpy)
+ await page().exposeFunction('onEnterSpy', onEnterSpy)
+
+ await page().evaluate(() => {
+ const { createApp, shallowRef, h } = (window as any).Vue
+ const One = {
+ async setup() {
+ return () => h('div', { class: 'test' }, 'one')
+ }
+ }
+ const Two = {
+ async setup() {
+ return () => h('div', { class: 'test' }, 'two')
+ }
+ }
+ createApp({
+ template: `
+ <div id="container">
+ <transition mode="out-in">
+ <Suspense>
+ <component :is="view"/>
+ </Suspense>
+ </transition>
+ </div>
+ <button id="toggleBtn" @click="click">button</button>
+ `,
+ setup: () => {
+ const view = shallowRef(One)
+ const click = () => {
+ view.value = view.value === One ? Two : One
+ }
+ return { view, click }
+ }
+ }).mount('#app')
+ })
+
+ await nextFrame()
+ expect(await html('#container')).toBe(
+ '<div class="test v-enter-active v-enter-to">one</div>'
+ )
+ await transitionFinish()
+ expect(await html('#container')).toBe('<div class="test">one</div>')
+
+ // leave
+ await classWhenTransitionStart()
+ await nextFrame()
+ expect(await html('#container')).toBe(
+ '<div class="test v-leave-active v-leave-to">one</div>'
+ )
+ await transitionFinish()
+ expect(await html('#container')).toBe(
+ '<div class="test v-enter-active v-enter-to">two</div>'
+ )
+ await transitionFinish()
+ expect(await html('#container')).toBe('<div class="test">two</div>')
+ },
+ E2E_TIMEOUT
+ )
})
describe('transition with v-show', () => {
</div>
<script>
-const delay = window.location.hash === '#test' ? 16 : 300
+const delay = window.location.hash === '#test' ? 50 : 300
Vue.createApp({
data: () => ({
// Suspense
expectType<JSX.Element>(<Suspense />)
expectType<JSX.Element>(<Suspense key="1" />)
-expectType<JSX.Element>(<Suspense onResolve={() => {}} onRecede={() => {}} />)
+expectType<JSX.Element>(<Suspense onResolve={() => {}} onFallback={() => {}} />)
// @ts-expect-error
expectError(<Suspense onResolve={123} />)
projects / thirdparty / vuejs / core.git / commitdiff
