Skip to content

Commit

Permalink
fix(runtime-core): ensure suspense content inherit scopeId (#10652)
Browse files Browse the repository at this point in the history
close #5148
  • Loading branch information
edison1105 committed Aug 19, 2024
1 parent 4b608a9 commit ac2a410
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 1 deletion.
44 changes: 44 additions & 0 deletions packages/runtime-core/__tests__/scopeId.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
Fragment,
Suspense,
createBlock,
createCommentVNode,
createVNode,
Expand Down Expand Up @@ -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 = {
Expand Down
7 changes: 6 additions & 1 deletion packages/runtime-core/src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import { setRef } from './rendererTemplateRef'
import {
type SuspenseBoundary,
type SuspenseImpl,
isSuspense,
queueEffectWithSuspense,
} from './components/Suspense'
import {
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit ac2a410

Please sign in to comment.