Skip to content

Commit ac2a410

Browse files
authored
fix(runtime-core): ensure suspense content inherit scopeId (#10652)
close #5148
1 parent 4b608a9 commit ac2a410

File tree

2 files changed

+50
-1
lines changed

2 files changed

+50
-1
lines changed

packages/runtime-core/__tests__/scopeId.spec.ts

+44
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Fragment,
3+
Suspense,
34
createBlock,
45
createCommentVNode,
56
createVNode,
@@ -47,6 +48,49 @@ describe('scopeId runtime support', () => {
4748
)
4849
})
4950

51+
// #5148
52+
test('should attach scopeId to suspense content', async () => {
53+
const deps: Promise<any>[] = []
54+
const Child = {
55+
async setup() {
56+
const p = new Promise(r => setTimeout(r, 1))
57+
deps.push(p.then(() => Promise.resolve()))
58+
59+
await p
60+
return () => h('div', 'async')
61+
},
62+
}
63+
64+
const Wrapper = {
65+
setup(_: any, { slots }: any) {
66+
return () => slots.default({ Component: h(Child) })
67+
},
68+
}
69+
70+
const App = {
71+
__scopeId: 'parent',
72+
setup() {
73+
return () =>
74+
h(Wrapper, null, {
75+
default: withCtx(({ Component }: any) =>
76+
h(Suspense, null, {
77+
default: h(Component),
78+
fallback: h('div', 'fallback'),
79+
}),
80+
),
81+
})
82+
},
83+
}
84+
85+
const root = nodeOps.createElement('div')
86+
render(h(App), root)
87+
expect(serializeInner(root)).toBe(`<div parent>fallback</div>`)
88+
89+
await Promise.all(deps)
90+
await nextTick()
91+
expect(serializeInner(root)).toBe(`<div parent>async</div>`)
92+
})
93+
5094
// :slotted basic
5195
test('should work on slots', () => {
5296
const Child = {

packages/runtime-core/src/renderer.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import { setRef } from './rendererTemplateRef'
6262
import {
6363
type SuspenseBoundary,
6464
type SuspenseImpl,
65+
isSuspense,
6566
queueEffectWithSuspense,
6667
} from './components/Suspense'
6768
import {
@@ -749,7 +750,11 @@ function baseCreateRenderer(
749750
subTree =
750751
filterSingleRoot(subTree.children as VNodeArrayChildren) || subTree
751752
}
752-
if (vnode === subTree) {
753+
if (
754+
vnode === subTree ||
755+
(isSuspense(subTree.type) &&
756+
(subTree.ssContent === vnode || subTree.ssFallback === vnode))
757+
) {
753758
const parentVNode = parentComponent.vnode
754759
setScopeId(
755760
el,

0 commit comments

Comments
 (0)