Callbag-based state management.
npm i callbag-stateimport state from 'callbag-state';
import subscribe from 'callbag-subscribe';
const s = state(42);
subscribe(v => console.log('GOT: ' + v))(s);
console.log(s.get());
s.set(43);
console.log(s.get());
// > GOT: 42
// > 42
// > GOT: 43
// > 43👉 Track the state and mutate it via .set() and .get():
import state from 'callbag-state';
import subscribe from 'callbag-subscribe';
const s = state(42);
subscribe(console.log)(s);
s.set(43);
s.set(s.get() + 1);
// > 42
// > 43
// > 44👉 Track sub-states:
import state from 'callbag-state';
import subscribe from 'callbag-subscribe';
const s = state({x : 42});
const x = s.sub('x');
subscribe(console.log)(s);
x.set(43);
x.set(x.get() + 1);
// > {x: 42}
// > {x: 43}
// > {x: 44}👉 Changes propagate properly wherever you make them on state-tree:
import state from 'callbag-state';
import subscribe from 'callbag-subscribe';
const s = state([{x : 42}, {x: 21}]);
subscribe(console.log)(s.sub(0).sub('x'));
s.set([{x: 44}]);
s.sub(0).set({x: 43});
s.sub(0).sub('x').set(45);
// > 42
// > 43
// > 44
// > 45👉 Track changes:
import state from 'callbag-state';
import subscribe from 'callbag-subscribe';
const s = state([1, 2, 3, 4]);
subscribe(console.log)(s.downstream());
s.set([5, 2, 3, 4, 1]);
// > {
// > value: [5, 2, 3, 4, 1],
// > trace: {
// > subs: {
// > 0: { from: 1, to: 5 },
// > 4: { from: undefined, to: 1}
// > }
// > }// WRONG:
const s = state([1, 2, 3, 4])
s.get().push(5); // --> no updates// CORRECT:
const s = state([1, 2, 3, 4])
s.set([...s.get(), 5]);// FUN & CORRECT:
const s = state([1, 2, 3, 4])
s.sub(s.get().length).set(5)Be nice and respectful, more importantly super open and welcoming to all.
👉 Useful commands for working on this repo:
git clone https://github.com/loreanvictor/callbag-state.gitnpm i # --> install dependenciesnpm start # --> run `samples/index.ts`npm test # --> run all testsnpm run cov:view # --> view code coverage