fix(runtime-core): ensure suspense content inherit scopeId (#10652)
close #5148
This commit is contained in:
parent
4b608a9449
commit
ac2a410e46
|
@ -1,5 +1,6 @@
|
||||||
import {
|
import {
|
||||||
Fragment,
|
Fragment,
|
||||||
|
Suspense,
|
||||||
createBlock,
|
createBlock,
|
||||||
createCommentVNode,
|
createCommentVNode,
|
||||||
createVNode,
|
createVNode,
|
||||||
|
@ -47,6 +48,49 @@ describe('scopeId runtime support', () => {
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// #5148
|
||||||
|
test('should attach scopeId to suspense content', async () => {
|
||||||
|
const deps: Promise<any>[] = []
|
||||||
|
const Child = {
|
||||||
|
async setup() {
|
||||||
|
const p = new Promise(r => setTimeout(r, 1))
|
||||||
|
deps.push(p.then(() => Promise.resolve()))
|
||||||
|
|
||||||
|
await p
|
||||||
|
return () => h('div', 'async')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const Wrapper = {
|
||||||
|
setup(_: any, { slots }: any) {
|
||||||
|
return () => slots.default({ Component: h(Child) })
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const App = {
|
||||||
|
__scopeId: 'parent',
|
||||||
|
setup() {
|
||||||
|
return () =>
|
||||||
|
h(Wrapper, null, {
|
||||||
|
default: withCtx(({ Component }: any) =>
|
||||||
|
h(Suspense, null, {
|
||||||
|
default: h(Component),
|
||||||
|
fallback: h('div', 'fallback'),
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = nodeOps.createElement('div')
|
||||||
|
render(h(App), root)
|
||||||
|
expect(serializeInner(root)).toBe(`<div parent>fallback</div>`)
|
||||||
|
|
||||||
|
await Promise.all(deps)
|
||||||
|
await nextTick()
|
||||||
|
expect(serializeInner(root)).toBe(`<div parent>async</div>`)
|
||||||
|
})
|
||||||
|
|
||||||
// :slotted basic
|
// :slotted basic
|
||||||
test('should work on slots', () => {
|
test('should work on slots', () => {
|
||||||
const Child = {
|
const Child = {
|
||||||
|
|
|
@ -62,6 +62,7 @@ import { setRef } from './rendererTemplateRef'
|
||||||
import {
|
import {
|
||||||
type SuspenseBoundary,
|
type SuspenseBoundary,
|
||||||
type SuspenseImpl,
|
type SuspenseImpl,
|
||||||
|
isSuspense,
|
||||||
queueEffectWithSuspense,
|
queueEffectWithSuspense,
|
||||||
} from './components/Suspense'
|
} from './components/Suspense'
|
||||||
import {
|
import {
|
||||||
|
@ -749,7 +750,11 @@ function baseCreateRenderer(
|
||||||
subTree =
|
subTree =
|
||||||
filterSingleRoot(subTree.children as VNodeArrayChildren) || subTree
|
filterSingleRoot(subTree.children as VNodeArrayChildren) || subTree
|
||||||
}
|
}
|
||||||
if (vnode === subTree) {
|
if (
|
||||||
|
vnode === subTree ||
|
||||||
|
(isSuspense(subTree.type) &&
|
||||||
|
(subTree.ssContent === vnode || subTree.ssFallback === vnode))
|
||||||
|
) {
|
||||||
const parentVNode = parentComponent.vnode
|
const parentVNode = parentComponent.vnode
|
||||||
setScopeId(
|
setScopeId(
|
||||||
el,
|
el,
|
||||||
|
|
Loading…
Reference in New Issue