Skip to content

Commit

Permalink
fix(Suspense): fix edge case of Suspense being patched during async H…
Browse files Browse the repository at this point in the history
…OC child remount
  • Loading branch information
yyx990803 committed Dec 15, 2023
1 parent ebd78d2 commit f0f6f7c
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 0 deletions.
40 changes: 40 additions & 0 deletions packages/runtime-core/__tests__/components/Suspense.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1690,6 +1690,46 @@ describe('Suspense', () => {
expect(serializeInner(root)).toBe(`<div>sync</div>`)
})

// #6416 follow up
test('Suspense patched during HOC async component re-mount', async () => {
const key = ref('k')
const data = ref('data')

const Async = defineAsyncComponent({
render() {
return h('div', 'async')
}
})

const Comp = {
render() {
return h(Async, { key: key.value })
}
}

const root = nodeOps.createElement('div')
const App = {
render() {
return h(Suspense, null, {
default: h(Comp, { data: data.value })
})
}
}
render(h(App), root)
expect(serializeInner(root)).toBe(`<!---->`)

await Promise.all(deps)

// async mounted, but key change causing a new async comp to be loaded
key.value = 'k1'
await nextTick()

// patch the Suspense
// should not throw error due to Suspense vnode.el being null
data.value = 'data2'
await Promise.all(deps)
})

describe('warnings', () => {
// base function to check if a combination of slots warns or not
function baseCheckWarn(
Expand Down
1 change: 1 addition & 0 deletions packages/runtime-core/src/componentRenderUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -428,6 +428,7 @@ export function updateHOCHostEl(
{ vnode, parent }: ComponentInternalInstance,
el: typeof vnode.el // HostNode
) {
if (!el) return
while (parent) {
const root = parent.subTree
if (root.suspense && root.suspense.activeBranch === vnode) {
Expand Down

0 comments on commit f0f6f7c

Please sign in to comment.