Skip to content

Commit

Permalink
fix(ssr): hydration for transition wrapper components with empty slot…
Browse files Browse the repository at this point in the history
… content (#5995)

fix #5991
  • Loading branch information
liulinboyi authored Jun 6, 2022
1 parent 0cf9ae6 commit eb22a62
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 6 deletions.
2 changes: 1 addition & 1 deletion packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ describe('ssr: <slot>', () => {
"const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
_ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true)
}"
`)
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
parent.children.filter(c => c.type === NodeTypes.ELEMENT).length === 1
) {
method = SSR_RENDER_SLOT_INNER
if (!(context.scopeId && context.slotted !== false)) {
args.push('null')
}
args.push('true')
}

node.ssrCodegenNode = createCallExpression(context.helper(method), args)
Expand Down
28 changes: 28 additions & 0 deletions packages/server-renderer/__tests__/ssrSlot.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,4 +113,32 @@ describe('ssr: slot', () => {
`<div><!--[--><!--[--><div>one</div><div>two</div><!--]--><!--]--></div>`
)
})

test('transition slot', async () => {
expect(
await renderToString(
createApp({
components: {
one: {
template: `<transition><slot/></transition>`
}
},
template: `<one><div v-if="false">foo</div></one>`
})
)
).toBe(`<!---->`)

expect(
await renderToString(
createApp({
components: {
one: {
template: `<transition><slot/></transition>`
}
},
template: `<one><div v-if="true">foo</div></one>`
})
)
).toBe(`<div>foo</div>`)
})
})
15 changes: 10 additions & 5 deletions packages/server-renderer/src/helpers/ssrRenderSlot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ export function ssrRenderSlotInner(
fallbackRenderFn: (() => void) | null,
push: PushFn,
parentComponent: ComponentInternalInstance,
slotScopeId?: string
slotScopeId?: string,
transition?: boolean
) {
const slotFn = slots[slotName]
if (slotFn) {
Expand All @@ -61,10 +62,14 @@ export function ssrRenderSlotInner(
// ssr slot.
// check if the slot renders all comments, in which case use the fallback
let isEmptySlot = true
for (let i = 0; i < slotBuffer.length; i++) {
if (!isComment(slotBuffer[i])) {
isEmptySlot = false
break
if (transition) {
isEmptySlot = false
} else {
for (let i = 0; i < slotBuffer.length; i++) {
if (!isComment(slotBuffer[i])) {
isEmptySlot = false
break
}
}
}
if (isEmptySlot) {
Expand Down

0 comments on commit eb22a62

Please sign in to comment.