@lomray/react-mobx-manager 1.0.0-beta.1 → 1.0.0-beta.4

package/README.md

@@ -1,5 +1,14 @@
 # Mobx stores manager for React
 
+
+[![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)
+[![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)
+[![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)
+
 ## Usage
 
 1. Install package:

package/lib/context.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import React from 'react';
+import { FC, ReactElement } from "react";
+import Manager from "./manager";
+interface IStoreManagerProvider {
+    storeManager: Manager;
+    shouldInit?: boolean;
+    fallback?: ReactElement;
+    children?: React.ReactNode;
+}
+/**
+ * Mobx store manager context
+ */
+declare const StoreManagerContext: React.Context<Manager>;
+/**
+ * Mobx store manager provider
+ * @constructor
+ */
+declare const StoreManagerProvider: FC<IStoreManagerProvider>;
+declare const useStoreManagerContext: () => Manager;
+export { StoreManagerProvider, StoreManagerContext, useStoreManagerContext };

package/lib/context.js

@@ -0,0 +1,38 @@
+'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;

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./types-f2f6b0e4";
+export * from "./context";
+export { default as Manager } from "./manager";
+export { default as onChangeListener } from "./on-change-listener";
+export { default as wakeup } from "./wakeup";
+export { default as withStores } from "./with-stores";
+export { default as MobxLocalStorage } from "./storages/local-storage";

package/lib/index.js

@@ -0,0 +1,21 @@
+'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;

package/lib/manager.d.ts

@@ -0,0 +1,137 @@
+import { IConstructableStore, IManagerParams, IStorage, IStore, TStoreDefinition, IManagerOptions, TStores, TInitStore } from "./types-f2f6b0e4";
+/**
+ * Mobx stores manager
+ */
+declare class Manager {
+    /**
+     * Manger instance
+     */
+    protected static instance: Manager;
+    /**
+     * Created stores
+     */
+    private readonly stores;
+    /**
+     * Save persisted stores identities
+     * @private
+     */
+    protected static readonly persistedStores: Set<string>;
+    /**
+     * Initial stores state (local storage, custom etc.)
+     * @private
+     */
+    protected readonly initState: Record<string, any>;
+    /**
+     * Storage for persisted stores
+     * @private
+     */
+    readonly storage: IStorage | undefined;
+    /**
+     * Restored persist storage data
+     * @protected
+     */
+    protected persistData: Record<string, any>;
+    /**
+     * Additional store's constructor params
+     * @private
+     */
+    protected readonly storesParams: IManagerParams['storesParams'];
+    /**
+     * Manager options
+     * @private
+     */
+    readonly options: IManagerOptions;
+    /**
+     * @constructor
+     */
+    /**
+     * @constructor
+     */
+    constructor({ initState, storesParams, storage, options }?: IManagerParams);
+    /**
+     * Init store manager
+     */
+    /**
+     * Init store 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;
+    /**
+     * Get store identity
+     * @protected
+     */
+    /**
+     * Get store identity
+     * @protected
+     */
+    protected static getStoreKey<T>(store: IConstructableStore<T> | TInitStore, id?: string): string;
+    /**
+     * Get exist store
+     */
+    /**
+     * Get exist store
+     */
+    getStore<T>(store: IConstructableStore<T>, id?: string): T | undefined;
+    /**
+     * Create new store instance
+     * @protected
+     */
+    /**
+     * Create new store instance
+     * @protected
+     */
+    protected createStore<T>(store: IConstructableStore<T>, id?: string): T;
+    /**
+     * Create stores for component
+     */
+    /**
+     * Create stores for component
+     */
+    createStores(map: [string, TStoreDefinition][]): TStores;
+    /**
+     * Mount stores to component
+     */
+    /**
+     * Mount stores to component
+     */
+    mountStores(stores: TStores): () => void;
+    /**
+     * Get store's state
+     */
+    /**
+     * Get store's state
+     */
+    toJSON(): Record<string, any>;
+    /**
+     * Get persisted store's data
+     */
+    /**
+     * Get persisted store's data
+     */
+    toPersistedJSON(): Record<string, any>;
+    /**
+     * Get observable store props (fields)
+     * @private
+     */
+    /**
+     * Get observable store props (fields)
+     * @private
+     */
+    static getObservableProps(store: IStore): Record<string, any>;
+    /**
+     * Persist store
+     */
+    /**
+     * Persist store
+     */
+    static persistStore<TSt>(store: IConstructableStore<TSt>, id: string): IConstructableStore<TSt>;
+}
+export { Manager as default };

package/lib/manager.js

@@ -0,0 +1,228 @@
+'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;

package/lib/on-change-listener.d.ts

@@ -0,0 +1,6 @@
+import { IStorePersisted } from "./types-f2f6b0e4";
+/**
+ * Listen persist store changes
+ */
+declare const onChangeListener: IStorePersisted['addOnChangeListener'];
+export { onChangeListener as default };

package/lib/on-change-listener.js

@@ -0,0 +1,25 @@
+'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;

package/lib/storages/local-storage.d.ts

@@ -0,0 +1,26 @@
+import { IStorage } from "../types-f2f6b0e4";
+declare class LocalStorage implements IStorage {
+    globalKey: string;
+    /**
+     * @inheritDoc
+     */
+    /**
+     * @inheritDoc
+     */
+    get(): Record<string, any> | Promise<Record<string, any> | undefined>;
+    /**
+     * @inheritDoc
+     */
+    /**
+     * @inheritDoc
+     */
+    flush(): void | Promise<any>;
+    /**
+     * @inheritDoc
+     */
+    /**
+     * @inheritDoc
+     */
+    set(value: Record<string, any> | undefined): void;
+}
+export { LocalStorage as default };

package/lib/storages/local-storage.js

@@ -0,0 +1,30 @@
+'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;

package/lib/types-f2f6b0e4.d.ts

@@ -0,0 +1,58 @@
+import Manager from "./manager";
+interface IConstructorParams {
+    storeManager: Manager;
+}
+interface IStoreLifecycle {
+    onDestroy?: () => void;
+    onMount?: () => void | (() => void);
+}
+interface IStore extends IStoreLifecycle {
+    id?: string;
+    isSingleton?: boolean;
+    init?: () => void;
+    toJSON?: () => Record<string, any>;
+}
+interface IStorePersisted extends IStore {
+    addOnChangeListener?: (store: IStorePersisted, manager: Manager) => (() => void) | undefined;
+    wakeup?: TWakeup;
+}
+type TInitStore<TSto extends IStore | IStorePersisted = IStore> = TSto & (IStorePersisted | IStore);
+type IConstructableStore<TSto extends IStore = IStore> = (new (props: IConstructorParams) => TInitStore<TSto>) & Partial<IStorePersisted>;
+type TStoreDefinition<TSto extends IStore | IStorePersisted = any> = IConstructableStore<TSto> | {
+    store: IConstructableStore<TSto>;
+    id: string;
+};
+type TMapStores = Record<string, TStoreDefinition>;
+interface IManagerParams {
+    storesParams?: Omit<IConstructorParams, 'storeManager'>;
+    storage?: IStorage;
+    options?: IManagerOptions;
+    initState?: Record<string, any>;
+}
+type TWakeup = (store: IStore, state: {
+    initState?: Record<string, any>;
+    persistedState?: Record<string, any>;
+}) => void;
+interface IStorage {
+    get: () => Record<string, any> | undefined | Promise<Record<string, any> | undefined>;
+    set: (value: Record<string, any> | undefined) => Record<string, any> | undefined | Promise<any> | void;
+    flush: () => void | Promise<any>;
+}
+interface IManagerOptions {
+    shouldDisablePersist?: boolean;
+    shouldRemoveInitState?: boolean;
+}
+type TStores = {
+    [storeKey: string]: IStore | IStorePersisted;
+};
+/**
+ * Convert class type to class constructor
+ */
+type ClassReturnType<T> = T extends new (...args: any) => infer R ? R : never;
+/**
+ * Stores map to type
+ */
+type StoresType<TSt> = {
+    [keys in keyof TSt]: ClassReturnType<TSt[keys]>;
+};
+export { IConstructorParams, IStoreLifecycle, IStore, IStorePersisted, TInitStore, IConstructableStore, TStoreDefinition, TMapStores, IManagerParams, TWakeup, IStorage, IManagerOptions, TStores, ClassReturnType, StoresType };

package/lib/wakeup.d.ts

@@ -0,0 +1,6 @@
+import { IStorePersisted } from "./types-f2f6b0e4";
+/**
+ * Restore store state from initial state
+ */
+declare const wakeup: IStorePersisted['wakeup'];
+export { wakeup as default };

package/lib/wakeup.js

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

package/lib/with-stores.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TMapStores } from "./types-f2f6b0e4";
+/**
+ * Make component observable and pass stores as props
+ */
+declare const withStores: <T extends Record<string, any>, TS extends TMapStores>(Component: FC<T>, stores: TS) => FC<Omit<T, keyof TS>>;
+export { withStores as default };

package/lib/with-stores.js

@@ -0,0 +1,35 @@
+'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 = ({ ...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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lomray/react-mobx-manager",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.4",
   "description": "This package provides Mobx stores manager for react.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,6 +31,8 @@
   "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}'",
     "lint:check": "eslint --ext '.ts,.tsx' 'src/**/*.{ts,tsx,*.ts,*tsx}'",