@lomray/react-mobx-manager 1.0.0-beta.3 → 1.0.0-beta.6

package/README.md

@@ -1,9 +1,102 @@
-# Mobx stores manager for React
 
-## Usage
+<p align="center">
+    <img  src="https://user-images.githubusercontent.com/95251720/180519123-eb8a36e7-e7af-41f2-9a01-ae6d6b6a94f3.svg" alt="Bootstrap logo" width="200" height="165">
+</p>
 
-1. Install package:
+<h3 align='center'>Mobx stores manager for React</h3>
 
-```sh
-  npm i --save-dev @lomray/react-mobx-manager
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Lomray-Software_react-mobx-manager&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
+[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=Lomray-Software_react-mobx-manager&metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=Lomray-Software_react-mobx-manager&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
+[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=Lomray-Software_react-mobx-manager&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
+[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=Lomray-Software_react-mobx-manager&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
+[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=Lomray-Software_react-mobx-manager&metric=bugs)](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
+[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=Lomray-Software_react-mobx-manager&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=Lomray-Software_react-mobx-manager)
+
+## Table of contents
+
+- [Getting started](#getting-started)
+- [Bugs and feature requests](#bugs-and-feature-requests)
+- [Copyright](#copyright)
+
+
+## Getting started
+
+The React-mobx-manager package is distributed using [npm](https://www.npmjs.com/), the node package manager.
+
+```
+npm i --save @lomray/react-mobx-manager
+```
+
+Import `Manager, StoreManagerProvider` from `@lomray/react-mobx-manager` into your index file after wrap `<App/>` with `<StoreManagerProvider/>`
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { Manager, StoreManagerProvider } from '@lomray/react-mobx-manager';
+import App from './app';
+
+const storeManager = new Manager();
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+  <React.StrictMode>
+    <StoreManagerProvider storeManager={storeManager} shouldInit>
+      <App />
+    </StoreManagerProvider>
+  </React.StrictMode>,
+);
 ```
