refactor(fragments): remove visible anchors for fragments

2020-02-26 16:32:06 -05:00
parent 439752822c
commit 11d2fb2594
19 changed files with 95 additions and 192 deletions
--- a/packages/compiler-ssr/tests/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/tests/ssrComponent.spec.ts
@@ -219,11 +219,11 @@ describe('ssr: components', () => {
            foo: ({ list }, _push, _parent, _scopeId) => {
              if (_push) {
                if (_ctx.ok) {
-                  _push(\`<div\${_scopeId}><!---->\`)
+                  _push(\`<div\${_scopeId}>\`)
                  _ssrRenderList(list, (i) => {
                    _push(\`<span\${_scopeId}></span>\`)
                  })
-                  _push(\`<!----></div>\`)
+                  _push(\`</div>\`)
                } else {
                  _push(\`<!---->\`)
                }
@@ -242,11 +242,11 @@ describe('ssr: components', () => {
            bar: ({ ok }, _push, _parent, _scopeId) => {
              if (_push) {
                if (ok) {
-                  _push(\`<div\${_scopeId}><!---->\`)
+                  _push(\`<div\${_scopeId}>\`)
                  _ssrRenderList(_ctx.list, (i) => {
                    _push(\`<span\${_scopeId}></span>\`)
                  })
-                  _push(\`<!----></div>\`)
+                  _push(\`</div>\`)
                } else {
                  _push(\`<!---->\`)
                }
@@ -283,7 +283,7 @@ describe('ssr: components', () => {
        .toMatchInlineSnapshot(`
        "
        return function ssrRender(_ctx, _push, _parent) {
-          _push(\`<!----><div></div><!---->\`)
+          _push(\`<div></div>\`)
        }"
      `)

@@ -305,7 +305,7 @@ describe('ssr: components', () => {
        .toMatchInlineSnapshot(`
        "
        return function ssrRender(_ctx, _push, _parent) {
-          _push(\`<!----><div></div><!---->\`)
+          _push(\`<div></div>\`)
        }"
      `)
    })
--- a/packages/compiler-ssr/tests/ssrVFor.spec.ts
+++ b/packages/compiler-ssr/tests/ssrVFor.spec.ts
@@ -6,11 +6,9 @@ describe('ssr: v-for', () => {
      "const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _push(\`<div></div>\`)
        })
-        _push(\`<!---->\`)
      }"
    `)
  })
@@ -21,11 +19,9 @@ describe('ssr: v-for', () => {
      "const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _push(\`<div>foo<span>bar</span></div>\`)
        })
-        _push(\`<!---->\`)
      }"
    `)
  })
@@ -41,9 +37,8 @@ describe('ssr: v-for', () => {
      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (row, i) => {
-          _push(\`<div><!---->\`)
+          _push(\`<div>\`)
          _ssrRenderList(row, (j) => {
            _push(\`<div>\${
              _ssrInterpolate(i)
@@ -51,9 +46,8 @@ describe('ssr: v-for', () => {
              _ssrInterpolate(j)
            }</div>\`)
          })
-          _push(\`<!----></div>\`)
+          _push(\`</div>\`)
        })
-        _push(\`<!---->\`)
      }"
    `)
  })
@@ -64,11 +58,9 @@ describe('ssr: v-for', () => {
      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
-          _push(\`<!---->\${_ssrInterpolate(i)}<!---->\`)
+          _push(\`\${_ssrInterpolate(i)}\`)
        })
-        _push(\`<!---->\`)
      }"
    `)
  })
@@ -81,11 +73,9 @@ describe('ssr: v-for', () => {
      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _push(\`<span>\${_ssrInterpolate(i)}</span>\`)
        })
-        _push(\`<!---->\`)
      }"
    `)
  })
@@ -99,15 +89,13 @@ describe('ssr: v-for', () => {
      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
-          _push(\`<!----><span>\${
+          _push(\`<span>\${
            _ssrInterpolate(i)
          }</span><span>\${
            _ssrInterpolate(i + 1)
-          }</span><!---->\`)
+          }</span>\`)
        })
-        _push(\`<!---->\`)
      }"
    `)
  })
@@ -123,11 +111,9 @@ describe('ssr: v-for', () => {
      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, ({ foo }, index) => {
          _push(\`<div>\${_ssrInterpolate(foo + _ctx.bar + index)}</div>\`)
        })
-        _push(\`<!---->\`)
      }"
    `)
  })
--- a/packages/compiler-ssr/tests/ssrVIf.spec.ts
+++ b/packages/compiler-ssr/tests/ssrVIf.spec.ts
@@ -80,7 +80,7 @@ describe('ssr: v-if', () => {
      "
      return function ssrRender(_ctx, _push, _parent) {
        if (_ctx.foo) {
-          _push(\`<!---->hello<!---->\`)
+          _push(\`hello\`)
        } else {
          _push(\`<!---->\`)
        }
@@ -110,7 +110,7 @@ describe('ssr: v-if', () => {
      "
      return function ssrRender(_ctx, _push, _parent) {
        if (_ctx.foo) {
-          _push(\`<!----><div>hi</div><div>ho</div><!---->\`)
+          _push(\`<div>hi</div><div>ho</div>\`)
        } else {
          _push(\`<!---->\`)
        }
@@ -126,11 +126,9 @@ describe('ssr: v-if', () => {

      return function ssrRender(_ctx, _push, _parent) {
        if (_ctx.foo) {
-          _push(\`<!---->\`)
          _ssrRenderList(_ctx.list, (i) => {
            _push(\`<div></div>\`)
          })
-          _push(\`<!---->\`)
        } else {
          _push(\`<!---->\`)
        }
@@ -147,7 +145,7 @@ describe('ssr: v-if', () => {
      "
      return function ssrRender(_ctx, _push, _parent) {
        if (_ctx.foo) {
-          _push(\`<!----><div>hi</div><div>ho</div><!---->\`)
+          _push(\`<div>hi</div><div>ho</div>\`)
        } else {
          _push(\`<div></div>\`)
        }
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/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)
 }
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/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
--- a/packages/compiler-ssr/src/transforms/ssrVFor.ts
+++ b/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(`<!---->`)
 }
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/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)
-}