feat(plugin-vue): add reactivityTransform option.

Enabling this option will apply both ref transform and props destructure transform. BREAKING CHANGE: `refTransform` option has been replaced by `reactivityTransform` option. Now also requires vue@^3.2.25.
vitejs · Dec 12, 2021 · b873333 · b873333
1 parent f60874c
commit b873333
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
@@ -32,7 +32,7 @@
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme",
   "peerDependencies": {
     "vite": "^2.5.10",
-    "vue": "^3.2.13"
+    "vue": "^3.2.25"
   },
   "devDependencies": {
     "@rollup/pluginutils": "^4.1.1",
@@ -42,6 +42,6 @@
     "rollup": "^2.59.0",
     "slash": "^4.0.0",
     "source-map": "^0.6.1",
-    "vue": "^3.2.23"
+    "vue": "^3.2.25"
   }
 }
diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
@@ -42,10 +42,10 @@ export interface Options {
   customElement?: boolean | string | RegExp | (string | RegExp)[]
 
   /**
-   * Enable Vue ref transform (experimental).
-   * https://github.com/vuejs/vue-next/tree/master/packages/ref-transform
+   * Enable Vue reactivity transform (experimental).
+   * https://github.com/vuejs/vue-next/tree/master/packages/reactivity-transform
    *
-   * **requires Vue \>= 3.2.5**
+   * **requires vue\@^3.2.25**
    *
    * - `true`: transform will be enabled for all vue,js(x),ts(x) files except
    *           those inside node_modules
@@ -55,7 +55,12 @@ export interface Options {
    *
    * @default false
    */
-  refTransform?: boolean | string | RegExp | (string | RegExp)[]
+  reactivityTransform?: boolean | string | RegExp | (string | RegExp)[]
+
+  /**
+   * @deprecated use `reactivityTransform` instead.
+   */
+  refTransform?: any
 
   /**
    * @deprecated the plugin now auto-detects whether it's being invoked for ssr.
@@ -80,7 +85,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     include = /\.vue$/,
     exclude,
     customElement = /\.ce\.vue$/,
-    refTransform = false
+    reactivityTransform = false
   } = rawOptions
 
   const filter = createFilter(include, exclude)
@@ -91,19 +96,19 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
       : createFilter(customElement)
 
   const refTransformFilter =
-    refTransform === false
+    reactivityTransform === false
       ? () => false
-      : refTransform === true
+      : reactivityTransform === true
       ? createFilter(/\.(j|t)sx?$/, /node_modules/)
-      : createFilter(refTransform)
+      : createFilter(reactivityTransform)
 
   let options: ResolvedOptions = {
     isProduction: process.env.NODE_ENV === 'production',
     ...rawOptions,
     include,
     exclude,
     customElement,
-    refTransform,
+    reactivityTransform,
     root: process.cwd(),
     sourceMap: true,
     compiler: null as any // to be set in configResolved

diff --git a/packages/plugin-vue/src/script.ts b/packages/plugin-vue/src/script.ts
@@ -53,7 +53,7 @@ export function resolveScript(
     id: descriptor.id,
     isProd: options.isProduction,
     inlineTemplate: isUseInlineTemplate(descriptor, !options.devServer),
-    refTransform: options.refTransform !== false,
+    reactivityTransform: options.reactivityTransform !== false,
     templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
     sourceMap: options.sourceMap
   })