feat(reactivity-transform): rename @vue/ref-transform to @vue/reactivity-transform

.eslintrc.js

@@ -50,7 +50,7 @@ module.exports = {
     // Packages targeting Node
     {
       files: [
-        'packages/{compiler-sfc,compiler-ssr,server-renderer,ref-transform}/**'
+        'packages/{compiler-sfc,compiler-ssr,server-renderer,reactivity-transform}/**'
       ],
       rules: {
         'no-restricted-globals': ['error', ...DOMGlobals],

packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts

@@ -2,7 +2,7 @@ import { BindingTypes } from '@vue/compiler-core'
 import { compileSFCScript as compile, assertCode } from './utils'
 
 // this file only tests integration with SFC - main test case for the ref
-// transform can be found in <root>/packages/ref-transform/__tests__
+// transform can be found in <root>/packages/reactivity-transform/__tests__
 describe('sfc ref transform', () => {
   function compileWithRefTransform(src: string) {
     return compile(src, { refTransform: true })

packages/compiler-sfc/package.json

@@ -36,7 +36,7 @@
     "@vue/compiler-core": "3.2.24",
     "@vue/compiler-dom": "3.2.24",
     "@vue/compiler-ssr": "3.2.24",
-    "@vue/ref-transform": "3.2.24",
+    "@vue/reactivity-transform": "3.2.24",
     "@vue/shared": "3.2.24",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",

packages/compiler-sfc/src/compileScript.ts

@@ -51,7 +51,7 @@ import { createCache } from './cache'
 import {
   shouldTransform as shouldTransformRef,
   transformAST as transformRefAST
-} from '@vue/ref-transform'
+} from '@vue/reactivity-transform'
 
 // Special compiler macros
 const DEFINE_PROPS = 'defineProps'

packages/compiler-sfc/src/index.ts

@@ -8,7 +8,7 @@ export {
   shouldTransform as shouldTransformRef,
   transform as transformRef,
   transformAST as transformRefAST
-} from '@vue/ref-transform'
+} from '@vue/reactivity-transform'
 
 // Utilities
 export { parse as babelParse } from '@babel/parser'

packages/reactivity-transform/README.md

@@ -1,4 +1,4 @@
-# @vue/ref-transform
+# @vue/reactivity-transform
 
 > ⚠️ This is experimental and currently only provided for testing and feedback. It may break during patches or even be removed. Use at your own risk!
 >
@@ -6,32 +6,50 @@
 
 ## Basic Rules
 
-- `$()` to turn refs into reactive variables
+- Ref-creating APIs have `$`-prefixed versions that create reactive variables instead. They also do not need to be explicitly imported. These include:
-- `$$()` to access the original refs from reactive variables
+  - `ref`
+  - `computed`
+  - `shallowRef`
+  - `customRef`
+  - `toRef`
+- `$()` can be used to destructure an object into reactive variables, or turn existing refs into reactive variables
+- `$$()` to "escape" the transform, which allows access to underlying refs
 
 ```js
-import { ref, watch } from 'vue'
+import { watchEffect } from 'vue'
 
 // bind ref as a variable
-let count = $(ref(0))
+let count = $ref(0)
 
-// no need for .value
+watchEffect(() => {
-console.log(count)
+  // no need for .value
-
+  console.log(count)
-// get the actual ref
+})
-watch($$(count), c => console.log(`count changed to ${c}`))
 
 // assignments are reactive
 count++
+
+// get the actual ref
+console.log($$(count)) // { value: 1 }
 ```
 
-### Shorthands
+Macros can be optionally imported to make it more explicit:
 
-A few commonly used APIs have shorthands (which also removes the need to import them):
+```js
+// not necessary, but also works
+import { $, $ref } from 'vue/macros'
 
-- `$(ref(0))` -> `$ref(0)`
+let count = $ref(0)
-- `$(computed(() => 123))` -> `$computed(() => 123)`
+const { x, y } = $(useMouse())
-- `$(shallowRef({}))` -> `$shallowRef({})`
+```
+
+### Global Types
+
+To enable types for the macros globally, include the following in a `.d.ts` file:
+
+```ts
+/// <reference types="vue/macros-global" />
+```
 
 ## API
 
@@ -42,7 +60,7 @@ This package is the lower-level transform that can be used standalone. Higher-le
 Can be used to do a cheap check to determine whether full transform should be performed.
 
 ```js
-import { shouldTransform } from '@vue/ref-transform'
+import { shouldTransform } from '@vue/reactivity-transform'
 
 shouldTransform(`let a = ref(0)`) // false
 shouldTransform(`let a = $ref(0)`) // true
@@ -51,7 +69,7 @@ shouldTransform(`let a = $ref(0)`) // true
 ### `transform`
 
 ```js
-import { transform } from '@vue/ref-transform'
+import { transform } from '@vue/reactivity-transform'
 
 const src = `let a = $ref(0); a++`
 const {
@@ -86,7 +104,7 @@ interface RefTransformOptions {
 Transform with an existing Babel AST + MagicString instance. This is used internally by `@vue/compiler-sfc` to avoid double parse/transform cost.
 
 ```js
-import { transformAST } from '@vue/ref-transform'
+import { transformAST } from '@vue/reactivity-transform'
 import { parse } from '@babel/parser'
 import MagicString from 'magic-string'
 

packages/reactivity-transform/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@vue/ref-transform",
+  "name": "@vue/reactivity-transform",
   "version": "3.2.24",
-  "description": "@vue/ref-transform",
+  "description": "@vue/reactivity-transform",
-  "main": "dist/ref-transform.cjs.js",
+  "main": "dist/reactivity-transform.cjs.js",
   "files": [
     "dist"
   ],
@@ -12,11 +12,11 @@
     ],
     "prod": false
   },
-  "types": "dist/ref-transform.d.ts",
+  "types": "dist/reactivity-transform.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuejs/vue-next.git",
-    "directory": "packages/ref-transform"
+    "directory": "packages/reactivity-transform"
   },
   "keywords": [
     "vue"
@@ -26,7 +26,7 @@
   "bugs": {
     "url": "https://github.com/vuejs/vue-next/issues"
   },
-  "homepage": "https://github.com/vuejs/vue-next/tree/dev/packages/ref-transform#readme",
+  "homepage": "https://github.com/vuejs/vue-next/tree/dev/packages/reactivity-transform#readme",
   "dependencies": {
     "@babel/parser": "^7.15.0",
     "@vue/compiler-core": "3.2.24",