+
+Connect mobx store to manager and you're good to go!
+
+```jsx
+import { withStores } from '@lomray/react-mobx-manager';
+import { makeAutoObservable } from 'mobx';
+
+/**
+ * Mobx user store
+ */
+class UserStore {
+  name = 'Matthew'
+
+  constructor() {
+    makeAutoObservable()
+  }
+}
+
+/**
+ * Define stores for component
+ */
+const stores = {
+  userStore: UserStore
+};
+
+type TProps = StoresType <typeof stores>;
+
+/**
+ * User component
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const User: FC<TProps> = ({userStore: {name}}) => {
+  return (
+    <div>{name}</div>
+  )
+}
+
+/**
+ * Connect stores to component
+ */
+export default withStores(User, stores);
+```
+
+## Bugs and feature requests
+
+Bug or a feature request, [please open a new issue](https://github.com/Lomray-Software/react-mobx-manager/issues/new).
+
+## Copyright
+
+Code and documentation copyright 2022 the [Lomray Software](https://lomray.com/). 

package/lib/context.js

@@ -1,38 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Mobx store manager context
- */
-const StoreManagerContext = React__default["default"].createContext({});
-/**
- * Mobx store manager provider
- * @constructor
- */
-const StoreManagerProvider = ({ children, storeManager, fallback, shouldInit = false, }) => {
-    const [isInit, setInit] = React.useState(!shouldInit);
-    React.useEffect(() => {
-        if (!shouldInit) {
-            return;
-        }
-        storeManager
-            .init()
-            .then(() => setInit(true))
-            .catch((e) => {
-            console.error('Failed initialized store manager: ', e);
-        });
-    }, [shouldInit, storeManager]);
-    return (React__default["default"].createElement(StoreManagerContext.Provider, { value: storeManager, children: isInit ? children : fallback || children }));
-};
-const useStoreManagerContext = () => React.useContext(StoreManagerContext);
-
-exports.StoreManagerContext = StoreManagerContext;
-exports.StoreManagerProvider = StoreManagerProvider;
-exports.useStoreManagerContext = useStoreManagerContext;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);const a=r.default.createContext({});exports.StoreManagerContext=a,exports.StoreManagerProvider=({children:t,storeManager:o,fallback:n,shouldInit:i=!1})=>{const[s,u]=e.useState(!i);return e.useEffect((()=>{i&&o.init().then((()=>u(!0))).catch((e=>{console.error("Failed initialized store manager: ",e)}))}),[i,o]),r.default.createElement(a.Provider,{value:o,children:s?t:n||t})},exports.useStoreManagerContext=()=>e.useContext(a);

package/lib/index.js

@@ -1,21 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var context = require('./context.js');
-var manager = require('./manager.js');
-var onChangeListener = require('./on-change-listener.js');
-var wakeup = require('./wakeup.js');
-var withStores = require('./with-stores.js');
-var localStorage = require('./storages/local-storage.js');
-
-
-
-exports.StoreManagerContext = context.StoreManagerContext;
-exports.StoreManagerProvider = context.StoreManagerProvider;
-exports.useStoreManagerContext = context.useStoreManagerContext;
-exports.Manager = manager;
-exports.onChangeListener = onChangeListener;
-exports.wakeup = wakeup;
-exports.withStores = withStores;
-exports.MobxLocalStorage = localStorage;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./context.js"),r=require("./manager.js"),t=require("./on-change-listener.js"),o=require("./wakeup.js"),s=require("./with-stores.js"),a=require("./storages/local-storage.js");exports.StoreManagerContext=e.StoreManagerContext,exports.StoreManagerProvider=e.StoreManagerProvider,exports.useStoreManagerContext=e.useStoreManagerContext,exports.Manager=r,exports.onChangeListener=t,exports.wakeup=o,exports.withStores=s,exports.MobxLocalStorage=a;

package/lib/manager.d.ts

@@ -57,11 +57,9 @@ declare class Manager {
     init(): Promise<Manager>;
     /**
      * Get manager instance
-     * NOTE: Need call 'init' before call this method
      */
     /**
      * Get manager instance
-     * NOTE: Need call 'init' before call this method
      */
     static get(): Manager;
     /**

package/lib/manager.js

@@ -1,228 +1 @@
-'use strict';
-
-var mobx = require('mobx');
-var onChangeListener = require('./on-change-listener.js');
-var wakeup = require('./wakeup.js');
-
-/**
- * Mobx stores manager
- */
-class Manager {
-    /**
-     * Manger instance
-     */
-    static instance;
-    /**
-     * Created stores
-     */
-    stores = new Map();
-    /**
-     * Save persisted stores identities
-     * @private
-     */
-    static persistedStores = new Set();
-    /**
-     * Initial stores state (local storage, custom etc.)
-     * @private
-     */
-    initState;
-    /**
-     * Storage for persisted stores
-     * @private
-     */
-    storage;
-    /**
-     * Restored persist storage data
-     * @protected
-     */
-    persistData = {};
-    /**
-     * Additional store's constructor params
-     * @private
-     */
-    storesParams;
-    /**
-     * Manager options
-     * @private
-     */
-    options = {
-        shouldDisablePersist: false,
-        shouldRemoveInitState: true,
-    };
-    /**
-     * @constructor
-     */
-    constructor({ initState, storesParams, storage, options } = {}) {
-        this.initState = initState || {};
-        this.storesParams = storesParams || {};
-        this.storage = storage;
-        Object.assign(this.options, options || {});
-        Manager.instance = this;
-    }
-    /**
-     * Init store manager
-     */
-    async init() {
-        if (this.storage) {
-            this.persistData = (await this.storage.get()) || {};
-        }
-        return this;
-    }
-    /**
-     * Get manager instance
-     * NOTE: Need call 'init' before call this method
-     */
-    static get() {
-        if (!Manager.instance) {
-            throw new Error('Store manager is not initialized.');
-        }
-        return Manager.instance;
-    }
-    /**
-     * Get store identity
-     * @protected
-     */
-    static getStoreKey(store, id) {
-        return id || store.id || store['name'] || store.constructor.name;
-    }
-    /**
-     * Get exist store
-     */
-    getStore(store, id) {
-        const storeKey = Manager.getStoreKey(store, id);
-        if (this.stores.has(storeKey)) {
-            return this.stores.get(storeKey);
-        }
-        // in case get from another store
-        if (store.isSingleton) {
-            return this.createStore(store, id);
-        }
-        return undefined;
-    }
-    /**
-     * Create new store instance
-     * @protected
-     */
-    createStore(store, id) {
-        const storeKey = Manager.getStoreKey(store, id);
-        const existStore = this.stores.get(storeKey);
-        if (existStore) {
-            return existStore;
-        }
-        const newStore = new store({ storeManager: this, ...this.storesParams });
-        // assign id to new store
-        newStore.id = storeKey;
-        newStore.isSingleton = store.isSingleton;
-        const initState = this.initState[storeKey];
-        const persistedState = this.persistData[storeKey];
-        if (initState) {
-            Object.assign(newStore, initState);
-            if (this.options.shouldRemoveInitState) {
-                delete this.initState[storeKey];
-            }
-        }
-        // Detect persisted store and restore state
-        if ('wakeup' in newStore && Manager.persistedStores.has(storeKey)) {
-            newStore.wakeup?.(newStore, { initState, persistedState });
-            newStore.addOnChangeListener?.(newStore, this);
-        }
-        this.stores.set(storeKey, newStore);
-        newStore.init?.();
-        return newStore;
-    }
-    /**
-     * Create stores for component
-     */
-    createStores(map) {
-        return map.reduce((res, [key, store]) => {
-            const [s, id] = 'store' in store ? [store.store, store.id] : [store];
-            return {
-                ...res,
-                [key]: this.createStore(s, id),
-            };
-        }, {});
-    }
-    /**
-     * Mount stores to component
-     */
-    mountStores(stores) {
-        const unmountCallbacks = [];
-        Object.values(stores).forEach((store) => {
-            if ('onMount' in store) {
-                const unsubscribe = store.onMount?.();
-                if (typeof unsubscribe === 'function') {
-                    unmountCallbacks.push(unsubscribe);
-                }
-            }
-            if ('onDestroy' in store) {
-                unmountCallbacks.push(() => store.onDestroy?.());
-            }
-        });
-        return () => {
-            unmountCallbacks.forEach((callback) => callback());
-            Object.values(stores).forEach((store) => {
-                const storeKey = Manager.getStoreKey(store);
-                if (!store.isSingleton) {
-                    this.stores.delete(storeKey);
-                }
-            });
-        };
-    }
-    /**
-     * Get store's state
-     */
-    toJSON() {
-        const result = {};
-        for (const [storeKey, store] of this.stores.entries()) {
-            result[storeKey] = store.toJSON?.() ?? Manager.getObservableProps(store);
-        }
-        return result;
-    }
-    /**
-     * Get persisted store's data
-     */
-    toPersistedJSON() {
-        const result = {};
-        for (const storeKey of Manager.persistedStores) {
-            const store = this.stores.get(storeKey);
-            if (!store) {
-                continue;
-            }
-            result[storeKey] = store['toJSON']?.() ?? Manager.getObservableProps(store);
-        }
-        return result;
-    }
-    /**
-     * Get observable store props (fields)
-     * @private
-     */
-    static getObservableProps(store) {
-        const props = mobx.toJS(store);
-        return Object.entries(props).reduce((res, [prop, value]) => ({
-            ...res,
-            ...(mobx.isObservableProp(store, prop) ? { [prop]: value } : {}),
-        }), {});
-    }
-    /**
-     * Persist store
-     */
-    static persistStore(store, id) {
-        const storeKey = Manager.getStoreKey(store, id);
-        if (Manager.persistedStores.has(storeKey)) {
-            throw new Error(`Duplicate serializable store key: ${storeKey}`);
-        }
-        Manager.persistedStores.add(id);
-        store.id = storeKey;
-        // add default wakeup handler
-        if (!('wakeup' in store.prototype)) {
-            store.prototype.wakeup = wakeup;
-        }
-        // add default changes listener
-        if (!('addOnChangeListener' in store.prototype)) {
-            store.prototype.addOnChangeListener = onChangeListener;
-        }
-        return store;
-    }
-}
-
-module.exports = Manager;
+"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;

package/lib/on-change-listener.js

@@ -1,25 +1 @@
-'use strict';
-
-var mobx = require('mobx');
-
-/**
- * Listen persist store changes
- */
-const onChangeListener = (store, manager) => {
-    const { shouldDisablePersist } = manager.options;
-    if (shouldDisablePersist || !manager.storage) {
-        return;
-    }
-    return mobx.reaction(() => store.toJSON?.() ?? mobx.toJS(store), () => {
-        try {
-            manager.storage?.set(manager.toPersistedJSON())?.catch((e) => {
-                console.error('Failed to persist stores #1: ', e);
-            });
-        }
-        catch (e) {
-            console.error('Failed to persist stores #2: ', e);
-        }
-    });
-};
-
-module.exports = onChangeListener;
+"use strict";var o=require("mobx");module.exports=(r,e)=>{const{shouldDisablePersist:t}=e.options;if(!t&&e.storage)return o.reaction((()=>{var e,t;return null!==(t=null===(e=r.toJSON)||void 0===e?void 0:e.call(r))&&void 0!==t?t:o.toJS(r)}),(()=>{var o,r;try{null===(r=null===(o=e.storage)||void 0===o?void 0:o.set(e.toPersistedJSON()))||void 0===r||r.catch((o=>{console.error("Failed to persist stores #1: ",o)}))}catch(o){console.error("Failed to persist stores #2: ",o)}}))};

package/lib/storages/local-storage.js

@@ -1,30 +1 @@
-'use strict';
-
-class LocalStorage {
-    globalKey = 'stores';
-    /**
-     * @inheritDoc
-     */
-    get() {
-        try {
-            return JSON.parse(localStorage.getItem(this.globalKey) || '{}');
-        }
-        catch (e) {
-            return {};
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    flush() {
-        return localStorage.removeItem(this.globalKey);
-    }
-    /**
-     * @inheritDoc
-     */
-    set(value) {
-        return localStorage.setItem(this.globalKey, JSON.stringify(value || '{}'));
-    }
-}
-
-module.exports = LocalStorage;
+"use strict";module.exports=class{constructor(){Object.defineProperty(this,"globalKey",{enumerable:!0,configurable:!0,writable:!0,value:"stores"})}get(){try{return JSON.parse(localStorage.getItem(this.globalKey)||"{}")}catch(e){return{}}}flush(){return localStorage.removeItem(this.globalKey)}set(e){return localStorage.setItem(this.globalKey,JSON.stringify(e||"{}"))}};

package/lib/wakeup.js

@@ -1,12 +1 @@
-'use strict';
-
-/**
- * Restore store state from initial state
- */
-const wakeup = (store, { persistedState }) => {
-    if (persistedState) {
-        Object.assign(store, persistedState);
-    }
-};
-
-module.exports = wakeup;
+"use strict";module.exports=(e,{persistedState:s})=>{s&&Object.assign(e,s)};

package/lib/with-stores.js

@@ -1,35 +1 @@
-'use strict';
-
-var hoistNonReactStatics = require('hoist-non-react-statics');
-var mobxReactLite = require('mobx-react-lite');
-var React = require('react');
-var context = require('./context.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var hoistNonReactStatics__default = /*#__PURE__*/_interopDefaultLegacy(hoistNonReactStatics);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Make component observable and pass stores as props
- */
-const withStores = (Component, stores) => {
-    const storesMap = Object.entries(stores);
-    const ObservableComponent = mobxReactLite.observer(Component);
-    const componentName = Component.displayName || Component.name;
-    const Element = React__default["default"].memo(({ ...props }) => {
-        const storeManager = context.useStoreManagerContext();
-        const [initStores] = React.useState(() => storeManager.createStores(storesMap));
-        /**
-         * - Check if store has 'onMount' (call if exist)
-         * - Check if store has 'onDestroy' method (call if exist)
-         */
-        React.useEffect(() => storeManager.mountStores(initStores), [initStores, storeManager]);
-        return React__default["default"].createElement(ObservableComponent, { ...initStores, ...props });
-    });
-    hoistNonReactStatics__default["default"](Element, Component);
-    Element.displayName = `Mobx(${componentName})`;
-    return Element;
-};
-
-module.exports = withStores;
+"use strict";var e=require("hoist-non-react-statics"),t=require("mobx-react-lite"),r=require("react"),a=require("./context.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(e),u=o(r);module.exports=(e,o)=>{const n=Object.entries(o),c=t.observer(e),i=e.displayName||e.name,l=({...e})=>{const t=a.useStoreManagerContext(),[o]=r.useState((()=>t.createStores(n)));return r.useEffect((()=>t.mountStores(o)),[o,t]),u.default.createElement(c,{...o,...e})};return s.default(l,e),l.displayName=`Mobx(${i})`,l};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lomray/react-mobx-manager",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.6",
   "description": "This package provides Mobx stores manager for react.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,6 +31,7 @@
   "homepage": "https://github.com/Lomray-Software/react-mobx-manager",
   "scripts": {
     "build": "rollup -c",
+    "build:dev": "rollup -c --environment BUILD:development",
     "build:watch": "rollup -c -w --environment BUILD:development",
     "prettier:format": "prettier --write 'src/**/*.{ts,tsx,*.ts,*tsx}'",
     "prettier:check": "prettier --check --debug-check 'src/**/*.{ts,tsx,*.ts,*tsx}'",
@@ -54,6 +55,7 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "rollup": "^2.77.0",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-ts": "^3.0.2",
     "semantic-release": "^19.0.3",
     "ttypescript": "^1.5.13",