BREAKING CHANGE: refTransform to reactivityTransform

See vuejs/rfcs#413, vuejs/rfcs#369

Author: antfu

README.md

@@ -310,13 +310,13 @@ If you are using ESLint, you might get `@typescript-eslint/no-unused-vars` warni
     Ref Sugar (take 2)
   </summary>
 
-In v0.5.x, we shipped the **experimental** [Ref Sugar (take 2)](https://github.com/vuejs/rfcs/discussions/369) implementation based on Vue 3's [`@vue/ref-transform`](https://github.com/vuejs/vue-next/tree/master/packages/ref-transform) package. Notice the syntax is not settled yet and might be changed in the future updates. **Use at your own risk!**
+In v0.5.x, we shipped the **experimental** [Ref Sugar (take 2)](https://github.com/vuejs/rfcs/discussions/369) implementation based on Vue 3's [`@vue/reactivity-transform`](https://github.com/vuejs/vue-next/tree/master/packages/reactivity-transform) package. Notice the syntax is not settled yet and might be changed in the future updates. **Use at your own risk!**
 
 To enabled it, pass the option:
 
 ```ts
 ScriptSetup({
-  refTransform: true
+  reactivityTransform: true
 })
 ```
 

examples/nuxt-bridge/package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@nuxt/bridge": "latest",
     "nuxt-edge": "latest",
-    "vue": "^2",
-    "vue2": "npm:vue@^2"
+    "vue": "^2.6.14",
+    "vue2": "npm:vue@^2.6.14"
   }
 }

examples/vue-cli/vue.config.js

@@ -9,7 +9,7 @@ module.exports = {
   configureWebpack: {
     plugins: [
       ScriptSetup({
-        refTransform: true,
+        reactivityTransform: true,
       }),
     ],
   },

package.json

@@ -80,7 +80,7 @@
     "@rollup/pluginutils": "^4.1.2",
     "@vue/compiler-core": "^3.2.26",
     "@vue/compiler-dom": "^3.2.26",
-    "@vue/ref-transform": "^3.2.24",
+    "@vue/reactivity-transform": "^3.2.26",
     "@vue/shared": "^3.2.26",
     "defu": "^5.0.0",
     "htmlparser2": "5.0.1",
@@ -110,7 +110,7 @@
     "rollup-plugin-typescript2": "^0.31.1",
     "typescript": "^4.5.4",
     "vite": "^2.7.10",
-    "vitest": "^0.0.141"
+    "vitest": "0.0.120"
   },
   "peerDependencies": {
     "pug": "^3.0.2"

playground/vite.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     Vue2(),
     Inspect(),
     ScriptSetup({
-      refTransform: true,
+      reactivityTransform: true,
     }),
   ],
 })

pnpm-lock.yaml

@@ -5,7 +5,7 @@ export function resolveOptions(options: ScriptSetupTransformOptions = {}): Resol
     {},
     {
       sourceMap: true,
-      refTransform: false,
+      reactivityTransform: false,
       importHelpersFrom: '@vue/composition-api',
       astTransforms: {},
     },

src/core/options.ts

@@ -1,5 +1,5 @@
 import MagicString from 'magic-string'
-import { shouldTransform as shouldTransformRefSugar, transform as transformRef } from '@vue/ref-transform'
+import { shouldTransform as shouldTransformRefSugar, transform as transformRef } from '@vue/reactivity-transform'
 import type { ResolvedOptions, ScriptSetupTransformOptions, TransformResult } from '../types'
 import { parseSFC } from './parseSFC'
 import { transformScriptSetup } from './transformScriptSetup'
@@ -12,7 +12,7 @@ export function shouldTransform(code: string, id: string, options?: ScriptSetupT
   // avoid transforming twice
   if (code.includes('export default __sfc_main'))
     return false
-  return (options?.refTransform && shouldTransformRefSugar(code)) || scriptSetupRE.test(code)
+  return (options?.reactivityTransform && shouldTransformRefSugar(code)) || scriptSetupRE.test(code)
 }
 
 export function transform(input: string, id: string, options?: ScriptSetupTransformOptions): TransformResult {
@@ -26,7 +26,7 @@ export function transform(input: string, id: string, options?: ScriptSetupTransf
 }
 
 function transformNonVue(input: string, id: string, options: ResolvedOptions): TransformResult {
-  if (options.refTransform && shouldTransformRefSugar(input)) {
+  if (options.reactivityTransform && shouldTransformRefSugar(input)) {
     return transformRef(input, {
       filename: id,
       sourceMap: options.sourceMap,
@@ -41,7 +41,7 @@ function transformVue(input: string, id: string, options: ResolvedOptions): Tran
 
   const sfc = parseSFC(input, id)
 
-  if (options.refTransform)
+  if (options.reactivityTransform)
     transformSfcRefSugar(sfc, options)
 
   const { code } = transformScriptSetup(sfc, options)

src/core/transform.ts

@@ -1,4 +1,4 @@
-import { shouldTransform, transformAST } from '@vue/ref-transform'
+import { shouldTransform, transformAST } from '@vue/reactivity-transform'
 import MagicString from 'magic-string'
 import type { ParsedSFC, ResolvedOptions } from '../types'
 import { parse, t } from './babel'

src/core/transformSfcRefSugar.ts

@@ -7,7 +7,7 @@ export * from './core'
 
 export const unplugin = createUnplugin<PluginOptions>((options = {}) => {
   const filter = createFilter(
-    options.include || (options.refTransform ? [/\.vue$/, /\.vue\?vue/, /\.[jt]sx?$/] : [/\.vue$/, /\.vue\?vue/]),
+    options.include || (options.reactivityTransform ? [/\.vue$/, /\.vue\?vue/, /\.[jt]sx?$/] : [/\.vue$/, /\.vue\?vue/]),
     options.exclude || [/node_modules/, /\.git/, /\.nuxt/],
   )
 

src/index.ts

@@ -34,7 +34,7 @@ export interface ScriptSetupTransformOptions {
     scriptSetup?: (ast: Program) => Program
     post?: (ast: Program, sfc: ParsedSFC) => Program
   }
-  refTransform?: boolean
+  reactivityTransform?: boolean
   importHelpersFrom?: string
   sourceMap?: boolean
 }

src/types.ts

@@ -50,12 +50,6 @@ const {data} = await something()
   it('ref sugar', () => {
     const consoleWarnMock = vi.spyOn(console, 'warn')
 
-    expect(() =>
-      t(`
-     const a = $ref(1)
-     `, 'Ref.ts', { refTransform: true }))
-      .toThrowError('$ref() bindings can only be declared with let')
-
     expect(() =>
       t(`
 <script setup>

test/errors.test.ts

@@ -18,10 +18,10 @@ describe('transform', () => {
     for (const file of files) {
       it(file.replace(/\\/g, '/'), async() => {
         const fixture = await fs.readFile(resolve(root, file), 'utf-8')
-        const result = transform(fixture, file, { refTransform: true })?.code || fixture
+        const result = transform(fixture, file, { reactivityTransform: true })?.code || fixture
         expect(result).toMatchSnapshot()
 
-        const result2 = transform(result, file, { refTransform: true })?.code || result
+        const result2 = transform(result, file, { reactivityTransform: true })?.code || result
         expect(result).toEqual(result2)
       })
     }