feat(define-model)!: support runtime (#104)

* feat(define-model)!: support runtime

* chore: add playground

* chore: add changeset

* docs: add

* refactor: improve perf

* test: update

Author: sxzz

.changeset/shy-maps-jog.md

@@ -0,0 +1,10 @@
+---
+'@vue-macros/define-model': minor
+'unplugin-vue-macros': minor
+'@vue-macros/volar': minor
+'@vue-macros/common': patch
+---
+
+add runtime defineModel, requires `@vueuse/core`.
+
+⚠️ BREAKING CHANGE: original `defineModel` renamed to `$defineModel`.

.vscode/settings.json

@@ -7,6 +7,7 @@
     "Unocss",
     "unplugin",
     "vitest",
-    "vmodel"
+    "vmodel",
+    "Vueuse"
   ]
 }

docs/macros/define-model.md

@@ -5,14 +5,42 @@ Declaring and mutate `v-model` props as the same as normal variable using the `d
 |      Features      |     Supported      |
 | :----------------: | :----------------: |
 |       Vue 3        | :white_check_mark: |
-|       Vue 2        |        :x:         |
+|       Vue 2        | :white_check_mark: |
 | TypeScript / Volar | :white_check_mark: |
 
+## Usage
+
+```vue
+<script setup lang="ts">
+const { modelValue, count } = defineModel<{
+  modelValue: string
+  count: number
+}>()
+
+console.log(modelValue.value)
+modelValue.value = 'newValue'
+</script>
+```
+
+::: warning ❌ Object declaring is not supported.
+
+```vue
+<script setup lang="ts">
+const { modelValue } = defineModel({
+  modelValue: String,
+})
+</script>
+```
+
+:::
+
+## With Reactivity Transform
+
 ::: warning
 
 [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) is required. You should enable it first. Otherwise, it will lose the reactivity connection.
 
-Unfortunately Reactivity Transform is not implemented in Vue 2, so this macros doesn't support Vue 2 now.
+Unfortunately Reactivity Transform is not implemented in Vue 2, so this macro doesn't support Vue 2 now.
 
 :::
 
@@ -22,11 +50,9 @@ Assignment expression is only supported in `<script setup>` block. In other word
 
 :::
 
-## Basic Usage
-
-```vue
+```vue{7-9}
 <script setup lang="ts">
-let { modelValue, count } = defineModel<{
+let { modelValue, count } = $defineModel<{
   modelValue: string
   count: number
 }>()

packages/common/src/constants.ts

@@ -2,6 +2,7 @@ export const DEFINE_PROPS = 'defineProps'
 export const DEFINE_EMITS = 'defineEmits'
 export const DEFINE_OPTIONS = 'defineOptions'
 export const DEFINE_MODEL = 'defineModel'
+export const DEFINE_MODEL_DOLLAR = '$defineModel'
 export const DEFINE_SETUP_COMPONENT = 'defineSetupComponent'
 export const DEFINE_RENDER = 'defineRender'
 

packages/define-model/macros-global.d.ts

@@ -1,7 +1,11 @@
-import type { defineModel as _defineModel } from './macros'
+import type {
+  $defineModel as _$defineModel,
+  defineModel as _defineModel,
+} from './macros'
 
 declare global {
   const defineModel: typeof _defineModel
+  const $defineModel: typeof _$defineModel
 }
 
 export {}

packages/define-model/macros.d.ts

@@ -1 +1,6 @@
-export const defineModel: <T>() => T
+import type { WritableComputedRef } from 'vue'
+
+export const defineModel: <T>() => {
+  [K in keyof T]: WritableComputedRef<T[K]>
+}
+export const $defineModel: <T>() => T

packages/define-model/package.json

@@ -67,6 +67,14 @@
     "build": "tsup && tsx ../../scripts/postbuild.mts",
     "dev": "DEV=1 tsup"
   },
+  "peerDependencies": {
+    "@vueuse/core": "^9.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vueuse/core": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@rollup/pluginutils": "^4.2.1",
     "@vue-macros/common": "workspace:*",

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

@@ -1,5 +1,19 @@
-export const emitHelperId = '/plugin-define-model/emit-helper'
+export const helperPrefix = '/plugin-define-model'
+
+export const emitHelperId = `${helperPrefix}/emit-helper`
 export const emitHelperCode = `export default (emitFn, key, value, ...args) => {
   emitFn(key, value)
   return args.length > 0 ? args[0] : value
 }`
+
+export const useVmodelHelperId = `${helperPrefix}/use-vmodel`
+export const useVmodelHelperCode = `import { getCurrentInstance } from 'vue';
+import { useVModel } from '@vueuse/core';
+export default (...keys) => {
+  const props = getCurrentInstance().proxy.$props
+  const ret = {}
+  for (const [key, eventName] of keys)
+    ret[key] = useVModel(props, key, undefined, { eventName })
+  return ret
+}
+`