feat(compiler-sfc): mark props destructure as experimental and requir…

…e explicit opt-in

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 {

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<SFCScriptCompileOptions>) {
  return compileSFCScript(src, {
  inlineTemplate: true,
+ propsDestructure: true,
  ...options
  })
  }

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 {

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<string, string>
 ) {
+ if (!ctx.options.propsDestructure) {
+ return
+ }
+
  const rootScope: Scope = {}
  const scopeStack: Scope[] = [rootScope]
  let currentScope: Scope = rootScope