test: test transformElements

packages/compiler-core/src/codegen.ts

@@ -147,6 +147,9 @@ export function generate(
   if (!prefixIdentifiers) {
     push(`with (this) {`)
     indent()
+  } else {
+    push(`const _ctx = this`)
+    newline()
   }
   push(`return `)
   genChildren(ast.children, context, true /* asRoot */)

packages/compiler-core/src/index.ts

@@ -5,10 +5,10 @@ import { RootNode } from './ast'
 import { isString } from '@vue/shared'
 import { transformIf } from './transforms/vIf'
 import { transformFor } from './transforms/vFor'
-import { prepareElementForCodegen } from './transforms/element'
+import { transformElement } from './transforms/transformElement'
 import { transformOn } from './transforms/vOn'
 import { transformBind } from './transforms/vBind'
-import { expressionTransform } from './transforms/expression'
+import { transformExpression } from './transforms/transformExpression'
 import { defaultOnError, createCompilerError, ErrorCodes } from './errors'
 
 export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions
@@ -32,8 +32,8 @@ export function compile(
     nodeTransforms: [
       transformIf,
       transformFor,
-      ...(prefixIdentifiers ? [expressionTransform] : []),
-      prepareElementForCodegen,
+      ...(prefixIdentifiers ? [transformExpression] : []),
+      transformElement,
       ...(options.nodeTransforms || []) // user transforms
     ],
     directiveTransforms: {
@@ -65,4 +65,6 @@ export { ErrorCodes, CompilerError, createCompilerError } from './errors'
 export * from './ast'
 
 // debug
-export { prepareElementForCodegen } from './transforms/element'
+export {
+  transformElement as prepareElementForCodegen
+} from './transforms/transformElement'

packages/compiler-core/src/runtimeConstants.ts

@@ -7,3 +7,4 @@ export const APPLY_DIRECTIVES = `applyDirectives`
 export const RENDER_LIST = `renderList`
 export const CAPITALIZE = `capitalize`
 export const TO_STRING = `toString`
+export const MERGE_PROPS = `mergeProps`

packages/compiler-core/src/transforms/transformElement.ts

@@ -20,13 +20,14 @@ import {
   CREATE_VNODE,
   APPLY_DIRECTIVES,
   RESOLVE_DIRECTIVE,
-  RESOLVE_COMPONENT
+  RESOLVE_COMPONENT,
+  MERGE_PROPS
 } from '../runtimeConstants'
 
 const toValidId = (str: string): string => str.replace(/[^\w]/g, '')
 
 // generate a JavaScript AST for this element's codegen
-export const prepareElementForCodegen: NodeTransform = (node, context) => {
+export const transformElement: NodeTransform = (node, context) => {
   if (node.type === NodeTypes.ELEMENT) {
     if (
       node.tagType === ElementTypes.ELEMENT ||
@@ -91,9 +92,8 @@ export const prepareElementForCodegen: NodeTransform = (node, context) => {
     } else if (node.tagType === ElementTypes.SLOT) {
       // <slot [name="xxx"]/>
       // TODO
-    } else if (node.tagType === ElementTypes.TEMPLATE) {
-      // do nothing
     }
+    // node.tagType can also be TEMPLATE, in which case nothing needs to be done
   }
 }
 
@@ -101,7 +101,7 @@ function buildProps(
   { loc, props }: ElementNode,
   context: TransformContext
 ): {
-  props: ObjectExpression | CallExpression
+  props: ObjectExpression | CallExpression | ExpressionNode
   directives: DirectiveNode[]
 } {
   let properties: ObjectExpression['properties'] = []
@@ -160,7 +160,7 @@ function buildProps(
     }
   }
 
-  let ret: ObjectExpression | CallExpression
+  let ret: ObjectExpression | CallExpression | ExpressionNode
 
   // has v-bind="object", wrap with mergeProps
   if (mergeArgs.length) {
@@ -168,10 +168,11 @@ function buildProps(
       mergeArgs.push(createObjectExpression(properties, loc))
     }
     if (mergeArgs.length > 1) {
-      ret = createCallExpression(`mergeProps`, mergeArgs, loc)
+      context.imports.add(MERGE_PROPS)
+      ret = createCallExpression(MERGE_PROPS, mergeArgs, loc)
     } else {
       // single v-bind with nothing else - no need for a mergeProps call
-      ret = createObjectExpression(properties, loc)
+      ret = mergeArgs[0]
     }
   } else {
     ret = createObjectExpression(properties, loc)

packages/compiler-core/src/transforms/transformExpression.ts

@@ -15,7 +15,7 @@ import { NodeTypes, createExpression, ExpressionNode } from '../ast'
 import { Node, Function, Identifier } from 'estree'
 import { advancePositionWithClone } from '../utils'
 
-export const expressionTransform: NodeTransform = (node, context) => {
+export const transformExpression: NodeTransform = (node, context) => {
   if (node.type === NodeTypes.EXPRESSION && !node.isStatic) {
     processExpression(node, context)
   } else if (node.type === NodeTypes.ELEMENT) {

packages/compiler-core/src/transforms/vFor.ts

@@ -11,7 +11,7 @@ import {
 import { createCompilerError, ErrorCodes } from '../errors'
 import { getInnerRange } from '../utils'
 import { RENDER_LIST } from '../runtimeConstants'
-import { processExpression } from './expression'
+import { processExpression } from './transformExpression'
 
 const forAliasRE = /([\s\S]*?)(?:(?<=\))|\s+)(?:in|of)\s+([\s\S]*)/
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/

packages/compiler-core/src/transforms/vIf.ts

@@ -10,7 +10,7 @@ import {
   IfBranchNode
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
-import { processExpression } from './expression'
+import { processExpression } from './transformExpression'
 
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,