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.

Author: yyx990803

packages/playground/vue/Main.vue

@@ -18,7 +18,7 @@
   <Suspense>
     <AsyncComponent />
   </Suspense>
-  <RefTransform />
+  <ReactivityTransform :foo="time" />
   <SetupImportTemplate />
 </template>
 
@@ -33,7 +33,7 @@ import SrcImport from './src-import/SrcImport.vue'
 import Slotted from './Slotted.vue'
 import ScanDep from './ScanDep.vue'
 import AsyncComponent from './AsyncComponent.vue'
-import RefTransform from './RefTransform.vue'
+import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
 
 import { ref } from 'vue'

packages/playground/vue/RefTransform.vue packages/playground/vue/ReactivityTransform.vue

@@ -1,9 +1,12 @@
 <script setup>
+const { foo: bar } = defineProps(['foo'])
+
 let a = $ref(0)
 const inc = () => a++
 </script>
 
 <template>
-  <h2>Ref Transform</h2>
+  <h2>Reactivity Transform</h2>
+  <p>Prop foo: {{ bar }}</p>
   <button class="ref-transform" @click="inc">{{ a }}</button>
 </template>

packages/playground/vue/vite.config.ts

@@ -1,4 +1,3 @@
-import path from 'path'
 import { defineConfig } from 'vite'
 import vuePlugin from '@vitejs/plugin-vue'
 import { vueI18nPlugin } from './CustomBlockPlugin'
@@ -11,7 +10,7 @@ export default defineConfig({
   },
   plugins: [
     vuePlugin({
-      refTransform: true
+      reactivityTransform: true
     }),
     vueI18nPlugin
   ],

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"
   }
 }

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

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
   })