feat: add ignore option

Author: zhiyuanzmj

README.md

@@ -18,7 +18,11 @@ npm i -D unplugin-vue-reactivity-function
 import VueReactivityFunction from 'unplugin-vue-reactivity-function/vite'
 
 export default defineConfig({
-  plugins: [VueReactivityFunction()],
+  plugins: [
+    VueReactivityFunction({
+      ignore: ['$fetch'],
+    }),
+  ],
 })
 ```
 
@@ -32,7 +36,11 @@ export default defineConfig({
 import VueReactivityFunction from 'unplugin-vue-reactivity-function/rollup'
 
 export default {
-  plugins: [VueReactivityFunction()],
+  plugins: [
+    VueReactivityFunction({
+      ignore: ['$fetch'],
+    }),
+  ],
 }
 ```
 
@@ -46,7 +54,11 @@ export default {
 import { build } from 'esbuild'
 
 build({
-  plugins: [require('unplugin-vue-reactivity-function/esbuild')()],
+  plugins: [
+    require('unplugin-vue-reactivity-function/esbuild')({
+      ignore: ['$fetch'],
+    }),
+  ],
 })
 ```
 
@@ -59,7 +71,11 @@ build({
 // webpack.config.js
 module.exports = {
   /* ... */
-  plugins: [require('unplugin-vue-reactivity-function/webpack')()],
+  plugins: [
+    require('unplugin-vue-reactivity-function/webpack')({
+      ignore: ['$fetch'],
+    }),
+  ],
 }
 ```
 
@@ -72,7 +88,11 @@ module.exports = {
 // vue.config.js
 module.exports = {
   configureWebpack: {
-    plugins: [require('unplugin-vue-reactivity-function/webpack')()],
+    plugins: [
+      require('unplugin-vue-reactivity-function/webpack')({
+        ignore: ['$fetch'],
+      }),
+    ],
   },
 }
 ```
@@ -158,7 +178,10 @@ defineExpose({
 {
   // ...
   "vueCompilerOptions": {
-    "plugins": ["unplugin-vue-reactivity-function/volar"]
+    "plugins": ["unplugin-vue-reactivity-function/volar"],
+    "reactivityFunction": {
+      "ignore": ["$fetch"]
+    }
   }
 }
 ```

playground/src/App.vue

@@ -10,7 +10,10 @@ const text = $inject$('text', token)
 const { base64 } = $useBase64$(text)
 provide$('base64', base64)
 
+const $fetch = fetch
+
 const stop = watch$(base64, () => {
+  $fetch('')
   console.log$(base64)
   stop()
 })

playground/tsconfig.json

@@ -17,6 +17,9 @@
     "skipLibCheck": true
   },
   "vueCompilerOptions": {
-    "plugins": ["../dist/volar.js"]
+    "plugins": ["../dist/volar.js"],
+    "reactivityFunction": {
+      "ignore": ["$fetch"]
+    }
   }
 }

playground/vite.config.ts

