Skip to content

Commit

Permalink
fix(KeepAlive): properly cache nested Suspense subtree (#10912)
Browse files Browse the repository at this point in the history
* fix(KeepAlive): properly cache nested Suspense subtree

* test: add test case

* chore: add comments

* Update KeepAlive.ts
  • Loading branch information
edison1105 authored May 24, 2024
1 parent bbb5be2 commit 07764fe
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 2 deletions.
52 changes: 51 additions & 1 deletion packages/runtime-core/__tests__/components/Suspense.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2021,7 +2021,7 @@ describe('Suspense', () => {
viewRef.value = 0
await nextTick()

expect(serializeInner(root)).toBe('<!---->')
expect(serializeInner(root)).toBe('<div>sync</div>')

await Promise.all(deps)
await nextTick()
Expand All @@ -2035,6 +2035,56 @@ describe('Suspense', () => {
expect(serializeInner(root)).toBe(`<div>sync</div>`)
})

// #10899
test('KeepAlive + Suspense switch before branch resolves', async () => {
const Async1 = defineAsyncComponent({
render() {
return h('div', 'async1')
},
})
const Async2 = defineAsyncComponent({
render() {
return h('div', 'async2')
},
})
const components = [Async1, Async2]
const viewRef = ref(0)
const root = nodeOps.createElement('div')
const App = {
render() {
return h(KeepAlive, null, {
default: () => {
return h(Suspense, null, {
default: h(components[viewRef.value]),
fallback: h('div', 'loading'),
})
},
})
},
}
render(h(App), root)
expect(serializeInner(root)).toBe(`<div>loading</div>`)

// switch to Async2 before Async1 resolves
viewRef.value = 1
await nextTick()
expect(serializeInner(root)).toBe(`<div>loading</div>`)

await Promise.all(deps)
await nextTick()
expect(serializeInner(root)).toBe('<div>async2</div>')

viewRef.value = 0
await nextTick()
await Promise.all(deps)
expect(serializeInner(root)).toBe(`<div>async1</div>`)

viewRef.value = 1
await nextTick()
await Promise.all(deps)
expect(serializeInner(root)).toBe(`<div>async2</div>`)
})

// #6416 follow up / #10017
test('Suspense patched during HOC async component re-mount', async () => {
const key = ref('k')
Expand Down
10 changes: 9 additions & 1 deletion packages/runtime-core/src/components/KeepAlive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,15 @@ const KeepAliveImpl: ComponentOptions = {
const cacheSubtree = () => {
// fix #1621, the pendingCacheKey could be 0
if (pendingCacheKey != null) {
cache.set(pendingCacheKey, getInnerChild(instance.subTree))
// if KeepAlive child is a Suspense, it needs to be cached after Suspense resolves
// avoid caching vnode that not been mounted
if (isSuspense(instance.subTree.type)) {
queuePostRenderEffect(() => {
cache.set(pendingCacheKey!, getInnerChild(instance.subTree))
}, instance.subTree.suspense)
} else {
cache.set(pendingCacheKey, getInnerChild(instance.subTree))
}
}
}
onMounted(cacheSubtree)
Expand Down

0 comments on commit 07764fe

Please sign in to comment.