Skip to content
Permalink
Browse files
feat(reactivity-transform): rename @vue/ref-transform to @vue/reactiv…
…ity-transform
  • Loading branch information
yyx990803 committed Dec 11, 2021
1 parent f4dcbbc commit d70fd8d36b23c987f2ebe3280da785f4d2e7d2ef
Show file tree
Hide file tree
Showing 14 changed files with 47 additions and 29 deletions.
@@ -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],
@@ -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 })
@@ -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",
@@ -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'
@@ -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'
@@ -1,37 +1,55 @@
# @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!
>
> Follow https://github.com/vuejs/rfcs/discussions/369 for details and updates.
## Basic Rules

- `$()` to turn refs into reactive variables
- `$$()` to access the original refs from reactive variables
- Ref-creating APIs have `$`-prefixed versions that create reactive variables instead. They also do not need to be explicitly imported. These include:
- `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
console.log(count)
// get the actual ref
watch($$(count), c => console.log(`count changed to ${c}`))
watchEffect(() => {
// no need for .value
console.log(count)
})
// assignments are reactive
count++
// get the actual ref
console.log($$(count)) // { value: 1 }
```

Macros can be optionally imported to make it more explicit:

```js
// not necessary, but also works
import { $, $ref } from 'vue/macros'
let count = $ref(0)
const { x, y } = $(useMouse())
```

### Shorthands
### Global Types

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

- `$(ref(0))` -> `$ref(0)`
- `$(computed(() => 123))` -> `$computed(() => 123)`
- `$(shallowRef({}))` -> `$shallowRef({})`
```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'
File renamed without changes.
@@ -1,8 +1,8 @@
{
"name": "@vue/ref-transform",
"name": "@vue/reactivity-transform",
"version": "3.2.24",
"description": "@vue/ref-transform",
"main": "dist/ref-transform.cjs.js",
"description": "@vue/reactivity-transform",
"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",
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit d70fd8d

Please sign in to comment.