refactor(fragments): remove visible anchors for fragments

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -9,7 +9,6 @@ import {
   ElementTypes,
   createBlockStatement,
   CompilerOptions,
-  isText,
   IfStatement,
   CallExpression
 } from '@vue/compiler-dom'
@@ -29,9 +28,7 @@ import { ssrProcessElement } from './transforms/ssrTransformElement'
 
 export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
   const context = createSSRTransformContext(ast, options)
-  const isFragment =
-    ast.children.length > 1 && ast.children.some(c => !isText(c))
-  processChildren(ast.children, context, isFragment)
+  processChildren(ast.children, context)
   ast.codegenNode = createBlockStatement(context.body)
 
   // Finalize helpers.
@@ -107,12 +104,8 @@ function createChildContext(
 
 export function processChildren(
   children: TemplateChildNode[],
-  context: SSRTransformContext,
-  asFragment = false
+  context: SSRTransformContext
 ) {
-  if (asFragment) {
-    context.pushStringPart(`<!---->`)
-  }
   for (let i = 0; i < children.length; i++) {
     const child = children[i]
     if (child.type === NodeTypes.ELEMENT) {
@@ -135,18 +128,14 @@ export function processChildren(
       ssrProcessFor(child, context)
     }
   }
-  if (asFragment) {
-    context.pushStringPart(`<!---->`)
-  }
 }
 
 export function processChildrenAsStatement(
   children: TemplateChildNode[],
   parentContext: SSRTransformContext,
-  asFragment = false,
   withSlotScopeId = parentContext.withSlotScopeId
 ): BlockStatement {
   const childContext = createChildContext(parentContext, withSlotScopeId)
-  processChildren(children, childContext, asFragment)
+  processChildren(children, childContext)
   return createBlockStatement(childContext.body)
 }

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

@@ -12,8 +12,6 @@ import {
   FunctionExpression,
   TemplateChildNode,
   PORTAL,
-  SUSPENSE,
-  TRANSITION_GROUP,
   createIfStatement,
   createSimpleExpression,
   getBaseTransformPreset,
@@ -135,14 +133,10 @@ export function ssrProcessComponent(
     // this is a built-in component that fell-through.
     // just render its children.
     const component = componentTypeMap.get(node)!
-
     if (component === PORTAL) {
       return ssrProcessPortal(node, context)
     }
-
-    const needFragmentWrapper =
-      component === SUSPENSE || component === TRANSITION_GROUP
-    processChildren(node.children, context, needFragmentWrapper)
+    processChildren(node.children, context)
   } else {
     // finish up slot function expressions from the 1st pass.
     const wipEntries = wipMap.get(node) || []
@@ -157,7 +151,6 @@ export function ssrProcessComponent(
         processChildrenAsStatement(
           children,
           context,
-          false,
           true /* withSlotScopeId */
         ),
         vnodeBranch

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

@@ -4,8 +4,7 @@ import {
   processFor,
   createCallExpression,
   createFunctionExpression,
-  createForLoopParams,
-  NodeTypes
+  createForLoopParams
 } from '@vue/compiler-dom'
 import {
   SSRTransformContext,
@@ -22,24 +21,14 @@ export const ssrTransformFor = createStructuralDirectiveTransform(
 // This is called during the 2nd transform pass to construct the SSR-sepcific
 // codegen nodes.
 export function ssrProcessFor(node: ForNode, context: SSRTransformContext) {
-  const needFragmentWrapper =
-    node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT
   const renderLoop = createFunctionExpression(
     createForLoopParams(node.parseResult)
   )
-  renderLoop.body = processChildrenAsStatement(
-    node.children,
-    context,
-    needFragmentWrapper
-  )
-
-  // v-for always renders a fragment
-  context.pushStringPart(`<!---->`)
+  renderLoop.body = processChildrenAsStatement(node.children, context)
   context.pushStatement(
     createCallExpression(context.helper(SSR_RENDER_LIST), [
       node.source,
       renderLoop
     ])
   )
-  context.pushStringPart(`<!---->`)
 }

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

@@ -4,10 +4,7 @@ import {
   IfNode,
   createIfStatement,
   createBlockStatement,
-  createCallExpression,
-  IfBranchNode,
-  BlockStatement,
-  NodeTypes
+  createCallExpression
 } from '@vue/compiler-dom'
 import {
   SSRTransformContext,
@@ -26,14 +23,17 @@ export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
     rootBranch.condition!,
-    processIfBranch(rootBranch, context)
+    processChildrenAsStatement(rootBranch.children, context)
   )
   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 = processChildrenAsStatement(
+      branch.children,
+      context
+    )
     if (branch.condition) {
       // else-if
       currentIf = currentIf.alternate = createIfStatement(
@@ -52,15 +52,3 @@ export function ssrProcessIf(node: IfNode, context: SSRTransformContext) {
     ])
   }
 }
-
-function processIfBranch(
-  branch: IfBranchNode,
-  context: SSRTransformContext
-): BlockStatement {
-  const { children } = branch
-  const needFragmentWrapper =
-    (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)
-  return processChildrenAsStatement(children, context, needFragmentWrapper)
-}