fix(compiler-ssr): generate correct children for transition-group

fix #2510

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -128,7 +128,8 @@ function createChildContext(
 export function processChildren(
   children: TemplateChildNode[],
   context: SSRTransformContext,
-  asFragment = false
+  asFragment = false,
+  disableNestedFragments = false
 ) {
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
@@ -176,10 +177,10 @@ export function processChildren(
         )
         break
       case NodeTypes.IF:
-        ssrProcessIf(child, context)
+        ssrProcessIf(child, context, disableNestedFragments)
         break
       case NodeTypes.FOR:
-        ssrProcessFor(child, context)
+        ssrProcessFor(child, context, disableNestedFragments)
         break
       case NodeTypes.IF_BRANCH:
         // no-op - handled by ssrProcessIf

packages/compiler-ssr/src/transforms/ssrTransformComponent.ts

@@ -46,6 +46,7 @@ import {
   ssrProcessSuspense,
   ssrTransformSuspense
 } from './ssrTransformSuspense'
+import { ssrProcessTransitionGroup } from './ssrTransformTransitionGroup'
 import { isSymbol, isObject, isArray } from '@vue/shared'
 
 // We need to construct the slot functions in the 1st pass to ensure proper
@@ -176,9 +177,11 @@ export function ssrProcessComponent(
       return ssrProcessTeleport(node, context)
     } else if (component === SUSPENSE) {
       return ssrProcessSuspense(node, context)
+    } else if (component === TRANSITION_GROUP) {
+      return ssrProcessTransitionGroup(node, context)
     } else {
       // real fall-through (e.g. KeepAlive): just render its children.
-      processChildren(node.children, context, component === TRANSITION_GROUP)
+      processChildren(node.children, context)
     }
   } else {
     // finish up slot function expressions from the 1st pass.

packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts

@@ -0,0 +1,41 @@
+import { ComponentNode, findProp, NodeTypes } from '@vue/compiler-dom'
+import { processChildren, SSRTransformContext } from '../ssrCodegenTransform'
+
+export function ssrProcessTransitionGroup(
+  node: ComponentNode,
+  context: SSRTransformContext
+) {
+  const tag = findProp(node, 'tag')
+  if (tag) {
+    if (tag.type === NodeTypes.DIRECTIVE) {
+      // dynamic :tag
+      context.pushStringPart(`<`)
+      context.pushStringPart(tag.exp!)
+      context.pushStringPart(`>`)
+
+      processChildren(
+        node.children,
+        context,
+        false,
+        /**
+         * TransitionGroup has the special runtime behavior of flattening and
+         * concatenating all children into a single fragment (in order for them to
+         * be pathced using the same key map) so we need to account for that here
+         * by disabling nested fragment wrappers from being generated.
+         */
+        true
+      )
+      context.pushStringPart(`</`)
+      context.pushStringPart(tag.exp!)
+      context.pushStringPart(`>`)
+    } else {
+      // static tag
+      context.pushStringPart(`<${tag.value!.content}>`)
+      processChildren(node.children, context, false, true)
+      context.pushStringPart(`</${tag.value!.content}>`)
+    }
+  } else {
+    // fragment
+    processChildren(node.children, context, true, true)
+  }
+}

packages/compiler-ssr/src/transforms/ssrVFor.ts

@@ -21,9 +21,14 @@ export const ssrTransformFor = createStructuralDirectiveTransform(
 
 // This is called during the 2nd transform pass to construct the SSR-specific
 // codegen nodes.
-export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
+export function ssrProcessFor(
+  node: ForNode,
+  context: SSRTransformContext,
+  disableNestedFragments = false
+) {
   const needFragmentWrapper =
-    node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT
+    !disableNestedFragments &&
+    (node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT)
   const renderLoop = createFunctionExpression(
     createForLoopParams(node.parseResult)
   )
@@ -32,13 +37,17 @@ export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
     context,
     needFragmentWrapper
   )
-  // v-for always renders a fragment
-  context.pushStringPart(`<!--[-->`)
+  // v-for always renders a fragment unless explicitly disabled
+  if (!disableNestedFragments) {
+    context.pushStringPart(`<!--[-->`)
+  }
   context.pushStatement(
     createCallExpression(context.helper(SSR_RENDER_LIST), [
       node.source,
       renderLoop
     ])
   )
-  context.pushStringPart(`<!--]-->`)
+  if (!disableNestedFragments) {
+    context.pushStringPart(`<!--]-->`)
+  }
 }

packages/compiler-ssr/src/transforms/ssrVIf.ts

@@ -22,18 +22,26 @@ export const ssrTransformIf = createStructuralDirectiveTransform(
 
 // This is called during the 2nd transform pass to construct the SSR-specific
 // codegen nodes.
-export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
+export function ssrProcessIf(
+  node: IfNode,
+  context: SSRTransformContext,
+  disableNestedFragments = false
+) {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
     rootBranch.condition!,
-    processIfBranch(rootBranch, context)
+    processIfBranch(rootBranch, context, disableNestedFragments)
   )
   context.pushStatement(ifStatement)
 
   let currentIf = ifStatement
   for (let i = 1; i < node.branches.length; i++) {
     const branch = node.branches[i]
-    const branchBlockStatement = processIfBranch(branch, context)
+    const branchBlockStatement = processIfBranch(
+      branch,
+      context,
+      disableNestedFragments
+    )
     if (branch.condition) {
       // else-if
       currentIf = currentIf.alternate = createIfStatement(
@@ -55,10 +63,12 @@ export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
 
 function processIfBranch(
   branch: IfBranchNode,
-  context: SSRTransformContext
+  context: SSRTransformContext,
+  disableNestedFragments = false
 ): BlockStatement {
   const { children } = branch
   const needFragmentWrapper =
+    !disableNestedFragments &&
     (children.length !== 1 || children[0].type !== NodeTypes.ELEMENT) &&
     // optimize away nested fragments when the only child is a ForNode
     !(children.length === 1 && children[0].type === NodeTypes.FOR)