refactor(compiler): use shorter helpers for text and comment nodes

2019-10-24 17:55:00 -04:00
parent eb20730a67
commit 1c0a2c6d41
19 changed files with 126 additions and 108 deletions
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -29,13 +29,13 @@ import {
 } from './utils'
 import { isString, isArray, isSymbol } from '@vue/shared'
 import {
+  helperNameMap,
  TO_STRING,
  CREATE_VNODE,
-  COMMENT,
-  helperNameMap,
  RESOLVE_COMPONENT,
  RESOLVE_DIRECTIVE,
-  SET_BLOCK_TRACKING
+  SET_BLOCK_TRACKING,
+  CREATE_COMMENT
 } from './runtimeHelpers'

 type CodegenNode = TemplateChildNode | JSChildNode
@@ -212,9 +212,17 @@ export function generate(
        // has check cost, but hoists are lifted out of the function - we need
        // to provide the helper here.
        if (ast.hoists.length) {
-          push(`const _${helperNameMap[CREATE_VNODE]} = Vue.createVNode\n`)
-          if (ast.helpers.includes(COMMENT)) {
-            push(`const _${helperNameMap[COMMENT]} = Vue.Comment\n`)
+          push(
+            `const _${helperNameMap[CREATE_VNODE]} = Vue.${
+              helperNameMap[CREATE_VNODE]
+            }\n`
+          )
+          if (ast.helpers.includes(CREATE_COMMENT)) {
+            push(
+              `const _${helperNameMap[CREATE_COMMENT]} = Vue.${
+                helperNameMap[CREATE_COMMENT]
+              }\n`
+            )
          }
        }
      }
@@ -502,12 +510,7 @@ function genExpressionAsPropertyKey(
 function genComment(node: CommentNode, context: CodegenContext) {
  if (__DEV__) {
    const { push, helper } = context
-    push(
-      `${helper(CREATE_VNODE)}(${helper(COMMENT)}, null, ${JSON.stringify(
-        node.content
-      )})`,
-      node
-    )
+    push(`${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`, node)
  }
 }

--- a/packages/compiler-core/src/parse.ts
+++ b/packages/compiler-core/src/parse.ts
@@ -218,15 +218,16 @@ function parseChildren(
          const next = nodes[i + 1]
          // If:
          // - the whitespace is the first or last node, or:
-          // - the whitespace contains newline AND is between two element or comments
+          // - the whitespace is adjacent to a comment, or:
+          // - the whitespace is between two elements AND contains newline
          // Then the whitespace is ignored.
          if (
            !prev ||
            !next ||
-            ((prev.type === NodeTypes.ELEMENT ||
-              prev.type === NodeTypes.COMMENT) &&
-              (next.type === NodeTypes.ELEMENT ||
-                next.type === NodeTypes.COMMENT) &&
+            prev.type === NodeTypes.COMMENT ||
+            next.type === NodeTypes.COMMENT ||
+            (prev.type === NodeTypes.ELEMENT &&
+              next.type === NodeTypes.ELEMENT &&
              /[\r\n]/.test(node.content))
          ) {
            removedWhitespace = true
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -1,11 +1,11 @@
 export const FRAGMENT = Symbol(__DEV__ ? `Fragment` : ``)
 export const PORTAL = Symbol(__DEV__ ? `Portal` : ``)
-export const COMMENT = Symbol(__DEV__ ? `Comment` : ``)
-export const TEXT = Symbol(__DEV__ ? `Text` : ``)
 export const SUSPENSE = Symbol(__DEV__ ? `Suspense` : ``)
 export const OPEN_BLOCK = Symbol(__DEV__ ? `openBlock` : ``)
 export const CREATE_BLOCK = Symbol(__DEV__ ? `createBlock` : ``)
 export const CREATE_VNODE = Symbol(__DEV__ ? `createVNode` : ``)
+export const CREATE_COMMENT = Symbol(__DEV__ ? `createCommentVNode` : ``)
+export const CREATE_TEXT = Symbol(__DEV__ ? `createTextVNode` : ``)
 export const RESOLVE_COMPONENT = Symbol(__DEV__ ? `resolveComponent` : ``)
 export const RESOLVE_DYNAMIC_COMPONENT = Symbol(
  __DEV__ ? `resolveDynamicComponent` : ``
@@ -27,12 +27,12 @@ export const SET_BLOCK_TRACKING = Symbol(__DEV__ ? `setBlockTracking` : ``)
 export const helperNameMap: any = {
  [FRAGMENT]: `Fragment`,
  [PORTAL]: `Portal`,
-  [COMMENT]: `Comment`,
-  [TEXT]: `Text`,
  [SUSPENSE]: `Suspense`,
  [OPEN_BLOCK]: `openBlock`,
  [CREATE_BLOCK]: `createBlock`,
  [CREATE_VNODE]: `createVNode`,
+  [CREATE_COMMENT]: `createCommentVNode`,
+  [CREATE_TEXT]: `createTextVNode`,
  [RESOLVE_COMPONENT]: `resolveComponent`,
  [RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`,
  [RESOLVE_DIRECTIVE]: `resolveDirective`,
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -21,12 +21,11 @@ import { isString, isArray } from '@vue/shared'
 import { CompilerError, defaultOnError } from './errors'
 import {
  TO_STRING,
-  COMMENT,
-  CREATE_VNODE,
  FRAGMENT,
  helperNameMap,
  WITH_DIRECTIVES,
-  CREATE_BLOCK
+  CREATE_BLOCK,
+  CREATE_COMMENT
 } from './runtimeHelpers'
 import { isVSlot, createBlockExpression } from './utils'
 import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic'
@@ -346,8 +345,7 @@ export function traverseNode(
    case NodeTypes.COMMENT:
      // inject import for the Comment symbol, which is needed for creating
      // comment nodes with `createVNode`
-      context.helper(CREATE_VNODE)
-      context.helper(COMMENT)
+      context.helper(CREATE_COMMENT)
      break
    case NodeTypes.INTERPOLATION:
      // no need to traverse, but we need to inject toString helper
--- a/packages/compiler-core/src/transforms/transformText.ts
+++ b/packages/compiler-core/src/transforms/transformText.ts
@@ -5,9 +5,10 @@ import {
  TextNode,
  InterpolationNode,
  CompoundExpressionNode,
-  createCallExpression
+  createCallExpression,
+  CallExpression
 } from '../ast'
-import { TEXT, CREATE_VNODE } from '../runtimeHelpers'
+import { CREATE_TEXT } from '../runtimeHelpers'
 import { PatchFlags, PatchFlagNames } from '@vue/shared'

 const isText = (
@@ -54,11 +55,17 @@ export const transformText: NodeTransform = (node, context) => {

      if (hasText && children.length > 1) {
        // when an element has mixed text/element children, convert text nodes
-        // into createVNode(Text) calls.
+        // into createTextVNode(text) calls.
        for (let i = 0; i < children.length; i++) {
          const child = children[i]
          if (isText(child) || child.type === NodeTypes.COMPOUND_EXPRESSION) {
-            const callArgs = [context.helper(TEXT), `null`, child]
+            const callArgs: CallExpression['arguments'] = []
+            // createTextVNode defaults to single whitespace, so if it is a
+            // single space the code could be an empty call to save bytes.
+            if (child.type !== NodeTypes.TEXT || child.content !== ' ') {
+              callArgs.push(child)
+            }
+            // mark dynamic text with flag so it gets patched inside a block
            if (child.type !== NodeTypes.TEXT) {
              callArgs.push(
                `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
@@ -69,7 +76,7 @@ export const transformText: NodeTransform = (node, context) => {
              content: child,
              loc: child.loc,
              codegenNode: createCallExpression(
-                context.helper(CREATE_VNODE),
+                context.helper(CREATE_TEXT),
                callArgs
              )
            }
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -30,10 +30,10 @@ import { processExpression } from './transformExpression'
 import {
  OPEN_BLOCK,
  CREATE_BLOCK,
-  COMMENT,
  FRAGMENT,
  WITH_DIRECTIVES,
-  CREATE_VNODE
+  CREATE_VNODE,
+  CREATE_COMMENT
 } from '../runtimeHelpers'
 import { injectProp } from '../utils'

@@ -152,9 +152,7 @@ function createCodegenNodeForBranch(
    return createConditionalExpression(
      branch.condition,
      createChildrenCodegenNode(branch, index, context),
-      createCallExpression(context.helper(CREATE_BLOCK), [
-        context.helper(COMMENT)
-      ])
+      createCallExpression(context.helper(CREATE_COMMENT))
    ) as IfConditionalExpression
  } else {
    return createChildrenCodegenNode(branch, index, context) as BlockCodegenNode