fix(ssr): don't render v-if comments in TransitionGroup (vuejs#6732)

close vuejs#6715
lynxlangya · May 30, 2024 · 865ac7f · 865ac7f
1 parent a0a0140
commit 865ac7f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`, ['`<!---->`']),
     ])