wip: expression rewrite

packages/compiler-core/src/ast.ts

@@ -16,6 +16,7 @@ export const enum NodeTypes {
   ATTRIBUTE,
   DIRECTIVE,
   // containers
+  COMPOUND_EXPRESSION,
   IF,
   IF_BRANCH,
   FOR,
@@ -109,6 +110,7 @@ export interface ExpressionNode extends Node {
   type: NodeTypes.EXPRESSION
   content: string
   isStatic: boolean
+  children?: (ExpressionNode | string)[]
 }
 
 export interface IfNode extends Node {

packages/compiler-core/src/codegen.ts

@@ -119,7 +119,7 @@ export function generate(
   options: CodegenOptions = {}
 ): CodegenResult {
   const context = createCodegenContext(ast, options)
-  const { mode, push, useWith, indent, deindent } = context
+  const { mode, push, useWith, indent, deindent, newline } = context
   const imports = ast.imports.join(', ')
   if (mode === 'function') {
     // generate const declarations for helpers
@@ -135,13 +135,19 @@ export function generate(
     push(`export default `)
   }
   push(`function render() {`)
-  // generate asset resolution statements
-  ast.statements.forEach(s => push(s + `\n`))
-  if (useWith) {
-    indent()
-    push(`with (this) {`)
-  }
   indent()
+  // generate asset resolution statements
+  if (ast.statements.length) {
+    ast.statements.forEach(s => {
+      push(s)
+      newline()
+    })
+    newline()
+  }
+  if (useWith) {
+    push(`with (this) {`)
+    indent()
+  }
   push(`return `)
   genChildren(ast.children, context)
   if (useWith) {
@@ -236,6 +242,10 @@ function genNode(node: CodegenNode, context: CodegenContext) {
       break
     case NodeTypes.JS_ARRAY_EXPRESSION:
       genArrayExpression(node, context)
+      break
+    default:
+      __DEV__ &&
+        assert(false, `unhandled codegen node type: ${(node as any).type}`)
   }
 }
 
@@ -254,9 +264,9 @@ function genText(node: TextNode | ExpressionNode, context: CodegenContext) {
 }
 
 function genExpression(node: ExpressionNode, context: CodegenContext) {
-  // if (node.codegenNode) {
-  //   TODO handle transformed expression
-  // }
+  if (node.children) {
+    return genCompoundExpression(node, context)
+  }
   const text = node.isStatic ? JSON.stringify(node.content) : node.content
   context.push(text, node)
 }
@@ -265,9 +275,9 @@ function genExpressionAsPropertyKey(
   node: ExpressionNode,
   context: CodegenContext
 ) {
-  // if (node.codegenNode) {
-  //   TODO handle transformed expression
-  // }
+  if (node.children) {
+    return genCompoundExpression(node, context)
+  }
   if (node.isStatic) {
     // only quote keys if necessary
     const text = /^\d|[^\w]/.test(node.content)
@@ -279,6 +289,17 @@ function genExpressionAsPropertyKey(
   }
 }
 
+function genCompoundExpression(node: ExpressionNode, context: CodegenContext) {
+  for (let i = 0; i < node.children!.length; i++) {
+    const child = node.children![i]
+    if (isString(child)) {
+      context.push(child)
+    } else {
+      genExpression(child, context)
+    }
+  }
+}
+
 function genComment(node: CommentNode, context: CodegenContext) {
   context.push(`<!--${node.content}-->`, node)
 }

packages/compiler-core/src/index.ts

@@ -8,6 +8,7 @@ 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'
 
 export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions
 
@@ -22,6 +23,7 @@ export function compile(
     nodeTransforms: [
       transformIf,
       transformFor,
+      ...(!__BROWSER__ && options.useWith === false ? [rewriteExpression] : []),
       prepareElementForCodegen,
       ...(options.nodeTransforms || []) // user transforms
     ],
@@ -31,7 +33,6 @@ export function compile(
       ...(options.directiveTransforms || {}) // user transforms
     }
   })
-
   return generate(ast, options)
 }
 

packages/compiler-core/src/transform.ts

@@ -79,7 +79,7 @@ function createTransformContext(
     removeNode(node) {
       const list = context.parent.children
       const removalIndex = node
-        ? list.indexOf(node)
+        ? list.indexOf(node as any)
         : context.currentNode
           ? context.childIndex
           : -1
@@ -124,12 +124,15 @@ export function traverseChildren(
     i--
   }
   for (; i < parent.children.length; i++) {
+    const child = parent.children[i]
+    if (isString(child)) continue
+    context.currentNode = child
     context.parent = parent
     context.ancestors = ancestors
     context.childIndex = i
     context.onNodeRemoved = nodeRemoved
     context.identifiers = identifiers
-    traverseNode((context.currentNode = parent.children[i]), context)
+    traverseNode(child, context)
   }
 }
 

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

@@ -192,9 +192,7 @@ function createDirectiveArgs(
   // inject statement for resolving directive
   const dirIdentifier = `_directive_${toValidId(dir.name)}`
   context.statements.push(
-    `const ${dirIdentifier} = _${RESOLVE_DIRECTIVE}(${JSON.stringify(
-      dir.name
-    )})`
+    `const ${dirIdentifier} = ${RESOLVE_DIRECTIVE}(${JSON.stringify(dir.name)})`
   )
   const dirArgs: ArrayExpression['elements'] = [dirIdentifier]
   const { loc } = dir

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

@@ -1,5 +1,5 @@
-// - Parse expressions in templates into more detailed JavaScript ASTs so that
-//   source-maps are more accurate
+// - Parse expressions in templates into compound expressions so that each
+//   identifier gets more accurate source-map locations.
 //
 // - Prefix identifiers with `_ctx.` so that they are accessed from the render
 //   context
@@ -7,3 +7,146 @@
 // - This transform is only applied in non-browser builds because it relies on
 //   an additional JavaScript parser. In the browser, there is no source-map
 //   support and the code is wrapped in `with (this) { ... }`.
+
+import { parseScript } from 'meriyah'
+import { walk } from 'estree-walker'
+import { NodeTransform, TransformContext } from '../transform'
+import { NodeTypes, createExpression, ExpressionNode } from '../ast'
+import { Node, Function, Identifier } from 'estree'
+import { advancePositionWithClone } from '../utils'
+
+export const rewriteExpression: NodeTransform = (node, context) => {
+  if (node.type === NodeTypes.EXPRESSION && !node.isStatic) {
+    context.replaceNode(convertExpression(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)
+        }
+        if (prop.arg && !prop.arg.isStatic) {
+          prop.arg = convertExpression(prop.arg, context)
+        }
+      }
+    }
+  } else if (node.type === NodeTypes.IF) {
+    for (let i = 0; i < node.branches.length; i++) {}
+  } else if (node.type === NodeTypes.FOR) {
+  }
+}
+
+function convertExpression(
+  node: ExpressionNode,
+  context: TransformContext
+): ExpressionNode {
+  const ast = parseScript(`(${node.content})`, { ranges: true }) as any
+  const ids: Node[] = []
+  const knownIds = Object.create(context.identifiers)
+
+  walk(ast, {
+    enter(node, parent) {
+      if (node.type === 'Identifier') {
+        if (ids.indexOf(node) === -1) {
+          ids.push(node)
+          if (!knownIds[node.name] && shouldPrependContext(node, parent)) {
+            node.name = `_ctx.${node.name}`
+          }
+        }
+      } else if (isFunction(node)) {
+        node.params.forEach(p =>
+          walk(p, {
+            enter(child) {
+              if (child.type === 'Identifier') {
+                knownIds[child.name] = true
+                ;(
+                  (node as any)._scopeIds ||
+                  ((node as any)._scopeIds = new Set())
+                ).add(child.name)
+              }
+            }
+          })
+        )
+      }
+    },
+    leave(node: any) {
+      if (node._scopeIds) {
+        node._scopeIds.forEach((id: string) => {
+          delete knownIds[id]
+        })
+      }
+    }
+  })
+
+  const full = node.content
+  const children: ExpressionNode['children'] = []
+  ids.sort((a: any, b: any) => a.start - b.start)
+  ids.forEach((id: any, i) => {
+    const last = ids[i - 1] as any
+    const text = full.slice(last ? last.end - 1 : 0, id.start - 1)
+    if (text.length) {
+      children.push(text)
+    }
+    const source = full.slice(id.start, id.end)
+    children.push(
+      createExpression(id.name, false, {
+        source,
+        start: advancePositionWithClone(node.loc.start, source, id.start),
+        end: advancePositionWithClone(node.loc.start, source, id.end)
+      })
+    )
+    if (i === ids.length - 1 && id.end < full.length - 1) {
+      children.push(full.slice(id.end))
+    }
+  })
+
+  return {
+    type: NodeTypes.EXPRESSION,
+    content: '',
+    isStatic: false,
+    loc: node.loc,
+    children
+  }
+}
+
+const globals = new Set(
+  (
+    'Infinity,undefined,NaN,isFinite,isNaN,' +
+    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
+    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
+    'require,' + // for webpack
+    'arguments,'
+  ) // parsed as identifier but is a special keyword...
+    .split(',')
+)
+
+const isFunction = (node: Node): node is Function =>
+  /Function(Expression|Declaration)$/.test(node.type)
+
+function shouldPrependContext(identifier: Identifier, parent: Node) {
+  if (
+    // not id of a FunctionDeclaration
+    !(parent.type === 'FunctionDeclaration' && parent.id === identifier) &&
+    // not a params of a function
+    !(isFunction(parent) && parent.params.indexOf(identifier) > -1) &&
+    // not a key of Property
+    !(
+      parent.type === 'Property' &&
+      parent.key === identifier &&
+      !parent.computed
+    ) &&
+    // not a property of a MemberExpression
+    !(
+      parent.type === 'MemberExpression' &&
+      parent.property === identifier &&
+      !parent.computed
+    ) &&
+    // not in an Array destructure pattern
+    !(parent.type === 'ArrayPattern') &&
+    // skip globals + commonly used shorthands
+    !globals.has(identifier.name)
+  ) {
+    return true
+  }
+}

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

@@ -24,7 +24,7 @@ export const transformIf = createStructuralDirectiveTransform(
       // locate the adjacent v-if
       const siblings = context.parent.children
       const comments = []
-      let i = siblings.indexOf(node)
+      let i = siblings.indexOf(node as any)
       while (i-- >= -1) {
         const sibling = siblings[i]
         if (__DEV__ && sibling && sibling.type === NodeTypes.COMMENT) {