feat(volar): auto infer type for useRef

Author: zhiyuanzmj

packages/unplugin/package.json

@@ -11,7 +11,8 @@
     "rollup",
     "transform",
     "vue-jsx",
-    "volar"
+    "volar",
+    "vapor"
   ],
   "license": "MIT",
   "homepage": "https://github.com/unplugin/unplugin-vue-jsx-vapor#readme",
@@ -25,6 +26,9 @@
   "files": [
     "dist"
   ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "dev": "./src/index.ts",
@@ -182,6 +186,7 @@
     "@vue-jsx-vapor/compiler": "workspace:*",
     "@vue-macros/volar": "3.0.0-beta.4",
     "magic-string-stack": "^0.1.1",
+    "ts-macro": "0.1.19",
     "unplugin": "^1.11.0",
     "unplugin-utils": "^0.2.4"
   },
@@ -195,6 +200,7 @@
     "unplugin-raw": "^0.3.1",
     "vite": "^6.0.0",
     "vitest": "^1.6.0",
+    "vue": "catalog:",
     "webpack": "^5.92.1"
   }
 }

packages/unplugin/src/astro.ts

@@ -1,4 +1,4 @@
-import unplugin from '.'
+import unplugin from './core/unplugin'
 import type { Options } from './types'
 
 export default (options: Options) => ({

packages/unplugin/src/core/unplugin.ts

@@ -0,0 +1,42 @@
+import { type UnpluginFactory, createUnplugin } from 'unplugin'
+import { createFilter, transformWithEsbuild } from 'vite'
+import { plugin } from './plugin'
+import type { Options } from '../types'
+
+export const unpluginFactory: UnpluginFactory<Options | undefined> = (
+  options = {},
+  meta,
+) => {
+  return [
+    plugin(options, meta),
+    options.interop
+      ? { name: 'interop' }
+      : {
+          name: 'unplugin-esbuild',
+          transformInclude: createFilter(
+            options?.include || /\.[jt]sx$/,
+            options?.exclude,
+          ),
+          transform(code, id) {
+            return transformWithEsbuild(code, id, {
+              target: 'esnext',
+              charset: 'utf8',
+              minify: false,
+              minifyIdentifiers: false,
+              minifySyntax: false,
+              minifyWhitespace: false,
+              treeShaking: false,
+              keepNames: false,
+              supported: {
+                'dynamic-import': true,
+                'import-meta': true,
+              },
+            })
+          },
+        },
+  ]
+}
+
+export const unplugin = /* #__PURE__ */ createUnplugin(unpluginFactory)
+
+export default unplugin

packages/unplugin/src/esbuild.ts

@@ -1,4 +1,4 @@
 import { createEsbuildPlugin } from 'unplugin'
-import { unpluginFactory } from '.'
+import { unpluginFactory } from './core/unplugin'
 
 export default createEsbuildPlugin(unpluginFactory)

packages/unplugin/src/index.ts

@@ -1,42 +1 @@
-import { type UnpluginFactory, createUnplugin } from 'unplugin'
-import { createFilter, transformWithEsbuild } from 'vite'
-import { plugin } from './core/plugin'
-import type { Options } from './types'
-
-export const unpluginFactory: UnpluginFactory<Options | undefined> = (
-  options = {},
-  meta,
-) => {
-  return [
-    plugin(options, meta),
-    options.interop
-      ? { name: 'interop' }
-      : {
-          name: 'unplugin-esbuild',
-          transformInclude: createFilter(
-            options?.include || /\.[jt]sx$/,
-            options?.exclude,
-          ),
-          transform(code, id) {
-            return transformWithEsbuild(code, id, {
-              target: 'esnext',
-              charset: 'utf8',
-              minify: false,
-              minifyIdentifiers: false,
-              minifySyntax: false,
-              minifyWhitespace: false,
-              treeShaking: false,
-              keepNames: false,
-              supported: {
-                'dynamic-import': true,
-                'import-meta': true,
-              },
-            })
-          },
-        },
-  ]
-}
-
-export const unplugin = /* #__PURE__ */ createUnplugin(unpluginFactory)
-
-export default unplugin
+export { shallowRef as useRef } from 'vue'

packages/unplugin/src/rollup.ts

@@ -1,4 +1,4 @@
 import { createRollupPlugin } from 'unplugin'
-import { unpluginFactory } from '.'
+import { unpluginFactory } from './core/unplugin'
 
 export default createRollupPlugin(unpluginFactory)

packages/unplugin/src/rspack.ts

@@ -1,4 +1,4 @@
 import { createRspackPlugin } from 'unplugin'
-import { unpluginFactory } from '.'
+import { unpluginFactory } from './core/unplugin'
 
 export default createRspackPlugin(unpluginFactory)

packages/unplugin/src/types.ts

@@ -7,4 +7,9 @@ export interface Options {
   exclude?: FilterPattern
   interop?: boolean
   compile?: CompilerOptions
+  ref?:
+    | {
+        alias?: string[]
+      }
+    | boolean
 }

packages/unplugin/src/vite.ts

@@ -1,4 +1,4 @@
 import { createVitePlugin } from 'unplugin'
-import { unpluginFactory } from '.'
+import { unpluginFactory } from './core/unplugin'
 
 export default createVitePlugin(unpluginFactory)

packages/unplugin/src/volar.ts

@@ -1,2 +1,17 @@
-import plugin from '@vue-macros/volar/jsx-directive'
+import jsxDirective from '@vue-macros/volar/jsx-directive'
+import jsxRef from '@vue-macros/volar/jsx-ref'
+import { type PluginReturn, createPlugin } from 'ts-macro'
+import type { Options } from './types'
+
+const plugin: PluginReturn<Options | undefined, true> = createPlugin(
+  (ctx, options) => {
+    return [
+      jsxDirective()(ctx),
+      options?.ref === false
+        ? []
+        : jsxRef(options?.ref === true ? undefined : options?.ref)(ctx),
+    ].flat()
+  },
+)
+
 export default plugin

packages/unplugin/src/webpack.ts

@@ -1,4 +1,4 @@
 import { createWebpackPlugin } from 'unplugin'
-import { unpluginFactory } from '.'
+import { unpluginFactory } from './core/unplugin'
 
 export default createWebpackPlugin(unpluginFactory)

packages/unplugin/tsup.config.ts

@@ -9,6 +9,7 @@ export default {
   watch: !!process.env.DEV,
   dts: !process.env.DEV,
   cjsInterop: true,
+  external: ['vue'],
   onSuccess: 'npm run build:fix',
   define: {
     __DEV__: 'true',

playground/src/App.tsx

@@ -1,4 +1,5 @@
 import { type Ref, ref } from 'vue'
+import { useRef } from 'unplugin-vue-jsx-vapor'
 import Count2 from './count'
 import If from './if'
 import For from './for'
@@ -19,11 +20,14 @@ export default () => {
     return <div>{value.value}</div>
   }
 
+  const inputRef = useRef()
+
   return (
     <>
       <fieldset>
         <legend>Component</legend>
         <input
+          ref={inputRef}
           value_prop={count.value}
           onInput={(e) => (count.value = e.target.value)}
         />