Package Exports

@vue/ref-transform

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vue/ref-transform) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@vue/ref-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 reative variables
$$() to access the original refs from reative variables

import { ref, watch } from 'vue'

// bind ref as a variable
let count = $(ref(0))

// no need for .value
console.log(count)

// get the actual ref
watch($$(count), c => console.log(`count changed to ${c}`))

// assignments are reactive
count++

Shorthands

A few commonly used APIs have shorthands (which also removes the need to import them):

$(ref(0)) -> $ref(0)
$(computed(() => 123)) -> $computed(() => 123)
$(shallowRef({})) -> $shallowRef({})

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.

import { shouldTransform } from '@vue/ref-transform'

shouldTransform(`let a = ref(0)`) // false
shouldTransform(`let a = $ref(0)`) // true

`transform`

import { transform } from '@vue/ref-transform'

const src = `let a = $ref(0); a++`
const {
  code, // import { ref as _ref } from 'vue'; let a = (ref(0)); a.value++"
  map
} = transform(src, {
  filename: 'foo.ts',
  sourceMap: true,

  // @babel/parser plugins to enable.
  // 'typescript' and 'jsx' will be auto-inferred from filename if provided,
  // so in most cases explicit parserPlugins are not necessary
  parserPlugins: [/* ... */]
})

Options

interface RefTransformOptions {
  filename?: string
  sourceMap?: boolean // default: false
  parserPlugins?: ParserPlugin[]
  importHelpersFrom?: string // default: "vue"
}

`transformAST`

Transform with an existing Babel AST + MagicString instance. This is used internally by @vue/compiler-sfc to avoid double parse/transform cost.

import { transformAST } from '@vue/ref-transform'
import { parse } from '@babel/parser'
import MagicString from 'magic-string'

const src = `let a = $ref(0); a++`
const ast = parse(src, { sourceType: 'module' })
const s = new MagicString(src)

const {
  rootVars, // ['a']
  importedHelpers // ['ref']
} = transformAST(ast, s)

console.log(s.toString()) // let a = _ref(0); a.value++