From 5a9626708e970c6fc0b6f786e3c80c22273d126f Mon Sep 17 00:00:00 2001
From: Jonas <mail@jonaskuske.com>
Date: Mon, 15 Apr 2024 15:26:19 +0200
Subject: [PATCH] fix(ssr): don't render v-if comments in TransitionGroup
 (#6732)

close #6715
---
 .../compiler-ssr/__tests__/ssrTransitionGroup.spec.ts    | 2 --
 packages/compiler-ssr/src/ssrCodegenTransform.ts         | 8 +++++++-
 .../src/transforms/ssrTransformTransitionGroup.ts        | 9 ++++++++-
 packages/compiler-ssr/src/transforms/ssrVIf.ts           | 3 ++-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index d2a576fd02a..905e6a4895d 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -82,8 +82,6 @@ describe('transition-group', () => {
         })
         if (_ctx.ok) {
           _push(\`<div>ok</div>\`)
-        } else {
-          _push(\`<!---->\`)
         }
         _push(\`<!--]-->\`)
       }"
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index 1755be3a3b0..53a7a060510 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -141,6 +141,7 @@ export function processChildren(
   context: SSRTransformContext,
   asFragment = false,
   disableNestedFragments = false,
+  disableCommentAsIfAlternate = false,
 ) {
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
@@ -191,7 +192,12 @@ export function processChildren(
         )
         break
       case NodeTypes.IF:
-        ssrProcessIf(child, context, disableNestedFragments)
+        ssrProcessIf(
+          child,
+          context,
+          disableNestedFragments,
+          disableCommentAsIfAlternate,
+        )
         break
       case NodeTypes.FOR:
         ssrProcessFor(child, context, disableNestedFragments)
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
index 2d434010e2a..a2e284ae841 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
@@ -87,6 +87,13 @@ export function ssrProcessTransitionGroup(
          * by disabling nested fragment wrappers from being generated.
          */
         true,
+        /**
+         * TransitionGroup filters out comment children at runtime and thus
+         * doesn't expect comments to be present during hydration. We need to
+         * account for that by disabling the empty comment that is otherwise
+         * rendered for a falsy v-if that has no v-else specified. (#6715)
+         */
+        true,
       )
       context.pushStringPart(`</`)
       context.pushStringPart(tag.exp!)
@@ -106,6 +113,6 @@ export function ssrProcessTransitionGroup(
     }
   } else {
     // fragment
-    processChildren(node, context, true, true)
+    processChildren(node, context, true, true, true)
   }
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
index 32a5a7c00f1..b30846c1eeb 100644
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -26,6 +26,7 @@ export function ssrProcessIf(
   node: IfNode,
   context: SSRTransformContext,
   disableNestedFragments = false,
+  disableCommentAsIfAlternate = false,
 ) {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
@@ -54,7 +55,7 @@ export function ssrProcessIf(
     }
   }
 
-  if (!currentIf.alternate) {
+  if (!currentIf.alternate && !disableCommentAsIfAlternate) {
     currentIf.alternate = createBlockStatement([
       createCallExpression(`_push`, ['`<!---->`']),
     ])