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

fix vuejs#6715
jonaskuske · Sep 23, 2022 · 188b108 · 188b108
1 parent fbd697a
commit 188b108
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -137,7 +137,8 @@ export function processChildren(
  parent: Container,
  context: SSRTransformContext,
  asFragment = false,
- disableNestedFragments = false
+ disableNestedFragments = false,
+ disableCommentAsIfAlternate = false
 ) {
  if (asFragment) {
  context.pushStringPart(`<!--[-->`)
@@ -186,7 +187,7 @@ 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
@@ -78,6 +78,13 @@ export function ssrProcessTransitionGroup(
  * be patched using the same key map) so we need to account for that here
  * 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(`</`)
@@ -95,6 +102,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
@@ -25,7 +25,8 @@ export const ssrTransformIf = createStructuralDirectiveTransform(
 export function ssrProcessIf(
  node: IfNode,
  context: SSRTransformContext,
- disableNestedFragments = false
+ 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`, ['`<!---->`'])
  ])