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

Author: yyx990803

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()

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)