feat(compiler-core): support v-model shorthand for key and value with the same name

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

@@ -26,6 +26,21 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: transform v-model > no expression 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(), _createElementBlock("input", {
+      "foo-value": fooValue,
+      "onUpdate:fooValue": $event => ((fooValue) = $event)
+    }, null, 40 /* PROPS, NEED_HYDRATION */, ["foo-value", "onUpdate:fooValue"]))
+  }
+}"
+`;
+
 exports[`compiler: transform v-model > simple expression (with multilines) 1`] = `
 "const _Vue = Vue
 

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

@@ -394,6 +394,42 @@ describe('compiler: transform v-model', () => {
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
   })
 
+  test('no expression', () => {
+    const root = parseWithVModel('<input v-model:foo-value />')
+    const node = root.children[0] as ElementNode
+    const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
+      .properties
+    expect(props[0]).toMatchObject({
+      key: {
+        content: 'foo-value',
+        isStatic: true,
+      },
+      value: {
+        content: 'fooValue',
+        isStatic: false,
+      },
+    })
+
+    expect(props[1]).toMatchObject({
+      key: {
+        content: 'onUpdate:fooValue',
+        isStatic: true,
+      },
+      value: {
+        children: [
+          '$event => ((',
+          {
+            content: 'fooValue',
+            isStatic: false,
+          },
+          ') = $event)',
+        ],
+      },
+    })
+
+    expect(generate(root).code).toMatchSnapshot()
+  })
+
   test('should cache update handler w/ cacheHandlers: true', () => {
     const root = parseWithVModel('<input v-model="foo" />', {
       prefixIdentifiers: true,
@@ -508,14 +544,26 @@ describe('compiler: transform v-model', () => {
   })
 
   describe('errors', () => {
-    test('missing expression', () => {
+    test('missing argument and expression', () => {
       const onError = vi.fn()
       parseWithVModel('<span v-model />', { onError })
 
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_NO_EXPRESSION,
+          code: ErrorCodes.X_V_MODEL_NO_ARGUMENT_AND_EXPRESSION,
+        }),
+      )
+    })
+
+    test('invalid argument for same-name shorthand', () => {
+      const onError = vi.fn()
+      parseWithVModel(`<div v-model:[arg] />`, { onError })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_MODEL_INVALID_SAME_NAME_ARGUMENT,
         }),
       )
     })

packages/compiler-core/src/errors.ts

@@ -84,7 +84,8 @@ export enum ErrorCodes {
   X_V_SLOT_DUPLICATE_SLOT_NAMES,
   X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
   X_V_SLOT_MISPLACED,
-  X_V_MODEL_NO_EXPRESSION,
+  X_V_MODEL_NO_ARGUMENT_AND_EXPRESSION,
+  X_V_MODEL_INVALID_SAME_NAME_ARGUMENT,
   X_V_MODEL_MALFORMED_EXPRESSION,
   X_V_MODEL_ON_SCOPE_VARIABLE,
   X_V_MODEL_ON_PROPS,
@@ -172,7 +173,8 @@ export const errorMessages: Record<ErrorCodes, string> = {
     `Extraneous children found when component already has explicitly named ` +
     `default slot. 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_NO_ARGUMENT_AND_EXPRESSION]: `v-model is missing argument and expression.`,
+  [ErrorCodes.X_V_MODEL_INVALID_SAME_NAME_ARGUMENT]: `v-model with same-name shorthand only allows static argument.`,
   [ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION]: `v-model value must be a valid JavaScript member expression.`,
   [ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
   [ErrorCodes.X_V_MODEL_ON_PROPS]: `v-model cannot be used on a prop, because local prop bindings are not writable.\nUse a v-bind binding combined with a v-on listener that emits update:x event instead.`,

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

@@ -19,14 +19,39 @@ import {
 import { IS_REF } from '../runtimeHelpers'
 import { BindingTypes } from '../options'
 import { camelize } from '@vue/shared'
+import { transformBindShorthand } from './vBind'
 
 export const transformModel: DirectiveTransform = (dir, node, context) => {
-  const { exp, arg } = dir
+  const { arg, loc } = dir
+  let { exp } = dir
+
   if (!exp) {
-    context.onError(
-      createCompilerError(ErrorCodes.X_V_MODEL_NO_EXPRESSION, dir.loc),
-    )
-    return createTransformProps()
+    if (!arg) {
+      context.onError(
+        createCompilerError(
+          ErrorCodes.X_V_MODEL_NO_ARGUMENT_AND_EXPRESSION,
+          dir.loc,
+        ),
+      )
+      return createTransformProps()
+    }
+
+    // same-name shorthand - v-model:arg is expanded to v-model:arg="arg"
+    if (arg.type !== NodeTypes.SIMPLE_EXPRESSION || !arg.isStatic) {
+      // only simple expression is allowed for same-name shorthand
+      context.onError(
+        createCompilerError(
+          ErrorCodes.X_V_MODEL_INVALID_SAME_NAME_ARGUMENT,
+          arg.loc,
+        ),
+      )
+      return createTransformProps([
+        createObjectProperty(arg, createSimpleExpression('', true, loc)),
+      ])
+    }
+
+    transformBindShorthand(dir, context)
+    exp = dir.exp!
   }
 
   // we assume v-model directives are always parsed

packages/compiler-dom/src/errors.ts

@@ -21,7 +21,7 @@ export function createDOMCompilerError(
 }
 
 export enum DOMErrorCodes {
-  X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
+  X_V_HTML_NO_EXPRESSION = 54 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,