feat(compiler): expression prefixing + v-for scope analysis

packages/compiler-core/__tests__/transforms/expression.spec.ts

@@ -3,13 +3,16 @@ import { compile } from '../../src'
 
 test(`should work`, async () => {
   const { code, map } = compile(
-    `<div v-if="hello">{{ ({ a }, b) => a + b + c }}</div>`,
+    `<div v-for="i in foo">
+      {{ ({ a }, b) => a + b + i + c }} {{ i + 'fe' }} {{ i }}
+    </div>
+    <p>{{ i }}</p>
+    `,
     {
       useWith: false
     }
   )
   console.log(code)
-  console.log(map)
   const consumer = await new SourceMapConsumer(map!)
   const pos = consumer.originalPositionFor({
     line: 4,

packages/compiler-core/src/codegen.ts

@@ -348,17 +348,14 @@ function genFor(node: ForNode, context: CodegenContext) {
   genExpression(source, context)
   push(`, (`)
   if (valueAlias) {
-    // not using genExpression here because these aliases can only be code
+    genExpression(valueAlias, context)
-    // that is valid in the function argument position, so the parse rule can
-    // be off and they don't need identifier prefixing anyway.
-    push(valueAlias.content, valueAlias)
   }
   if (keyAlias) {
     if (!valueAlias) {
       push(`_`)
     }
     push(`, `)
-    push(keyAlias.content, keyAlias)
+    genExpression(keyAlias, context)
   }
   if (objectIndexAlias) {
     if (!keyAlias) {
@@ -369,7 +366,7 @@ function genFor(node: ForNode, context: CodegenContext) {
       }
     }
     push(`, `)
-    push(objectIndexAlias.content, objectIndexAlias)
+    genExpression(objectIndexAlias, context)
   }
   push(`) => `)
   genChildren(children, context)

packages/compiler-core/src/errors.ts

@@ -2,7 +2,7 @@ import { SourceLocation } from './ast'
 
 export interface CompilerError extends SyntaxError {
   code: ErrorCodes
-  loc: SourceLocation
+  loc?: SourceLocation
 }
 
 export function defaultOnError(error: CompilerError) {
@@ -11,13 +11,11 @@ export function defaultOnError(error: CompilerError) {
 
 export function createCompilerError(
   code: ErrorCodes,
-  loc: SourceLocation
+  loc?: SourceLocation
 ): CompilerError {
-  const error = new SyntaxError(
+  const msg = __DEV__ || !__BROWSER__ ? errorMessages[code] : code
-    `${__DEV__ || !__BROWSER__ ? errorMessages[code] : code} (${
+  const locInfo = loc ? ` (${loc.start.line}:${loc.start.column})` : ``
-      loc.start.line
+  const error = new SyntaxError(msg + locInfo) as CompilerError
-    }:${loc.start.column})`
-  ) as CompilerError
   error.code = code
   error.loc = loc
   return error
@@ -56,6 +54,8 @@ export const enum ErrorCodes {
   UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
   UNEXPECTED_SOLIDUS_IN_TAG,
   UNKNOWN_NAMED_CHARACTER_REFERENCE,
+
+  // Vue-specific parse errors
   X_INVALID_END_TAG,
   X_MISSING_END_TAG,
   X_MISSING_INTERPOLATION_END,
@@ -66,7 +66,10 @@ export const enum ErrorCodes {
   X_ELSE_NO_ADJACENT_IF,
   X_FOR_NO_EXPRESSION,
   X_FOR_MALFORMED_EXPRESSION,
-  X_V_BIND_NO_EXPRESSION
+  X_V_BIND_NO_EXPRESSION,
+
+  // generic errors
+  X_STRIP_WITH_NOT_SUPPORTED
 }
 
 export const errorMessages: { [code: number]: string } = {
@@ -116,14 +119,21 @@ export const errorMessages: { [code: number]: string } = {
     "'<?' is allowed only in XML context.",
   [ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG]: "Illegal '/' in tags.",
   [ErrorCodes.UNKNOWN_NAMED_CHARACTER_REFERENCE]: 'Unknown entity name.',
+
+  // Vue-specific parse errors
   [ErrorCodes.X_INVALID_END_TAG]: 'Invalid end tag.',
   [ErrorCodes.X_MISSING_END_TAG]: 'End tag was not found.',
   [ErrorCodes.X_MISSING_INTERPOLATION_END]:
     'Interpolation end sign was not found.',
+  [ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END]:
+    'End bracket for dynamic directive argument was not found.',
 
   // transform errors
   [ErrorCodes.X_ELSE_IF_NO_ADJACENT_IF]: `v-else-if has no adjacent v-if`,
   [ErrorCodes.X_ELSE_NO_ADJACENT_IF]: `v-else has no adjacent v-if`,
   [ErrorCodes.X_FOR_NO_EXPRESSION]: `v-for has no expression`,
-  [ErrorCodes.X_FOR_MALFORMED_EXPRESSION]: `v-for has invalid expression`
+  [ErrorCodes.X_FOR_MALFORMED_EXPRESSION]: `v-for has invalid expression`,
+
+  // generic errors
+  [ErrorCodes.X_STRIP_WITH_NOT_SUPPORTED]: `useWith: false is not supported in this build of compiler because it is optimized for payload size.`
 }

packages/compiler-core/src/index.ts

@@ -8,7 +8,8 @@ import { transformFor } from './transforms/vFor'
 import { prepareElementForCodegen } from './transforms/element'
 import { transformOn } from './transforms/vOn'
 import { transformBind } from './transforms/vBind'
-import { rewriteExpression } from './transforms/expression'
+import { expressionTransform } from './transforms/expression'
+import { defaultOnError, createCompilerError, ErrorCodes } from './errors'
 
 export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions
 
@@ -17,13 +18,21 @@ export function compile(
   options: CompilerOptions = {}
 ): CodegenResult {
   const ast = isString(template) ? parse(template, options) : template
+  const useWith = __BROWSER__ || options.useWith !== false
+
+  if (__BROWSER__ && options.useWith === false) {
+    ;(options.onError || defaultOnError)(
+      createCompilerError(ErrorCodes.X_STRIP_WITH_NOT_SUPPORTED)
+    )
+  }
 
   transform(ast, {
     ...options,
+    useWith,
     nodeTransforms: [
-      ...(!__BROWSER__ && options.useWith === false ? [rewriteExpression] : []),
       transformIf,
       transformFor,
+      ...(useWith ? [] : [expressionTransform]),
       prepareElementForCodegen,
       ...(options.nodeTransforms || []) // user transforms
     ],

packages/compiler-core/src/transform.ts

@@ -5,9 +5,10 @@ import {
   ChildNode,
   ElementNode,
   DirectiveNode,
-  Property
+  Property,
+  ExpressionNode
 } from './ast'
-import { isString } from '@vue/shared'
+import { isString, isArray } from '@vue/shared'
 import { CompilerError, defaultOnError } from './errors'
 
 // There are two types of transforms:
@@ -15,7 +16,10 @@ import { CompilerError, defaultOnError } from './errors'
 // - 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
+export type NodeTransform = (
+  node: ChildNode,
+  context: TransformContext
+) => void | (() => void) | (() => void)[]
 
 // - DirectiveTransform:
 //   Transforms that handles a single directive attribute on an element.
@@ -34,11 +38,12 @@ export type StructuralDirectiveTransform = (
   node: ElementNode,
   dir: DirectiveNode,
   context: TransformContext
-) => void
+) => void | (() => void)
 
 export interface TransformOptions {
   nodeTransforms?: NodeTransform[]
   directiveTransforms?: { [name: string]: DirectiveTransform }
+  useWith?: boolean
   onError?: (error: CompilerError) => void
 }
 
@@ -53,19 +58,27 @@ export interface TransformContext extends Required<TransformOptions> {
   replaceNode(node: ChildNode): void
   removeNode(node?: ChildNode): void
   onNodeRemoved: () => void
+  addIdentifier(exp: ExpressionNode): void
+  removeIdentifier(exp: ExpressionNode): void
 }
 
 function createTransformContext(
   root: RootNode,
-  options: TransformOptions
+  {
+    useWith = true,
+    nodeTransforms = [],
+    directiveTransforms = {},
+    onError = defaultOnError
+  }: TransformOptions
 ): TransformContext {
   const context: TransformContext = {
     imports: new Set(),
     statements: [],
     identifiers: {},
-    nodeTransforms: options.nodeTransforms || [],
+    useWith,
-    directiveTransforms: options.directiveTransforms || {},
+    nodeTransforms,
-    onError: options.onError || defaultOnError,
+    directiveTransforms,
+    onError,
     parent: root,
     ancestors: [],
     childIndex: 0,
@@ -99,7 +112,13 @@ function createTransformContext(
       }
       context.parent.children.splice(removalIndex, 1)
     },
-    onNodeRemoved: () => {}
+    onNodeRemoved: () => {},
+    addIdentifier(exp) {
+      context.identifiers[exp.content] = true
+    },
+    removeIdentifier(exp) {
+      delete context.identifiers[exp.content]
+    }
   }
   return context
 }
@@ -115,10 +134,7 @@ export function traverseChildren(
   parent: ParentNode,
   context: TransformContext
 ) {
-  // ancestors and identifiers need to be cached here since they may get
-  // replaced during a child's traversal
   const ancestors = context.ancestors.concat(parent)
-  const identifiers = context.identifiers
   let i = 0
   const nodeRemoved = () => {
     i--
@@ -131,7 +147,6 @@ export function traverseChildren(
     context.ancestors = ancestors
     context.childIndex = i
     context.onNodeRemoved = nodeRemoved
-    context.identifiers = identifiers
     traverseNode(child, context)
   }
 }
@@ -139,9 +154,17 @@ export function traverseChildren(
 export function traverseNode(node: ChildNode, context: TransformContext) {
   // apply transform plugins
   const { nodeTransforms } = context
+  const exitFns = []
   for (let i = 0; i < nodeTransforms.length; i++) {
     const plugin = nodeTransforms[i]
-    plugin(node, context)
+    const onExit = plugin(node, context)
+    if (onExit) {
+      if (isArray(onExit)) {
+        exitFns.push(...onExit)
+      } else {
+        exitFns.push(onExit)
+      }
+    }
     if (!context.currentNode) {
       // node was removed
       return
@@ -163,6 +186,11 @@ export function traverseNode(node: ChildNode, context: TransformContext) {
       traverseChildren(node, context)
       break
   }
+
+  // exit transforms
+  for (let i = 0; i < exitFns.length; i++) {
+    exitFns[i]()
+  }
 }
 
 export function createStructuralDirectiveTransform(
@@ -176,6 +204,7 @@ export function createStructuralDirectiveTransform(
   return (node, context) => {
     if (node.type === NodeTypes.ELEMENT) {
       const { props } = node
+      const exitFns = []
       for (let i = 0; i < props.length; i++) {
         const prop = props[i]
         if (prop.type === NodeTypes.DIRECTIVE && matches(prop.name)) {
@@ -184,9 +213,11 @@ export function createStructuralDirectiveTransform(
           // traverse itself in case it moves the node around
           props.splice(i, 1)
           i--
-          fn(node, prop, context)
+          const onExit = fn(node, prop, context)
+          if (onExit) exitFns.push(onExit)
         }
       }
+      return exitFns
     }
   }
 }

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

@@ -15,30 +15,56 @@ import { NodeTypes, createExpression, ExpressionNode } from '../ast'
 import { Node, Function, Identifier } from 'estree'
 import { advancePositionWithClone } from '../utils'
 
-export const rewriteExpression: NodeTransform = (node, context) => {
+export const expressionTransform: NodeTransform = (node, context) => {
   if (node.type === NodeTypes.EXPRESSION && !node.isStatic) {
-    context.replaceNode(convertExpression(node, context))
+    processExpression(node, context)
   } else if (node.type === NodeTypes.ELEMENT) {
     // handle directives on element
     for (let i = 0; i < node.props.length; i++) {
       const prop = node.props[i]
       if (prop.type === NodeTypes.DIRECTIVE) {
         if (prop.exp) {
-          prop.exp = convertExpression(prop.exp, context)
+          processExpression(prop.exp, context)
         }
         if (prop.arg && !prop.arg.isStatic) {
-          prop.arg = convertExpression(prop.arg, context)
+          processExpression(prop.arg, context)
         }
       }
     }
   }
 }
 
-function convertExpression(
+const simpleIdRE = /^[a-zA-Z$_][\w$]*$/
+
+// cache node requires
+let _parseScript: typeof parseScript
+let _walk: typeof walk
+
+export function processExpression(
   node: ExpressionNode,
   context: TransformContext
-): ExpressionNode {
+) {
-  const ast = parseScript(`(${node.content})`, { ranges: true }) as any
+  // lazy require dependencies so that they don't end up in rollup's dep graph
+  // and thus can be tree-shaken in browser builds.
+  const parseScript =
+    _parseScript || (_parseScript = require('meriyah').parseScript)
+  const walk = _walk || (_walk = require('estree-walker').walk)
+
+  // fast path if expression is a simple identifier.
+  if (simpleIdRE.test(node.content)) {
+    if (!context.identifiers[node.content]) {
+      node.content = `_ctx.${node.content}`
+    }
+    return
+  }
+
+  let ast
+  try {
+    ast = parseScript(`(${node.content})`, { ranges: true }) as any
+  } catch (e) {
+    context.onError(e)
+    return
+  }
   const ids: Node[] = []
   const knownIds = Object.create(context.identifiers)
 
@@ -98,10 +124,7 @@ function convertExpression(
     }
   })
 
-  return {
+  node.children = children
-    ...node,
-    children
-  }
 }
 
 const globals = new Set(

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

@@ -1,8 +1,17 @@
-import { createStructuralDirectiveTransform } from '../transform'
+import {
-import { NodeTypes, ExpressionNode, createExpression } from '../ast'
+  createStructuralDirectiveTransform,
+  TransformContext
+} from '../transform'
+import {
+  NodeTypes,
+  ExpressionNode,
+  createExpression,
+  SourceLocation
+} from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { getInnerRange } from '../utils'
 import { RENDER_LIST } from '../runtimeConstants'
+import { processExpression } from './expression'
 
 const forAliasRE = /([\s\S]*?)(?:(?<=\))|\s+)(?:in|of)\s+([\s\S]*)/
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
@@ -13,23 +22,35 @@ export const transformFor = createStructuralDirectiveTransform(
   (node, dir, context) => {
     if (dir.exp) {
       context.imports.add(RENDER_LIST)
-      const aliases = parseAliasExpressions(dir.exp.content)
+      const parseResult = parseForExpression(dir.exp, context)
+
+      if (parseResult) {
+        const { source, value, key, index } = parseResult
 
-      if (aliases) {
-        // TODO inject identifiers to context
-        // and remove on exit
         context.replaceNode({
           type: NodeTypes.FOR,
           loc: node.loc,
-          source: maybeCreateExpression(
+          source,
-            aliases.source,
+          valueAlias: value,
-            dir.exp
+          keyAlias: key,
-          ) as ExpressionNode,
+          objectIndexAlias: index,
-          valueAlias: maybeCreateExpression(aliases.value, dir.exp),
-          keyAlias: maybeCreateExpression(aliases.key, dir.exp),
-          objectIndexAlias: maybeCreateExpression(aliases.index, dir.exp),
           children: [node]
         })
+
+        // scope management
+        const { addIdentifier, removeIdentifier } = context
+
+        // inject identifiers to context
+        value && addIdentifier(value)
+        key && addIdentifier(key)
+        index && addIdentifier(index)
+
+        return () => {
+          // remove injected identifiers on exit
+          value && removeIdentifier(value)
+          key && removeIdentifier(key)
+          index && removeIdentifier(index)
+        }
       } else {
         context.onError(
           createCompilerError(ErrorCodes.X_FOR_MALFORMED_EXPRESSION, dir.loc)
@@ -43,28 +64,31 @@ export const transformFor = createStructuralDirectiveTransform(
   }
 )
 
-interface AliasExpression {
+interface ForParseResult {
-  offset: number
+  source: ExpressionNode
-  content: string
+  value: ExpressionNode | undefined
+  key: ExpressionNode | undefined
+  index: ExpressionNode | undefined
 }
 
-interface AliasExpressions {
+function parseForExpression(
-  source: AliasExpression
+  input: ExpressionNode,
-  value: AliasExpression | undefined
+  context: TransformContext
-  key: AliasExpression | undefined
+): ForParseResult | null {
-  index: AliasExpression | undefined
+  const loc = input.loc
-}
+  const source = input.content
-
-function parseAliasExpressions(source: string): AliasExpressions | null {
   const inMatch = source.match(forAliasRE)
   if (!inMatch) return null
 
   const [, LHS, RHS] = inMatch
-  const result: AliasExpressions = {
+  const result: ForParseResult = {
-    source: {
+    source: createAliasExpression(
-      offset: source.indexOf(RHS, LHS.length),
+      loc,
-      content: RHS.trim()
+      RHS.trim(),
-    },
+      source.indexOf(RHS, LHS.length),
+      context,
+      !context.useWith
+    ),
     value: undefined,
     key: undefined,
     index: undefined
@@ -80,49 +104,60 @@ function parseAliasExpressions(source: string): AliasExpressions | null {
     valueContent = valueContent.replace(forIteratorRE, '').trim()
 
     const keyContent = iteratorMatch[1].trim()
+    let keyOffset: number | undefined
     if (keyContent) {
-      result.key = {
+      keyOffset = source.indexOf(
-        offset: source.indexOf(keyContent, trimmedOffset + valueContent.length),
+        keyContent,
-        content: keyContent
+        trimmedOffset + valueContent.length
-      }
+      )
+      result.key = createAliasExpression(loc, keyContent, keyOffset, context)
     }
 
     if (iteratorMatch[2]) {
       const indexContent = iteratorMatch[2].trim()
 
       if (indexContent) {
-        result.index = {
+        result.index = createAliasExpression(
-          offset: source.indexOf(
+          loc,
+          indexContent,
+          source.indexOf(
             indexContent,
             result.key
-              ? result.key.offset + result.key.content.length
+              ? keyOffset! + keyContent.length
               : trimmedOffset + valueContent.length
           ),
-          content: indexContent
+          context
-        }
+        )
       }
     }
   }
 
   if (valueContent) {
-    result.value = {
+    result.value = createAliasExpression(
-      offset: trimmedOffset,
+      loc,
-      content: valueContent
+      valueContent,
-    }
+      trimmedOffset,
+      context
+    )
   }
 
   return result
 }
 
-function maybeCreateExpression(
+function createAliasExpression(
-  alias: AliasExpression | undefined,
+  range: SourceLocation,
-  node: ExpressionNode
+  content: string,
-): ExpressionNode | undefined {
+  offset: number,
-  if (alias) {
+  context: TransformContext,
-    return createExpression(
+  process: boolean = false
-      alias.content,
+): ExpressionNode {
-      false,
+  const exp = createExpression(
-      getInnerRange(node.loc, alias.offset, alias.content.length)
+    content,
-    )
+    false,
+    getInnerRange(range, offset, content.length)
+  )
+  if (!__BROWSER__ && process) {
+    processExpression(exp, context)
   }
+  return exp
 }

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

@@ -10,10 +10,14 @@ import {
   IfBranchNode
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
+import { processExpression } from './expression'
 
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
   (node, dir, context) => {
+    if (!__BROWSER__ && !context.useWith && dir.exp) {
+      processExpression(dir.exp, context)
+    }
     if (dir.name === 'if') {
       context.replaceNode({
         type: NodeTypes.IF,