Skip to content

Commit f1a4f67

Browse files
authored
fix(transition/ssr): make transition appear work with Suspense in SSR (#12047)
close #12046
1 parent e0a591e commit f1a4f67

File tree

2 files changed

+34
-1
lines changed

2 files changed

+34
-1
lines changed

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

+30
Original file line numberDiff line numberDiff line change
@@ -1613,6 +1613,36 @@ describe('SSR hydration', () => {
16131613
`)
16141614
})
16151615

1616+
test('Suspense + transition appear', async () => {
1617+
const { vnode, container } = mountWithHydration(
1618+
`<template><div>foo</div></template>`,
1619+
() =>
1620+
h(Suspense, {}, () =>
1621+
h(
1622+
Transition,
1623+
{ appear: true },
1624+
{
1625+
default: () => h('div', 'foo'),
1626+
},
1627+
),
1628+
),
1629+
)
1630+
1631+
expect(vnode.el).toBe(container.firstChild)
1632+
// wait for hydration to finish
1633+
await new Promise(r => setTimeout(r))
1634+
1635+
expect(container.firstChild).toMatchInlineSnapshot(`
1636+
<div
1637+
class="v-enter-from v-enter-active"
1638+
>
1639+
foo
1640+
</div>
1641+
`)
1642+
await nextTick()
1643+
expect(vnode.el).toBe(container.firstChild)
1644+
})
1645+
16161646
// #10607
16171647
test('update component stable slot (prod + optimized mode)', async () => {
16181648
__DEV__ = false

packages/runtime-core/src/hydration.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,10 @@ export function createHydrationFunctions(
385385
let needCallTransitionHooks = false
386386
if (isTemplateNode(el)) {
387387
needCallTransitionHooks =
388-
needTransition(parentSuspense, transition) &&
388+
needTransition(
389+
null, // no need check parentSuspense in hydration
390+
transition,
391+
) &&
389392
parentComponent &&
390393
parentComponent.vnode.props &&
391394
parentComponent.vnode.props.appear

0 commit comments

Comments
 (0)