fix(runtime-core): ensure suspense content inherit scopeId (#10652)

close #5148
This commit is contained in:
edison 2024-08-19 16:19:24 +08:00 committed by GitHub
parent 4b608a9449
commit ac2a410e46
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 1 deletions

View File

@ -1,5 +1,6 @@
import {
Fragment,
Suspense,
createBlock,
createCommentVNode,
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
test('should work on slots', () => {
const Child = {

View File

@ -62,6 +62,7 @@ import { setRef } from './rendererTemplateRef'
import {
type SuspenseBoundary,
type SuspenseImpl,
isSuspense,
queueEffectWithSuspense,
} from './components/Suspense'
import {
@ -749,7 +750,11 @@ function baseCreateRenderer(
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
setScopeId(
el,