ulive
v1.0.2
Published
Live reactive states
Downloads
150
Readme
ULive
yarn: yarn add ulive
npm: npm i ulive
cdn: https://esm.sh/ulive
module: https://esm.sh/ulive?module
- Small. 280 bytes gzip.
- Fast.
- Simple API
- Reactive. Automatic derivation.
- Value Ref Syntax
- Circular Detection
API
signal(val)
Create a reactive or live state.
import { signal, computed, memo, effect } from "ulive";
const num = signal(0);
num.value = 10;
console.log(num.value);
effect(fn)
Run fn with automatic dependency check & cleanup return.
let num = signal(0);
effect(() => console.log(num.value));
computed(fn)
Returns computed value
let num = signal(0);
let square = computed(() => num.value * num.value);
let cube = computed(() => square.value * num.value);
effect(() => console.log(num.value, square.value, cube.value));
toJSON or then or valueOf
const counter = signal(0);
const effectCount = signal(0);
effect(() => {
console.log(counter.value);
// Whenever this effect is triggered, increase `effectCount`.
// But we don't want this signal to react to `effectCount`
effectCount.value = effectCount.valueOf() + 1;
});
Usage
const num = signal(1);
let square = computed(() => num.value * num.value);
let cube = computed(() => square.value * num.value);
effect(() => console.log(num.value, square.value, cube.value));
num.value = 1;
num.value = 2;
num.value = 3;
Thanks and Inspiration
License
MIT