feat!: drop reactivity transform support

BREAKING CHANGE: Reactivity Transform is no longer supported as part of
this plugin, in coordination with Vue 3.4. Use VueMacros if you wish to
continue using this feature.

Author: sxzz

src/core/index.ts

@@ -50,7 +50,6 @@ export interface Options {
       | 'defineModel'
       | 'propsDestructure'
       | 'fs'
-      | 'reactivityTransform'
       | 'hoistStatic'
     >
   >
@@ -75,19 +74,6 @@ export interface Options {
    */
   customElement?: boolean | string | RegExp | (string | RegExp)[]
 
-  /**
-   * Enable Vue reactivity transform (experimental).
-   * https://vuejs.org/guide/extras/reactivity-transform.html
-   * - `true`: transform will be enabled for all vue,js(x),ts(x) files except
-   *           those inside node_modules
-   * - `string | RegExp`: apply to vue + only matched files (will include
-   *                      node_modules, so specify directories if necessary)
-   * - `false`: disable in all cases
-   *
-   * @default false
-   */
-  reactivityTransform?: boolean | string | RegExp | (string | RegExp)[]
-
   /**
    * Use custom compiler-sfc instance. Can be used to force a specific version.
    */
@@ -111,7 +97,6 @@ export type ResolvedOptions = Options &
       | 'sourceMap'
       | 'root'
       | 'customElement'
-      | 'reactivityTransform'
       | 'compiler'
       | 'inlineTemplate'
     >
@@ -134,7 +119,6 @@ function resolveOptions(rawOptions: Options): ResolvedOptions {
     sourceMap: rawOptions.sourceMap ?? true,
     root,
     customElement: rawOptions.customElement ?? /\.ce\.vue$/,
-    reactivityTransform: rawOptions.reactivityTransform ?? false,
     compiler: rawOptions.compiler as any, // to be set in buildStart
     devToolsEnabled: !isProduction,
     cssDevSourcemap: false,
@@ -156,14 +140,6 @@ export const plugin = createUnplugin<Options | undefined, false>(
         : createFilter(options.value.customElement),
     )
 
-    const refTransformFilter = computed(() =>
-      options.value.reactivityTransform === false
-        ? () => false
-        : options.value.reactivityTransform === true
-          ? createFilter(/\.(j|t)sx?$/, /node_modules/)
-          : createFilter(options.value.reactivityTransform),
-    )
-
     const api = {
       get options() {
         return options.value
@@ -299,32 +275,16 @@ export const plugin = createUnplugin<Options | undefined, false>(
       transformInclude(id) {
         const { filename, query } = parseVueRequest(id)
         if (query.raw || query.url) return false
-
-        // Not Vue SFC and refTransform
-        if (
-          !filter.value(filename) &&
-          !query.vue &&
-          !refTransformFilter.value(filename)
-        )
-          return false
+        if (!filter.value(filename) && !query.vue) return false
 
         return true
       },
 
       transform(code, id) {
         const ssr = options.value.ssr
         const { filename, query } = parseVueRequest(id)
-        if (!filter.value(filename) && !query.vue) {
-          if (options.value.compiler.shouldTransformRef(code)) {
-            return options.value.compiler.transformRef(code, {
-              filename,
-              sourceMap: true,
-            })
-          }
-          return
-        }
-
         const context = Object.assign({}, this, meta)
+
         if (!query.vue) {
           // main request
           return transformMain(

src/core/script.ts

@@ -73,7 +73,6 @@ export function resolveScript(
     id: descriptor.id,
     isProd: options.isProduction,
     inlineTemplate: isUseInlineTemplate(options, descriptor),
-    reactivityTransform: options.reactivityTransform !== false,
     templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
     sourceMap: options.sourceMap,
     genDefaultAs: canInlineMain(pluginContext, descriptor, options)

tests/__snapshots__/esbuild.test.ts.snap

@@ -64,25 +64,25 @@ exports[`transform > fixtures > tests/fixtures/reactivity-transform.ts > isProdu
 "//reactivity-transform.js
 import { ref } from 'vue';
 
-const ref1 = ref(\\"hello\\");
-const ref2 = ref(\\"hello\\");
-console.log(ref1.value);
-console.log(ref2.value);
+const ref1 = $ref(\\"hello\\");
+const ref2 = $(ref(\\"hello\\"));
 console.log(ref1);
 console.log(ref2);
+console.log($$(ref1));
+console.log($$(ref2));
 "
 `;
 
 exports[`transform > fixtures > tests/fixtures/reactivity-transform.ts > isProduction is true 1`] = `
 "//reactivity-transform.js
 import { ref } from 'vue';
 
-const ref1 = ref(\\"hello\\");
-const ref2 = ref(\\"hello\\");
-console.log(ref1.value);
-console.log(ref2.value);
+const ref1 = $ref(\\"hello\\");
+const ref2 = $(ref(\\"hello\\"));
 console.log(ref1);
 console.log(ref2);
+console.log($$(ref1));
+console.log($$(ref2));
 "
 `;
 
@@ -102,13 +102,13 @@ const _sfc_main = {
   __name: 'reactivity-transform',
   setup(__props) {
 
-const ref1 = ref('hello');
-const ref2 = (ref('hello'));
+const ref1 = $ref('hello');
+const ref2 = $(ref('hello'));
 
-console.log(ref1.value);
-console.log(ref2.value);
-console.log((ref1));
-console.log((ref2));
+console.log(ref1);
+console.log(ref2);
+console.log($$(ref1));
+console.log($$(ref2));
 
 return () => {}
 }
@@ -128,13 +128,13 @@ const _sfc_main = {
   __name: 'reactivity-transform',
   setup(__props) {
 
-const ref1 = ref('hello');
-const ref2 = (ref('hello'));
+const ref1 = $ref('hello');
+const ref2 = $(ref('hello'));
 
-console.log(ref1.value);
-console.log(ref2.value);
-console.log((ref1));
-console.log((ref2));
+console.log(ref1);
+console.log(ref2);
+console.log($$(ref1));
+console.log($$(ref2));
 
 return () => {}
 }
@@ -222,9 +222,9 @@ const str = \\"bar\\";
 var script_setup_ts_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
   __name: \\"script-setup-ts\\",
   props: {
-    foo: { default: \\"123\\" },
-    bar: { default: 123 },
-    baz: { type: Boolean, default: true }
+    foo: {},
+    bar: {},
+    baz: { type: Boolean }
   },
   setup(__props, { expose: __expose }) {
     __expose({
@@ -268,9 +268,9 @@ const str = \\"bar\\";
 var script_setup_ts_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
   __name: \\"script-setup-ts\\",
   props: {
-    foo: { default: \\"123\\" },
-    bar: { default: 123 },
-    baz: { type: Boolean, default: true }
+    foo: {},
+    bar: {},
+    baz: { type: Boolean }
   },
   setup(__props, { expose: __expose }) {
     __expose({

tests/__snapshots__/rollup.test.ts.snap

@@ -31,7 +31,6 @@ describe('transform', () => {
                 Vue({
                   root,
                   compiler: vueCompiler,
-                  reactivityTransform: true,
                   isProduction,
                 }),
               ],

tests/esbuild.test.ts

@@ -63,7 +63,6 @@ describe('transform', () => {
             const { unplugin, vite } = createPlugins({
               root,
               compiler: vueCompiler,
-              reactivityTransform: true,
               isProduction,
             })