root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 10 Packages Projects Releases Wiki Activity

fix(ssr): handle transition slots rendering by adding comment nodes
ci / test (push) Has been cancelled Details
ci / continuous-release (push) Has been cancelled Details

This commit is contained in:
daiwei 2025-06-07 08:30:09 +08:00
parent c4e3d00bd7
commit 8f82270fe1
2 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
packages/server-renderer/__tests__/ssrSlot.spec.ts
View File

@ -111,68 +111,106 @@ describe('ssr: slot', () => {
})
test('transition slot', async () => {
const ReusableTransition = {
template: `<transition><slot/></transition>`,
}
const ReusableTransitionWithAppear = {
template: `<transition appear><slot/></transition>`,
}
expect(
await renderToString(
createApp({
components: {
one: {
template: `<transition><slot/></transition>`,
},
one: ReusableTransition,
},
template: `<one><div v-if="false">foo</div></one>`,
}),
),
).toBe(`<!---->`)
expect(
await renderToString(
createApp({
template: `<transition><slot/></transition>`,
}),
),
).toBe(`<!---->`)
expect(await renderToString(createApp(ReusableTransition))).toBe(`<!---->`)
expect(await renderToString(createApp(ReusableTransitionWithAppear))).toBe(
`<template><!----></template>`,
)
expect(
await renderToString(
createApp({
components: {
one: {
template: `<transition><slot/></transition>`,
},
one: ReusableTransition,
},
template: `<one><slot/></one>`,
}),
),
).toBe(`<!---->`)
expect(
await renderToString(
createApp({
template: `<transition appear><slot/></transition>`,
}),
),
).toBe(`<template><!----></template>`)
expect(
await renderToString(
createApp({
components: {
one: {
template: `<transition appear><slot/></transition>`,
},
one: ReusableTransitionWithAppear,
},
template: `<one><slot/></one>`,
}),
),
).toBe(`<template><!----></template>`)
expect(
await renderToString(
createApp({
render() {
return h(ReusableTransition, null, {
default: () => null,
})
},
}),
),
).toBe(`<!---->`)
expect(
await renderToString(
createApp({
render() {
return h(ReusableTransitionWithAppear, null, {
default: () => null,
})
},
}),
),
).toBe(`<template><!----></template>`)
expect(
await renderToString(
createApp({
render() {
return h(ReusableTransitionWithAppear, null, {
default: () => [],
})
},
}),
),
).toBe(`<template><!----></template>`)
expect(
await renderToString(
createApp({
render() {
return h(ReusableTransition, null, {
default: () => [],
})
},
}),
),
).toBe(`<!---->`)
expect(
await renderToString(
createApp({
components: {
one: {
template: `<transition><slot/></transition>`,
},
one: ReusableTransition,
},
template: `<one><div v-if="true">foo</div></one>`,
}),

2
packages/server-renderer/src/helpers/ssrRenderSlot.ts
View File

@ -74,6 +74,8 @@ export function ssrRenderSlotInner(
)
} else if (fallbackRenderFn) {
fallbackRenderFn()
} else if (transition) {
push(`<!---->`)
}
} else {
// ssr slot.