feat(compiler-sfc): mark props destructure as experimental and require explicit opt-in

Author: yyx990803

Diff for: 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 for: 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
     })
   }

Diff for: 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 for: 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