@janghye0k/observable
v1.0.2
Published
A small, fast state-management solution using observer pattern.
Downloads
7
Maintainers
Readme
A small, fast state-management solution using observer pattern. This library allows you to create observables, subscribe to them, and publish changes to them. It also supports computed observables,
You can try a live demo here.
Installation
npm install @janghye0k/observable # or yarn add @janghye0k/observable or pnpm add @janghye0k/observable
Usage
- Create observable state
- Subscribe to the observable state
- Unsubscribe exist listener
- Modifying arrays and objects
- Computed value
Create observable state
import { observable } from '@janghye0k/observable';
const ov = observable('init');
const listener = function (state, prevState) {};
ov.subscribe(listener);
ov(); // 'init'
ov('init'); // 'init', no change
ov('changed'); // fn('changed', 'init')
ov.value = 'silent'; // silent update
ov.publish(); // fn('silent', 'init');
Subscribe to the observable state
const ov = observable(1);
const listener = function (state, prevState) {};
ov.subscribe(listener);
ov(13); // listener(13, 1)
ov(0); // listener(0, 13)
Unsubscribe exist listener
const ov = observable('init');
Modifying arrays and objects
Modifying arrays and objects will not publish, but replacing them will.
const ov = observable([]);
const listener = function (state, prevState) {};
ov.subscribe(listener);
ov([1]); // listener([1], [])
ov.value.push(2);
ov().push(3);
ov.pusblish(); // listener([1, 2, 3], [])
Computed value
Passing a function caches the result as the value. Any extra arguments will be passed to the function. Any observables called within the function will be subscribed to, and updates to those observables will recompute the value. Child observables must be called, mere references are ignored. If the function returns a Promise, the value is assigned async after resolution.
const a = observable(1); // a() == 1
const b = observable(() => a() + 1); // b() == 2
const c = observable((arg) => a() + b() + arg, 3); // c() == 6
a(3);
console.log(a(), b(), c()); // 3, 4, 10
function sleep(timeout) {
new Promise((resolve) => setTimeout(resolve, timeout));
}
const ov = observable(async () => {
await sleep(1000);
return 1;
});
console.log(ov()); // null;
await sleep(1000);
console.log(ov()); // 1