Skip to content

Commit d70fd8d

Browse files
committed
feat(reactivity-transform): rename @vue/ref-transform to @vue/reactivity-transform
1 parent f4dcbbc commit d70fd8d

14 files changed

+47
-29
lines changed

.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ module.exports = {
5050
// Packages targeting Node
5151
{
5252
files: [
53-
'packages/{compiler-sfc,compiler-ssr,server-renderer,ref-transform}/**'
53+
'packages/{compiler-sfc,compiler-ssr,server-renderer,reactivity-transform}/**'
5454
],
5555
rules: {
5656
'no-restricted-globals': ['error', ...DOMGlobals],

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { BindingTypes } from '@vue/compiler-core'
22
import { compileSFCScript as compile, assertCode } from './utils'
33

44
// this file only tests integration with SFC - main test case for the ref
5-
// transform can be found in <root>/packages/ref-transform/__tests__
5+
// transform can be found in <root>/packages/reactivity-transform/__tests__
66
describe('sfc ref transform', () => {
77
function compileWithRefTransform(src: string) {
88
return compile(src, { refTransform: true })

packages/compiler-sfc/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"@vue/compiler-core": "3.2.24",
3737
"@vue/compiler-dom": "3.2.24",
3838
"@vue/compiler-ssr": "3.2.24",
39-
"@vue/ref-transform": "3.2.24",
39+
"@vue/reactivity-transform": "3.2.24",
4040
"@vue/shared": "3.2.24",
4141
"estree-walker": "^2.0.2",
4242
"magic-string": "^0.25.7",

packages/compiler-sfc/src/compileScript.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import { createCache } from './cache'
5151
import {
5252
shouldTransform as shouldTransformRef,
5353
transformAST as transformRefAST
54-
} from '@vue/ref-transform'
54+
} from '@vue/reactivity-transform'
5555

5656
// Special compiler macros
5757
const DEFINE_PROPS = 'defineProps'

packages/compiler-sfc/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export {
88
shouldTransform as shouldTransformRef,
99
transform as transformRef,
1010
transformAST as transformRefAST
11-
} from '@vue/ref-transform'
11+
} from '@vue/reactivity-transform'
1212

1313
// Utilities
1414
export { parse as babelParse } from '@babel/parser'

packages/ref-transform/README.md renamed to packages/reactivity-transform/README.md

+36-18
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,55 @@
1-
# @vue/ref-transform
1+
# @vue/reactivity-transform
22

33
> ⚠️ 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!
44
>
55
> Follow https://github.com/vuejs/rfcs/discussions/369 for details and updates.
66
77
## Basic Rules
88

9-
- `$()` to turn refs into reactive variables
10-
- `$$()` to access the original refs from reactive variables
9+
- Ref-creating APIs have `$`-prefixed versions that create reactive variables instead. They also do not need to be explicitly imported. These include:
10+
- `ref`
11+
- `computed`
12+
- `shallowRef`
13+
- `customRef`
14+
- `toRef`
15+
- `$()` can be used to destructure an object into reactive variables, or turn existing refs into reactive variables
16+
- `$$()` to "escape" the transform, which allows access to underlying refs
1117

1218
```js
13-
import { ref, watch } from 'vue'
19+
import { watchEffect } from 'vue'
1420

1521
// bind ref as a variable
16-
let count = $(ref(0))
22+
let count = $ref(0)
1723

18-
// no need for .value
19-
console.log(count)
20-
21-
// get the actual ref
22-
watch($$(count), c => console.log(`count changed to ${c}`))
24+
watchEffect(() => {
25+
// no need for .value
26+
console.log(count)
27+
})
2328

2429
// assignments are reactive
2530
count++
31+
32+
// get the actual ref
33+
console.log($$(count)) // { value: 1 }
34+
```
35+
36+
Macros can be optionally imported to make it more explicit:
37+
38+
```js
39+
// not necessary, but also works
40+
import { $, $ref } from 'vue/macros'
41+
42+
let count = $ref(0)
43+
const { x, y } = $(useMouse())
2644
```
2745

28-
### Shorthands
46+
### Global Types
2947

30-
A few commonly used APIs have shorthands (which also removes the need to import them):
48+
To enable types for the macros globally, include the following in a `.d.ts` file:
3149

32-
- `$(ref(0))` -> `$ref(0)`
33-
- `$(computed(() => 123))` -> `$computed(() => 123)`
34-
- `$(shallowRef({}))` -> `$shallowRef({})`
50+
```ts
51+
/// <reference types="vue/macros-global" />
52+
```
3553

3654
## API
3755

@@ -42,7 +60,7 @@ This package is the lower-level transform that can be used standalone. Higher-le
4260
Can be used to do a cheap check to determine whether full transform should be performed.
4361

4462
```js
45-
import { shouldTransform } from '@vue/ref-transform'
63+
import { shouldTransform } from '@vue/reactivity-transform'
4664

4765
shouldTransform(`let a = ref(0)`) // false
4866
shouldTransform(`let a = $ref(0)`) // true
@@ -51,7 +69,7 @@ shouldTransform(`let a = $ref(0)`) // true
5169
### `transform`
5270

5371
```js
54-
import { transform } from '@vue/ref-transform'
72+
import { transform } from '@vue/reactivity-transform'
5573

5674
const src = `let a = $ref(0); a++`
5775
const {
@@ -86,7 +104,7 @@ interface RefTransformOptions {
86104
Transform with an existing Babel AST + MagicString instance. This is used internally by `@vue/compiler-sfc` to avoid double parse/transform cost.
87105

88106
```js
89-
import { transformAST } from '@vue/ref-transform'
107+
import { transformAST } from '@vue/reactivity-transform'
90108
import { parse } from '@babel/parser'
91109
import MagicString from 'magic-string'
92110

packages/ref-transform/package.json renamed to packages/reactivity-transform/package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "@vue/ref-transform",
2+
"name": "@vue/reactivity-transform",
33
"version": "3.2.24",
4-
"description": "@vue/ref-transform",
5-
"main": "dist/ref-transform.cjs.js",
4+
"description": "@vue/reactivity-transform",
5+
"main": "dist/reactivity-transform.cjs.js",
66
"files": [
77
"dist"
88
],
@@ -12,11 +12,11 @@
1212
],
1313
"prod": false
1414
},
15-
"types": "dist/ref-transform.d.ts",
15+
"types": "dist/reactivity-transform.d.ts",
1616
"repository": {
1717
"type": "git",
1818
"url": "git+https://github.com/vuejs/vue-next.git",
19-
"directory": "packages/ref-transform"
19+
"directory": "packages/reactivity-transform"
2020
},
2121
"keywords": [
2222
"vue"
@@ -26,7 +26,7 @@
2626
"bugs": {
2727
"url": "https://github.com/vuejs/vue-next/issues"
2828
},
29-
"homepage": "https://github.com/vuejs/vue-next/tree/dev/packages/ref-transform#readme",
29+
"homepage": "https://github.com/vuejs/vue-next/tree/dev/packages/reactivity-transform#readme",
3030
"dependencies": {
3131
"@babel/parser": "^7.15.0",
3232
"@vue/compiler-core": "3.2.24",

0 commit comments

Comments
 (0)