diff --git a/packages/playground/vue/Main.vue b/packages/playground/vue/Main.vue index a65c9d7480920e..d10ae401f7aa8e 100644 --- a/packages/playground/vue/Main.vue +++ b/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' diff --git a/packages/playground/vue/RefTransform.vue b/packages/playground/vue/ReactivityTransform.vue similarity index 58% rename from packages/playground/vue/RefTransform.vue rename to packages/playground/vue/ReactivityTransform.vue index ef7942fdc0e5c3..0dc2b09343d641 100644 --- a/packages/playground/vue/RefTransform.vue +++ b/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> diff --git a/packages/playground/vue/vite.config.ts b/packages/playground/vue/vite.config.ts index 4245af73426958..82efdac5e9f876 100644 --- a/packages/playground/vue/vite.config.ts +++ b/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 ], diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json index 07dde9cdcf6bb6..3cae7402a4113e 100644 --- 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 index 26e2709b580c21..7535a8c9a978e6 100644 --- 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,11 +96,11 @@ 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', @@ -103,7 +108,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin { 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 index aa4f9a7a1b4af8..241eca21eefea1 100644 --- 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 }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e775dd4470891..6ce38611d7168a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -99,8 +99,10 @@ importers: packages/playground: specifiers: css-color-names: ^1.0.1 + vue: ^3.2.25 devDependencies: css-color-names: 1.0.1 + vue: 3.2.25 packages/playground/alias: specifiers: