fix(ssr): handle transition slots rendering by adding comment nodes

Author: edison1105

packages/server-renderer/__tests__/ssrSlot.spec.ts

@@ -111,23 +111,38 @@ 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(ReusableTransition))).toBe(`<!---->`)
+
+    expect(await renderToString(createApp(ReusableTransitionWithAppear))).toBe(
+      `<template><!----></template>`,
+    )
+
     expect(
       await renderToString(
         createApp({
-          template: `<transition><slot/></transition>`,
+          components: {
+            one: ReusableTransition,
+          },
+          template: `<one><slot/></one>`,
         }),
       ),
     ).toBe(`<!---->`)
@@ -136,43 +151,66 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components: {
-            one: {
-              template: `<transition><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({
-          template: `<transition appear><slot/></transition>`,
+          render() {
+            return h(ReusableTransitionWithAppear, null, {
+              default: () => null,
+            })
+          },
         }),
       ),
     ).toBe(`<template><!----></template>`)
 
     expect(
       await renderToString(
         createApp({
-          components: {
-            one: {
-              template: `<transition appear><slot/></transition>`,
-            },
+          render() {
+            return h(ReusableTransitionWithAppear, null, {
+              default: () => [],
+            })
           },
-          template: `<one><slot/></one>`,
         }),
       ),
     ).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>`,
         }),

packages/server-renderer/src/helpers/ssrRenderSlot.ts

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