feat(compiler): element transform

packages/compiler-core/src/ast.ts

@@ -73,8 +73,7 @@ export interface ElementNode extends Node {
   tag: string
   tagType: ElementTypes
   isSelfClosing: boolean
-  attrs: AttributeNode[]
-  directives: DirectiveNode[]
+  props: Array<AttributeNode | DirectiveNode>
   children: ChildNode[]
   codegenNode: CallExpression | undefined
 }
@@ -161,3 +160,64 @@ export interface ArrayExpression extends Node {
   type: NodeTypes.ARRAY_EXPRESSION
   elements: Array<CodegenNode>
 }
+
+export function createArrayExpression(
+  elements: ArrayExpression['elements'],
+  loc: SourceLocation
+): ArrayExpression {
+  return {
+    type: NodeTypes.ARRAY_EXPRESSION,
+    loc,
+    elements
+  }
+}
+
+export function createObjectExpression(
+  properties: Property[],
+  loc: SourceLocation
+): ObjectExpression {
+  return {
+    type: NodeTypes.OBJECT_EXPRESSION,
+    loc,
+    properties
+  }
+}
+
+export function createObjectProperty(
+  key: ExpressionNode,
+  value: ExpressionNode,
+  loc: SourceLocation
+): Property {
+  return {
+    type: NodeTypes.PROPERTY,
+    loc,
+    key,
+    value
+  }
+}
+
+export function createExpression(
+  content: string,
+  isStatic: boolean,
+  loc: SourceLocation
+): ExpressionNode {
+  return {
+    type: NodeTypes.EXPRESSION,
+    loc,
+    content,
+    isStatic
+  }
+}
+
+export function createCallExpression(
+  callee: string,
+  args: CallExpression['arguments'],
+  loc: SourceLocation
+): CallExpression {
+  return {
+    type: NodeTypes.CALL_EXPRESSION,
+    loc,
+    callee,
+    arguments: args
+  }
+}

packages/compiler-core/src/errors.ts

