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

• trkl
• Emnudge
• WebReflection
• Preact

License

MIT