README.md

@@ -115,7 +115,7 @@ export const useUserStore = defineStore$('user', () => {
   }
 })
 
-// is equivalent to:
+// convert to:
 export const useUserStore = defineStore('user', () => {
   let token = $ref('')
   function login() {
@@ -135,27 +135,27 @@ import { useBase64 } from '@vueuse/core'
 import { useUserStore } from '~/store/user'
 
 const { token, login } = $toRefs(useUserStore())
-// is equivalent to:
+// convert to:
 const { token, login } = $(toRefs(useUserStore()))
 login()
 
 const text = $inject$('text', token)
-// is equivalent to:
+// convert to:
 const text = $(inject('text', $$(defaultText)))
 
 const { base64 } = $useBase64$(text)
-// is equivalent to:
+// convert to:
 const { base64 } = $(useBase64($$(text)))
 
 provide$('base64', base64)
-// is equivalent to:
+// convert to:
 provide('base64', $$(base64))
 
 const stop = watch$(base64, () => {
   console.log$(base64)
   stop()
 })
-// is equivalent to:
+// convert to:
 const stop = watch($$(base64), () => {
   console.log($$(base64))
   stop()
@@ -164,14 +164,20 @@ const stop = watch($$(base64), () => {
 defineExpose$({
   base64,
 })
-// is equivalent to:
+// convert to:
 defineExpose({
   base64: $$(base64),
 })
+
+let compRef = $useRef()
+defineRender(<Comp ref$={compRef} />)
+// convert to:
+let compRef = $(useRef())
+defineRender(<Comp ref={$$(compRef)} />)
 </script>
 ```
 
-### Volar
+### Volar Config
 
 ```jsonc
 // tsconfig.json
@@ -180,9 +186,23 @@ defineExpose({
   "vueCompilerOptions": {
     "plugins": ["unplugin-vue-reactivity-function/volar"],
     "reactivityFunction": {
-      "ignore": ["$fetch"]
-    }
-  }
+      "ignore": ["$fetch"],
+    },
+  },
+}
+```
+
+### [TS Macro](https://github.com/ts-macro/ts-macro) Config
+
+```ts [tsm.config.json]
+import reactivityFunction from 'unplugin-vue-reactivity-function/volar'
+
+export default {
+  plugins: [
+    reactivityFunction({
+      ignore: ['$fetch'],
+    }),
+  ],
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-vue-reactivity-function",
-  "version": "0.2.3",
+  "version": "0.3.5",
   "packageManager": "pnpm@9.1.3",
   "description": "Reactivity function.",
   "type": "module",
@@ -68,7 +68,7 @@
   "scripts": {
     "lint": "eslint --cache .",
     "lint:fix": "pnpm run lint --fix",
-    "build": "tsup",
+    "build": "tsup --minify",
     "dev": "tsup --watch",
     "test": "vitest",
     "play": "pnpm run -C ./playground dev",
@@ -77,28 +77,29 @@
   },
   "dependencies": {
     "@vue-macros/common": "^1.10.4",
-    "@vue/language-core": "^2.0.19",
-    "unplugin": "^1.10.1"
+    "muggle-string": "^0.4.1",
+    "ts-macro": "^0.1.5",
+    "unplugin": "^1.11.0"
   },
   "devDependencies": {
-    "@babel/types": "^7.24.6",
-    "@sxzz/eslint-config": "^3.11.0",
+    "@babel/types": "^7.24.9",
+    "@sxzz/eslint-config": "^3.14.0",
     "@sxzz/prettier-config": "^2.0.2",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.11",
     "@vue-macros/reactivity-transform": "^0.4.6",
     "@vue-macros/test-utils": "^1.4.0",
     "bumpp": "^9.4.1",
     "change-case": "^5.4.4",
-    "eslint": "^9.3.0",
+    "eslint": "^9.7.0",
     "eslint-define-config": "^2.1.0",
     "fast-glob": "^3.3.2",
-    "prettier": "^3.2.5",
-    "tsup": "^8.0.2",
-    "tsx": "^4.11.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12",
-    "vitest": "^1.6.0",
-    "vue": "^3.4.27"
+    "prettier": "^3.3.3",
+    "tsup": "^8.2.2",
+    "tsx": "^4.16.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.3.4",
+    "vitest": "^2.0.3",
+    "vue": "^3.4.33"
   },
   "engines": {
     "node": ">=16.14.0"

playground/src/App.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { inject, provide, toRefs, watch } from 'vue'
+<script setup lang="tsx">
+import { type Ref, inject, provide, toRefs, watch } from 'vue'
 import { useBase64 } from '@vueuse/core'
 import { useUserStore } from '../store/user'
 
@@ -21,6 +21,10 @@ const stop = watch$(base64, () => {
 defineExpose$({
   base64,
 })
+
+const title = $ref('title')
+const Comp = ({ title }: { title: Ref<string> }) => <div>{title.value}</div>
+const Render = <Comp title$={title} />
 </script>
 
 <template>