@@ -65,7 +65,8 @@ export const enum ErrorCodes {
   X_ELSE_IF_NO_ADJACENT_IF,
   X_ELSE_NO_ADJACENT_IF,
   X_FOR_NO_EXPRESSION,
-  X_FOR_MALFORMED_EXPRESSION
+  X_FOR_MALFORMED_EXPRESSION,
+  X_V_BIND_NO_EXPRESSION
 }
 
 export const errorMessages: { [code: number]: string } = {

packages/compiler-core/src/index.ts

@@ -14,10 +14,14 @@ export function compile(
 
   transform(ast, {
     ...options,
-    transforms: [
+    nodeTransforms: [
       // TODO include built-in core transforms
-      ...(options.transforms || []) // user transforms
-    ]
+      ...(options.nodeTransforms || []) // user transforms
+    ],
+    directiveTransforms: {
+      // TODO include built-in directive transforms
+      ...(options.directiveTransforms || {}) // user transforms
+    }
   })
 
   return generate(ast, options)
@@ -27,11 +31,11 @@ export function compile(
 export { parse, ParserOptions, TextModes } from './parse'
 export {
   transform,
-  createDirectiveTransform,
+  createStructuralDirectiveTransform,
   TransformOptions,
   TransformContext,
-  Transform,
-  DirectiveTransform
+  NodeTransform as Transform,
+  StructuralDirectiveTransform
 } from './transform'
 export {
   generate,
@@ -41,3 +45,6 @@ export {
 } from './codegen'
 export { ErrorCodes, CompilerError, createCompilerError } from './errors'
 export * from './ast'
+
+// debug
+export { prepareElementForCodegen } from './transforms/element'

packages/compiler-core/src/parse.ts

@@ -376,8 +376,7 @@ function parseTag(
   const start = getCursor(context)
   const match = /^<\/?([a-z][^\t\r\n\f />]*)/i.exec(context.source)!
   const tag = match[1]
-  const attrs = []
-  const directives = []
+  const props = []
   const ns = context.options.getNamespace(tag, parent)
 
   advanceBy(context, match[0].length)
@@ -402,11 +401,7 @@ function parseTag(
 
     const attr = parseAttribute(context, attributeNames)
     if (type === TagType.Start) {
-      if (attr.type === NodeTypes.DIRECTIVE) {
-        directives.push(attr)
-      } else {
-        attrs.push(attr)
-      }
+      props.push(attr)
     }
 
     if (/^[^\t\r\n\f />]/.test(context.source)) {
@@ -438,11 +433,11 @@ function parseTag(
     ns,
     tag,
     tagType,
-    attrs,
-    directives,
+    props,
     isSelfClosing,
     children: [],
-    loc: getSelection(context, start)
+    loc: getSelection(context, start),
+    codegenNode: undefined // to be created during transform phase
   }
 }
 

packages/compiler-core/src/transform.ts

@@ -4,27 +4,45 @@ import {
   ParentNode,
   ChildNode,
   ElementNode,
-  DirectiveNode
+  DirectiveNode,
+  Property
 } from './ast'
 import { isString } from '@vue/shared'
 import { CompilerError, defaultOnError } from './errors'
 
-export type Transform = (node: ChildNode, context: TransformContext) => void
+// There are two types of transforms:
+//
+// - NodeTransform:
+//   Transforms that operate directly on a ChildNode. NodeTransforms may mutate,
+//   replace or remove the node being processed.
+export type NodeTransform = (node: ChildNode, context: TransformContext) => void
 
+// - DirectiveTransform:
+//   Transforms that handles a single directive attribute on an element.
+//   It translates the raw directive into actual props for the VNode.
 export type DirectiveTransform = (
+  dir: DirectiveNode,
+  context: TransformContext
+) => {
+  props: Property | Property[]
+  needRuntime: boolean
+}
+
+// A structural directive transform is a techically a NodeTransform;
+// Only v-if and v-for fall into this category.
+export type StructuralDirectiveTransform = (
   node: ElementNode,
   dir: DirectiveNode,
   context: TransformContext
-) => false | void
+) => void
 
 export interface TransformOptions {
-  transforms?: Transform[]
+  nodeTransforms?: NodeTransform[]
+  directiveTransforms?: { [name: string]: DirectiveTransform }
   onError?: (error: CompilerError) => void
 }
 
-export interface TransformContext {
-  transforms: Transform[]
-  emitError: (error: CompilerError) => void
+export interface TransformContext extends Required<TransformOptions> {
   parent: ParentNode
   ancestors: ParentNode[]
   childIndex: number
@@ -44,8 +62,9 @@ function createTransformContext(
   options: TransformOptions
 ): TransformContext {
   const context: TransformContext = {
-    transforms: options.transforms || [],
-    emitError: options.onError || defaultOnError,
+    nodeTransforms: options.nodeTransforms || [],
+    directiveTransforms: options.directiveTransforms || {},
+    onError: options.onError || defaultOnError,
     parent: root,
     ancestors: [],
     childIndex: 0,
@@ -109,9 +128,9 @@ function traverseNode(
   ancestors: ParentNode[]
 ) {
   // apply transform plugins
-  const { transforms } = context
-  for (let i = 0; i < transforms.length; i++) {
-    const plugin = transforms[i]
+  const { nodeTransforms } = context
+  for (let i = 0; i < nodeTransforms.length; i++) {
+    const plugin = nodeTransforms[i]
     plugin(node, context)
     if (!context.currentNode) {
       return
@@ -135,34 +154,27 @@ function traverseNode(
   }
 }
 
-const identity = <T>(_: T): T => _
-
-export function createDirectiveTransform(
+export function createStructuralDirectiveTransform(
   name: string | RegExp,
-  fn: DirectiveTransform
-): Transform {
+  fn: StructuralDirectiveTransform
+): NodeTransform {
   const matches = isString(name)
     ? (n: string) => n === name
     : (n: string) => name.test(n)
 
   return (node, context) => {
     if (node.type === NodeTypes.ELEMENT) {
-      const dirs = node.directives
-      let didRemove = false
-      for (let i = 0; i < dirs.length; i++) {
-        if (matches(dirs[i].name)) {
-          const res = fn(node, dirs[i], context)
-          // Directives are removed after transformation by default. A transform
-          // returning false means the directive should not be removed.
-          if (res !== false) {
-            ;(dirs as any)[i] = undefined
-            didRemove = true
-          }
+      const { props } = node
+      for (let i = 0; i < props.length; i++) {
+        const prop = props[i]
+        if (prop.type === NodeTypes.DIRECTIVE && matches(prop.name)) {
+          fn(node, prop, context)
+          // structural directives are removed after being processed
+          // to avoid infinite recursion
+          props.splice(i, 1)
+          i--
         }
       }
-      if (didRemove) {
-        node.directives = dirs.filter(identity)
-      }
     }
   }
 }

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

@@ -1,29 +1,43 @@
-import { Transform, TransformContext } from '../transform'
+import { NodeTransform, TransformContext } from '../transform'
 import {
   NodeTypes,
   ElementTypes,
   CallExpression,
   ObjectExpression,
-  ElementNode
+  ElementNode,
+  DirectiveNode,
+  ExpressionNode,
+  ArrayExpression,
+  createCallExpression,
+  createArrayExpression,
+  createObjectProperty,
+  createExpression,
+  createObjectExpression
 } from '../ast'
+import { isArray } from '@vue/shared'
+import { createCompilerError, ErrorCodes } from '../errors'
 
 // generate a JavaScript AST for this element's codegen
-export const prepareElementForCodegen: Transform = (node, context) => {
+export const prepareElementForCodegen: NodeTransform = (node, context) => {
   if (node.type === NodeTypes.ELEMENT) {
     if (
       node.tagType === ElementTypes.ELEMENT ||
       node.tagType === ElementTypes.COMPONENT
     ) {
       const isComponent = node.tagType === ElementTypes.ELEMENT
-      const hasProps = node.attrs.length > 0 || node.directives.length > 0
+      const hasProps = node.props.length > 0
       const hasChildren = node.children.length > 0
+      let runtimeDirectives: DirectiveNode[] | undefined
 
       const args: CallExpression['arguments'] = [
+        // TODO inject resolveComponent dep to root
         isComponent ? node.tag : `"${node.tag}"`
       ]
       // props
       if (hasProps) {
-        args.push(buildProps(node))
+        const { props, directives } = buildProps(node, context)
+        args.push(props)
+        runtimeDirectives = directives
       }
       // children
       if (hasChildren) {
@@ -34,53 +48,155 @@ export const prepareElementForCodegen: Transform = (node, context) => {
         args.push(isComponent ? buildSlots(node, context) : node.children)
       }
 
-      node.codegenNode = {
-        type: NodeTypes.CALL_EXPRESSION,
-        loc: node.loc,
-        callee: `h`,
-        arguments: args
+      const { loc } = node
+      const vnode = createCallExpression(`h`, args, loc)
+
+      if (runtimeDirectives) {
+        node.codegenNode = createCallExpression(
+          `applyDirectives`,
+          [
+            vnode,
+            createArrayExpression(
+              runtimeDirectives.map(dir => {
+                return createDirectiveArgs(dir, context)
+              }),
+              loc
+            )
+          ],
+          loc
+        )
+      } else {
+        node.codegenNode = vnode
       }
+    } else if (node.tagType === ElementTypes.SLOT) {
+      // <slot [name="xxx"]/>
+      // TODO
+    } else if (node.tagType === ElementTypes.TEMPLATE) {
+      // do nothing
     }
   }
 }
 
-function buildProps({ loc, attrs }: ElementNode): ObjectExpression {
-  return {
-    type: NodeTypes.OBJECT_EXPRESSION,
-    loc,
-    // At this stage we will only process static attrs. Directive bindings will
-    // be handled by their respective transforms which adds/modifies the props.
-    properties: attrs.map(({ name, value, loc }) => {
-      return {
-        type: NodeTypes.PROPERTY,
-        loc,
-        key: {
-          type: NodeTypes.EXPRESSION,
-          loc,
-          content: name,
-          isStatic: true
-        },
-        value: {
-          type: NodeTypes.EXPRESSION,
-          loc: value ? value.loc : loc,
-          content: value ? value.content : '',
-          isStatic: true
+function buildProps(
+  { loc, props }: ElementNode,
+  context: TransformContext
+): {
+  props: ObjectExpression | CallExpression
+  directives: DirectiveNode[]
+} {
+  let properties: ObjectExpression['properties'] = []
+  const mergeArgs: Array<ObjectExpression | ExpressionNode> = []
+  const runtimeDirectives: DirectiveNode[] = []
+
+  for (let i = 0; i < props.length; i++) {
+    // static attribute
+    const prop = props[i]
+    if (prop.type === NodeTypes.ATTRIBUTE) {
+      const { loc, name, value } = prop
+      properties.push(
+        createObjectProperty(
+          createExpression(name, true, loc),
+          createExpression(
+            value ? value.content : '',
+            true,
+            value ? value.loc : loc
+          ),
+          loc
+        )
+      )
+    } else {
+      // directives
+      // special case for v-bind with no argument
+      if (prop.name === 'bind' && !prop.arg) {
+        if (prop.exp) {
+          if (properties.length) {
+            mergeArgs.push(createObjectExpression(properties, loc))
+            properties = []
+          }
+          mergeArgs.push(prop.exp)
+        } else {
+          context.onError(
+            createCompilerError(
+              ErrorCodes.X_V_BIND_NO_EXPRESSION,
+              prop.loc.start
+            )
+          )
         }
+        continue
       }
-    })
+
+      const directiveTransform = context.directiveTransforms[prop.name]
+      if (directiveTransform) {
+        const { props, needRuntime } = directiveTransform(prop, context)
+        if (isArray(props)) {
+          properties.push(...props)
+        } else {
+          properties.push(props)
+        }
+        if (needRuntime) {
+          runtimeDirectives.push(prop)
+        }
+      } else {
+        // no built-in transform, this is a user custom directive.
+        runtimeDirectives.push(prop)
+      }
+    }
   }
+
+  let ret: ObjectExpression | CallExpression
+
+  // has v-bind="object", wrap with mergeProps
+  if (mergeArgs.length) {
+    if (properties.length) {
+      mergeArgs.push(createObjectExpression(properties, loc))
+    }
+    if (mergeArgs.length > 1) {
+      ret = createCallExpression(`mergeProps`, mergeArgs, loc)
+    } else {
+      // single v-bind with nothing else - no need for a mergeProps call
+      ret = createObjectExpression(properties, loc)
+    }
+  } else {
+    ret = createObjectExpression(properties, loc)
+  }
+
+  return {
+    props: ret,
+    directives: runtimeDirectives
+  }
+}
+
+function createDirectiveArgs(
+  dir: DirectiveNode,
+  context: TransformContext
+): ArrayExpression {
+  // TODO inject resolveDirective dep to root
+  const dirArgs: ArrayExpression['elements'] = [dir.name]
+  const { loc } = dir
+  if (dir.exp) dirArgs.push(dir.exp)
+  if (dir.arg) dirArgs.push(dir.arg)
+  if (Object.keys(dir.modifiers).length) {
+    dirArgs.push(
+      createObjectExpression(
+        dir.modifiers.map(modifier =>
+          createObjectProperty(
+            createExpression(modifier, true, loc),
+            createExpression(`true`, false, loc),
+            loc
+          )
+        ),
+        loc
+      )
+    )
+  }
+  return createArrayExpression(dirArgs, dir.loc)
 }
 
 function buildSlots(
   { loc, children }: ElementNode,
   context: TransformContext
 ): ObjectExpression {
-  const slots: ObjectExpression = {
-    type: NodeTypes.OBJECT_EXPRESSION,
-    loc,
-    properties: []
-  }
-
+  const slots = createObjectExpression([], loc)
   // TODO
 
   return slots

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

@@ -1,5 +1,5 @@
-import { createDirectiveTransform } from '../transform'
-import { NodeTypes, ExpressionNode } from '../ast'
+import { createStructuralDirectiveTransform } from '../transform'
+import { NodeTypes, ExpressionNode, createExpression } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { getInnerRange } from '../utils'
 
@@ -7,7 +7,7 @@ const forAliasRE = /([\s\S]*?)(?:(?<=\))|\s+)(?:in|of)\s+([\s\S]*)/
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
 const stripParensRE = /^\(|\)$/g
 
-export const transformFor = createDirectiveTransform(
+export const transformFor = createStructuralDirectiveTransform(
   'for',
   (node, dir, context) => {
     if (dir.exp) {
@@ -27,7 +27,7 @@ export const transformFor = createDirectiveTransform(
           children: [node]
         })
       } else {
-        context.emitError(
+        context.onError(
           createCompilerError(
             ErrorCodes.X_FOR_MALFORMED_EXPRESSION,
             dir.loc.start
@@ -35,7 +35,7 @@ export const transformFor = createDirectiveTransform(
         )
       }
     } else {
-      context.emitError(
+      context.onError(
         createCompilerError(ErrorCodes.X_FOR_NO_EXPRESSION, dir.loc.start)
       )
     }
@@ -118,11 +118,10 @@ function maybeCreateExpression(
   node: ExpressionNode
 ): ExpressionNode | undefined {
   if (alias) {
-    return {
-      type: NodeTypes.EXPRESSION,
-      loc: getInnerRange(node.loc, alias.offset, alias.content.length),
-      content: alias.content,
-      isStatic: false
-    }
+    return createExpression(
+      alias.content,
+      false,
+      getInnerRange(node.loc, alias.offset, alias.content.length)
+    )
   }
 }

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

@@ -1,4 +1,4 @@
-import { createDirectiveTransform } from '../transform'
+import { createStructuralDirectiveTransform } from '../transform'
 import {
   NodeTypes,
   ElementTypes,
@@ -8,7 +8,7 @@ import {
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 
-export const transformIf = createDirectiveTransform(
+export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
   (node, dir, context) => {
     if (dir.name === 'if') {
@@ -38,7 +38,7 @@ export const transformIf = createDirectiveTransform(
           }
           sibling.branches.push(branch)
         } else {
-          context.emitError(
+          context.onError(
             createCompilerError(
               dir.name === 'else'
                 ? ErrorCodes.X_ELSE_NO_ADJACENT_IF

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

@@ -1 +0,0 @@
-// TODO