diff --git a/.eslintrc.js b/.eslintrc.js index ea44a000114..4c667f90216 100644 --- a/.eslintrc.js +++ b/.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], diff --git a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts index d2f52589003..f6897b8038d 100644 --- a/packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts +++ b/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 /packages/ref-transform/__tests__ +// transform can be found in /packages/reactivity-transform/__tests__ describe('sfc ref transform', () => { function compileWithRefTransform(src: string) { return compile(src, { refTransform: true }) diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json index 7cf10ddf2a9..344fe779309 100644 --- a/packages/compiler-sfc/package.json +++ b/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", diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index 1823d28cba6..9aa108118fd 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/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' diff --git a/packages/compiler-sfc/src/index.ts b/packages/compiler-sfc/src/index.ts index 1c4bb14ee6f..245aa461901 100644 --- a/packages/compiler-sfc/src/index.ts +++ b/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' diff --git a/packages/ref-transform/README.md b/packages/reactivity-transform/README.md similarity index 62% rename from packages/ref-transform/README.md rename to packages/reactivity-transform/README.md index 33948af37aa..92277a8b288 100644 --- a/packages/ref-transform/README.md +++ b/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 -- `$$()` 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 +/// +``` ## 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' diff --git a/packages/ref-transform/__tests__/__snapshots__/refTransform.spec.ts.snap b/packages/reactivity-transform/__tests__/__snapshots__/refTransform.spec.ts.snap similarity index 100% rename from packages/ref-transform/__tests__/__snapshots__/refTransform.spec.ts.snap rename to packages/reactivity-transform/__tests__/__snapshots__/refTransform.spec.ts.snap diff --git a/packages/ref-transform/__tests__/refTransform.spec.ts b/packages/reactivity-transform/__tests__/refTransform.spec.ts similarity index 100% rename from packages/ref-transform/__tests__/refTransform.spec.ts rename to packages/reactivity-transform/__tests__/refTransform.spec.ts diff --git a/packages/ref-transform/api-extractor.json b/packages/reactivity-transform/api-extractor.json similarity index 100% rename from packages/ref-transform/api-extractor.json rename to packages/reactivity-transform/api-extractor.json diff --git a/packages/ref-transform/package.json b/packages/reactivity-transform/package.json similarity index 72% rename from packages/ref-transform/package.json rename to packages/reactivity-transform/package.json index 50c832c583d..48c7179f57e 100644 --- a/packages/ref-transform/package.json +++ b/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", - "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", diff --git a/packages/ref-transform/src/babelPlugin.ts b/packages/reactivity-transform/src/babelPlugin.ts similarity index 100% rename from packages/ref-transform/src/babelPlugin.ts rename to packages/reactivity-transform/src/babelPlugin.ts diff --git a/packages/ref-transform/src/index.ts b/packages/reactivity-transform/src/index.ts similarity index 100% rename from packages/ref-transform/src/index.ts rename to packages/reactivity-transform/src/index.ts diff --git a/packages/ref-transform/src/refTransform.ts b/packages/reactivity-transform/src/refTransform.ts similarity index 100% rename from packages/ref-transform/src/refTransform.ts rename to packages/reactivity-transform/src/refTransform.ts diff --git a/test-dts/refTransformMacros.test-d.ts b/test-dts/reactivityMacros.test-d.ts similarity index 100% rename from test-dts/refTransformMacros.test-d.ts rename to test-dts/reactivityMacros.test-d.ts