@kirei/fx
The core reactivity used in the Kirei Elements ecosystem, basically a slimmed down version of Vue 3's reactivity package. This package is intended for usage within the Kirei framework, but could be used standalone for other purposes.
This package does not support Internet Explorer as it uses the proxy object.
Installation
$ npm i @kirei/fx
or if you use yarn
$ yarn add @kirei/fx
API
import { ... } from '@kirei/fx';ref( target )
Creates a reactive reference of a value, objects are transformed into a reactive.
Returns: A Ref object, has three different members, value, toString() and valueOf().
Parameters
-
target {T | Ref<T>}- A nested Ref is unwrapped to another Ref as nested refs are not allowed.
computed( target )
Creates a computed getter (and setter) as a ref object, like a synthetic ref that caches the getter value, only updates when a dependency updates. Might not automatically update if the setter is called as it does not update the cache, unless a dependency is updated.
Returns: A Ref object.
Parameters
-
target {Computed<T>}- function if getter only or object with get and set members as functions.
reactive( target )
Creates a reactive object that updates when a prop changes
Returns: The target object wrapped in a Proxy to track and trigger changes recursively, referred to as a Reactive.
Parameters
-
target {object}- Object. Arrays and Collections (Set, Map, WeakSet, WeakMap) work as expected with full reactivity due to shimming with the Proxy object.
readonly( param1 [, param2 ] )
Creates and immutable reactive object, when trying to set/update a property it will throw a TypeError
Returns: returns
Parameters
-
target {object}- Object. Arrays and Collections (Set, Map, WeakSet, WeakMap) work as expected with full reactivity due to shimming with the Proxy object.
watch( target, callback, [ options ] )
Watches one or multiple sources for changes, to easily consume the updates with a before and after value. Has an option to trigger an immediate call (with oldValue set to undefined or empty array). Returns a function to effectivly stop the watcher.
Returns: returns
Parameters
-
target {WatchTarget|WatchTarget[]}- Target or targets to watch -
callback {WatchCallback}- Callback to run when a target triggers an update -
options {WatchOptions}- Optional watcher options
watchEffect( target )
Creates a function that runs anytime a reactive dependency updates. Runs immediately to collect dependencies. Returns a function to effectivly stop the watcher.
Returns: returns
Parameters
-
target {Function}- Function to run when an update is triggered
isObserver isReactive isReadonly isRef unRef toRaw toRawValue toReactive toReadonly toRef toRefs
Fx static pauseTracking static resetTracking static resumeTracking static track static trigger
new cleanup run scheduleRun stop
active deps raw scheduler
Examples
Testing
$ npm run test