feat(compiler): basic v-bind & v-on transforms

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

@@ -123,10 +123,7 @@ function buildProps(
           mergeArgs.push(prop.exp)
         } else {
           context.onError(
-            createCompilerError(
-              ErrorCodes.X_V_BIND_NO_EXPRESSION,
-              prop.loc.start
-            )
+            createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, prop.loc)
           )
         }
         continue

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

@@ -1 +1,24 @@
-// TODO
+import { DirectiveTransform } from '../transform'
+import { createObjectProperty, createExpression } from '../ast'
+import { createCompilerError, ErrorCodes } from '../errors'
+
+// v-bind 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-bind
+// *with* args.
+export const transformBind: DirectiveTransform = (dir, context) => {
+  if (!dir.exp) {
+    context.onError(
+      createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, dir.loc)
+    )
+  }
+  // TODO handle .prop modifier
+  // TODO handle .sync modifier
+  return {
+    props: createObjectProperty(
+      dir.arg!,
+      dir.exp || createExpression('', true, dir.loc),
+      dir.loc
+    ),
+    needRuntime: false
+  }
+}

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

@@ -32,15 +32,12 @@ export const transformFor = createStructuralDirectiveTransform(
         })
       } else {
         context.onError(
-          createCompilerError(
-            ErrorCodes.X_FOR_MALFORMED_EXPRESSION,
-            dir.loc.start
-          )
+          createCompilerError(ErrorCodes.X_FOR_MALFORMED_EXPRESSION, dir.loc)
         )
       }
     } else {
       context.onError(
-        createCompilerError(ErrorCodes.X_FOR_NO_EXPRESSION, dir.loc.start)
+        createCompilerError(ErrorCodes.X_FOR_NO_EXPRESSION, dir.loc)
       )
     }
   }

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

@@ -49,7 +49,7 @@ export const transformIf = createStructuralDirectiveTransform(
               dir.name === 'else'
                 ? ErrorCodes.X_ELSE_NO_ADJACENT_IF
                 : ErrorCodes.X_ELSE_IF_NO_ADJACENT_IF,
-              node.loc.start
+              node.loc
             )
           )
         }

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

@@ -1 +1,24 @@
-// TODO
+import { DirectiveTransform } from '../transform'
+import { createObjectProperty, createExpression } from '../ast'
+import { capitalize } from '@vue/shared'
+
+// 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 = (dir, context) => {
+  const arg = dir.arg!
+  const eventName = arg.isStatic
+    ? createExpression(`on${capitalize(arg.content)}`, true, arg.loc)
+    : // TODO inject capitalize helper
+      createExpression(`'on' + capitalize(${arg.content})`, false, arg.loc)
+  // TODO .once modifier handling since it is platform agnostic
+  // other modifiers are handled in compiler-dom
+  return {
+    props: createObjectProperty(
+      eventName,
+      dir.exp || createExpression(`() => {}`, false, dir.loc),
+      dir.loc
+    ),
+    needRuntime: false
+  }
+}