@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

License

MIT