test: tests for v-on transform

packages/compiler-core/src/codegen.ts

@@ -15,7 +15,11 @@ import {
   IfBranchNode
 } from './ast'
 import { SourceMapGenerator, RawSourceMap } from 'source-map'
-import { advancePositionWithMutation, assert } from './utils'
+import {
+  advancePositionWithMutation,
+  assert,
+  isSimpleIdentifier
+} from './utils'
 import { isString, isArray } from '@vue/shared'
 import {
   RENDER_LIST,
@@ -325,7 +329,7 @@ function genExpressionAsPropertyKey(
     push(`]`)
   } else if (isStatic) {
     // only quote keys if necessary
-    const text = /^\d|[^\w]/.test(content) ? JSON.stringify(content) : content
+    const text = isSimpleIdentifier(content) ? content : JSON.stringify(content)
     push(text, node)
   } else {
     push(`[${content}]`, node)
@@ -366,9 +370,10 @@ function genIfBranch(
   if (condition) {
     // v-if or v-else-if
     const { push, indent, deindent, newline } = context
-    push(`(`)
+    const needsQuote = !isSimpleIdentifier(condition.content)
+    needsQuote && push(`(`)
     genExpression(condition, context)
-    push(`)`)
+    needsQuote && push(`)`)
     indent()
     context.indentLevel++
     push(`? `)

packages/compiler-core/src/index.ts

@@ -17,22 +17,21 @@ export function compile(
   template: string | RootNode,
   options: CompilerOptions = {}
 ): CodegenResult {
-  const ast = isString(template) ? parse(template, options) : template
-  const prefixIdentifiers = !__BROWSER__ && options.prefixIdentifiers === true
-
-  if (__BROWSER__ && options.prefixIdentifiers === false) {
+  if (__BROWSER__ && options.prefixIdentifiers) {
     ;(options.onError || defaultOnError)(
       createCompilerError(ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED)
     )
   }
 
+  const ast = isString(template) ? parse(template, options) : template
+
   transform(ast, {
     ...options,
-    prefixIdentifiers,
+    prefixIdentifiers: !__BROWSER__ && options.prefixIdentifiers === true,
     nodeTransforms: [
       transformIf,
       transformFor,
-      ...(prefixIdentifiers ? [transformExpression] : []),
+      transformExpression,
       transformElement,
       ...(options.nodeTransforms || []) // user transforms
     ],

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

@@ -56,6 +56,9 @@ export function processExpression(
   node: ExpressionNode,
   context: TransformContext
 ) {
+  if (!context.prefixIdentifiers) {
+    return
+  }
   // 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 =
@@ -155,6 +158,9 @@ export function processExpression(
   })
 
   if (children.length) {
+    // mark it empty so that it's more noticeable in case another transform or
+    // codegen forget to handle `.children` first.
+    node.content = __DEV__ ? `[[REMOVED]]` : ``
     node.children = children
   }
 }

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

@@ -1,14 +1,33 @@
 import { DirectiveTransform } from '../transform'
-import { createObjectProperty, createExpression } from '../ast'
+import { createObjectProperty, createExpression, ExpressionNode } from '../ast'
 import { capitalize } from '@vue/shared'
+import { createCompilerError, ErrorCodes } from '../errors'
+import { isSimpleIdentifier } from '../utils'
 
 // v-on without arg is handled directly in ./element.ts due to it affecting
 // codegen for the entire props object. This transform here is only for v-on
 // *with* args.
-export const transformOn: DirectiveTransform = ({ arg, exp, loc }) => {
-  const eventName = arg!.isStatic
-    ? createExpression(`on${capitalize(arg!.content)}`, true, arg!.loc)
-    : createExpression(`'on' + (${arg!.content})`, false, arg!.loc)
+export const transformOn: DirectiveTransform = ({ arg, exp, loc }, context) => {
+  if (!exp) {
+    context.onError(createCompilerError(ErrorCodes.X_V_ON_NO_EXPRESSION, loc))
+  }
+  const { content, children, isStatic, loc: argLoc } = arg!
+  let eventName: ExpressionNode
+  if (isStatic) {
+    // static arg
+    eventName = createExpression(`on${capitalize(content)}`, true, argLoc)
+  } else if (!children) {
+    // dynamic arg with no rewrite
+    eventName = createExpression(
+      `"on" + ${isSimpleIdentifier(content) ? content : `(${content})`}`,
+      false,
+      argLoc
+    )
+  } else {
+    // dynamic arg with ctx prefixing
+    eventName = arg!
+    children.unshift(`"on" + `)
+  }
   // TODO .once modifier handling since it is platform agnostic
   // other modifiers are handled in compiler-dom
   return {

packages/compiler-core/src/utils.ts

@@ -1,5 +1,8 @@
 import { SourceLocation, Position } from './ast'
 
+export const isSimpleIdentifier = (name: string): boolean =>
+  !/^\d|[^\w]/.test(name)
+
 export function getInnerRange(
   loc: SourceLocation,
   offset: number,