- Small (~1.5KB)
- Immutable from the outside, mutable in actions
- Reactive (state emits updates without explicit calls to i.e.
setState
) - Modular (you can nest models inside each other)
Why?
I was disappointed with all the current state management solutions. Then I found mobx-state-tree, which seemed like a godsend to me (ok not really, but I liked the concept), but it was pretty big in terms of file size (mobx alone is big: 16.5kB). So I thought it's surely possible to make a smaller version of it, that's how this started. And after 2 failed attempts I finally got something that works well
Installation
$ npm i parket
// ES6;// CJSconst model = ;
Usage
Note: This library uses Proxies and Symbols. Proxies cannot be fully polyfilled so you have to target modern browers which support Proxies.
Basic example
;// model returns a "constructor" functionconst Person = ; // merge an object with the initial stateconst instance = ; // you can subscribe to actions, patches (state updates) and snapshots (full state after actions)const unsubscribe = instance; // you can unsubscribe by calling the function returned by the listener// unsubscribe(); instance; // views turn into cached gettersconsole; // 'Tom Clancy' // nested models also bubble up events to the parentinstance; instancenested; // you can get a snapshot of the state at any time// { firstname: 'Tom', lastname: 'Clancy', nested: { firstname: 'wow', lastname: null, nested: null } }console;
Async example
const Async = ;
preact / react
;; // or 'parket/react' // observe keeps the component updated to models in the prop@observe { // if you're using react, props don't get passed to render so you have to use `const {person} = this.props;` return <div> <h1>personfullname</h1> </div> ; } // connect inserts the store/instance into props@connect { // if you're using react, props don't get passed to render so you have to use `const {store} = this.props;` return <div> <h1>storefullname</h1> </div> ; } // Provider adds an instance to the contextconst root = <Provider store=instance> <div id="app"> <Person /> <Observed person=instance /> </div> </Provider>;
preact / react hooks
{ ; return <div> <h1>personfullname</h1> </div> ;} { const store = ; return <div> <h1>storefullname</h1> </div> ;} // Provider adds an instance to the contextconst root = <Provider store=instance> <div id="app"> <Person /> <Observed person=instance /> </div> </Provider>;