fix(compiler): use modelValueModifiers instead of modelModifiers

Author: zhiyuanzmj

docs/introduction/getting-started.md

@@ -8,7 +8,15 @@ We assume you are already familiar with the basic usages of Vue before you conti
 
 - Node.js `>= v18.0.0`.
 - Vue `>= v3.6`.
-- VSCode extension [TS Macro](https://marketplace.visualstudio.com/items?itemName=zhiyuanzmj.vscode-ts-macro) and `@ts-macro/tsc`.
+- VSCode extension [TS Macro](https://marketplace.visualstudio.com/items?itemName=zhiyuanzmj.vscode-ts-macro) and install `@ts-macro/tsc` instead of `tsc` to typecheck.
+  ```json
+  {
+    "scripts": {
+      "typecheck": "tsmc --noEmit"
+      // ...
+    }
+  }
+  ```
 
 ### Install
 
@@ -17,7 +25,7 @@ We assume you are already familiar with the basic usages of Vue before you conti
 pnpm add vue-jsx-vapor
 
 # runtime
-pnpm add https://pkg.pr.new/vue@eeab9c4
+pnpm add https://pkg.pr.new/vue@3e7464f
 ```
 
 The Vue Vapor runtime is not release, so we use [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) to install.

package.json

@@ -41,7 +41,7 @@
     "@sxzz/eslint-config": "^6.0.2",
     "@ts-macro/tsc": "^0.1.24",
     "@types/node": "^22.13.10",
-    "@vue-macros/reactivity-transform": "3.0.0-beta.4",
+    "@vue-macros/reactivity-transform": "catalog:",
     "bumpp": "^10.0.3",
     "conventional-changelog-cli": "^5.0.0",
     "eslint": "^9.22.0",

packages/babel/package.json

@@ -57,8 +57,8 @@
   "dependencies": {
     "@babel/core": "catalog:",
     "@babel/parser": "catalog:",
-    "@babel/plugin-syntax-jsx": "^7.25.9",
-    "@babel/traverse": "^7.26.9",
+    "@babel/plugin-syntax-jsx": "catalog:",
+    "@babel/traverse": "catalog:",
     "@babel/types": "catalog:",
     "@vue-jsx-vapor/compiler": "workspace:*",
     "source-map-js": "^1.2.1"

packages/compiler/src/transform.ts

@@ -17,6 +17,7 @@ import {
   type OperationNode,
   type RootIRNode,
   type RootNode,
+  type SetEventIRNode,
 } from './ir'
 import { newBlock, newDynamic } from './transforms/utils'
 import { findProp, getText, isConstantExpression, isTemplate } from './utils'
@@ -39,6 +40,7 @@ export interface DirectiveTransformResult {
   modifier?: '.' | '^'
   runtimeCamelize?: boolean
   handler?: boolean
+  handlerModifiers?: SetEventIRNode['modifiers']
   model?: boolean
   modelModifiers?: string[]
 }

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

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler: vModel transform > component > v-model for component should generate modelModifiers 1`] = `
+exports[`compiler: vModel transform > component > v-model for component should generate modelValueModifiers 1`] = `
 "
   const n0 = _createComponent(Comp, { modelValue: () => (foo),
   "onUpdate:modelValue": () => _value => (foo = _value),
-  modelModifiers: () => ({ trim: true, "bar-baz": true }) })
+  modelValueModifiers: () => ({ trim: true, "bar-baz": true }) })
   return n0
 "
 `;

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

@@ -244,13 +244,13 @@ describe('compiler: vModel transform', () => {
       })
     })
 
-    test('v-model for component should generate modelModifiers', () => {
+    test('v-model for component should generate modelValueModifiers', () => {
       const { code, ir } = compileWithVModel(
         '<Comp v-model_trim_bar-baz={foo} />',
       )
       expect(code).toMatchSnapshot()
       expect(code).contain(
-        `modelModifiers: () => ({ trim: true, "bar-baz": true })`,
+        `modelValueModifiers: () => ({ trim: true, "bar-baz": true })`,
       )
       expect(ir.block.dynamic.children[0].operation).toMatchObject({
         type: IRNodeTypes.CREATE_COMPONENT_NODE,

packages/macros/package.json

@@ -172,7 +172,7 @@
     }
   },
   "dependencies": {
-    "@vue-macros/common": "3.0.0-beta.4",
+    "@vue-macros/common": "catalog:",
     "@vue/compiler-sfc": "catalog:",
     "@vue/language-core": "^2.2.8",
     "hash-sum": "^2.0.0",
@@ -184,7 +184,7 @@
     "@nuxt/kit": "catalog:",
     "@nuxt/schema": "catalog:",
     "@types/hash-sum": "^1.0.2",
-    "@vue-macros/test-utils": "3.0.0-beta.4",
+    "@vue-macros/test-utils": "catalog:",
     "vue": "catalog:"
   }
 }

packages/macros/src/core/define-component/await.ts

@@ -86,7 +86,6 @@ function processAwait(
       s,
       0,
       `withAsyncContext`,
-      'vue',
     )}(${containsNestedAwait ? `async ` : ``}() => `,
   )
   s.appendLeft(

packages/macros/src/core/define-component/index.ts

@@ -18,8 +18,7 @@ export function transformDefineComponent(
     defineComponentName &&
     !['defineComponent', 'defineVaporComponent'].includes(defineComponentName)
   ) {
-    // @ts-expect-error should be removed after @vue-macros/common released.
-    importHelperFn(s, 0, 'defineComponent', 'vue', false, defineComponentName)
+    importHelperFn(s, 0, 'defineComponent', defineComponentName)
   }
 
   let hasRestProp = false
@@ -32,7 +31,7 @@ export function transformDefineComponent(
         generateRestProps: (restPropsName, index, list) => {
           if (index === list.length - 1) {
             hasRestProp = true
-            const useAttrs = importHelperFn(s, 0, 'useAttrs', 'vue')
+            const useAttrs = importHelperFn(s, 0, 'useAttrs')
             return `const ${restPropsName} = ${useAttrs}()`
           }
         },

packages/macros/src/core/define-expose.ts

@@ -10,7 +10,7 @@ export function transformDefineExpose(
   s.appendRight(
     node.arguments[0]?.start || node.end! - 1,
     lib.includes('vapor')
-      ? `${importHelperFn(s, 0, 'currentInstance', 'vue')}.exposed = `
-      : `${importHelperFn(s, 0, 'getCurrentInstance', 'vue')}().exposed = `,
+      ? `${importHelperFn(s, 0, 'currentInstance')}.exposed = `
+      : `${importHelperFn(s, 0, 'getCurrentInstance')}().exposed = `,
   )
 }

packages/macros/src/core/define-model.ts

@@ -9,7 +9,7 @@ export function transformDefineModel(
 ): void {
   s.overwriteNode(
     node.callee,
-    importHelperFn(s, 0, 'useModel', useModelHelperId),
+    importHelperFn(s, 0, 'useModel', undefined, useModelHelperId),
   )
   s.appendRight(
     node.arguments[0]?.start || node.end! - 1,

packages/macros/src/core/define-slots.ts

@@ -15,7 +15,7 @@ export function transformDefineSlots(
     `Object.assign`,
   )
   const slots = lib.includes('vue')
-    ? `${importHelperFn(s, 0, 'useSlots', 'vue')}()`
+    ? `${importHelperFn(s, 0, 'useSlots')}()`
     : `${propsName}.vSlots`
   s.appendLeft(node.end! - 1, `${node.arguments[0] ? ',' : '{}, '}${slots}`)
 }

packages/macros/src/core/helper/use-model.ts

@@ -47,15 +47,16 @@ export function useModel(
     }
   })
 
-  const modifiers =
-    name === 'modelValue' ? props.modelModifiers : props[`${name}Modifiers`]
   // @ts-expect-error
   res[Symbol.iterator] = () => {
     let i = 0
     return {
       next() {
         if (i < 2) {
-          return { value: i++ ? modifiers || {} : res, done: false }
+          return {
+            value: i++ ? props[`${name}Modifiers`] || {} : res,
+            done: false,
+          }
         } else {
           return { done: true }
         }

packages/macros/src/core/restructure.ts

@@ -67,6 +67,7 @@ export function restructure(
         s,
         0,
         'createPropsDefaultProxy',
+        undefined,
         options.withDefaultsFrom ?? withDefaultsHelperId,
       )
       const resolvedPath = path.replace(
@@ -94,7 +95,6 @@ export function restructure(
             s,
             0,
             'createPropsRestProxy',
-            'vue',
           )}(${rest.path}, [${rest.value}])`,
       )
     }

packages/macros/src/volar/index.ts

@@ -213,15 +213,21 @@ export function getRootMap(options: TransformOptions): RootMap {
 
       const id = toValidAssetId(modelName, `${HELPER_PREFIX}model`)
       const typeString = `import('vue').UnwrapRef<typeof ${id}>`
-      ;(rootMap.get(root)!.defineModel ??= [])!.push(
+      const defineModel = (rootMap.get(root)!.defineModel ??= [])
+      defineModel.push(
         `${modelName.includes('-') ? `'${modelName}'` : modelName}${isRequired ? ':' : '?:'} ${typeString}`,
         `'onUpdate:${modelName}'?: ($event: ${typeString}) => any`,
       )
+      if (expression.typeArguments?.[1]) {
+        defineModel.push(
+          `${modelName}Modifiers?: Partial<Record<${expression.typeArguments[1].getText(ast)}, boolean>>`,
+        )
+      }
       replaceRange(
         codes,
         initializer.getStart(ast),
         initializer.getStart(ast),
-        `// @ts-ignore\n${id};\nlet ${id} =`,
+        `// @ts-ignore\n${id};\nlet ${id} = `,
       )
     } else if (options.defineSlots.alias.includes(macroName)) {
       replaceRange(

packages/macros/tests/__snapshots__/fixtures.spec.ts.snap

@@ -10,6 +10,7 @@ import { withAsyncContext as __MACROS_withAsyncContext } from "vue";import { def
 const Comp = defineComponent(
   (__MACROS_props) => {
 const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props, {'.bar': 'bar'!});const attrs = __MACROS_useAttrs();
+    __MACROS_useModel(__MACROS_props, 'modelValue',)
     const foo = $(
       __MACROS_useModel(__MACROS_props, 'foo', {
         validator: (value) => {
@@ -20,7 +21,7 @@ const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props,
     )
     return <div>{[foo, __MACROS_default_props.bar, attrs.baz]}</div>
   },
-  {props: { 'bar': { required: true }, 'foo': { required: true, validator: (value) => {
+  {props: { 'bar': { required: true }, 'modelValue': null, 'onUpdate:modelValue': null, 'modelModifiers': null, 'foo': { required: true, validator: (value) => {
           return value === 'foo'
         }, type: String }, 'onUpdate:foo': null, 'fooModifiers': null },inheritAttrs: false, name: 'Comp' },
 )
@@ -79,14 +80,14 @@ export const Comp2 = ({ foo, ...__MACROS_props }: any) => {
 exports[`fixtures > ./fixtures/define-model.tsx 1`] = `
 "
 import { useModel as __MACROS_useModel } from "vue-jsx-vapor/macros/use-model";export const Comp = ({ bar, ...__MACROS_props }: { bar: string }) => {
-  const foo = __MACROS_useModel(__MACROS_props, 'foo', { default: bar })
+  const foo = __MACROS_useModel<string, 'm1' | 'm2'>(__MACROS_props, 'foo', { default: bar })
   return <div>{foo.value}</div>
 }
 
 export default function (__MACROS_props) {
   const modelValue = $(__MACROS_useModel<string>(__MACROS_props, 'modelValue',)!)
   return (
-    <Comp v-model:foo={modelValue} bar="bar">
+    <Comp v-model:foo_m1={modelValue} bar="bar">
       {modelValue}
     </Comp>
   )
@@ -148,6 +149,7 @@ import { withAsyncContext as __MACROS_withAsyncContext } from "vue";import { def
 const Comp = defineComponent(
   (__MACROS_props) => {
 const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props, {'.bar': 'bar'!});const attrs = __MACROS_useAttrs();
+    __MACROS_useModel(__MACROS_props, 'modelValue',)
     const foo = $(
       __MACROS_useModel(__MACROS_props, 'foo', {
         validator: (value) => {
@@ -158,7 +160,7 @@ const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props,
     )
     return <div>{[foo, __MACROS_default_props.bar, attrs.baz]}</div>
   },
-  {props: { 'bar': { required: true }, 'foo': { required: true, validator: (value) => {
+  {props: { 'bar': { required: true }, 'modelValue': null, 'onUpdate:modelValue': null, 'modelModifiers': null, 'foo': { required: true, validator: (value) => {
           return value === 'foo'
         }, type: String }, 'onUpdate:foo': null, 'fooModifiers': null },inheritAttrs: false, name: 'Comp' },
 )
@@ -217,14 +219,14 @@ export const Comp2 = ({ foo, ...__MACROS_props }: any) => {
 exports[`vue/vapor fixtures > ./fixtures/define-model.tsx 1`] = `
 "
 import { useModel as __MACROS_useModel } from "vue-jsx-vapor/macros/use-model";export const Comp = ({ bar, ...__MACROS_props }: { bar: string }) => {
-  const foo = __MACROS_useModel(__MACROS_props, 'foo', { default: bar })
+  const foo = __MACROS_useModel<string, 'm1' | 'm2'>(__MACROS_props, 'foo', { default: bar })
   return <div>{foo.value}</div>
 }
 
 export default function (__MACROS_props) {
   const modelValue = $(__MACROS_useModel<string>(__MACROS_props, 'modelValue',)!)
   return (
-    <Comp v-model:foo={modelValue} bar="bar">
+    <Comp v-model:foo_m1={modelValue} bar="bar">
       {modelValue}
     </Comp>
   )

packages/macros/tests/fixtures/define-component.tsx

@@ -2,6 +2,7 @@ import { defineComponent, nextTick } from 'vue'
 
 const Comp = defineComponent(
   ({ bar = 'bar'!, ...attrs }: { bar: 'bar'; baz: 'baz' }) => {
+    defineModel()
     const foo = $(
       defineModel('foo', {
         validator: (value) => {

packages/macros/tests/fixtures/define-model.tsx

@@ -1,12 +1,12 @@
 export const Comp = ({ bar }: { bar: string }) => {
-  const foo = defineModel('foo', { default: bar })
+  const foo = defineModel<string, 'm1' | 'm2'>('foo', { default: bar })
   return <div>{foo.value}</div>
 }
 
 export default function () {
   const modelValue = $(defineModel<string>()!)
   return (
-    <Comp v-model:foo={modelValue} bar="bar">
+    <Comp v-model:foo_m1={modelValue} bar="bar">
       {modelValue}
     </Comp>
   )

packages/vue-jsx-vapor/package.json

@@ -216,15 +216,14 @@
   },
   "dependencies": {
     "@babel/core": "catalog:",
-    "@babel/plugin-transform-typescript": "^7.26.8",
+    "@babel/plugin-transform-typescript": "catalog:",
     "@vue-jsx-vapor/babel": "workspace:*",
     "@vue-jsx-vapor/compiler": "workspace:*",
     "@vue-jsx-vapor/macros": "workspace:*",
-    "@vue-macros/volar": "^3.0.0-beta.5",
-    "magic-string-stack": "^0.1.2",
+    "@vue-macros/volar": "catalog:",
     "ts-macro": "catalog:",
     "unplugin": "catalog:",
-    "unplugin-utils": "^0.2.4"
+    "unplugin-utils": "catalog:"
   },
   "devDependencies": {
     "@nuxt/kit": "catalog:",