npmpackage.info

@vue/reactivity-transform

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

3.3.13

48,804

MIT

TypeScript

108.64 kB

294,448,236 6

Installations

npm install @vue/reactivity-transform

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.10.0

NPM Version

10.2.3 Score

90.8

Supply Chain

Quality

76.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

340

Total

5,102

Closed

1,807

Merged

2,955

Issues

Open

647

Total

5,518

Closed

4,871

Releases

238

v3.5.13

Updated on Nov 15, 2024

v3.5.12

Updated on Oct 11, 2024

v3.5.11

Updated on Oct 03, 2024

v3.5.10

Updated on Sep 27, 2024

v3.5.9

Updated on Sep 26, 2024

v3.5.8

Updated on Sep 22, 2024

View All 238 releases

Contributors

548

View All 548 Contributors

Languages

TypeScript

JavaScript

HTML

Vue

CSS

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! 🚀

Developer

vuejs

Download Statistics

Total Downloads

294,448,236

Last Day

39,992

Last Week

987,188

Last Month

3,877,907

Last Year

75,236,512

GitHub Statistics

MIT License

48,804 Stars

6,542 Commits

8,498 Forks

755 Watchers

82 Branches

548 Contributors

Updated on Feb 17, 2025

Bundle Size

386.52 kB

Minified

108.64 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

3.3.13

Package Id

@vue/reactivity-transform@3.3.13

Unpacked Size

23.72 kB

Size

7.07 kB

File Count

NPM Version

10.2.3

Node Version

20.10.0

Published on

Dec 19, 2023

Total Downloads

Cumulative downloads

Total Downloads

294,448,236

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

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@babel/parser estree-walker magic-string @vue/compiler-core @vue/shared

Dev Dependencies

@babel/core @babel/types

@vue/reactivity-transform

⚠️ 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.

Basic Rules

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

1import { 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())

Global Types

To enable types for the macros globally, include the following in a .d.ts file:

1/// <reference types="vue/macros-global" />

API

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.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Security-Policy

Determines if the project has published a security policy.

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/autofix.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/autofix.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/autofix.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/autofix.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/autofix.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/autofix.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary-minor.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary-minor.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/canary-minor.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary-minor.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary-minor.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary-minor.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/canary.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/canary.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/close-cant-reproduce-issues.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/close-cant-reproduce-issues.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ecosystem-ci-trigger.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ecosystem-ci-trigger.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ecosystem-ci-trigger.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ecosystem-ci-trigger.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ecosystem-ci-trigger.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/ecosystem-ci-trigger.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lock-closed-issues.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/lock-closed-issues.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-data.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-data.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-data.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-data.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-data.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-report.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-report.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-report.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/size-report.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:94: update your workflow using https://app.stepsecurity.io/secureworkflow/vuejs/core/test.yml/main?enable=pin
Info: 0 out of 27 GitHub-owned GitHubAction dependencies pinned
Info: 1 out of 21 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

6

/10

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

Other packages similar to @vue/reactivity-transform

@vue-macros/reactivity-transform

1.1.6

reactivityTransform feature from Vue Macros.

@vue-macros/reactivity-transform-vue2

0.1.1

Please refer to [README.md](https://github.com/sxzz/unplugin-vue-macros#readme)

@vue/reactivity-transform-canary

3.20231225.0

@vue/reactivity-transform

unplugin-vue-autoref

0.0.8

## More radical reactive tansform macros in Vue powered by Vue Reactivity Transform！ <br/>