Why?

Installation

$ npm i parket

// ES6import{model}from'parket';// CJSconst{ model}=require('parket');

Usage

Basic example

import{model}from'parket';// model returns a "constructor" functionconstPerson=model('Person',{// name is used internally for serializationinitial:()=>({firstname:null,lastname:null,nested:null,}),actions:(state)=>({setFirstName(first){state.firstname=first;// no set state, no returns to merge, it's reactive™},setLastName(last){state.lastname=last;},setNested(nested){state.nested=nested;},}),views:(state)=>({fullname:()=>`${state.firstname}${state.lastname}`,// views are computed properties}),});// merge an object with the initial stateconstinstance=Person({firstname:'Tom'});// you can subscribe to actions, patches (state updates) and snapshots (full state after actions)constunsubscribe=instance.onSnapshot(console.log);// you can unsubscribe by calling the function returned by the listener// unsubscribe();instance.setLastName('Clancy');// views turn into cached gettersconsole.log(instance.fullname);// 'Tom Clancy'// nested models also bubble up events to the parentinstance.setNested(Person());instance.nested.setFirstName('wow');// you can get a snapshot of the state at any time// { firstname: 'Tom', lastname: 'Clancy',  nested: { firstname: 'wow', lastname: null, nested: null }}console.log(instance.getSnapshot());

Async example

constAsync=model('Async',{initial:()=>({loading:false,result:null,}),actions:(self)=>({asyncdoSomethingAsync(){// actions can be async, parket doesn't careself.loading=true;self.result=awaitsomethingAsync();// be aware that you should handle errorsself.loading=false;},}),});

preact / react

import{Component}from'preact';import{observe,connect,Provider}from'parket/preact';// or 'parket/react'// observe keeps the component updated to models in the prop@observeclassObservedextendsComponent{render({ person}){// if you're using react, props don't get passed to render so you have to use `const {person} = this.props;`return(<div><h1>{person.fullname}</h1></div>);}}// connect inserts the store/instance into props@connectclassPersonextendsComponent{render({ store}){// if you're using react, props don't get passed to render so you have to use `const {store} = this.props;`return(<div><h1>{store.fullname}</h1></div>);}}// Provider adds an instance to the contextconstroot=()=>(<Providerstore={instance}><divid="app"><Person/><Observedperson={instance}/></div></Provider>);

preact / react hooks

functionObserved({ person}){useObserved(person);return(<div><h1>{person.fullname}</h1></div>);}functionPerson(){conststore=useStore();return(<div><h1>{store.fullname}</h1></div>);}// Provider adds an instance to the contextconstroot=()=>(<Providerstore={instance}><divid="app"><Person/><Observedperson={instance}/></div></Provider>);

Credits

License