Skip to content

Commit

Permalink
fix(ssr): fix hydration error for slot outlet inside transition-group (
Browse files Browse the repository at this point in the history
  • Loading branch information
edison1105 authored Dec 30, 2023
1 parent c3fd577 commit 6cb00ed
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 3 deletions.
16 changes: 16 additions & 0 deletions packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -127,4 +127,20 @@ describe('ssr: <slot>', () => {
}"
`)
})

test('inside transition-group', () => {
const { code } = compile(
`<TransitionGroup tag="div"><slot/></TransitionGroup>`,
)
expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
expect(code).toMatchInlineSnapshot(`
"const { ssrRenderSlotInner: _ssrRenderSlotInner, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
_ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
_push(\`</div>\`)
}"
`)
})
})
10 changes: 7 additions & 3 deletions packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
NodeTypes,
type SlotOutletNode,
TRANSITION,
TRANSITION_GROUP,
createCallExpression,
createFunctionExpression,
isSlotOutlet,
Expand Down Expand Up @@ -37,16 +38,19 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {

let method = SSR_RENDER_SLOT

// #3989
// #3989, #9933
// check if this is a single slot inside a transition wrapper - since
// transition will unwrap the slot fragment into a single vnode at runtime,
// transition/transition-group will unwrap the slot fragment into vnode(s) at runtime,
// we need to avoid rendering the slot as a fragment.
const parent = context.parent
let componentType
if (
parent &&
parent.type === NodeTypes.ELEMENT &&
parent.tagType === ElementTypes.COMPONENT &&
resolveComponentType(parent, context, true) === TRANSITION &&
((componentType = resolveComponentType(parent, context, true)) ===
TRANSITION ||
componentType === TRANSITION_GROUP) &&
parent.children.filter(c => c.type === NodeTypes.ELEMENT).length === 1
) {
method = SSR_RENDER_SLOT_INNER
Expand Down

0 comments on commit 6cb00ed

Please sign in to comment.