@lomray/react-mobx-manager 2.0.0-beta.2 → 2.0.0-beta.20

package/README.md

@@ -5,10 +5,12 @@
 <h1 align='center'>Mobx stores manager for React</h1>
 
 - One way to escape state tree 🌲🌳🌴.
+- Ready to use with Suspense.
+- Support SSR.
+- Support render to stream.
 - Manage your Mobx stores like a boss - debug like a hacker.
 - Simple idea - simple implementation.
 - Small package size.
-- Support render to stream.
 - Support code splitting out of the box.
 - Access stores from other stores.
 - Can be a replacement for react context.
@@ -37,9 +39,10 @@
   - [Manager](#manager)
   - [withStores](#withstores)
   - [StoreManagerProvider](#storemanagerprovider)
-  - [useStoreManagerContext](#usestoremanagercontext)
-  - [useStoreManagerParentContext](#usestoremanagerparentcontext)
+  - [useStoreManagerContext](#usestoremanager)
+  - [useStoreManagerParentContext](#usestoremanagerparent)
   - [Store](#store)
+- [Example](#demo)
 - [React Native Debug Plugin](#react-native-debug-plugin)
 - [Bugs and feature requests](#bugs-and-feature-requests)
 - [License](#license)
@@ -49,26 +52,68 @@
 The React-mobx-manager package is distributed using [npm](https://www.npmjs.com/), the node package manager.
 
 ```
-npm i --save @lomray/react-mobx-manager
+npm i --save @lomray/react-mobx-manager @lomray/consistent-suspense
 ```
 
-**Optional:** Configure your bundler to keep classnames and function names in production OR use `id` for each store:
+__NOTE:__ this package use [@lomray/consistent-suspense](https://github.com/Lomray-Software/consistent-suspense) for generate stable id's inside Suspense.
+
+__Choose one of store id generating strategy__:
 
+1. Configure your bundler to keep classnames and function names. Store id will be generated from class names (chose unique class names).
 - **React:** (craco or webpack config, terser options)
 ```bash
 terserOptions.keep_classnames = true;
 terserOptions.keep_fnames = true;
 ```
 
-- **React Native:** (metro bundler config)
+- **React Native:** (metro bundler config: metro.config.js)
+```js
+module.exports = {
+  transformer: {
+    minifierConfig: {
+      keep_classnames: true,
+      keep_fnames: true,
+    },
+  }
+}
 ```
-transformer: {
-  minifierConfig: {
-    keep_classnames: true,
-    keep_fnames: true,
-  },
+2. Define `id` for each store.
+
+```typescript
+import { makeObservable } from "mobx";
+
+class MyStore {
+  /**
+   * Define unique store id
+   */
+  static id = 'Unique-store-id';
+
+  constructor() {
+    makeObservable(this, {})
+  }
 }
 ```
+3. Use `Vite plugins`.
+
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import MobxManager from '@lomray/react-mobx-manager/plugins/vite/index';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  /**
+   * Store id's will be generated automatically, just chill
+   */
+  plugins: [react(), MobxManager()]
+});
+
+/**
+ * Detect mobx store:
+ - by makeObservable or makeAutoObservable
+ - by @mobx-store jsdoc before class
+ */
+```
 
 ## Usage
 
@@ -77,24 +122,27 @@ Import `Manager, StoreManagerProvider` from `@lomray/react-mobx-manager` into yo
 ```typescript jsx
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import { ConsistentSuspenseProvider } from '@lomray/consistent-suspense';
 import { Manager, StoreManagerProvider, MobxLocalStorage } from '@lomray/react-mobx-manager';
 import App from './app';
 import MyApiClient from './services/my-api-client';
+import './index.css';
 
 const apiClient = new MyApiClient();
 const storeManager = new Manager({
   storage: new MobxLocalStorage(), // optional: needs for persisting stores
-  storesParams: { apiClient }, // optional: we can provide our api client for access from the store
+  storesParams: { apiClient }, // optional: we can provide our api client for access from the each store
 });
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
   <React.StrictMode>
-    <StoreManagerProvider storeManager={storeManager} shouldInit>
-      <App />
-    </StoreManagerProvider>
+    <ConsistentSuspenseProvider> {/** required **/}
+      <StoreManagerProvider storeManager={storeManager} shouldInit>
+        <App />
+      </StoreManagerProvider>
+    </ConsistentSuspenseProvider>
   </React.StrictMode>,
 );
 ```
@@ -198,15 +246,16 @@ const User: FC<TProps> = ({ userStore: { name } }) => {
 export default withStores(User, stores);
 ```
 
-[See app example](example) for a better understanding.
+[See app example](https://github.com/Lomray-Software/vite-template) for a better understanding.
 
 ## Support SSR
 Does this library support SSR? Short answer - yes, but we need some steps to prepare our framework.
+- Look at [Vite demo app](https://github.com/Lomray-Software/vite-template) for a better understanding.
 - Look at [After.js (razzle) based project](https://github.com/Lomray-Software/microservices-dashboard/blob/staging/src/pages/user/index.tsx#L82) for a better understanding.
 - Look at [NextJS example](https://github.com/Lomray-Software/nextjs-mobx-store-manager-example) for a better understanding (needs writing a wrapper).
 
 ## Important Tips
-- Create **singleton** store only for global stores e.g, for application settings, logged user, etc.
+- Create **singleton** store only for global stores e.g, for application settings, logged user, theme, etc.
 - To get started, stick to the concept: Store for Component. Don't connect (through withStores) not singleton store to several components.
 
 ## Documentation
@@ -253,10 +302,13 @@ const storeManager = new Manager({
      */
     shouldRemoveInitState: true,
     /**
-     * Enable this option if your application support server-side rendering (on both side, client and server)
-     * Default: false
+     * Configure store destroy timers
      */
-    isSSR: false,
+    destroyTimers: {
+      init: 500,
+      touched: 10000, // NOTE: set to max request timeout
+      unused: 1000,
+    },
   }
 });
 
@@ -285,16 +337,11 @@ const store2 = storeManager.getStore(SomeStore, { contextId: 'necessary-context-
  */
 const relations = storeManager.getStoresRelations();
 
-/**
- * Generate unique context id
- */
-const contextId = storeManager.createContextId();
-
 /**
  * Manually create stores for component
  * NOTE: 'withStores' wrapper use this method, probably you won't need it
  */
-const stores = storeManager.createStores(['someStore', MyStore], 'parent-id', 'context-id', 'HomePage');
+const stores = storeManager.createStores(['someStore', MyStore], 'parent-id', 'context-id', 'suspense-id', 'HomePage', { componentProp: 'test' });
 
 /**
  * Mount/Unmount simple stores to component
@@ -338,10 +385,10 @@ const storeClass = Manager.persistStore(class MyStore {}, 'my-store');
 import { withStores } from '@lomray/react-mobx-manager';
 
 /**
- * Create and connect 'stores' to component
+ * Create and connect 'stores' to component with custom context id
  * NOTE: In most cases, you don't need to pass a third argument (contextId). 
  */
-withStores(Component, stores, 'optional-context-id');
+withStores(Component, stores, { customContextId: 'optional-context-id' });
 
 const stores = { myStore: MyStore, anotherStore: AnotherStore };
 ```
@@ -361,27 +408,27 @@ import { StoreManagerProvider } from '@lomray/react-mobx-manager';
 </StoreManagerProvider>
 ```
 
-### useStoreManagerContext
+### useStoreManager
 ```typescript jsx
-import { useStoreManagerContext } from '@lomray/react-mobx-manager';
+import { useStoreManager } from '@lomray/react-mobx-manager';
 
 const MyComponent: FC = () => {
   /**
    * Get store manager inside your function component
    */
-  const storeManager = useStoreManagerContext();
+  const storeManager = useStoreManager();
 }
 ```
 
-### useStoreManagerParentContext
+### useStoreManagerParent
 ```typescript jsx
-import { useStoreManagerParentContext } from '@lomray/react-mobx-manager';
+import { useStoreManagerParent } from '@lomray/react-mobx-manager';
 
 const MyComponent: FC = () => {
   /**
    * Get parent context id
    */
-  const { parentId } = useStoreManagerParentContext();
+  const { parentId } = useStoreManagerParent();
 }
 ```
 
@@ -414,7 +461,7 @@ class MyStore {
   /**
    * @private
    */
-  private someParentStore: ClassReturnType<typeof SomeParentStore>;
+  private readonly someParentStore: ClassReturnType<typeof SomeParentStore>;
 
   /**
    * @constructor
@@ -445,14 +492,6 @@ class MyStore {
     // do something
   }
 
-  /**
-   * Define this method if you want to do something when a component with this store is mount
-   * @private
-   */
-  private onMount(): void {
-    // do something
-  }
-
   /**
    * Define this method if you want to do something when a component with this store is unmount
    * @private
@@ -476,9 +515,11 @@ Lifecycles:
  - constructor
  - wakeup (restore state from persisted store)
  - init
- - onMount
  - onDestroy
 
+## Demo
+Explore [demo app](https://github.com/Lomray-Software/vite-template) to more understand.
+
 ## React Native debug plugin
 For debug state, you can use [Reactotron debug plugin](https://github.com/Lomray-Software/reactotron-mobx-store-manager)
 

package/lib/context.d.ts

@@ -2,6 +2,7 @@
 import React from 'react';
 import { FC, ReactElement } from "react";
 import Manager from "./manager.js";
+import { TStores } from "./types-8fe84e04.js";
 interface IStoreManagerProvider {
     storeManager: Manager;
     shouldInit?: boolean;
@@ -9,12 +10,9 @@ interface IStoreManagerProvider {
     children?: React.ReactNode;
 }
 interface IStoreManagerParentProvider {
-    children?: React.ReactNode;
     parentId: string;
-}
-interface IStoreManagerSuspenseProvider {
     children?: React.ReactNode;
-    id: string | null;
+    initStores?: TStores;
 }
 /**
  * Mobx store manager context
@@ -24,15 +22,6 @@ declare const StoreManagerContext: React.Context<Manager>;
  * To spread relationships
  */
 declare const StoreManagerParentContext: React.Context<string>;
-/**
- * Generate id for suspended component stores
- */
-declare const StoreManagerSuspenseContext: React.Context<string | null>;
-/**
- * Mobx store manager parent provider
- * @constructor
- */
-declare const StoreManagerSuspenseProvider: FC<IStoreManagerSuspenseProvider>;
 /**
  * Mobx store manager parent provider
  * @constructor
@@ -43,7 +32,6 @@ declare const StoreManagerParentProvider: FC<Omit<IStoreManagerParentProvider, '
  * @constructor
  */
 declare const StoreManagerProvider: FC<IStoreManagerProvider>;
-declare const useStoreManagerContext: () => Manager;
-declare const useStoreManagerParentContext: () => IStoreManagerParentProvider['parentId'];
-declare const useStoreManagerSuspenseContext: () => IStoreManagerSuspenseProvider['id'];
-export { StoreManagerContext, StoreManagerParentContext, StoreManagerSuspenseContext, StoreManagerProvider, StoreManagerParentProvider, StoreManagerSuspenseProvider, useStoreManagerContext, useStoreManagerParentContext, useStoreManagerSuspenseContext };
+declare const useStoreManager: () => Manager;
+declare const useStoreManagerParent: () => IStoreManagerParentProvider['parentId'];
+export { StoreManagerContext, StoreManagerParentContext, StoreManagerProvider, StoreManagerParentProvider, useStoreManager, useStoreManagerParent };

package/lib/context.js

@@ -1 +1 @@
-"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({}),n=r.default.createContext("root"),o=r.default.createContext(null),s=({children:e,parentId:t})=>r.default.createElement(n.Provider,{value:t,children:e});exports.StoreManagerContext=a,exports.StoreManagerParentContext=n,exports.StoreManagerParentProvider=s,exports.StoreManagerProvider=({children:t,storeManager:n,fallback:o,shouldInit:u=!1})=>{const[l,d]=e.useState(!u);return e.useEffect((()=>{u&&n.init().then((()=>d(!0))).catch((e=>{console.error("Failed initialized store manager: ",e)}))}),[u,n]),r.default.createElement(a.Provider,{value:n},r.default.createElement(s,{parentId:"root"},l?t:o||t))},exports.StoreManagerSuspenseContext=o,exports.StoreManagerSuspenseProvider=({children:e,id:t})=>r.default.createElement(o.Provider,{value:t,children:e}),exports.useStoreManagerContext=()=>e.useContext(a),exports.useStoreManagerParentContext=()=>e.useContext(n),exports.useStoreManagerSuspenseContext=()=>e.useContext(o);
+"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({}),o=r.default.createContext("root"),n=({parentId:e,children:t,initStores:a})=>{const n=s();return a&&n.touchedStores(a),r.default.createElement(o.Provider,{value:e,children:t})},s=()=>e.useContext(a);exports.StoreManagerContext=a,exports.StoreManagerParentContext=o,exports.StoreManagerParentProvider=n,exports.StoreManagerProvider=({children:t,storeManager:o,fallback:s,shouldInit:u=!1})=>{const[l,c]=e.useState(!u);return e.useEffect((()=>{u&&o.init().then((()=>c(!0))).catch((e=>{console.error("Failed initialized store manager: ",e)}))}),[u,o]),r.default.createElement(a.Provider,{value:o},r.default.createElement(n,{parentId:"root"},l?t:s||t))},exports.useStoreManager=s,exports.useStoreManagerParent=()=>e.useContext(o);

package/lib/index.d.ts

@@ -1,8 +1,7 @@
-export * from "./types-abd34741.js";
+export * from "./types-8fe84e04.js";
 export * from "./context.js";
 export { default as Manager } from "./manager.js";
 export { default as onChangeListener } from "./on-change-listener.js";
 export { default as wakeup } from "./wakeup.js";
 export { default as withStores } from "./with-stores.js";
 export { default as Events } from "./events.js";
-export { default as MobxSuspense } from "./mobx-suspense.js";

package/lib/index.js

@@ -1 +1 @@
-"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"),n=require("./with-stores.js"),s=require("./events.js"),a=require("./mobx-suspense.js");exports.StoreManagerContext=e.StoreManagerContext,exports.StoreManagerParentContext=e.StoreManagerParentContext,exports.StoreManagerParentProvider=e.StoreManagerParentProvider,exports.StoreManagerProvider=e.StoreManagerProvider,exports.StoreManagerSuspenseContext=e.StoreManagerSuspenseContext,exports.StoreManagerSuspenseProvider=e.StoreManagerSuspenseProvider,exports.useStoreManagerContext=e.useStoreManagerContext,exports.useStoreManagerParentContext=e.useStoreManagerParentContext,exports.useStoreManagerSuspenseContext=e.useStoreManagerSuspenseContext,exports.Manager=r,exports.onChangeListener=t,exports.wakeup=o,exports.withStores=n,exports.Events=s,exports.MobxSuspense=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./context.js"),r=require("./manager.js"),t=require("./on-change-listener.js"),a=require("./wakeup.js"),o=require("./with-stores.js"),n=require("./events.js");exports.StoreManagerContext=e.StoreManagerContext,exports.StoreManagerParentContext=e.StoreManagerParentContext,exports.StoreManagerParentProvider=e.StoreManagerParentProvider,exports.StoreManagerProvider=e.StoreManagerProvider,exports.useStoreManager=e.useStoreManager,exports.useStoreManagerParent=e.useStoreManagerParent,exports.Manager=r,exports.onChangeListener=t,exports.wakeup=a,exports.withStores=o,exports.Events=n;

package/lib/manager-stream.d.ts

@@ -0,0 +1,29 @@
+import Manager from "./manager.js";
+/**
+ * Stream mobx manager stores
+ */
+declare class ManagerStream {
+    /**
+     * Already pushed preamble
+     */
+    protected isPreamblePushed: boolean;
+    /**
+     * Mobx store manager
+     */
+    protected manager: Manager;
+    /**
+     * @constructor
+     */
+    /**
+     * @constructor
+     */
+    constructor(manager: Manager);
+    /**
+     * Return script with suspense stores to push on stream
+     */
+    /**
+     * Return script with suspense stores to push on stream
+     */
+    take(suspenseId: string): string | void;
+}
+export { ManagerStream as default };

package/lib/manager-stream.js

@@ -0,0 +1 @@
+"use strict";module.exports=class{constructor(e){Object.defineProperty(this,"isPreamblePushed",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"manager",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.manager=e}take(e){const s=this.manager.getSuspenseRelations().get(e);if(!(null==s?void 0:s.size))return;const i=JSON.stringify(this.manager.toJSON([...s])),t=this.isPreamblePushed?"":"<script>!window.mbxM && (window.mbxM = []);<\/script>";return this.isPreamblePushed||(this.isPreamblePushed=!0),`${t}<script>window.mbxM.push(${i});<\/script>`}};

package/lib/manager.d.ts

@@ -1,4 +1,5 @@
-import { IConstructableStore, IManagerParams, IStorage, IStore, TStoreDefinition, IManagerOptions, TStores, IStoreLifecycle, TInitStore, IStoreParams } from "./types-abd34741.js";
+import StoreStatus from "./store-status.js";
+import { IConstructableStore, IManagerOptions, IManagerParams, IStorage, IStore, IStoreParams, TInitStore, TStoreDefinition, TStores } from "./types-8fe84e04.js";
 /**
  * Mobx stores manager
  */
@@ -48,6 +49,11 @@ declare class Manager {
      * Manager options
      */
     readonly options: IManagerOptions;
+    /**
+     * Suspense stores relations
+     * @see withStores
+     */
+    protected suspenseRelations: Map<string, Set<string>>;
     /**
      * @constructor
      */
@@ -83,6 +89,13 @@ declare class Manager {
      * Get stores relations
      */
     getStoresRelations(): Manager['storesRelations'];
+    /**
+     * Get suspense relations with stores
+     */
+    /**
+     * Get suspense relations with stores
+     */
+    getSuspenseRelations(): Manager['suspenseRelations'];
     /**
      * Get persisted stores ids
      */
@@ -104,13 +117,6 @@ declare class Manager {
      * @protected
      */
     protected getStoreId<T>(store: IConstructableStore<T> | TInitStore, params?: IStoreParams): string;
-    /**
-     * Generate new context id
-     */
-    /**
-     * Generate new context id
-     */
-    createContextId(id?: string): string;
     /**
      * Get exist store
      */
@@ -142,25 +148,21 @@ declare class Manager {
     /**
      * Create stores for component
      */
-    createStores(map: [string, TStoreDefinition][], parentId: string, contextId: string, componentName: string, componentProps?: Record<string, any>): TStores;
+    createStores(map: [string, TStoreDefinition][], parentId: string, contextId: string, suspenseId: string, componentName: string, componentProps?: Record<string, any>): TStores;
     /**
      * Prepare store before usage
-     * @protected
      */
     /**
      * Prepare store before usage
-     * @protected
      */
     protected prepareStore(store: TStores[string]): void;
     /**
-     * Prepare store before mount to component
-     * @protected
+     * Remove store
      */
     /**
-     * Prepare store before mount to component
-     * @protected
+     * Remove store
      */
-    protected prepareMount(store: TStores[string]): Required<IStoreLifecycle>['onDestroy'][];
+    protected removeStore(store: TStores[string]): void;
     /**
      * Mount stores to component
      */
@@ -168,6 +170,20 @@ declare class Manager {
      * Mount stores to component
      */
     mountStores(stores: TStores): () => void;
+    /**
+     * Change the stores status to touched
+     */
+    /**
+     * Change the stores status to touched
+     */
+    touchedStores(stores: TStores): void;
+    /**
+     * Change store status
+     */
+    /**
+     * Change store status
+     */
+    protected setStoreStatus(store: TStores[string], status: StoreStatus): void;
     /**
      * Get store's state
      */

package/lib/manager.js

@@ -1 +1 @@
-"use strict";var e=require("@lomray/event-manager"),t=require("mobx"),s=require("./events.js"),r=require("./on-change-listener.js"),o=require("./wakeup.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);class a{constructor({initState:e,storesParams:t,storage:s,options:r}={}){Object.defineProperty(this,"stores",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"storesRelations",{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,isSSR:!1}}),Object.defineProperty(this,"pushInitState",{enumerable:!0,configurable:!0,writable:!0,value:(e={})=>{for(const[t,s]of Object.entries(e))this.initState[t]=s}}),this.initState=e||{},this.storesParams=t||{},this.storage=s,Object.assign(this.options,r||{}),a.instance=this,"undefined"==typeof window||window.mobxManager||(window.mobxManager={pushInit:this.pushInitState})}async init(){return this.storage&&(this.persistData=await this.storage.get()||{}),this}static get(){if(!a.instance)throw new Error("Store manager is not initialized.");return a.instance}getStores(){return this.stores}getStoresRelations(){return this.storesRelations}static getPersistedStoresIds(){return a.persistedStores}getStoreId(e,t={}){const{id:s,contextId:r,key:o}=t;if(s)return s;if(e.libStoreId)return e.libStoreId;let i=e.name||e.constructor.name;return e.isSingleton?i:(i=`${i}--${r}`,o?`${i}--${o}`:i)}createContextId(e){return`ctx${e||this.storesRelations.size+1}`}getStore(e,t={}){const s=this.getStoreId(e,t);return this.stores.has(s)?this.stores.get(s):e.isSingleton?this.createStore(e,{id:s,contextId:"singleton",parentId:"root",componentName:"root-app",componentProps:{}}):this.lookupStore(s,t)}lookupStore(e,t){var s,r;const{contextId:o,parentId:i}=t,n=null===(s=e.split("--"))||void 0===s?void 0:s[0],{ids:a,parentId:l}=null!==(r=this.storesRelations.get(o))&&void 0!==r?r:{ids:new Set,parentId:i},d=[...a].filter((e=>e.startsWith(`${n}--`)));if(1===d.length)return this.stores.get(d[0]);if(d.length>1)console.error("Parent context has multiple stores with the same id, please pass key to getStore function.");else if(l&&"root"!==l)return this.lookupStore(e,{contextId:l})}createStore(e,t){var r,o;const{isSSR:i}=this.options,{id:l,contextId:d,parentId:u,componentName:p,componentProps:c}=t;if((e.isSingleton||i)&&this.stores.has(l))return this.stores.get(l);const h=new e({...this.storesParams,storeManager:this,getStore:(e,t={contextId:d,parentId:u})=>this.getStore(e,t),componentProps:c});h.libStoreId=l,h.isSingleton=e.isSingleton,h.libStoreContextId=e.isSingleton?"singleton":d,h.libStoreParentId=e.isSingleton||!u||u===d?"root":u,h.libStoreComponentName=p;const S=this.initState[l],b=this.persistData[l];return S&&Object.assign(h,S),n.default.publish(s.CREATE_STORE,{store:e}),"wakeup"in h&&a.persistedStores.has(l)&&(null===(r=h.wakeup)||void 0===r||r.call(h,h,{initState:S,persistedState:b})),null===(o=h.init)||void 0===o||o.call(h),this.prepareStore(h),(h.isSingleton||i)&&this.prepareMount(h),h}createStores(e,t,s,r,o={}){return e.reduce(((e,[i,n])=>{const[a,l]="store"in n?[n.store,n.id]:[n,this.getStoreId(n,{key:i,contextId:s})];return{...e,[i]:this.createStore(a,{id:l,contextId:s,parentId:t,componentName:r,componentProps:o})}}),{})}prepareStore(e){const t=e.libStoreId,r=e.libStoreContextId;this.storesRelations.has(r)||this.storesRelations.set(r,{ids:new Set,parentId:e.libStoreParentId&&e.libStoreParentId!==r?e.libStoreParentId:"root",componentName:e.libStoreComponentName});const{ids:o}=this.storesRelations.get(r);this.stores.has(t)||(this.stores.set(t,e),o.add(t),n.default.publish(s.ADD_STORE,{store:e}))}prepareMount(e){const{shouldRemoveInitState:t}=this.options,s=e.libStoreId,r=[];return a.persistedStores.has(s)&&"addOnChangeListener"in e&&r.push(e.addOnChangeListener(e,this)),t&&this.initState[s]&&delete this.initState[s],r}mountStores(e){const t=[];return Object.values(e).forEach((e=>{var r;if(this.prepareStore(e),t.push(...this.prepareMount(e)),n.default.publish(s.MOUNT_STORE,{store:e}),"onMount"in e){const s=null===(r=e.onMount)||void 0===r?void 0:r.call(e);"function"==typeof s&&t.push(s)}"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=>{var t;const r=e.libStoreId;if(n.default.publish(s.UNMOUNT_STORE,{store:e}),!e.isSingleton){const{ids:o}=null!==(t=this.storesRelations.get(e.libStoreContextId))&&void 0!==t?t:{ids:new Set};this.stores.delete(r),o.delete(r),n.default.publish(s.DELETE_STORE,{store:e}),o.size||this.storesRelations.delete(e.libStoreContextId)}}))}}toJSON(e){var t,s,r;const o={},i=null!==(t=null==e?void 0:e.reduce(((e,t)=>(this.stores.has(t)&&e.set(t,this.stores.get(t)),e)),new Map))&&void 0!==t?t:this.stores;for(const[e,t]of i.entries())o[e]=null!==(r=null===(s=t.toJSON)||void 0===s?void 0:s.call(t))&&void 0!==r?r:a.getObservableProps(t);return o}toPersistedJSON(){var e,t;const s={};for(const r of a.persistedStores){const o=this.stores.get(r);o&&(s[r]=null!==(t=null===(e=o.toJSON)||void 0===e?void 0:e.call(o))&&void 0!==t?t:a.getObservableProps(o))}return s}static getObservableProps(e){const s=t.toJS(e);return Object.entries(s).reduce(((s,[r,o])=>({...s,...t.isObservableProp(e,r)?{[r]:o}:{}})),{})}static persistStore(e,t){return a.persistedStores.has(t)?(console.warn(`Duplicate serializable store key: ${t}`),e):(a.persistedStores.add(t),e.libStoreId=t,"wakeup"in e.prototype||(e.prototype.wakeup=o),"addOnChangeListener"in e.prototype||(e.prototype.addOnChangeListener=r),e)}}Object.defineProperty(a,"persistedStores",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),module.exports=a;
+"use strict";var e=require("@lomray/event-manager"),t=require("mobx"),s=require("./events.js"),r=require("./on-change-listener.js"),o=require("./store-status.js"),i=require("./wakeup.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e);class l{constructor({initState:e,storesParams:t,storage:s,options:r}={}){if(Object.defineProperty(this,"stores",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"storesRelations",{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}}),Object.defineProperty(this,"suspenseRelations",{enumerable:!0,configurable:!0,writable:!0,value:new Map}),Object.defineProperty(this,"pushInitState",{enumerable:!0,configurable:!0,writable:!0,value:(e={})=>{for(const[t,s]of Object.entries(e))this.initState[t]=s}}),this.initState=e||{},this.storesParams=t||{},this.storage=s,Object.assign(this.options,r||{}),l.instance=this,"undefined"!=typeof window){const e=window.mbxM;window.mbxM={push:this.pushInitState},(Array.isArray(e)?e:[]).forEach(this.pushInitState)}}async init(){return this.storage&&(this.persistData=await this.storage.get()||{}),this}static get(){if(!l.instance)throw new Error("Store manager is not initialized.");return l.instance}getStores(){return this.stores}getStoresRelations(){return this.storesRelations}getSuspenseRelations(){return this.suspenseRelations}static getPersistedStoresIds(){return l.persistedStores}getStoreId(e,t={}){const{id:s,contextId:r,key:o}=t;if(s)return s;if(e.libStoreId)return e.libStoreId;let i=e.id||e.name||e.constructor.name;return e.isSingleton?i:(i=`${i}--${r}`,o?`${i}--${o}`:i)}getStore(e,t={}){const s=this.getStoreId(e,t);return this.stores.has(s)?this.stores.get(s):e.isSingleton?this.createStore(e,{id:s,contextId:"singleton",parentId:"root",suspenseId:"",componentName:"root-app",componentProps:{}}):this.lookupStore(s,t)}lookupStore(e,t){var s,r;const{contextId:o,parentId:i}=t,n=null===(s=e.split("--"))||void 0===s?void 0:s[0],{ids:a,parentId:l}=null!==(r=this.storesRelations.get(o))&&void 0!==r?r:{ids:new Set,parentId:i},u=[...a].filter((e=>e.startsWith(`${n}--`)));if(1===u.length)return this.stores.get(u[0]);if(u.length>1)console.error("Parent context has multiple stores with the same id, please pass key to getStore function.");else if(l&&"root"!==l)return this.lookupStore(e,{contextId:l})}createStore(e,t){const{id:r,contextId:i,parentId:n,suspenseId:l,componentName:u,componentProps:d}=t;if(this.stores.has(r))return this.stores.get(r);const h=new e({...this.storesParams,storeManager:this,getStore:(e,t={contextId:i,parentId:n})=>this.getStore(e,t),componentProps:d});return h.libStoreId=r,h.isSingleton=e.isSingleton,h.libStoreContextId=e.isSingleton?"singleton":i,h.libStoreParentId=e.isSingleton||!n||n===i?"root":n,h.libStoreSuspenseId=l,h.libStoreComponentName=u,this.setStoreStatus(h,e.isSingleton?o.inUse:o.init),this.prepareStore(h),a.default.publish(s.CREATE_STORE,{store:e}),h}createStores(e,t,s,r,o,i={}){return e.reduce(((e,[n,a])=>{const[l,u]="store"in a?[a.store,a.id]:[a,this.getStoreId(a,{key:n,contextId:s})];return{...e,[n]:this.createStore(l,{id:u,contextId:s,parentId:t,suspenseId:r,componentName:o,componentProps:i})}}),{})}prepareStore(e){var t,r,o;const i=e.libStoreId,n=e.libStoreContextId,u=e.libStoreSuspenseId,d=this.initState[i],h=this.persistData[i];if(this.stores.has(i))return;if(d&&Object.assign(e,d),"wakeup"in e&&l.persistedStores.has(i)&&(null===(t=e.wakeup)||void 0===t||t.call(e,{initState:d,persistedState:h})),l.persistedStores.has(i)&&"addOnChangeListener"in e){const t=null===(r=e.onDestroy)||void 0===r?void 0:r.bind(e),s=e.addOnChangeListener(e,this);e.onDestroy=()=>{null==s||s(),null==t||t()}}null===(o=e.init)||void 0===o||o.call(e),this.storesRelations.has(n)||this.storesRelations.set(n,{ids:new Set,parentId:e.libStoreParentId&&e.libStoreParentId!==n?e.libStoreParentId:"root",componentName:e.libStoreComponentName}),this.suspenseRelations.has(u)||this.suspenseRelations.set(u,new Set);const{ids:c}=this.storesRelations.get(n);this.stores.set(i,e),c.add(i),this.suspenseRelations.get(u).add(i),a.default.publish(s.ADD_STORE,{store:e})}removeStore(e){var t,r,o;const i=e.libStoreId,n=e.libStoreSuspenseId,{ids:l}=null!==(t=this.storesRelations.get(e.libStoreContextId))&&void 0!==t?t:{ids:new Set};this.stores.has(i)&&(this.stores.delete(i),l.delete(i),n&&(null===(r=this.suspenseRelations.get(n))||void 0===r?void 0:r.has(i))&&this.suspenseRelations.get(n).delete(i),l.size||this.storesRelations.delete(e.libStoreContextId),"onDestroy"in e&&(null===(o=e.onDestroy)||void 0===o||o.call(e)),a.default.publish(s.DELETE_STORE,{store:e}))}mountStores(e){const{shouldRemoveInitState:t}=this.options;return Object.values(e).forEach((e=>{const r=e.libStoreId;t&&this.initState[r]&&delete this.initState[r],this.setStoreStatus(e,o.inUse),a.default.publish(s.MOUNT_STORE,{store:e})})),()=>{Object.values(e).forEach((e=>{e.isSingleton||(this.setStoreStatus(e,o.unused),a.default.publish(s.UNMOUNT_STORE,{store:e}))}))}}touchedStores(e){Object.values(e).forEach((e=>{e.libStoreStatus!==o.init||e.isSingleton||this.setStoreStatus(e,o.touched)}))}setStoreStatus(e,t){const{destroyTimers:{init:s=500,touched:r=1e4,unused:i=1e3}={}}=this.options;e.libStoreStatus=t,clearTimeout(e.libDestroyTimer);let n=0;switch(t){case o.init:n=s;break;case o.touched:n=r;break;case o.unused:n=i}n&&(e.libDestroyTimer=setTimeout((()=>this.removeStore(e)),n))}toJSON(e){var t,s,r;const o={},i=null!==(t=null==e?void 0:e.reduce(((e,t)=>(this.stores.has(t)&&e.set(t,this.stores.get(t)),e)),new Map))&&void 0!==t?t:this.stores;for(const[e,t]of i.entries())o[e]=null!==(r=null===(s=t.toJSON)||void 0===s?void 0:s.call(t))&&void 0!==r?r:l.getObservableProps(t);return o}toPersistedJSON(){var e,t;const s={};for(const r of l.persistedStores){const o=this.stores.get(r);o&&(s[r]=null!==(t=null===(e=o.toJSON)||void 0===e?void 0:e.call(o))&&void 0!==t?t:l.getObservableProps(o))}return s}static getObservableProps(e){const s=t.toJS(e);return Object.entries(s).reduce(((s,[r,o])=>({...s,...t.isObservableProp(e,r)?{[r]:o}:{}})),{})}static persistStore(e,t){return l.persistedStores.has(t)?(console.warn(`Duplicate serializable store key: ${t}`),e):(l.persistedStores.add(t),e.libStoreId=t,"wakeup"in e.prototype||(e.prototype.wakeup=i.bind(e)),"addOnChangeListener"in e.prototype||(e.prototype.addOnChangeListener=r),e)}}Object.defineProperty(l,"persistedStores",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),module.exports=l;

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

@@ -1,4 +1,4 @@
-import { IStorePersisted } from "./types-abd34741.js";
+import { IStorePersisted } from "./types-8fe84e04.js";
 /**
  * Listen persist store changes
  */

package/lib/plugins/helpers.d.ts

@@ -0,0 +1,43 @@
+type ICache = Map<string, {
+    storeId: string;
+    classname: string;
+}>;
+/**
+ * Load cached store id's by file name
+ */
+declare const loadCache: (isProd?: boolean) => ICache;
+/**
+ * Save store id's cache
+ */
+declare const saveCache: (cache: ICache) => void;
+/**
+ * Get next letter
+ */
+declare const getNextLetter: (str?: string) => string;
+/**
+ * Store is generator
+ */
+declare class Generator {
+    cache: ICache;
+    protected root: string;
+    protected lastId: string;
+    // keep last generated production store id (letter)
+    constructor(root: string, isProd?: boolean);
+    /**
+     * Inject store id
+     */
+    injectId: (code: string, fileId: string) => string;
+    /**
+     * Get development id
+     */
+    getDevId: (id: string, classname: string) => string;
+    /**
+     * Get production store id
+     */
+    getProdId: () => string;
+    /**
+     * Try to find mobx store
+     */
+    matchMobxStore: (code: string) => string | undefined;
+}
+export { saveCache, loadCache, getNextLetter, Generator };

package/lib/plugins/helpers.js

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("node:fs"));const r=`${__dirname.split("node_modules")[0]}node_modules/.cache/@lomray/react-mobx-manager`,s=`${r}/store-ids.json`,a=(e=!1)=>{if(e&&t.default.existsSync(s)){const e=JSON.parse(t.default.readFileSync(s,{encoding:"utf-8"}));return new Map(e)}return new Map},i=(e="")=>{var t;const r=e.split(""),s=null!==(t=r.pop())&&void 0!==t?t:"`";if("z"===s)return[...r,"A"].join("");if("Z"===s){const e=r.pop();return e?[i([...r,e].join("")),"a"].join(""):"aa"}return[...r,String.fromCharCode(s.charCodeAt(0)+1)].join("")};exports.Generator=class{constructor(e,t=!1){Object.defineProperty(this,"cache",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"root",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"lastId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"injectId",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const{classname:r,storeId:s}=this.cache.get(t),a=new RegExp(`(class\\s${r}\\s+?{)`);return e.replace(a,`$1static id = '${s}';`)}}),Object.defineProperty(this,"getDevId",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>`${e.replace(this.root,"").replace(/\/index.(js|ts|tsx)/,"").split("/").filter(Boolean).join("-")}-${t}`}),Object.defineProperty(this,"getProdId",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=i(this.lastId),t=`S${e}`;return this.lastId=e,t}}),Object.defineProperty(this,"matchMobxStore",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t,r,s,a;const{classname:i}=null!==(r=null===(t=e.match(/class\s(?<classname>\w+)\s+?{(?!.*static\sid\s*=.*).+(makeObservable|makeAutoObservable)(?!.*persistStore\(\1.*)/s))||void 0===t?void 0:t.groups)&&void 0!==r?r:{};if(i)return i;const{classname:o}=null!==(a=null===(s=e.match(/(@mobx-store).+class\s(?<classname>\w+)\s+?{(?!.*static\sid\s*=.*).+}(?!.*persistStore.*)/s))||void 0===s?void 0:s.groups)&&void 0!==a?a:{};return o}}),this.root=e,this.cache=a(t)}},exports.getNextLetter=i,exports.loadCache=a,exports.saveCache=e=>{t.default.existsSync(r)||t.default.mkdirSync(r,{recursive:!0}),t.default.writeFileSync(s,JSON.stringify([...e.entries()],null,2),{encoding:"utf-8"})};

package/lib/plugins/vite/hydration-update-fix.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+/**
+ * Fix mobx lite suspense hydration
+ * @constructor
+ */
+declare function HydrationUpdateFix(): Plugin;
+export { HydrationUpdateFix as default };

package/lib/plugins/vite/hydration-update-fix.js

@@ -0,0 +1 @@
+"use strict";var e=require("node:path");module.exports=function(){return{name:"@lomray/react-mobx-manager-hydration-fix",transform(r,t){const n=e.extname(t).split("?")[0];if([".js",".ts",".tsx"].includes(n)&&r.includes("function useObserver"))return{code:r.replace(/(}\);[^f]+)(forceUpdate\(\);)/s,"$1/*$2*/"),map:{mappings:""}}}}};

package/lib/plugins/vite/id-generator.d.ts

@@ -0,0 +1,15 @@
+import { Plugin } from 'vite';
+interface IPluginOptions {
+    root?: string;
+    isProd?: boolean;
+}
+/**
+ * Generate unique store id's
+ *
+ * Detect mobx store:
+ * - by makeObservable or makeAutoObservable
+ * - by @mobx-store jsdoc before class
+ * @constructor
+ */
+declare function IdGenerator({ root, isProd }?: IPluginOptions): Plugin;
+export { IdGenerator as default, IPluginOptions };

package/lib/plugins/vite/id-generator.js

@@ -0,0 +1 @@
+"use strict";var e=require("node:path"),r=require("node:process"),t=require("../helpers.js");module.exports=function({root:s=r.cwd(),isProd:a=!1}={}){const n=new t.Generator(s,a);return{name:"@lomray/react-mobx-manager-id-generator",transform(r,t){const s=e.extname(t).split("?")[0];if(t.includes("node_modules")||![".js",".ts",".tsx"].includes(s)||!/(makeObservable|makeAutoObservable)\(/.test(r))return;if(n.cache.has(t))return{code:n.injectId(r,t),map:{mappings:""}};const o=n.matchMobxStore(r);if(o){if(!n.cache.has(t)){const e=a?n.getProdId():n.getDevId(t,o);n.cache.set(t,{classname:o,storeId:e})}return{code:n.injectId(r,t),map:{mappings:""}}}},buildEnd(){a&&t.saveCache(n.cache)}}};

package/lib/plugins/vite/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+/**
+ * Mobx manager vite plugins
+ * @constructor
+ */
+declare function ViteReactMobxManager(): Plugin[];
+export { ViteReactMobxManager as default };

package/lib/plugins/vite/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("node:process"),r=require("./hydration-update-fix.js"),t=require("./id-generator.js");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=n(e);const i=e=>"production"===e||"production"===o.env.NODE_ENV;module.exports=function(){let e;return[{...r(),apply:()=>!i()},{name:t().name,configResolved({root:r}){e=t({root:r,isProd:i()})},transform(...r){var t;return null===(t=e.transform)||void 0===t?void 0:t.call(this,...r)},buildEnd(...r){var t;null===(t=e.buildEnd)||void 0===t||t.call(this,...r)}}]};

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

@@ -1,4 +1,4 @@
-import { IStorage } from "../types-abd34741.js";
+import { IStorage } from "../types-8fe84e04.js";
 interface IAsyncStorage {
     getItem: (key: string) => Promise<string | null>;
     setItem: (key: string, value: string) => Promise<void>;

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

@@ -1,4 +1,4 @@
-import { IStorage } from "../types-abd34741.js";
+import { IStorage } from "../types-8fe84e04.js";
 /**
  * Local storage for mobx store manager
  */

package/lib/store-status.d.ts

@@ -0,0 +1,7 @@
+declare enum StoreStatus {
+    init = "init",
+    touched = "touched",
+    inUse = "in-use",
+    unused = "unused"
+}
+export { StoreStatus as default };

package/lib/store-status.js

@@ -0,0 +1 @@
+"use strict";var u;!function(u){u.init="init",u.touched="touched",u.inUse="in-use",u.unused="unused"}(u||(u={}));var e=u;module.exports=e;

package/lib/suspense-query.d.ts

@@ -1,4 +1,4 @@
-import { TInitStore } from "./types-abd34741.js";
+import { TInitStore } from "./types-8fe84e04.js";
 interface IPromise<TReturn> extends Promise<TReturn> {
     status?: 'fulfilled' | 'pending' | 'rejected';
     value?: TReturn;
@@ -6,6 +6,7 @@ interface IPromise<TReturn> extends Promise<TReturn> {
 }
 interface ISuspenseQueryParams {
     fieldName?: string;
+    errorFields?: string[];
 }
 /**
  * Run request and cache promise
@@ -16,10 +17,6 @@ declare class SuspenseQuery {
      * @private
      */
     protected promise: Promise<any> | undefined;
-    /**
-     * @private
-     */
-    protected error?: Error;
     /**
      * Target store
      * @private
@@ -35,7 +32,32 @@ declare class SuspenseQuery {
     /**
      * @constructor
      */
-    constructor(store: TInitStore, { fieldName, ...rest }?: ISuspenseQueryParams);
+    constructor(store: TInitStore, { fieldName, errorFields }?: ISuspenseQueryParams);
+    /**
+     * Error to json
+     */
+    /**
+     * Error to json
+     */
+    protected errorJson(e: any): void;
+    /**
+     * Assign custom error fields to error
+     */
+    /**
+     * Assign custom error fields to error
+     */
+    protected jsonToError(e: Error, values: Record<string, any>): Error;
+    /**
+     * Detect if suspense is restored from server side:
+     *  - throw error if exist
+     *  - skip run suspense if already completed
+     */
+    /**
+     * Detect if suspense is restored from server side:
+     *  - throw error if exist
+     *  - skip run suspense if already completed
+     */
+    protected isComplete(): boolean;
     /**
      * Run request
      * Save request resolve status

package/lib/suspense-query.js

@@ -1 +1 @@
-"use strict";var e=require("mobx");class r{constructor(t,{fieldName:i="isSuspenseDone",...s}={}){Object.defineProperty(this,"promise",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"store",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"params",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"query",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const{fieldName:t}=this.params;if(!this.store[t])return this.promise||(this.promise=e(),this.promise.then((()=>{this.store[t]=!0}),(e=>{this.store[t]=!0,this.error=e}))),r.run(this.promise)}}),this.store=t,this.params={...s,fieldName:i},e.extendObservable(t,{[i]:!1},{[i]:e.observable})}}Object.defineProperty(r,"run",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(e){switch(e.status){case"fulfilled":return e.value;case"pending":throw e;case"rejected":throw e.reason;default:e.status="pending",e.then((r=>{e.status="fulfilled",e.value=r}),(r=>{e.status="rejected",e.reason=r}))}throw e}}}),module.exports=r;
+"use strict";var e=require("mobx");class r{constructor(t,{fieldName:i="sR",errorFields:s=["name","message"]}={}){var o;Object.defineProperty(this,"promise",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"store",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"params",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"query",{enumerable:!0,configurable:!0,writable:!0,value:t=>{const{fieldName:i}=this.params;if(!this.isComplete())return this.promise||(this.promise=t(),this.promise.then((()=>{e.runInAction((()=>{this.store[i]=!0}))}),(r=>{e.runInAction((()=>{this.errorJson(r),this.store[i]=r}))}))),r.run(this.promise)}}),this.store=t,this.params={fieldName:i,errorFields:s};const a=null===(o=t.init)||void 0===o?void 0:o.bind(t);t.init=()=>{this.isComplete(),null==a||a()},e.extendObservable(t,{[i]:!1},{[i]:e.observable})}errorJson(e){e.toJSON=()=>this.params.errorFields.reduce(((r,t)=>({...r,[t]:null==e?void 0:e[t]})),{})}jsonToError(e,r){return this.params.errorFields.forEach((t=>{e[t]=null==r?void 0:r[t]})),e}isComplete(){var e;const r=this.store[this.params.fieldName];if("boolean"!==typeof r)throw this.jsonToError(new Error(null!==(e=null==r?void 0:r.message)&&void 0!==e?e:null==r?void 0:r.name),r);return!0===r}}Object.defineProperty(r,"run",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(e){switch(e.status){case"fulfilled":return e.value;case"pending":throw e;case"rejected":throw e.reason;default:e.status="pending",e.then((r=>{e.status="fulfilled",e.value=r}),(r=>{e.status="rejected",e.reason=r}))}throw e}}}),module.exports=r;

package/lib/{types-abd34741.d.ts → types-8fe84e04.d.ts}

@@ -1,10 +1,12 @@
+/// <reference types="node" />
 import Manager from "./manager.js";
+import StoreStatus from "./store-status.js";
 interface IWindowManager {
-    pushInit: (state: Record<string, any>) => void;
+    push: (state: Record<string, any>) => void;
 }
 declare global {
     interface Window {
-        mobxManager: IWindowManager;
+        mbxM: Record<string, any>[] | IWindowManager;
     }
 }
 interface IConstructorParams<TProps = Record<string, any>> {
@@ -14,13 +16,15 @@ interface IConstructorParams<TProps = Record<string, any>> {
 }
 interface IStoreLifecycle {
     onDestroy?: () => void;
-    onMount?: () => void | (() => void);
 }
 interface IStore extends IStoreLifecycle {
     libStoreId?: string;
     libStoreContextId?: string;
     libStoreParentId?: string;
+    libStoreSuspenseId?: string;
     libStoreComponentName?: string;
+    libStoreStatus?: StoreStatus;
+    libDestroyTimer?: NodeJS.Timeout;
     isSingleton?: boolean;
     init?: () => void;
     toJSON?: () => Record<string, any>;
@@ -47,7 +51,7 @@ interface IManagerParams {
     options?: IManagerOptions;
     initState?: Record<string, any>;
 }
-type TWakeup = (store: IStore, state: {
+type TWakeup = (state: {
     initState?: Record<string, any>;
     persistedState?: Record<string, any>;
 }) => void;
@@ -59,7 +63,11 @@ interface IStorage {
 interface IManagerOptions {
     shouldDisablePersist?: boolean;
     shouldRemoveInitState?: boolean;
-    isSSR?: boolean;
+    destroyTimers?: {
+        init?: number;
+        touched?: number;
+        unused?: number;
+    };
 }
 type TStores = {
     [storeKey: string]: IStore | IStorePersisted;
@@ -81,6 +89,7 @@ interface IStoreParams {
     key?: string;
     contextId?: string;
     parentId?: string;
+    suspenseId?: string;
     componentName?: string;
     componentProps?: Record<string, any>;
 }

package/lib/wakeup.d.ts

@@ -1,6 +1,6 @@
-import { IStorePersisted } from "./types-abd34741.js";
+import { TStores, TWakeup } from "./types-8fe84e04.js";
 /**
- * Restore store state from initial state
+ * Restore persisted store state
  */
-declare const wakeup: IStorePersisted['wakeup'];
+declare function wakeup(this: TStores[string], { persistedState }: Parameters<TWakeup>[0]): void;
 export { wakeup as default };

package/lib/wakeup.js

@@ -1 +1 @@
-"use strict";module.exports=(e,{persistedState:s})=>{s&&Object.assign(e,s)};
+"use strict";module.exports=function({persistedState:t}){t&&Object.assign(this,t)};

package/lib/with-stores.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TMapStores, IWithStoreOptions } from "./types-abd34741.js";
+import { TMapStores, IWithStoreOptions } from "./types-8fe84e04.js";
 /**
  * Make component observable and pass stores as props
  */

package/lib/with-stores.js

@@ -1 +1 @@
-"use strict";var e=require("hoist-non-react-statics"),t=require("mobx-react-lite"),r=require("react"),n=require("./context.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(e),u=a(r);module.exports=(e,a,{customContextId:s}={})=>{const d=t.observer(e),i=s||e.libStoreContextId,c=e.displayName||e.name,l=e=>{var t;const o=n.useStoreManagerContext(),s=n.useStoreManagerParentContext(),l=n.useStoreManagerSuspenseContext(),S=null===(t=u.default.useId)||void 0===t?void 0:t.call(u.default),[{contextId:f,initStores:x}]=r.useState((()=>{const t=o.createContextId(i||l||S);return{contextId:t,initStores:o.createStores(Object.entries(a),s,t,c,e)}}));return r.useEffect((()=>o.mountStores(x)),[x,o]),u.default.createElement(n.StoreManagerSuspenseProvider,{id:null},u.default.createElement(n.StoreManagerParentProvider,{parentId:f},u.default.createElement(d,{...x,...e})))};return o.default(l,e),l.displayName=`Mobx(${c})`,l};
+"use strict";var e=require("@lomray/consistent-suspense"),t=require("hoist-non-react-statics"),r=require("mobx-react-lite"),n=require("react"),s=require("./context.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),u=o(n);module.exports=(t,o,{customContextId:i}={})=>{const c=r.observer(t),d=i||t.libStoreContextId,l=t.displayName||t.name,m=t=>{const r=s.useStoreManager(),a=s.useStoreManagerParent(),{suspenseId:i}=e.useConsistentSuspense(),m=e.useId(),[{contextId:S,initStores:f,mountStores:p}]=n.useState((()=>{const e=d||m;return{contextId:e,initStores:r.createStores(Object.entries(o),a,e,i,l,t),mountStores:()=>r.mountStores(f)}}));return n.useEffect(p,[p]),u.default.createElement(s.StoreManagerParentProvider,{parentId:S,initStores:f},u.default.createElement(c,{...t,...f}))};return a.default(m,t),m.displayName=`Mobx(${l})`,Object.defineProperty(m,"name",{value:m.displayName,writable:!1,enumerable:!1})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lomray/react-mobx-manager",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "description": "This package provides Mobx stores manager for react.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -12,8 +12,7 @@
     "*": {
       "./*": [
         "lib/*",
-        "lib/storages/*",
-        "lib/server/*"
+        "lib/storages/*"
       ]
     }
   },
@@ -52,15 +51,15 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@lomray/consistent-suspense": "^1.3.0",
     "@lomray/event-manager": "^1.2.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.3",
-    "@commitlint/config-conventional": "^17.6.3",
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
     "@lomray/eslint-config-react": "^3.0.0",
     "@lomray/prettier-config": "^1.2.0",
     "@rollup/plugin-terser": "^0.4.3",
-    "@types/express": "^4.17.17",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/react": "^18.2.7",
     "eslint": "^8.41.0",
@@ -74,7 +73,8 @@
     "rollup-plugin-ts": "^3.2.0",
     "semantic-release": "^21.0.2",
     "ttypescript": "^1.5.15",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "vite": "^4.4.4"
   },
   "peerDependencies": {
     "hoist-non-react-statics": "^3.3.2",

package/lib/mobx-suspense.d.ts

@@ -1,8 +0,0 @@
-import { FC, SuspenseProps } from 'react';
-/**
- * Wrapper around react suspense
- * Create unique id for each suspense (used for create/stream stores state)
- * @constructor
- */
-declare const MobxSuspense: FC<SuspenseProps>;
-export { MobxSuspense as default };

package/lib/mobx-suspense.js

@@ -1 +0,0 @@
-"use strict";var e=require("react"),t=require("./context.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(e);module.exports=({children:a,fallback:l,...n})=>{var u;const d=e.useId(),c=e.Children.map(a,((e,a)=>r.default.createElement(t.StoreManagerSuspenseProvider,{id:`${d}${a}`},e))),i=r.default.createElement(r.default.Fragment,null,r.default.createElement("script",{"data-context-id":d,"data-count":null!==(u=null==c?void 0:c.length)&&void 0!==u?u:0}),l);return r.default.createElement(e.Suspense,{...n,children:c,fallback:i})};

package/lib/server/stream-stores.d.ts

@@ -1,72 +0,0 @@
-import { Response } from 'express';
-import Manager from "../manager.js";
-/**
- * Stream mobx manager stores
- * NOTE: use with renderToPipeableStream
- */
-declare class StreamStores {
-    /**
-     * Obtained suspensions from application shell
-     * @protected
-     */
-    protected suspendIds: Record<string, {
-        contextId: string;
-        count: number;
-    }>;
-    /**
-     * Mobx store manager instance
-     * @protected
-     */
-    protected readonly manager: Manager;
-    /**
-     * @constructor
-     * @protected
-     */
-    /**
-     * @constructor
-     * @protected
-     */
-    protected constructor(manager: Manager);
-    /**
-     * Listen react stream and push suspense stores state to client
-     */
-    /**
-     * Listen react stream and push suspense stores state to client
-     */
-    static stream(res: Response, manager: Manager): StreamStores;
-    /**
-     * Begin listen stream
-     */
-    /**
-     * Begin listen stream
-     */
-    protected beginStream(res: Response): void;
-    /**
-     * Parse suspensions and related stores context id from application shell
-     * @protected
-     */
-    /**
-     * Parse suspensions and related stores context id from application shell
-     * @protected
-     */
-    protected obtainSuspensions(html: string): void;
-    /**
-     * Replace suspend id
-     * @protected
-     */
-    /**
-     * Replace suspend id
-     * @protected
-     */
-    protected replaceSuspendIds(formId: string, toId: string): string | undefined;
-    /**
-     * Parse complete suspense chunk
-     * @protected
-     */
-    /**
-     * Parse complete suspense chunk
-     * @protected
-     */
-    protected obtainCompleteSuspense(html: string): Uint8Array | undefined;
-}
-export { StreamStores as default };

package/lib/server/stream-stores.js

@@ -1 +0,0 @@
-"use strict";class t{constructor(t){Object.defineProperty(this,"suspendIds",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"manager",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.manager=t}static stream(e,s){const n=new t(s);return n.beginStream(e),n}beginStream(t){const e=t.write.bind(t);t.write=(t,...s)=>{const n=Buffer.from(t).toString();this.obtainSuspensions(n);const r=this.obtainCompleteSuspense(n);return r?e(Buffer.concat([r,t]),...s):e(t,...s)}}obtainSuspensions(t){if(this.suspendIds)return;const e=[...t.matchAll(/<template id="(?<templateId>[^"]+)".+?<script data-context-id="(?<contextId>[^"]+)".+?data-count="(?<count>[^"]+)">/g)];e.length&&(this.suspendIds=e.reduce(((t,{groups:e})=>{const{templateId:s,contextId:n,count:r}=null!=e?e:{};return s?{...t,[s]:{contextId:n,count:Number(r)}}:t}),{}))}replaceSuspendIds(t,e){if(t)return this.suspendIds[e]=this.suspendIds[t],delete this.suspendIds[t],e}obtainCompleteSuspense(t){var e,s,n;if(!t.startsWith("<div hidden id="))return;const{from:r,to:i}=null!==(s=null===(e=t.match(/\$RC\("(?<from>[^"]+)","(?<to>[^"]+)"\)/))||void 0===e?void 0:e.groups)&&void 0!==s?s:{},o=this.replaceSuspendIds(r,i);if(!o)return;const{contextId:u,count:d}=null!==(n=this.suspendIds[o])&&void 0!==n?n:{};if(!u||!d)return;const a=this.manager.getStoresRelations(),c=this.manager.createContextId(u),l=[...Array(d)].reduce(((t,e,s)=>{const n=`${c}${s}`;return a.has(n)&&t.push(...a.get(n).ids),t}),[]);if(!l.length)return;const p=JSON.stringify(this.manager.toJSON(l));return Buffer.from(`<script>window.mobxManager.pushInit(${p});<\/script>`,"utf8")}}module.exports=t;