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";constnum=o(0);num(10);console.log(num());

signal(val)

Create a reactive or live state.

import{signal,computed,effect}from"ulive";constnum=signal(0);num.value=10;console.log(num.value);

effect(fn)

Run fn with automatic dependency check & cleanup return.

letnum=signal(0);effect(()=>console.log(num.value));

computed(fn)

Returns computed value.

letnum=signal(0);letsquare=computed(()=>num.value*num.value);letcube=computed(()=>square.value*num.value);effect(()=>console.log(num.value,square.value,cube.value));

batch(fn)

Defer effects.

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

untracked(fn)

Run without effects.

leta=signal(0),b=signal(1)letmul=computed(()=>a.value*b.value);effect(()=>untracked(()=>console.log(a.value)));

toJSON or then or valueOf

constcounter=signal(0);consteffectCount=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

constnum=signal(1);letsquare=computed(()=>num.value*num.value);letcube=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