@@ -9,13 +9,11 @@ export default defineConfig({
   },
   plugins: [
     Vue({
-      include: [/\.vue$/],
       reactivityTransform: true,
-      script: {
-        hoistStatic: false,
-      },
     }),
-    VueReactivityFunction(),
+    VueReactivityFunction({
+      ignore: ['$fetch'],
+    }),
     Inspect({
       build: true,
     }),

src/core/options.ts

@@ -1,14 +1,32 @@
-import type { BaseOptions } from '@vue-macros/common'
+import {
+  type BaseOptions,
+  REGEX_NODE_MODULES,
+  REGEX_SUPPORTED_EXT,
+} from '@vue-macros/common'
 
-export interface Options extends Pick<BaseOptions, 'include' | 'exclude'> {}
+export interface Options extends Pick<BaseOptions, 'include' | 'exclude'> {
+  ignore?: string[]
+}
 
-export type OptionsResolved = Pick<Required<Options>, 'include'> &
+export type OptionsResolved = Pick<Required<Options>, 'include' | 'ignore'> &
   Pick<Options, 'exclude'>
 
+export const ignore = [
+  'ref',
+  'computed',
+  'shallowRef',
+  'toRef',
+  'customRef',
+  'defineProp',
+  'defineProps',
+  'defineModels',
+]
+
 export function resolveOption(options: Options): OptionsResolved {
   return {
-    include: [/\.([cm]?[jt]sx?|vue)$/],
-    exclude: [/node_modules/],
+    include: [REGEX_SUPPORTED_EXT],
+    exclude: [REGEX_NODE_MODULES],
     ...options,
+    ignore: [...ignore, ...(options.ignore || []).map((str) => str.slice(1))],
   }
 }

src/index.ts

@@ -66,7 +66,11 @@ function transformFunctionReturn(node: t.Node, s: MagicString, offset: number) {
     }
 }
 
-function transformReactivityFunction(code: string, id: string) {
+function transformReactivityFunction(
+  code: string,
+  id: string,
+  ignore: string[]
+) {
   const lang = getLang(id)
   let asts: {
     ast: t.Program
@@ -100,7 +104,7 @@ function transformReactivityFunction(code: string, id: string) {
         if (node.type !== 'CallExpression') return
 
         if (
-          /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?$)/.test(
+          new RegExp(`^\\$(?!(\\$|${ignore.join('|')})?$)`).test(
             s.sliceNode(node.callee, { offset })
           )
         ) {
@@ -135,7 +139,7 @@ export default createUnplugin<Options | undefined, false>((rawOptions = {}) => {
       return filter(id)
     },
     transform(code, id) {
-      return transformReactivityFunction(code, id)
+      return transformReactivityFunction(code, id, options.ignore)
     },
   }
 })

src/shim.d.ts

@@ -0,0 +1,13 @@
+import type { FilterPattern } from '@rollup/pluginutils'
+
+declare module '@vue/language-core' {
+  export interface VueCompilerOptions {
+    reactivityFunction?: {
+      include?: FilterPattern
+      exclude?: FilterPattern
+      ignore?: string[]
+    }
+  }
+}
+
+export {}

src/volar.ts

@@ -5,17 +5,20 @@ import {
   type VueLanguagePlugin,
   replaceSourceRange,
 } from '@vue/language-core'
+import { ignore } from './core/options'
 
 function transform({
   codes,
   ast,
   ts,
   source,
+  ignore,
 }: {
   codes: Segment<FileRangeCapabilities>[]
   ast: import('typescript/lib/tsserverlibrary').SourceFile
   ts: typeof import('typescript/lib/tsserverlibrary')
   source: 'script' | 'scriptSetup'
+  ignore: string[]
 }) {
   function transformArguments(
     argument: import('typescript/lib/tsserverlibrary').Node
@@ -92,12 +95,11 @@ function transform({
   }
 
   function walkReactivityFunction(
-    node: import('typescript/lib/tsserverlibrary').Node,
-    parent: import('typescript/lib/tsserverlibrary').Node
+    node: import('typescript/lib/tsserverlibrary').Node
   ) {
     if (ts.isCallExpression(node)) {
       if (
-        /^\$(?!(\$|ref|computed|shallowRef|toRef|customRef|defineProp|defineProps|defineModels)?$)/.test(
+        new RegExp(`^\\$(?!(\\$|${ignore.join('|')})?$)`).test(
           node.expression.getText(ast)
         )
       ) {
@@ -125,13 +127,16 @@ function transform({
     }
 
     node.forEachChild((child) => {
-      walkReactivityFunction(child, node)
+      walkReactivityFunction(child)
     })
   }
-  ast.forEachChild((child) => walkReactivityFunction(child, ast))
+  ast.forEachChild(walkReactivityFunction)
 }
 
-const plugin: VueLanguagePlugin = ({ modules: { typescript: ts } }) => {
+const plugin: VueLanguagePlugin = ({
+  modules: { typescript: ts },
+  vueCompilerOptions,
+}) => {
   return {
     name: 'vue-reactivity-function',
     version: 1,
@@ -145,6 +150,12 @@ const plugin: VueLanguagePlugin = ({ modules: { typescript: ts } }) => {
             ast: sfc[source]!.ast,
             ts,
             source,
+            ignore: [
+              ...ignore,
+              ...(vueCompilerOptions.reactivityFunction?.ignore || []).map(
+                (str) => str.slice(1)
+              ),
+            ],
           })
         }
       }