feat(compiler-core): create transform for v-model (#146)

packages/compiler-core/src/errors.ts

@@ -79,6 +79,8 @@ export const enum ErrorCodes {
   X_V_SLOT_DUPLICATE_SLOT_NAMES,
   X_V_SLOT_EXTRANEOUS_NON_SLOT_CHILDREN,
   X_V_SLOT_MISPLACED,
+  X_V_MODEL_NO_EXPRESSION,
+  X_V_MODEL_MALFORMED_EXPRESSION,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -167,6 +169,8 @@ export const errorMessages: { [code: number]: string } = {
     `Extraneous children found when component has explicit slots. ` +
     `These children will be ignored.`,
   [ErrorCodes.X_V_SLOT_MISPLACED]: `v-slot can only be used on components or <template> tags.`,
+  [ErrorCodes.X_V_MODEL_NO_EXPRESSION]: `v-model is missing expression.`,
+  [ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION]: `v-model has invalid expression.`,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,

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

@@ -1 +1,54 @@
-// TODO
+import { DirectiveTransform } from '../transform'
+import {
+  createSimpleExpression,
+  createObjectProperty,
+  createCompoundExpression,
+  NodeTypes,
+  Property
+} from '../ast'
+import { createCompilerError, ErrorCodes } from '../errors'
+import { isEmptyExpression } from '../utils'
+
+export const transformModel: DirectiveTransform = (dir, node, context) => {
+  const { exp, arg } = dir
+  if (!exp) {
+    context.onError(createCompilerError(ErrorCodes.X_V_MODEL_NO_EXPRESSION))
+
+    return createTransformProps()
+  }
+
+  if (isEmptyExpression(exp)) {
+    context.onError(
+      createCompilerError(ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION)
+    )
+
+    return createTransformProps()
+  }
+
+  const propName = arg ? arg : createSimpleExpression('modelValue', true)
+  const eventName = arg
+    ? arg.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic
+      ? createSimpleExpression('onUpdate:' + arg.content, true)
+      : createCompoundExpression([
+          createSimpleExpression('onUpdate:', true),
+          '+',
+          ...(arg.type === NodeTypes.SIMPLE_EXPRESSION ? [arg] : arg.children)
+        ])
+    : createSimpleExpression('onUpdate:modelValue', true)
+
+  return createTransformProps([
+    createObjectProperty(propName, dir.exp!),
+    createObjectProperty(
+      eventName,
+      createCompoundExpression([
+        `$event => (`,
+        ...(exp.type === NodeTypes.SIMPLE_EXPRESSION ? [exp] : exp.children),
+        ` = $event)`
+      ])
+    )
+  ])
+}
+
+function createTransformProps(props: Property[] = []) {
+  return { props, needRuntime: false }
+}

packages/compiler-core/src/utils.ts

@@ -20,7 +20,8 @@ import {
   BlockCodegenNode,
   ElementCodegenNode,
   SlotOutletCodegenNode,
-  ComponentCodegenNode
+  ComponentCodegenNode,
+  ExpressionNode
 } from './ast'
 import { parse } from 'acorn'
 import { walk } from 'estree-walker'
@@ -237,3 +238,7 @@ export function toValidAssetId(
 ): string {
   return `_${type}_${name.replace(/[^\w]/g, '')}`
 }
+
+export function isEmptyExpression(node: ExpressionNode) {
+  return node.type === NodeTypes.SIMPLE_EXPRESSION && !node.content.trim()
+}