ByunX

state management + event emitter + reactive stream

Examples

Basic

const store = createStore({
    data:{ a: 1, b: 2 },
    computed:{
        sum(){ return this.a + this.b; }
    },
    actions:{
        update(a,b){ this.a = a; this.b = b; }
    }
});
 
store.get('a');
// 1
store.get('sum');
// 3
 
store.on(event=>{
   console.log("event trigger,", event.data); 
});
 
store.dispatch("update", 3, 4);
// event trigger,
// {a:3, b:4, sum:7}

Stream

const store = createStore({
    data:{ a: 1, b: 3 },
    computed:{
        sum(){ return this.a + this.b; }
    },
    actions:{
        update(a,b){ this.a = a; this.b = b; }
    }
});
 
store.stream()
    .pluck("sum")
    .take(3)
    .subscribe(sum=>{
        console.log(`sum : ${sum}`);
    });
//sum: 3
 
store.dispatch("update", 3, 4);
//sum: 7
store.dispatch("update", 5, 6);
//sum: 11
 
store.dispatch("update", 1, 2);
store.dispatch("update", 3, 2);
store.dispatch("update", 6, 2);
//nothing...

API

Store

• get
• on
• off
• dispatch
• dispatchQ
• stream

Stream

• buffer
• debounce
• delay
• distinct
• distinctUntilChanged
• filter
• flatMap
• last
• map
• merge
• pluck
• publish
• reduce
• scan
• skip
• subscribe
• take
• throttle
• zip

---

Store

get(key?: string, defaultValue = null)

store.get('a');
store.get('a.b'); // get nested property value

on(name: string, handler: function)

store.on("update:before", event=>{
    console.log("update:before", event.data);
});
 
store.on("update", event=>{
    console.log("updated", event);
});
 
store.dispatch("update", 3, 4);
// update:before {a:1, b:2, sum:3}
// updated {
//     store: store,
//     name: "update",
//     args: [3,4],
//     data:{a:3, b:4, sum:7}
// }

global events : *, *:before

on(handler: function)

alias on("*", listener: function)

off(name: string, listener?: function)

off(listener: function)

clear registered event listeners

dispatch(name: string, ...args)

execute action.

dispatchQ(name: string, ...args)

add action to the queue.

store.on("update", event=>console.log("update: ", event.data));
store.on(event=>console.log("*: ", event.data));
 
store.dispatchQ("update", 1, 3);
store.dispatchQ("update", 2, 4);
 
console.log("end:", store.get());
// end: {a:1, b:2, sum:3} 
// update: {a:1, b:3, sum:4}
// update: {a:2, b:4, sum:6} 
// *: {a:2, b:4, sum:6}

stream()

return stream

Stream

buffer(size: number)

1--3---4------5---3----2------
           buffer(3)
-------[1,3,4]---------[5,3,2]

store.stream()
    .buffer(2)
    .subscribe(v=>console.log(v));
 
store.dispatch("update", 2, 3);
//[ {a:1,b:2,sum:3}, {a:2,b:3,sum:5} ]

debounce(milliseconds: number = 100, immediate?: boolean)

-1-------2--3--4--5------6----
        debounce(300)
----1-----------------5------6

delay(milliseconds: number)

-1-------2--3--4--5------6----
        delay(300)
----1-------2--3--4--5------6-

distinct()

-1-------2--1--1--2------3-
        distinct()
-1-------2---------------3-

distinctUntilChanged()

-1-------2--1--1--2------3--
   distinctUntilChanged()
-1-------2--1-----2------3--

filter(handler: function)

-1-------2--1--1--2------3---
   filter((v,i)=>i%2===0)
-1----------1-----2----------

flatMap(handler: function)

-1----2---3-------4-------
   flatMap((v,i)=>[v,i])
-10---21--32------43------

last()

--1----2---3-------4|
       last()
-------------------4|

map(handler: function)

-1----2---3-------4--
     map(v=>v*2)
-2----4---6-------8--

merge(stream)

-1----2---3-------4--
---a--------b-c-----d
    merge(stream)
-1-a--2---3-b-c---4-d

store1.stream()
    .distinct()
    .merge(store2.stream().take(5))
    .subscribe(v=>console.log(v));

pluck(key: string)

store.stream()
    .pluck('sum')
    .subscribe(v=>console.log("sum:", v));
// sum: 4
 
store.update("update", 2, 3);
// sum: 5

publish()

const stream = store.stream()
    .pluck('sum')
    .subscribe(v=>console.log("sum:", v));
//sum: 4
 
stream.publish();
//sum: 4
stream.publish();
//sum: 4

publish to child stream

reduce()

-----1----2------3-------4|
reduce((prev,v)=>prev+v, 0)
-------------------------10|

scan(handler: function, initValue = null)

-----1----2------3-------4|
scan((prev,v)=>prev+v, 0)
-----1----3------6-------10|

skip(amount: number)

--1----2---3----4-----5--
        skip(3)
----------------4-----5--

subscribe(handler: function, immediately?: boolean=true)

subscribe stream. If immediately option is false, it will be subscribed after dispatch or publish.

const stream = store.stream()
    .subscribe(v=>console.log("sum:", v), false);
//nothing
 
stream.publish();
// sum 3

take(limit: number)

--1----2---3----4-----5--
        take(3)
--1----2---3|

throttle(milliseconds: number = 100)

-1------2-3-4-5-6-----
     throttle(300)
-1------2---4---6-----

zip(...streams)

---1--------2---3---------
----a-------------bc------
---xyz--------------------
   zip(stream1, stream2)
---[1,a,x]------[2,b,y][3,c,z]-

store1.stream()
    .zip(store2.stream(), store2.stream().take(5))
    .subscribe(v=>console.log(v));

License

MIT