fix(ssr): don't render comments in TransitionGroup (#11961)

close #11958
vuejs · Sep 20, 2024 · a2f6ede · a2f6ede
1 parent 6224288
commit a2f6ede
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -39,7 +39,7 @@ describe('transition-group', () => {
   })
 
   // #11514
-  test('with static tag + comment', () => {
+  test('with static tag + v-if comment', () => {
     expect(
       compile(
         `<transition-group tag="ul"><div v-for="i in list"/><div v-if="false"></div></transition-group>`,
@@ -60,6 +60,25 @@ describe('transition-group', () => {
     `)
   })
 
+  // #11958
+  test('with static tag + comment', () => {
+    expect(
+      compile(
+        `<transition-group tag="ul"><div v-for="i in list"/><!--test--></transition-group>`,
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+
+      return function ssrRender(_ctx, _push, _parent, _attrs) {
+        _push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
+        _ssrRenderList(_ctx.list, (i) => {
+          _push(\`<div></div>\`)
+        })
+        _push(\`</ul>\`)
+      }"
+    `)
+  })
+
   test('with dynamic tag', () => {
     expect(
       compile(

diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -156,7 +156,7 @@ export function processChildren(
   context: SSRTransformContext,
   asFragment = false,
   disableNestedFragments = false,
-  disableCommentAsIfAlternate = false,
+  disableComment = false,
 ): void {
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
@@ -197,7 +197,9 @@ export function processChildren(
       case NodeTypes.COMMENT:
         // no need to escape comment here because the AST can only
         // contain valid comments.
-        context.pushStringPart(`<!--${child.content}-->`)
+        if (!disableComment) {
+          context.pushStringPart(`<!--${child.content}-->`)
+        }
         break
       case NodeTypes.INTERPOLATION:
         context.pushStringPart(
@@ -207,12 +209,7 @@ export function processChildren(
         )
         break
       case NodeTypes.IF:
-        ssrProcessIf(
-          child,
-          context,
-          disableNestedFragments,
-          disableCommentAsIfAlternate,
-        )
+        ssrProcessIf(child, context, disableNestedFragments, disableComment)
         break
       case NodeTypes.FOR:
         ssrProcessFor(child, context, disableNestedFragments)

diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -27,7 +27,7 @@ export function ssrProcessIf(
   node: IfNode,
   context: SSRTransformContext,
   disableNestedFragments = false,
-  disableCommentAsIfAlternate = false,
+  disableComment = false,
 ): void {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
@@ -56,7 +56,7 @@ export function ssrProcessIf(
     }
   }
 
-  if (!currentIf.alternate && !disableCommentAsIfAlternate) {
+  if (!currentIf.alternate && !disableComment) {
     currentIf.alternate = createBlockStatement([
       createCallExpression(`_push`, ['`<!---->`']),
     ])