diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap index 37c334e838d..35926709cec 100644 --- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`sfc props transform > aliasing 1`] = ` +exports[`sfc reactive props destructure > aliasing 1`] = ` "import { toDisplayString as _toDisplayString } from \\"vue\\" @@ -20,7 +20,7 @@ return (_ctx, _cache) => { }" `; -exports[`sfc props transform > basic usage 1`] = ` +exports[`sfc reactive props destructure > basic usage 1`] = ` "import { toDisplayString as _toDisplayString } from \\"vue\\" @@ -39,7 +39,7 @@ return (_ctx, _cache) => { }" `; -exports[`sfc props transform > computed static key 1`] = ` +exports[`sfc reactive props destructure > computed static key 1`] = ` "import { toDisplayString as _toDisplayString } from \\"vue\\" @@ -58,7 +58,7 @@ return (_ctx, _cache) => { }" `; -exports[`sfc props transform > default values w/ array runtime declaration 1`] = ` +exports[`sfc reactive props destructure > default values w/ array runtime declaration 1`] = ` "import { mergeDefaults as _mergeDefaults } from 'vue' export default { @@ -77,7 +77,7 @@ return () => {} }" `; -exports[`sfc props transform > default values w/ object runtime declaration 1`] = ` +exports[`sfc reactive props destructure > default values w/ object runtime declaration 1`] = ` "import { mergeDefaults as _mergeDefaults } from 'vue' export default { @@ -97,7 +97,7 @@ return () => {} }" `; -exports[`sfc props transform > default values w/ type declaration 1`] = ` +exports[`sfc reactive props destructure > default values w/ type declaration 1`] = ` "import { defineComponent as _defineComponent } from 'vue' export default /*#__PURE__*/_defineComponent({ @@ -116,7 +116,7 @@ return () => {} })" `; -exports[`sfc props transform > default values w/ type declaration, prod mode 1`] = ` +exports[`sfc reactive props destructure > default values w/ type declaration, prod mode 1`] = ` "import { defineComponent as _defineComponent } from 'vue' export default /*#__PURE__*/_defineComponent({ @@ -138,7 +138,7 @@ return () => {} })" `; -exports[`sfc props transform > multiple variable declarations 1`] = ` +exports[`sfc reactive props destructure > multiple variable declarations 1`] = ` "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" @@ -156,7 +156,7 @@ return (_ctx, _cache) => { }" `; -exports[`sfc props transform > nested scope 1`] = ` +exports[`sfc reactive props destructure > nested scope 1`] = ` "export default { props: ['foo', 'bar'], setup(__props) { @@ -173,7 +173,7 @@ return () => {} }" `; -exports[`sfc props transform > non-identifier prop names 1`] = ` +exports[`sfc reactive props destructure > non-identifier prop names 1`] = ` "import { toDisplayString as _toDisplayString } from \\"vue\\" @@ -192,7 +192,7 @@ return (_ctx, _cache) => { }" `; -exports[`sfc props transform > rest spread 1`] = ` +exports[`sfc reactive props destructure > rest spread 1`] = ` "import { createPropsRestProxy as _createPropsRestProxy } from 'vue' export default { diff --git a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts index a459d80ff29..b8912092afd 100644 --- a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts @@ -2,10 +2,11 @@ import { BindingTypes } from '@vue/compiler-core' import { SFCScriptCompileOptions } from '../../src' import { compileSFCScript, assertCode } from '../utils' -describe('sfc props transform', () => { +describe('sfc reactive props destructure', () => { function compile(src: string, options?: Partial) { return compileSFCScript(src, { inlineTemplate: true, + propsDestructure: true, ...options }) } diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index e5e1bea4fd1..0d09f02538a 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -72,14 +72,6 @@ export interface SFCScriptCompileOptions { * https://babeljs.io/docs/en/babel-parser#plugins */ babelParserPlugins?: ParserPlugin[] - /** - * (Experimental) Enable syntax transform for using refs without `.value` and - * using destructured props with reactivity - * @deprecated the Reactivity Transform proposal has been dropped. This - * feature will be removed from Vue core in 3.4. If you intend to continue - * using it, disable this and switch to the [Vue Macros implementation](https://vue-macros.sxzz.moe/features/reactivity-transform.html). - */ - reactivityTransform?: boolean /** * Compile the template and inline the resulting render function * directly inside setup(). @@ -108,8 +100,14 @@ export interface SFCScriptCompileOptions { hoistStatic?: boolean /** * (**Experimental**) Enable macro `defineModel` + * @default false */ defineModel?: boolean + /** + * (**Experimental**) Enable reactive destructure for `defineProps` + * @default false + */ + propsDestructure?: boolean /** * File system access methods to be used when resolving types * imported in SFC macros. Defaults to ts.sys in Node.js, can be overwritten @@ -119,6 +117,14 @@ export interface SFCScriptCompileOptions { fileExists(file: string): boolean readFile(file: string): string | undefined } + /** + * (Experimental) Enable syntax transform for using refs without `.value` and + * using destructured props with reactivity + * @deprecated the Reactivity Transform proposal has been dropped. This + * feature will be removed from Vue core in 3.4. If you intend to continue + * using it, disable this and switch to the [Vue Macros implementation](https://vue-macros.sxzz.moe/features/reactivity-transform.html). + */ + reactivityTransform?: boolean } export interface ImportBinding { diff --git a/packages/compiler-sfc/src/script/definePropsDestructure.ts b/packages/compiler-sfc/src/script/definePropsDestructure.ts index 220c7ce41db..9f693f8519d 100644 --- a/packages/compiler-sfc/src/script/definePropsDestructure.ts +++ b/packages/compiler-sfc/src/script/definePropsDestructure.ts @@ -26,6 +26,10 @@ export function processPropsDestructure( ctx: ScriptCompileContext, declId: ObjectPattern ) { + if (!ctx.options.propsDestructure) { + return + } + ctx.propsDestructureDecl = declId const registerBinding = ( @@ -91,6 +95,10 @@ export function transformDestructuredProps( ctx: ScriptCompileContext, vueImportAliases: Record ) { + if (!ctx.options.propsDestructure) { + return + } + const rootScope: Scope = {} const scopeStack: Scope[] = [rootScope] let currentScope: Scope = rootScope