@lomray/react-mobx-manager 1.0.0-beta.5 → 1.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -4
- package/lib/manager.d.ts +0 -2
- package/lib/manager.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
The React-mobx-manager package is distributed using [npm](https://www.npmjs.com/), the node package manager.
|
|
26
26
|
|
|
27
27
|
```
|
|
28
|
-
npm i --save
|
|
28
|
+
npm i --save @lomray/react-mobx-manager
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
Import `Manager, StoreManagerProvider` from `@lomray/react-mobx-manager` into your index file after wrap `<App/>` with `<StoreManagerProvider/>`
|
|
@@ -54,9 +54,42 @@ Connect mobx store to manager and you're good to go!
|
|
|
54
54
|
|
|
55
55
|
```jsx
|
|
56
56
|
import { withStores } from '@lomray/react-mobx-manager';
|
|
57
|
-
import
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
import { makeAutoObservable } from 'mobx';
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Mobx user store
|
|
61
|
+
*/
|
|
62
|
+
class UserStore {
|
|
63
|
+
name = 'Matthew'
|
|
64
|
+
|
|
65
|
+
constructor() {
|
|
66
|
+
makeAutoObservable()
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Define stores for component
|
|
72
|
+
*/
|
|
73
|
+
const stores = {
|
|
74
|
+
userStore: UserStore
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
type TProps = StoresType <typeof stores>;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* User component
|
|
81
|
+
* @returns {JSX.Element}
|
|
82
|
+
* @constructor
|
|
83
|
+
*/
|
|
84
|
+
const User: FC<TProps> = ({userStore: {name}}) => {
|
|
85
|
+
return (
|
|
86
|
+
<div>{name}</div>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Connect stores to component
|
|
92
|
+
*/
|
|
60
93
|
export default withStores(User, stores);
|
|
61
94
|
```
|
|
62
95
|
|
package/lib/manager.d.ts
CHANGED
|
@@ -57,11 +57,9 @@ declare class Manager {
|
|
|
57
57
|
init(): Promise<Manager>;
|
|
58
58
|
/**
|
|
59
59
|
* Get manager instance
|
|
60
|
-
* NOTE: Need call 'init' before call this method
|
|
61
60
|
*/
|
|
62
61
|
/**
|
|
63
62
|
* Get manager instance
|
|
64
|
-
* NOTE: Need call 'init' before call this method
|
|
65
63
|
*/
|
|
66
64
|
static get(): Manager;
|
|
67
65
|
/**
|
package/lib/manager.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("mobx"),t=require("./on-change-listener.js"),
|
|
1
|
+
"use strict";var e=require("mobx"),t=require("./on-change-listener.js"),s=require("./wakeup.js");class r{constructor({initState:e,storesParams:t,storage:s,options:i}={}){Object.defineProperty(this,"stores",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"initState",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"storage",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"persistData",{enumerable:!0,configurable:!0,writable:!0,value:{}}),Object.defineProperty(this,"storesParams",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:{shouldDisablePersist:!1,shouldRemoveInitState:!0}}),this.initState=e||{},this.storesParams=t||{},this.storage=s,Object.assign(this.options,i||{}),r.instance=this}async init(){return this.storage&&(this.persistData=await this.storage.get()||{}),this}static get(){if(!r.instance)throw new Error("Store manager is not initialized.");return r.instance}static getStoreKey(e,t){return t||e.id||e.name||e.constructor.name}getStore(e,t){const s=r.getStoreKey(e,t);return this.stores.has(s)?this.stores.get(s):e.isSingleton?this.createStore(e,t):void 0}createStore(e,t){var s,i,o;const n=r.getStoreKey(e,t),a=this.stores.get(n);if(a)return a;const l=new e({storeManager:this,...this.storesParams});l.id=n,l.isSingleton=e.isSingleton;const u=this.initState[n],c=this.persistData[n];return u&&(Object.assign(l,u),this.options.shouldRemoveInitState&&delete this.initState[n]),"wakeup"in l&&r.persistedStores.has(n)&&(null===(s=l.wakeup)||void 0===s||s.call(l,l,{initState:u,persistedState:c}),null===(i=l.addOnChangeListener)||void 0===i||i.call(l,l,this)),this.stores.set(n,l),null===(o=l.init)||void 0===o||o.call(l),l}createStores(e){return e.reduce(((e,[t,s])=>{const[r,i]="store"in s?[s.store,s.id]:[s];return{...e,[t]:this.createStore(r,i)}}),{})}mountStores(e){const t=[];return Object.values(e).forEach((e=>{var s;const i=r.getStoreKey(e);if(this.stores.has(i)||this.stores.set(i,e),"onMount"in e){const r=null===(s=e.onMount)||void 0===s?void 0:s.call(e);"function"==typeof r&&t.push(r)}"onDestroy"in e&&t.push((()=>{var t;return null===(t=e.onDestroy)||void 0===t?void 0:t.call(e)}))})),()=>{t.forEach((e=>e())),Object.values(e).forEach((e=>{const t=r.getStoreKey(e);e.isSingleton||this.stores.delete(t)}))}}toJSON(){var e,t;const s={};for(const[i,o]of this.stores.entries())s[i]=null!==(t=null===(e=o.toJSON)||void 0===e?void 0:e.call(o))&&void 0!==t?t:r.getObservableProps(o);return s}toPersistedJSON(){var e,t;const s={};for(const i of r.persistedStores){const o=this.stores.get(i);o&&(s[i]=null!==(t=null===(e=o.toJSON)||void 0===e?void 0:e.call(o))&&void 0!==t?t:r.getObservableProps(o))}return s}static getObservableProps(t){const s=e.toJS(t);return Object.entries(s).reduce(((s,[r,i])=>({...s,...e.isObservableProp(t,r)?{[r]:i}:{}})),{})}static persistStore(e,i){const o=r.getStoreKey(e,i);if(r.persistedStores.has(o))throw new Error(`Duplicate serializable store key: ${o}`);return r.persistedStores.add(i),e.id=o,"wakeup"in e.prototype||(e.prototype.wakeup=s),"addOnChangeListener"in e.prototype||(e.prototype.addOnChangeListener=t),e}}Object.defineProperty(r,"persistedStores",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),module.exports=r;
|