feat(compiler-core/v-model): generate modelModifiers for component v-model

diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index 1fde627ac5ce03bc9a3af86e017eb2730dbab823..2efd895a6f11695f20f70eeb954b803d90df4b0f 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -371,6 +371,27 @@ describe('compiler: transform v-model', () => {
     expect(codegen.arguments[4]).toBe(`["modelValue", "onUpdate:modelValue"]`)
   })
 
+  test('should generate modelModifers for component v-model', () => {
+    const root = parseWithVModel('<Comp v-model.trim.bar-baz="foo" />', {
+      prefixIdentifiers: true
+    })
+    const args = (root.children[0] as ComponentNode).codegenNode!.arguments
+    // props
+    expect(args[1]).toMatchObject({
+      properties: [
+        { key: { content: `modelValue` } },
+        { key: { content: `onUpdate:modelValue` } },
+        {
+          key: { content: 'modelModifiers' },
+          value: { content: `{ trim: true, "bar-baz": true }`, isStatic: false }
+        }
+      ]
+    })
+    // should NOT include modelModifiers in dynamicPropNames because it's never
+    // gonna change
+    expect(args[4]).toBe(`["modelValue"]`)
+  })
+
   describe('errors', () => {
     test('missing expression', () => {
       const onError = jest.fn()

diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts
index b4e35c2cd7fc554f6c11e87d54019bdda82d2ef3..dd462cf927bc33dbe310b60e9c70f7d1f541a3f8 100644 (file)
--- a/packages/compiler-core/src/transforms/vModel.ts
+++ b/packages/compiler-core/src/transforms/vModel.ts
@@ -6,7 +6,8 @@ import {
   NodeTypes,
   Property,
   CompoundExpressionNode,
-  createInterpolation
+  createInterpolation,
+  ElementTypes
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { isMemberExpression, isSimpleIdentifier } from '../utils'
@@ -64,7 +65,9 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
   }
 
   const props = [
+    // modelValue: foo
     createObjectProperty(propName, dir.exp!),
+    // "onUpdate:modelValue": $event => (foo = $event)
     createObjectProperty(
       eventName,
       createCompoundExpression([
@@ -75,8 +78,17 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     )
   ]
 
-  if (dir.modifiers.length) {
-    // TODO add modelModifiers prop
+  // modelModifiers: { foo: true, "bar-baz": true }
+  if (dir.modifiers.length && node.tagType === ElementTypes.COMPONENT) {
+    const modifiers = dir.modifiers
+      .map(m => (isSimpleIdentifier(m) ? m : JSON.stringify(m)) + `: true`)
+      .join(`, `)
+    props.push(
+      createObjectProperty(
+        `modelModifiers`,
+        createSimpleExpression(`{ ${modifiers} }`, false, dir.loc, true)
+      )
+    )
   }
 
   return createTransformProps(props)