@kdujs/reactivity-transform
⚠️ This is experimental and the proposal has been dropped.
The feature is now marked as deprecated and will be removed from Kdu core
in 3.4.
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
import { watchEffect } from 'kdu'
let count = $ref(0)
watchEffect(() => {
console.log(count)
})
count++
console.log($$(count))
Macros can be optionally imported to make it more explicit:
import { $, $ref } from 'kdu/macros'
let count = $ref(0)
const { x, y } = $(useMouse())
Global Types
To enable types for the macros globally, include the following in a .d.ts
file:
API
This package is the lower-level transform that can be used standalone. Higher-level tooling (e.g. @witejs/plugin-kdu
and kdu-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 '@kdujs/reactivity-transform'
shouldTransform(`let a = ref(0)`)
shouldTransform(`let a = $ref(0)`)
transform
import { transform } from '@kdujs/reactivity-transform'
const src = `let a = $ref(0); a++`
const {
code,
map
} = transform(src, {
filename: 'foo.ts',
sourceMap: true,
parserPlugins: [
]
})
Options
interface RefTransformOptions {
filename?: string
sourceMap?: boolean
parserPlugins?: ParserPlugin[]
importHelpersFrom?: string
}
transformAST
Transform with an existing Babel AST + MagicString instance. This is used internally by @kdujs/compiler-sfc
to avoid double parse/transform cost.
import { transformAST } from '@kdujs/reactivity-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 {
rootRefs,
importedHelpers
} = transformAST(ast, s)
console.log(s.toString())