Gathering detailed insights and metrics for @vue/reactivity-transform
Gathering detailed insights and metrics for @vue/reactivity-transform
Gathering detailed insights and metrics for @vue/reactivity-transform
Gathering detailed insights and metrics for @vue/reactivity-transform
@vue-macros/reactivity-transform
reactivityTransform feature from Vue Macros.
@vue-macros/reactivity-transform-vue2
Please refer to [README.md](https://github.com/sxzz/unplugin-vue-macros#readme)
@vue/reactivity-transform-canary
@vue/reactivity-transform
unplugin-vue-autoref
## More radical reactive tansform macros in Vue powered by Vue Reactivity Transform! <br/>
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
npm install @vue/reactivity-transform
Typescript
Module System
Node Version
NPM Version
90.8
Supply Chain
99
Quality
76.2
Maintenance
100
Vulnerability
100
License
TypeScript (96.31%)
JavaScript (1.89%)
HTML (1.29%)
Vue (0.48%)
CSS (0.03%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
294,448,236
Last Day
39,992
Last Week
987,188
Last Month
3,877,907
Last Year
75,236,512
MIT License
48,804 Stars
6,542 Commits
8,498 Forks
755 Watchers
82 Branches
548 Contributors
Updated on Feb 17, 2025
Minified
Minified + Gzipped
Latest Version
3.3.13
Package Id
@vue/reactivity-transform@3.3.13
Unpacked Size
23.72 kB
Size
7.07 kB
File Count
5
NPM Version
10.2.3
Node Version
20.10.0
Published on
Dec 19, 2023
Cumulative downloads
Total Downloads
Last Day
-12.9%
39,992
Compared to previous day
Last Week
3.1%
987,188
Compared to previous week
Last Month
14%
3,877,907
Compared to previous month
Last Year
-48.4%
75,236,512
Compared to previous year
2
⚠️ This is experimental and the proposal has been dropped. The feature is now marked as deprecated and will be removed from Vue core in 3.4.
See reason for deprecation here.
$
-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 refs1import { watchEffect } from 'vue' 2 3// bind ref as a variable 4let count = $ref(0) 5 6watchEffect(() => { 7 // no need for .value 8 console.log(count) 9}) 10 11// assignments are reactive 12count++ 13 14// get the actual ref 15console.log($$(count)) // { value: 1 }
Macros can be optionally imported to make it more explicit:
1// not necessary, but also works 2import { $, $ref } from 'vue/macros' 3 4let count = $ref(0) 5const { x, y } = $(useMouse())
To enable types for the macros globally, include the following in a .d.ts
file:
1/// <reference types="vue/macros-global" />
This package is the lower-level transform that can be used standalone. Higher-level tooling (e.g. @vitejs/plugin-vue
and vue-loader
) will provide integration via options.
shouldTransform
Can be used to do a cheap check to determine whether full transform should be performed.
1import { shouldTransform } from '@vue/reactivity-transform'
2
3shouldTransform(`let a = ref(0)`) // false
4shouldTransform(`let a = $ref(0)`) // true
transform
1import { transform } from '@vue/reactivity-transform' 2 3const src = `let a = $ref(0); a++` 4const { 5 code, // import { ref as _ref } from 'vue'; let a = (ref(0)); a.value++" 6 map 7} = transform(src, { 8 filename: 'foo.ts', 9 sourceMap: true, 10 11 // @babel/parser plugins to enable. 12 // 'typescript' and 'jsx' will be auto-inferred from filename if provided, 13 // so in most cases explicit parserPlugins are not necessary 14 parserPlugins: [ 15 /* ... */ 16 ] 17})
Options
1interface RefTransformOptions { 2 filename?: string 3 sourceMap?: boolean // default: false 4 parserPlugins?: ParserPlugin[] 5 importHelpersFrom?: string // default: "vue" 6}
transformAST
Transform with an existing Babel AST + MagicString instance. This is used internally by @vue/compiler-sfc
to avoid double parse/transform cost.
1import { transformAST } from '@vue/reactivity-transform' 2import { parse } from '@babel/parser' 3import MagicString from 'magic-string' 4 5const src = `let a = $ref(0); a++` 6const ast = parse(src, { sourceType: 'module' }) 7const s = new MagicString(src) 8 9const { 10 rootRefs, // ['a'] 11 importedHelpers // ['ref'] 12} = transformAST(ast, s) 13 14console.log(s.toString()) // let a = _ref(0); a.value++
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
security policy file detected
Details
Reason
30 commit(s) and 14 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
packaging workflow detected
Details
Reason
1 existing vulnerabilities detected
Details
Reason
Found 5/8 approved changesets -- score normalized to 6
Reason
branch protection is not maximal on development and all release branches
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More