UNPKG

react-model

Version:

The State management library for React

2 lines (1 loc) 8.91 kB
import t,{enableES5 as e}from"immer";import{createContext as o,useState as a,useRef as n,useLayoutEffect as s,PureComponent as r,createElement as c}from"react";var i={Actions:{},AsyncState:{},Context:{__global:{}},Middlewares:{},Setter:{classSetter:void 0,functionSetter:{}},State:{},devTools:void 0,subscriptions:{},mutableState:{},uid:0,storeId:0,currentStoreId:"0",withDevTools:!1};const l={logger:{enable:!1},devtools:{enable:!1},tryCatch:{enable:!0}},u=async(t,e)=>{const{next:o}=t;return l.tryCatch.enable?await o(e).catch(t=>console.log(t)):await o(e)},S=async(t,e)=>{const{action:o,modelName:a,consumerActions:n,params:s,next:r,Global:c,type:i}=t;return t.newState="u"===i?o():await o(s,{actions:n(c.Actions[a],{modelName:a}),state:c.State[a],...c.Context.__global||{},...c.Context[a]||{}})||null,await r(e)},d=async(t,e)=>{const{modelName:o,newState:a,next:n,Global:s,disableSelectorUpdate:r,type:c}=t;if(s.Setter.functionSetter[o]&&!r&&Object.keys(s.Setter.functionSetter[o]).map(t=>{const e=s.Setter.functionSetter[o][t];e&&e.selector&&!e.selectorRef&&(e.selectorRef=e.selector(s.State[o]))}),a||"u"===c)return E(o,a||{}),await n(e)},m=async(t,e)=>{const{modelName:o,next:a,Global:n,__hash:s}=t,r=n.Setter.functionSetter[o];return"f"===t.type&&s&&r&&r[s]&&r[s].setState&&r[s].setState(n.State[o]),await a(e)},b=async(t,e)=>{const{modelName:o,actionName:a,next:n,Global:s}=t,r=s.subscriptions[`${o}_${a}`];return r&&r.forEach(e=>{e(t)}),await n(e)},_=async(t,e)=>{const{Global:o}=t;if(!0===l.logger.enable||"function"==typeof l.logger.enable&&l.logger.enable(t)){console.group(`%c ${t.modelName} State Change %c ${(new Date).toLocaleTimeString()}`,"color: gray; font-weight: lighter;","color: black; font-weight: bold;"),console.log("%c Previous","color: #9E9E9E; font-weight: bold",o.State[t.modelName]),console.log("%c Action","color: #03A9F4; font-weight: bold",t.actionName,"payload: "+t.params);const a=await t.next(e);return console.log("%c Next","color: #4CAF50; font-weight: bold",o.State[t.modelName]),console.groupEnd(),a}return await t.next(e)},f=async(t,e)=>{const{Global:o}=t,a=await t.next(e);return o.withDevTools&&l.devtools.enable&&o.devTools.send(`${t.modelName}_${t.actionName}`,o.State),a},p=async(t,e)=>{const{modelName:o,next:a,Global:n,disableSelectorUpdate:s}=t;return n.Setter.classSetter&&n.Setter.classSetter(n.State),n.Setter.functionSetter[o]&&Object.keys(n.Setter.functionSetter[o]).map(t=>{const e=n.Setter.functionSetter[o][t];if(e)if(!e.selector||s)e.setState(n.State[o]);else{const t=e.selector(n.State[o]);$(t,e.selectorRef)||(e.selectorRef=t,e.setState(n.State[o]))}}),await a(e)},w=[u,_,f,S,d,m,p,b],y={communicator:p,consoleDebugger:_,devToolsListener:f,getNewState:S,getNewStateWithCache:(t=5e3)=>async(e,o)=>{const{action:a,Global:n,modelName:s,consumerActions:r,params:c,next:i,actionName:l}=e;return e.newState=await Promise.race([a(c,{actions:r(n.Actions[s],{modelName:s}),state:n.State[s]}),O(t,R(s,l))])||null,await i(o)},setNewState:d,stateUpdater:m,subscription:b,tryCatch:u,config:l},g=async(t,e)=>(e.next=t=>t.length>0?t[0](e,t.slice(1)):e.newState,await t[0](e,t.slice(1))),h=o({}),N=h.Consumer;if(!console.group){const t=[],e="-".repeat(80);console.group=function(o){t.push(o),console.log("%c \nBEGIN GROUP: %c",e,o),console.groupEnd=function(){console.log("END GROUP: %c\n%c",t.pop(),e)}}}const A=(t,e)=>{const o={};return Object.keys(t).forEach(a=>{o[a]=((t,e)=>async(o,a)=>{const n={Global:i,action:t,actionName:t.name,consumerActions:A,middlewareConfig:a,modelName:e.modelName,newState:null,params:o,type:"o"};return await g(w,n)})(t[a],e)}),o},E=(e,o)=>{if("function"==typeof o){let a=i.State[e];a=t(a,o),i.State=t(i.State,t=>{t[e]=a})}else i.State=t(i.State,t=>{t[e]={...t[e],...o}});return i.State},O=(t,e)=>new Promise(o=>setTimeout(()=>{console.log(t),o(e)},t)),v=async(e,o)=>{const a={__FROM_SERVER__:!0};return await Promise.all(Object.keys(i.State).map(async n=>{if(!e||!e.modelName||n===e.modelName||-1!==e.modelName.indexOf(n)){const s=i.AsyncState[n],r=s?await s(e):{};o&&o.isServer?a[n]=r:i.State=t(i.State,t=>{t[n]={...t[n],...r}})}})),o&&o.isServer?a:i.State},R=(t,e)=>{const o=localStorage.getItem(`__REACT_MODELX__${t}_${e}`);return o?JSON.parse(o):null},$=(t,e)=>{if(t===e)return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;const o=Object.keys(t),a=Object.keys(e);if(o.length!==a.length)return!1;for(let a=0;a<o.length;a++)if(!Object.prototype.hasOwnProperty.call(e,o[a])||t[o[a]]!==e[o[a]])return!1;return!0};function x(e){const o=i.currentStoreId,a=i.mutableState[o].count;return i.mutableState[o].count+=1,i.mutableState[o].hasOwnProperty(a)||(i.mutableState[o][a]="function"==typeof e?e():e),[i.mutableState[o][a],async e=>{i.mutableState[o][a]="function"==typeof e?t(i.mutableState[o][a],e):"object"==typeof i.mutableState[o][a]&&"object"==typeof e?{...i.mutableState[o][a],...e}:e;const n={Global:i,action:()=>"function"==typeof e?i.mutableState[o][a]:e,actionName:"setter",consumerActions:A,disableSelectorUpdate:!0,middlewareConfig:{},modelName:o,newState:{},params:void 0,type:"u"};return await g(w,n)}]}function C(t,e){const o="string"==typeof t;i.storeId+=o?0:1;const a=o?t:i.storeId.toString();i.Actions[a]||(i.Actions[a]={}),i.mutableState[a]||(i.mutableState[a]={count:0});const n=()=>(i.mutableState[a].count=0,i.currentStoreId=a,e?e():t());return i.mutableState[a].selector=n,{useStore:()=>M(a,n),getState:()=>n()}}function j(e,o,a){if(void 0!==e.state){i.storeId+=1;const a="__"+i.storeId;i.State=t(i.State,t=>{t[a]=e.state}),e.middlewares&&(i.Middlewares[a]=e.middlewares),i.Actions[a]=e.actions,i.AsyncState[a]=e.asyncState,o&&(i.Context[a]=o);const n=D(a);return{__id:a,actions:n,getState:()=>I(a),subscribe:(t,e)=>G(a,t,e),unsubscribe:t=>T(a,t),useStore:t=>M(a,t)}}{if(e.actions){console.error("invalid model(s) schema: ",e);const t=t=>(...e)=>t;return{__ERROR__:!0,actions:t({}),getActions:t({}),getInitialState:t({}),getState:t({}),subscribe:t(),unsubscribe:t(),useStore:t([{},{}])}}o&&!o.__FROM_SERVER__&&(i.State=t(i.State,t=>{Object.assign(t,o||{})})),a&&(i.Context.__global=a),Object.keys(e).forEach(a=>{const n=e[a];if(n.__ERROR__)return console.error(a+" model's schema is invalid"),i.State=t(i.State,t=>{t[a]={}}),void(i.Actions[a]={});(t=>void 0!==t.useStore)(n)?(i.State[a]&&o||(i.State=t(i.State,t=>{t[a]=t[n.__id]})),o&&o.__FROM_SERVER__&&(i.State=t(i.State,t=>{t[a]={...t[n.__id],...o[a]}})),i.Actions[a]=i.Actions[n.__id],i.AsyncState[a]=i.AsyncState[n.__id],i.Middlewares[a]=i.Middlewares[n.__id],i.Context[a]=i.Context[n.__id]):(o&&o.__FROM_SERVER__?i.State=t(i.State,t=>{t[a]={...n.state,...o[a]}}):i.State[a]||(i.State=t(i.State,t=>{t[a]=n.state})),n.middlewares&&(i.Middlewares[a]=n.middlewares),i.Actions[a]=n.actions,i.AsyncState[a]=n.asyncState)});const n=Object.keys(e).reduce((t,e)=>({...t,[e]:D(e)}),{});return i.withDevTools="undefined"!=typeof window&&window.__REDUX_DEVTOOLS_EXTENSION__,i.withDevTools&&y.config.devtools.enable&&(i.devTools=window.__REDUX_DEVTOOLS_EXTENSION__,i.devTools.connect()),{actions:n,getActions:D,getInitialState:v,getState:I,subscribe:G,unsubscribe:T,useStore:M}}}e();const T=(t,e)=>{G(t,e,void 0)},G=(t,e,o)=>{Array.isArray(e)?e.forEach(e=>{i.subscriptions[`${t}_${e}`]||(i.subscriptions[`${t}_${e}`]=[]),o?i.subscriptions[`${t}_${e}`].push(o):i.subscriptions[`${t}_${e}`]=[]}):(i.subscriptions[`${t}_${e}`]||(i.subscriptions[`${t}_${e}`]=[]),o?i.subscriptions[`${t}_${e}`].push(o):i.subscriptions[`${t}_${e}`]=[])},I=t=>i.State[t],D=(t,e={type:"o"})=>{const o={};return Object.keys(i.Actions[t]).forEach(a=>o[a]=async(o,n)=>{const s={action:i.Actions[t][a],actionName:a,consumerActions:A,middlewareConfig:n,modelName:t,newState:null,params:o,...e,Global:i};return i.Middlewares[t]?await g(i.Middlewares[t],s):await g(w,s)}),o},M=(t,e)=>{const o=a({})[1],r=n(""),c=(l=[t],t=>l.reduce((t,e)=>t&&t[e]?t[e]:null,t))(i.mutableState);var l;const u=!!c,S=u?c.selector:e,d=u?c:I(t);if(s(()=>{i.uid+=1;const e=""+i.uid;return r.current=e,i.Setter.functionSetter[t]||(i.Setter.functionSetter[t]={}),i.Setter.functionSetter[t][e]={setState:o,selector:S},function(){delete i.Setter.functionSetter[t][e]}},[]),u)return S(d);{const e=D(t,{__hash:r.current,type:"f"});return[S?S(d):d,e]}};class k extends r{constructor(){super(...arguments),this.state=i.State}render(){const{children:t}=this.props;return i.Setter.classSetter=this.setState.bind(this),c(h.Provider,{value:{...this.state}},t)}}const P=(t,e,o)=>a=>class extends r{render(){const{state:n={},actions:s={}}=this.props;return c(N,null,r=>{const{[""+t]:l}=r,u=i.Actions[t];return c(a,Object.assign({},this.props,{state:{...n,...e?e(l):l},actions:{...s,...o?o(A(u,{modelName:t})):A(u,{modelName:t})}}))})}};export{N as Consumer,j as Model,k as Provider,w as actionMiddlewares,P as connect,C as createStore,v as getInitialState,I as getState,y as middlewares,x as useModel};