event-state

A subscription based state management solution.

import { makeState } from '@olian/event-state';

const state = makeState({
    foo: 1,
    bar: {
        biz: 10,
    }
})

state.$get() // { foo: 1, bar: { biz: 10 } }
state.bar.$get() // { biz: 10 }


state.foo.$get() // 1
state.foo.$subscribe(v => console.log('Foo:', v)) // triggers once foo.$set() is called
state.foo.$set(3)
state.foo.$get() // 3


// Subscribe events will bubble up to parent listeners
state.$subscribe(v => console.log('State:', v)) // triggers if state.$set(), bar.$set() or biz.$set() is called
state.bar.$subscribe(v => console.log('State.Bar:', v)) // triggers if bar.$set() or biz.$set() is called
state.bar.biz.$subscribe(v => console.log('State.Bar.Biz:', v)) // triggers if biz.$set() is called
state.bar.biz.$set(20)

// Event bubbling can be prevented
state.bar.$subscribe(v => console.log('State.Bar:', v)) // triggers if bar.$set() is called
state.bar.biz.$subscribe((v, preventBubble) => {
  preventBubble()
  console.log('State.Bar.Biz:', v)
}) // triggers if biz.$set() is called

Install

NPM: npm i @olian/event-state