feat(compiler): transform vModel

packages/compiler/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`compiler: transform v-model simple expression 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
+
+    const _component_TextField = _resolveComponent(\\"TextField\\")
+
+    return (_openBlock(), _createBlock(_component_TextField, {
+      modelValue: model,
+      \\"onUpdate:modelValue\\": $event => (model = $event)
+    }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+  }
+}"
+`;

packages/compiler/__tests__/transforms/vModel.spec.ts

@@ -0,0 +1,65 @@
+import {
+  baseParse as parse,
+  transform,
+  generate,
+  ElementNode,
+  ObjectExpression,
+  CompilerOptions,
+  VNodeCall,
+  transformElement
+} from '../../src'
+import { transformModel } from '../../src/transforms/vModel'
+
+function parseWithVModel(template: string, options: CompilerOptions = {}) {
+  const ast = parse(template)
+
+  transform(ast, {
+    nodeTransforms: [transformElement],
+    directiveTransforms: {
+      ...options.directiveTransforms,
+      model: transformModel
+    },
+    ...options
+  })
+
+  return ast
+}
+
+describe('compiler: transform v-model', () => {
+  test('simple expression', () => {
+    const root = parseWithVModel('<TextField v-model="model" />')
+    const node = root.children[0] as ElementNode
+    const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+      .properties
+
+    expect(props[0]).toMatchObject({
+      key: {
+        content: 'modelValue',
+        isStatic: true
+      },
+      value: {
+        content: 'model',
+        isStatic: false
+      }
+    })
+
+    expect(props[1]).toMatchObject({
+      key: {
+        content: 'onUpdate:modelValue',
+        isStatic: true
+      },
+      value: {
+        children: [
+          '$event => (',
+          {
+            content: 'model',
+            isStatic: false
+          },
+          ' = $event)'
+        ]
+      }
+    })
+
+    expect(generate(root).code).toMatchSnapshot()
+  })
+})

packages/compiler/src/transforms/vModel.ts

@@ -0,0 +1,9 @@
+import {
+  transformModel as baseTransform,
+  DirectiveTransform
+} from '@vue/compiler-core'
+
+export const transformModel: DirectiveTransform = (dir, node, context) => {
+  // todo: remove if we don't need to alter vModel from compilerCore
+  return baseTransform(dir, node, context)
+}