ulive

ULive

yarn: yarn add ulive

npm: npm i ulive

cdn: https://esm.sh/ulive

module: https://esm.sh/ulive?module

• Small.
• Fast.
• Simple API
• Reactive.
• Circular Detection

API

Fn version

This is function based signal.

yarn: yarn add ulive

npm: npm i ulive

cdn: https://esm.sh/ulive/fn

module: https://esm.sh/ulive/fn?module

import { o, effect, memo, batch, untracked } from "ulive/fn";

const num = o(0);
num(10);
console.log(num());

signal(val)

Create a reactive or live state.

import { signal, computed, 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));

batch(fn)

Defer effects.

let a = signal(0), b = signal(1)
let mul = computed(() => a.value * b.value);
effect(() => console.log(a.value, b.value, mul.value));
batch(() => (a++, b++));

untracked(fn)

Run without effects.

let a = signal(0), b = signal(1)
let mul = computed(() => a.value * b.value);
effect(() => untracked(() => console.log(a.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

• trkl
• Emnudge
• WebReflection
• Preact

License

MIT