@lomray/react-mobx-manager 4.2.1 → 4.3.0-beta.2

package/README.md

@@ -1,21 +1,29 @@
-<h1 align='center'>Mobx stores manager for React</h1>
+# React MobX Manager
 
 <p align="center">
     <img  src="./logo.png" alt="Mobx stores manager logo" width="250" height="253">
 </p>
 
-### Key features:
+Clean React components. Encapsulated business logic. No state-tree pain.
+
+It is built for apps that want explicit store ownership, SSR support, persistence, lifecycle cleanup and development tooling without forcing everything into one global state tree.
+
+## Why use it
 
 - 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.
+- Relative stores for component-owned state
+- Parent stores for subtree reuse
+- Global stores for app-wide state
 - Small package size.
 - Support code splitting out of the box.
 - Access stores from other stores.
 - Can be a replacement for react context.
+- Persistence support
+- Vite plugin support
+- Best-effort HMR
 - And many other nice things 😎
 
 <p align="center">
@@ -31,523 +39,15 @@
   <img src="https://img.shields.io/npm/v/@lomray/react-mobx-manager?label=semantic%20release&logo=semantic-release" alt="semantic version">
 </p>
 
-## Table of contents
-
-- [Getting started](#getting-started)
-- [Usage](#usage)
-- [Support SSR](#support-ssr)
-- [Important Tips](#important-tips)
-- [Documentation](#documentation)
-  - [Manager](#manager)
-  - [withStores](#withstores)
-  - [StoreManagerProvider](#storemanagerprovider)
-  - [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)
-
-## 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 @lomray/consistent-suspense
-```
-
-__NOTE:__ this package use [@lomray/consistent-suspense](https://github.com/Lomray-Software/consistent-suspense) for generate stable id's inside Suspense.
+## Install
 
-__Choose one of store id generating strategy (1 or 2 or 3)__:
-
-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: metro.config.js)
-```js
-module.exports = {
-  transformer: {
-    minifierConfig: {
-      keep_classnames: true,
-      keep_fnames: true,
-    },
-  }
-}
+npm i @lomray/react-mobx-manager @lomray/consistent-suspense
 ```
-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
-
-Import `Manager, StoreManagerProvider` from `@lomray/react-mobx-manager` into your index file and wrap `<App/>` with `<StoreManagerProvider/>`
-
-```typescript jsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-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 each store
-});
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-
-root.render(
-  <React.StrictMode>
-    <ConsistentSuspenseProvider> {/** required **/}
-      <StoreManagerProvider storeManager={storeManager} shouldInit>
-        <App />
-      </StoreManagerProvider>
-    </ConsistentSuspenseProvider>
-  </React.StrictMode>,
-);
-```
-
-Connect mobx store to the manager, and you're good to go!
-
-```typescript
-import { withStores, Manager } from '@lomray/react-mobx-manager';
-import { makeObservable, observable, action } from 'mobx';
-import type { IConstructorParams, ClassReturnType } from '@lomray/react-mobx-manager';
-
-/**
- * Mobx user store
- *
- * Usually store like that are related to the global store,
- * because they store information about the current user,
- * which may be needed in different places of the application.
- * 
- * You may also want to save the state of the store, for example, 
- * to local storage, so that it can be restored after page reload,
- * in this case, just export wrap export with 'persist':
- * export default Manager.persistStore(UserStore, 'user');
- */
-class UserStore {
-  /**
-   * Required only if we don't configure our bundler to keep classnames and function names 
-   * Default: current class name
-   */  
-  static id = 'user';
-
-  /**
-   * You can also enable behavior for global application stores
-   * Default: false
-   */
-  static isGlobal = true;
-
-  /**
-   * Our state
-   */
-  public name = 'Matthew'
-
-  /**
-   * Our API client
-   */
-  private apiClient: MyApiClient;
-
-  /**
-   * @constructor
-   */
-  constructor({ getStore, apiClient }: IConstructorParams) {
-    this.apiClient = apiClient;
-    // if we need, we can get a global store or store from the parent context
-    // this.otherStore = getStore(SomeOtherStore);
-
-    makeObservable(this, {
-      name: observable,
-      setName: action.bound,
-    });
-  }
-
-  /**
-   * Set user name
-   */
-  public setName(name: string): void {
-    this.name = name;
-  }
-
-  /**
-   * Example async
-   * Call this func from component
-   */
-  public getNameFromApi = async (userId: number) => {
-    const name = await this.apiClient.fetchName(userId);
-    
-    this.setName(name);
-  }
-}
-
-/**
- * Define stores for component
- */
-const stores = {
-  userStore: UserStore
-};
-
-// support typescript
-type TProps = StoresType <typeof stores>;
-
-/**
- * User component
- */
-const User: FC<TProps> = ({ userStore: { name } }) => {
-  return (
-    <div>{name}</div>
-  )
-}
-
-/**
- * Connect stores to component
- */
-export default withStores(User, stores);
-```
-
-[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 **global** store only for e.g: application settings, logged user, theme, etc.
-- To get started, stick to the concept: Store for Component. Don't connect (through withStores) not global store to several components.
 
 ## Documentation
 
-### Manager
-```typescript
-import { Manager, MobxLocalStorage, MobxAsyncStorage } from '@lomray/react-mobx-manager';
-// import AsyncStorage from '@react-native-async-storage/async-storage';
-
-// Params
-const storeManager = new Manager({
-  /**
-   * Optional: needs for persisting stores when you use Manager.persistStore
-   * Available: MobxLocalStorage and MobxAsyncStorage
-   * Default: none
-   */
-  storage: new MobxLocalStorage(), // React
-  // storage: new MobxAsyncStorage(AsyncStorage), // React Native
-  // storage: new CombinedStorage({ local: MobxAsyncStorage, cookie: CookieStorage }), // Define multiple storages
-  /**
-   * Optional: provide some params for access from store constructor
-   * E.g. we can provide our api client for access from the store
-   * Default: {}
-   */
-  storesParams: { apiClient },
-  /**
-   * Initial stores state.
-   * E.g. in SSR case, restore client state from a server
-   * Default: {}
-   */
-  initState: { storeId: { param: 'test' } },
-  /**
-   * Additional manager options
-   */
-  options: {
-    /**
-     * Disable persisting stores
-     * E.g., it should be 'true' on a server-side (SSR)
-     * Default: false
-     */
-    shouldDisablePersist: false,
-    /**
-     * Remove the initial store state after initialization
-     * Default: true
-     */
-    shouldRemoveInitState: true,
-    /**
-     * Configure store destroy timers
-     */
-    destroyTimers: {
-      init: 500,
-      touched: 10000, // NOTE: set to max request timeout
-      unused: 1000,
-    },
-  }
-});
-
-// Methods
-
-/**
- * Optional: Call this method to load persisting data from persist storage
- * E.g., you may want manually to do this before the app render
- * Default: StoreManagerProvider does this automatically with 'shoudInit' prop
- */
-await storeManager.init();
-
-/**
- * Get all-created stores
- */
-const managerStores = storeManager.getStores();
-
-/**
- * Get specific store
- */
-const store = storeManager.getStore(SomeGlobalStore);
-const store2 = storeManager.getStore(SomeStore, { contextId: 'necessary-context-id' });
-
-/**
- * Get stores context's and relations
- */
-const relations = storeManager.getStoresRelations();
-
-/**
- * Manually create stores for component
- * NOTE: 'withStores' wrapper use this method, probably you won't need it
- * WARNING: Avoid using this method directly, it may cause unexpected behavior
- */
-const stores = storeManager.createStores(['someStore', MyStore], 'parent-id', 'context-id', 'suspense-id', 'HomePage', { componentProp: 'test' });
-
-/**
- * Mount/Unmount simple stores to component
- * WARNING: Avoid using this method directly, it may cause unexpected behavior
- */
-const unmount = storeManager.mountStores(stores);
-
-/**
- * Get all-stores state
- */
-const storesState = storeManager.toJSON();
-
-/**
- * Get all persisted store's state
- */
-const persistedStoresState = storeManager.toPersistedJSON();
-
-/**
- * Get only persisted stores id's
- */
-const persistedIds = Manager.getPersistedStoresIds();
-
-/**
- * Get store observable props
- */
-const observableProps = Manager.getObservableProps(store);
-
-/**
- * Static method for access to manager from anywhere
- * NOTE: Be careful with this, especially with SSR on server-side
- */
-const manager = Manager.get();
-
-/**
- * Enable persisting state for store 
- */
-const storeClass = Manager.persistStore(class MyStore {}, 'my-store');
-
-/**
- * Choose storage and attributes
- */
-const storeClass2 = Manager.persistStore(class MyStore {}, 'my-store', {
-  attributes: {
-    local: ['someProp'], // thees attributes will be stored in local storage
-    cookie: ['specificProp'], // thees attributes will be stored in cookie storage
-  }
-});
-```
-
-### withStores
-```typescript
-import { withStores } from '@lomray/react-mobx-manager';
-
-const stores = { 
-  myStore: MyStore, 
-  anotherStore: AnotherStore,
-  // assign static id to future store
-  demoStore: { store: SomeStore, id: 'my-id' },
-  // get parent store, do this only inside children components
-  parentStore: { store: SomeParentStore, isParent: true },
-};
-
-/**
- * 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, { customContextId: 'optional-context-id' });
-```
-
-### StoreManagerProvider
-```typescript jsx
-import { StoreManagerProvider } from '@lomray/react-mobx-manager';
-
-/**
- * Wrap your application for a pass-down store manager, context id, and init persisted state
- * 
- * shouldInit - default: false, enable initialize peristed state
- * fallback - show loader while the manager has initialized
- */
-<StoreManagerProvider storeManager={storeManager} shouldInit fallback={<Loader />}>
-  {/* your components */}
-</StoreManagerProvider>
-```
-
-### useStoreManager
-```typescript jsx
-import { useStoreManager } from '@lomray/react-mobx-manager';
-
-const MyComponent: FC = () => {
-  /**
-   * Get store manager inside your function component
-   */
-  const storeManager = useStoreManager();
-}
-```
-
-### useStoreManagerParent
-```typescript jsx
-import { useStoreManagerParent } from '@lomray/react-mobx-manager';
-
-const MyComponent: FC = () => {
-  /**
-   * Get parent context id
-   */
-  const { parentId } = useStoreManagerParent();
-}
-```
-
-### Store
-
-```typescript
-import { makeObservable, observable, action } from 'mobx';
-
-class MyStore {
-  /**
-   * Required only if we don't configure our bundler to keep classnames and function names
-   * Default: current class name
-   */
-  static id = 'user';
-
-  /**
-   * You can also enable behavior for global application stores
-   * Default: false
-   */
-  static isGlobal = true;
-    
-  /**
-   * Store observable state
-   */
-  public state = {
-    name: 'Matthew',
-    username: 'meow',
-  }
-
-  /**
-   * @private
-   */
-  private readonly someParentStore: ClassReturnType<typeof SomeParentStore>;
-
-  /**
-   * @constructor
-   * 
-   * getStore - get parent store or global store
-   * storeManager - access to store manager
-   * apiClient - your custom param, see 'storesParams' in Manager
-   */
-  constructor({ getStore, storeManager, apiClient, componentProps }: IConstructorParams) {
-    this.apiClient = apiClient;
-    this.someParentStore = getStore(SomeParentStore);
-    
-    // In case when store is't global you can get access to component props
-    console.log(componentProps);
-
-    makeObservable(this, {
-      state: observable,
-    });
-  }
-
-  /**
-   * Define this method if you want to do something after initialize the store
-   * State restored, store ready for usage
-   * Optional.
-   * @private
-   */
-  private init(): void {
-    // do something
-  }
-
-  /**
-   * Define this method if you want to do something when a component with this store is unmount
-   * @private
-   */
-  private onDestroy(): void {
-    // do something
-  }
-
-  /**
-   * Custom method for return store state
-   * Optional.
-   * Default: @see Manager.toJSON
-   */
-  public toJSON(): Record<string, any> {
-    return { state: { username: this.state.username } };
-  }
-}
-```
-
-Lifecycles:
- - constructor
- - wakeup (restore state from persisted store)
- - init
- - 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)
-
-## Bugs and feature requests
-
-Bug or a feature request, [please open a new issue](https://github.com/Lomray-Software/react-mobx-manager/issues/new).
+Full documentation lives in [here](https://lomray-software.github.io/react-mobx-manager/)
 
 ## License
 Made with 💚

package/index.d.ts

@@ -4,6 +4,7 @@ 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 parentStore } from "./parent-store.js";
 export * from "./make-exported.js";
 export * from "./make-fetching.js";
 export { default as Events } from "./events.js";

package/index.js

@@ -1,2 +1,2 @@
-export{StoreManagerContext,StoreManagerParentContext,StoreManagerParentProvider,StoreManagerProvider,useStoreManager,useStoreManagerParent}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{isPropExcludedFromExport,isPropObservableExported,isPropSimpleExported,makeExported}from"./make-exported.js";import"mobx";export{default as Events}from"./events.js";export{default as Logger}from"./logger.js";
+export{StoreManagerContext,StoreManagerParentContext,StoreManagerParentProvider,StoreManagerProvider,useStoreManager,useStoreManagerParent}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 parentStore}from"./parent-store.js";export{isPropExcludedFromExport,isPropObservableExported,isPropSimpleExported,makeExported}from"./make-exported.js";import"mobx";export{default as Events}from"./events.js";export{default as Logger}from"./logger.js";
 //# sourceMappingURL=index.js.map

package/make-fetching.d.ts

@@ -1,8 +1,12 @@
-type TParams<T> = {
-    [K in keyof T]?: keyof T;
-};
-/**
- * Wrap functions to manage their fetching indicator
- */
-declare const makeFetching: <T extends Record<any, any>>(instance: T, params?: TParams<T>, hasLock?: boolean) => void;
+type AnyFn = (...args: any[]) => any;
+type MethodKeys<T> = {
+    [K in keyof T]-?: T[K] extends AnyFn ? K : never;
+}[keyof T];
+type BooleanKeys<T> = {
+    [K in keyof T]-?: T[K] extends boolean ? K : never;
+}[keyof T];
+type StrictParams<T> = Partial<Record<MethodKeys<T>, BooleanKeys<T>>>;
+type UnsafeParams = Record<string, string>;
+declare function makeFetching<T extends Record<any, any>>(instance: T, params: StrictParams<T>, hasLock?: boolean): void;
+declare function makeFetching<T extends Record<any, any>>(instance: T, params: UnsafeParams, hasLock?: boolean): void;
 export { makeFetching as default };

package/make-fetching.js

@@ -1,2 +1,2 @@
-import{runInAction as t}from"mobx";const o=(o,e={},r=!1)=>{Object.entries(e).forEach(([e,n])=>{const f=o[e],c=e=>{t(()=>{o[n]=e})};o[e]=(...t)=>{if(r&&o[n])return;c(!0);const e=f(...t);return"object"==typeof e&&e.finally?e.finally(()=>{c(!1)}):c(!1),e}})};export{o as default};
+import{runInAction as t}from"mobx";function o(o,e={},n=!1){Object.entries(e).forEach(([e,r])=>{const f=o[e];let a=0;const c=e=>{t(()=>{o[r]=e})},i=()=>{a=Math.max(a-1,0),0===a&&c(!1)};o[e]=(...t)=>{if(n&&o[r])return;a+=1,1===a&&c(!0);const e=f(...t);return"object"==typeof e&&e.finally?e.finally(()=>{i()}):i(),e}})}export{o as default};
 //# sourceMappingURL=make-fetching.js.map

package/make-fetching.js.map

@@ -1 +1 @@
-{"version":3,"file":"make-fetching.js","sources":["../src/make-fetching.ts"],"sourcesContent":["import { runInAction } from 'mobx';\n\ntype TParams<T> = {\n  [K in keyof T]?: keyof T;\n};\n\n/**\n * Wrap functions to manage their fetching indicator\n */\nconst makeFetching = <T extends Record<any, any>>(\n  instance: T,\n  params: TParams<T> = {},\n  hasLock = false,\n): void => {\n  Object.entries(params).forEach(([funcName, propName]) => {\n    const callback = instance[funcName] as (...arg: any[]) => any;\n    const setValue = (value: boolean) => {\n      runInAction(() => {\n        // @ts-expect-error not necessary\n        instance[propName] = value;\n      });\n    };\n\n    // @ts-expect-error not necessary\n    instance[funcName] = (...args: any[]) => {\n      if (hasLock && instance[propName]) {\n        return;\n      }\n\n      setValue(true);\n\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n      const result = callback(...args);\n\n      if (typeof result === 'object' && result.finally) {\n        result.finally(() => {\n          setValue(false);\n        });\n      } else {\n        setValue(false);\n      }\n\n      return result;\n    };\n  });\n};\n\nexport default makeFetching;\n"],"names":["makeFetching","instance","params","hasLock","Object","entries","forEach","funcName","propName","callback","setValue","value","runInAction","args","result","finally"],"mappings":"mCASA,MAAMA,EAAe,CACnBC,EACAC,EAAqB,CAAA,EACrBC,GAAU,KAEVC,OAAOC,QAAQH,GAAQI,QAAQ,EAAEC,EAAUC,MACzC,MAAMC,EAAWR,EAASM,GACpBG,EAAYC,IAChBC,EAAY,KAEVX,EAASO,GAAYG,KAKzBV,EAASM,GAAY,IAAIM,KACvB,GAAIV,GAAWF,EAASO,GACtB,OAGFE,GAAS,GAGT,MAAMI,EAASL,KAAYI,GAU3B,MARsB,iBAAXC,GAAuBA,EAAOC,QACvCD,EAAOC,QAAQ,KACbL,GAAS,KAGXA,GAAS,GAGJI"}
+{"version":3,"file":"make-fetching.js","sources":["../src/make-fetching.ts"],"sourcesContent":["import { runInAction } from 'mobx';\n\ntype AnyFn = (...args: any[]) => any;\n\ntype MethodKeys<T> = {\n  [K in keyof T]-?: T[K] extends AnyFn ? K : never;\n}[keyof T];\n\ntype BooleanKeys<T> = {\n  [K in keyof T]-?: T[K] extends boolean ? K : never;\n}[keyof T];\n\ntype StrictParams<T> = Partial<Record<MethodKeys<T>, BooleanKeys<T>>>;\ntype UnsafeParams = Record<string, string>;\n\nfunction makeFetching<T extends Record<any, any>>(\n  instance: T,\n  params: StrictParams<T>,\n  hasLock?: boolean,\n): void;\nfunction makeFetching<T extends Record<any, any>>(\n  instance: T,\n  params: UnsafeParams,\n  hasLock?: boolean,\n): void;\n\nfunction makeFetching<T extends Record<any, any>>(\n  instance: T,\n  params: StrictParams<T> | UnsafeParams = {},\n  hasLock = false,\n): void {\n  Object.entries(params).forEach(([funcName, propName]) => {\n    const callback = instance[funcName] as (...arg: any[]) => any;\n    let inFlight = 0;\n    const setValue = (value: boolean): void => {\n      runInAction(() => {\n        // @ts-expect-error not necessary\n        instance[propName] = value;\n      });\n    };\n    const increment = (): void => {\n      inFlight += 1;\n\n      if (inFlight === 1) {\n        setValue(true);\n      }\n    };\n    const decrement = (): void => {\n      inFlight = Math.max(inFlight - 1, 0);\n\n      if (inFlight === 0) {\n        setValue(false);\n      }\n    };\n\n    // @ts-expect-error not necessary\n    instance[funcName] = (...args: any[]) => {\n      if (hasLock && instance[propName]) {\n        return;\n      }\n\n      increment();\n\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n      const result = callback(...args);\n\n      if (typeof result === 'object' && result.finally) {\n        result.finally(() => {\n          decrement();\n        });\n      } else {\n        decrement();\n      }\n\n      return result;\n    };\n  });\n}\n\nexport default makeFetching;\n"],"names":["makeFetching","instance","params","hasLock","Object","entries","forEach","funcName","propName","callback","inFlight","setValue","value","runInAction","decrement","Math","max","args","result","finally"],"mappings":"mCA0BA,SAASA,EACPC,EACAC,EAAyC,CAAA,EACzCC,GAAU,GAEVC,OAAOC,QAAQH,GAAQI,QAAQ,EAAEC,EAAUC,MACzC,MAAMC,EAAWR,EAASM,GAC1B,IAAIG,EAAW,EACf,MAAMC,EAAYC,IAChBC,EAAY,KAEVZ,EAASO,GAAYI,KAUnBE,EAAY,KAChBJ,EAAWK,KAAKC,IAAIN,EAAW,EAAG,GAEjB,IAAbA,GACFC,GAAS,IAKbV,EAASM,GAAY,IAAIU,KACvB,GAAId,GAAWF,EAASO,GACtB,OAjBFE,GAAY,EAEK,IAAbA,GACFC,GAAS,GAoBX,MAAMO,EAAST,KAAYQ,GAU3B,MARsB,iBAAXC,GAAuBA,EAAOC,QACvCD,EAAOC,QAAQ,KACbL,MAGFA,IAGKI,IAGb"}

package/manager.d.ts

@@ -165,6 +165,13 @@ declare class Manager {
      * Delete relation context id
      */
     protected removeRelationContext(contextId: string): void;
+    /**
+     * Append callback to store destroy lifecycle
+     */
+    /**
+     * Append callback to store destroy lifecycle
+     */
+    protected appendDestroyCallback(store: TStores[string], callback?: () => void): void;
     /**
      * Prepare store before usage
      */
@@ -190,6 +197,13 @@ declare class Manager {
      * NOTE: use only inside withStores wrapper
      */
     mountStores(contextId: string, { globalStores, relativeStores }: Partial<IGroupedStores>): () => void;
+    /**
+     * Destroy manager stores and detach internal relations
+     */
+    /**
+     * Destroy manager stores and detach internal relations
+     */
+    destroy(): void;
     /**
      * Change the stores status to touched
      */

package/manager.js

@@ -1,2 +1,2 @@
-import t from"@lomray/event-manager";import{toJS as e,isObservableProp as s}from"mobx";import{ROOT_CONTEXT_ID as o}from"./constants.js";import r from"./deep-merge.js";import i from"./events.js";import n from"./logger.js";import{isPropObservableExported as a,isPropExcludedFromExport as l,isPropSimpleExported as h}from"./make-exported.js";import d from"./on-change-listener.js";import p from"./storages/combined-storage.js";import S from"./store-status.js";import c from"./wakeup.js";class u{static instance;stores=new Map;storesRelations=new Map;static persistedStores=new Set;initState;storage;storesParams;options={shouldDisablePersist:!1,shouldRemoveInitState:!0,failedCreationStrategy:"empty"};suspenseRelations=new Map;logger;constructor({initState:t,storesParams:e,storage:s,options:o,logger:r}={}){if(this.initState=t||{},this.storesParams=e||{},this.logger=r&&"log"in r?r:new n({level:3,...r??{},manager:this}),this.storage=s instanceof p?s:s?new p({default:s}):void 0,Object.assign(this.options,o||{}),u.instance=this,"undefined"!=typeof window){const t=window.mbxM;window.mbxM={push:this.pushInitState},(Array.isArray(t)?t:[]).forEach(this.pushInitState)}}async init(){try{this.storage&&await this.storage.get()}catch(t){this.logger.err("Failed initialized store manager: ",t)}return this}static get(){if(!u.instance)throw new Error("Store manager is not initialized.");return u.instance}getStores(){return this.stores}getStoresRelations(){return this.storesRelations}getSuspenseRelations(){return this.suspenseRelations}static getPersistedStoresIds(){return u.persistedStores}pushInitState=(t={})=>{for(const[e,s]of Object.entries(t))this.initState[e]=s};getStoreId(t,e={}){const{id:s,contextId:o,key:r}=e;if(s)return s;if(t.libStoreId)return t.libStoreId;let i=t.id||t.name||t.constructor.name;return t.isGlobal?i:(i=`${i}--${o}`,r?`${i}--${r}`:i)}getStore(t,e={}){const s=this.getStoreId(t,e);return this.stores.has(s)?this.stores.get(s):t.isGlobal?this.createStore(t,{id:s,contextId:"global",parentId:o,suspenseId:"",componentName:"root-app",componentProps:{}}):this.lookupStore(s,e)}lookupStore(t,e){const{contextId:s,parentId:r}=e,i=t.split("--")?.[0],{ids:n,parentId:a}=this.storesRelations.get(s)??{ids:new Set,parentId:r},l=[...n].filter(t=>t.startsWith(`${i}--`));if(1===l.length)return this.stores.get(l[0]);if(l.length>1)this.logger.err("Parent context has multiple stores with the same id, please pass key to getStore function.");else if(a&&a!==o)return this.lookupStore(t,{contextId:this.getBiggerContext(a,r)})}getBiggerContext(t,e){if(!t)return e;if(!e)return t;const s=/[^a-zA-Z]/g;return t.replace(s,"")>e.replace(s,"")?t:e}createStore(e,s){const{id:r,contextId:n,parentId:a,suspenseId:l,componentName:h,componentProps:d}=s;if(this.stores.has(r))return this.stores.get(r);const p=new e({...this.storesParams,storeManager:this,getStore:(t,e={contextId:n,parentId:a})=>this.getStore(t,e),componentProps:d,initState:this.initState[r]});return p.libStoreId=r,p.isGlobal=e.isGlobal,p.libStoreContextId=e.isGlobal?"global":n,p.libStoreParentId=e.isGlobal||!a||a===n?o:a,p.libStoreSuspenseId=l,p.libStoreComponentName=h,this.setStoreStatus(p,e.isGlobal?S.inUse:S.init),this.prepareStore(p),t.publish(i.CREATE_STORE,{store:e}),p}createStores(t,e,s,o,r,i={}){const{failedCreationStrategy:n}=this.options,a=t.reduce((t,[a,l])=>{const{id:h,store:d,isParent:p=!1}="store"in l?l:{store:l,id:void 0,isParent:!1};let S=h||(p?this.getStore(d,{contextId:s,parentId:e})?.libStoreId:this.getStoreId(d,{key:a,contextId:s}));if(!S){const i=`Cannot find or create store '${a}': '${this.getStoreId(d)}'`;if(this.logger.warn(i),this.logger.debug(i,{contextId:s,parentId:e,suspenseId:o,componentName:r,isParent:p},!0),"dummy"!==n)return"empty"===n&&(t.hasCreationFailure=!0),t;S=this.getStoreId(d,{key:a,contextId:s})}const c=this.createStore(d,{id:S,contextId:s,parentId:e,suspenseId:o,componentName:r,componentProps:i});return p?t.parentStores[a]=c:c.isGlobal?t.globalStores[a]=c:t.relativeStores[a]=c,t},{relativeStores:{},parentStores:{},globalStores:{},hasCreationFailure:!1});return this.createRelationContext(s,e,r),a}createRelationContext(t,e,s){this.storesRelations.has(t)||this.storesRelations.set(t,{ids:new Set,parentId:e&&e!==t?e:o,componentName:s})}removeRelationContext(t){const e=this.storesRelations.get(t);!e||t===o||e.ids.size>0||this.storesRelations.delete(t)}prepareStore(t){const e=t.libStoreId,s=t.libStoreContextId,o=t.libStoreSuspenseId;if(this.stores.has(e))return;const i=this.initState[e];if(i&&r(t,i),"wakeup"in t&&u.persistedStores.has(e)&&t.wakeup?.({initState:i,persistedState:this.storage?.getStoreData(t),manager:this}),u.persistedStores.has(e)&&"addOnChangeListener"in t){const e=t.onDestroy?.bind(t),s=t.addOnChangeListener(t,this);t.onDestroy=()=>{s?.(),e?.()}}t.init?.(),this.createRelationContext(s,t.libStoreParentId,t.libStoreComponentName),this.suspenseRelations.has(o)||this.suspenseRelations.set(o,new Set);const{ids:n}=this.storesRelations.get(s);this.stores.set(e,t),n.add(e),this.suspenseRelations.get(o).add(e)}removeStore(e){const s=e.libStoreId,o=e.libStoreSuspenseId,{ids:r}=this.storesRelations.get(e.libStoreContextId)??{ids:new Set};this.stores.has(s)&&(this.stores.delete(s),r.delete(s),o&&this.suspenseRelations.get(o)?.has(s)&&this.suspenseRelations.get(o).delete(s),this.removeRelationContext(e.libStoreContextId),"onDestroy"in e&&e.onDestroy?.(),t.publish(i.DELETE_STORE,{store:e}))}mountStores(e,{globalStores:s={},relativeStores:o={}}){const{shouldRemoveInitState:r}=this.options,n={...s,...o};return Object.values(n).forEach(e=>{const s=e.libStoreId;r&&this.initState[s]&&delete this.initState[s],this.setStoreStatus(e,S.inUse),t.publish(i.MOUNT_STORE,{store:e})}),()=>{Object.values(n).forEach(e=>{e.isGlobal||(this.setStoreStatus(e,S.unused),t.publish(i.UNMOUNT_STORE,{store:e}))}),this.removeRelationContext(e)}}touchedStores(t){Object.values(t).forEach(t=>{t.libStoreStatus!==S.init||t.isGlobal||this.setStoreStatus(t,S.touched)})}setStoreStatus(t,e){const{destroyTimers:{init:s=500,touched:o=1e4,unused:r=1e3}={}}=this.options;t.libStoreStatus=e,clearTimeout(t.libDestroyTimer);let i=0;switch(e){case S.init:i=s;break;case S.touched:i=o;break;case S.unused:i=r}i&&(t.libDestroyTimer=setTimeout(()=>this.removeStore(t),i))}getStoreState(t,e=!1){return t.toJSON?.()??u.getObservableProps(t,e)}toJSON(t,e=!1){const s={},o=Array.isArray(t)?t.reduce((t,e)=>(this.stores.has(e)&&t.set(e,this.stores.get(e)),t),new Map):this.stores;for(const[t,r]of o.entries())s[t]=this.getStoreState(r,e);return s}async savePersistedStore(t){if(this.options.shouldDisablePersist||!this.storage)return!1;try{return await this.storage.saveStoreData(t,this.getStoreState(t,!0)),!0}catch(t){this.logger.err("Failed to persist stores: ",t)}return!1}static getObservableProps(t,o=!1){const r=e(t);return Object.entries(r).reduce((e,[r,i])=>({...e,...s(t,r)&&!l(t,r,o)||h(t,r)?{[r]:i}:{},...a(t,r)?{[r]:u.getObservableProps(t[r])}:{}}),{})}static persistStore(t,e,s={}){return u.persistedStores.add(e),t.libStoreId=e,"libStorageOptions"in t.prototype||(t.prototype.libStorageOptions=s),"wakeup"in t.prototype||(t.prototype.wakeup=c),"addOnChangeListener"in t.prototype||(t.prototype.addOnChangeListener=d),t}}export{u as default};
+import t from"@lomray/event-manager";import{toJS as e,isObservableProp as s}from"mobx";import{ROOT_CONTEXT_ID as o}from"./constants.js";import r from"./deep-merge.js";import i from"./events.js";import n from"./logger.js";import{isPropObservableExported as a,isPropExcludedFromExport as l,isPropSimpleExported as h}from"./make-exported.js";import d from"./on-change-listener.js";import p from"./storages/combined-storage.js";import S from"./store-status.js";import c from"./wakeup.js";class u{static instance;stores=new Map;storesRelations=new Map;static persistedStores=new Set;initState;storage;storesParams;options={shouldDisablePersist:!1,shouldRemoveInitState:!0,failedCreationStrategy:"empty"};suspenseRelations=new Map;logger;constructor({initState:t,storesParams:e,storage:s,options:o,logger:r}={}){if(this.initState=t||{},this.storesParams=e||{},this.logger=r&&"log"in r?r:new n({level:3,...r??{},manager:this}),this.storage=s instanceof p?s:s?new p({default:s}):void 0,Object.assign(this.options,o||{}),u.instance=this,"undefined"!=typeof window){const t=window.mbxM;window.mbxM={push:this.pushInitState},(Array.isArray(t)?t:[]).forEach(this.pushInitState)}}async init(){try{this.storage&&await this.storage.get()}catch(t){this.logger.err("Failed initialized store manager: ",t)}return this}static get(){if(!u.instance)throw new Error("Store manager is not initialized.");return u.instance}getStores(){return this.stores}getStoresRelations(){return this.storesRelations}getSuspenseRelations(){return this.suspenseRelations}static getPersistedStoresIds(){return u.persistedStores}pushInitState=(t={})=>{for(const[e,s]of Object.entries(t))this.initState[e]=s};getStoreId(t,e={}){const{id:s,contextId:o,key:r}=e;if(s)return s;if(t.libStoreId)return t.libStoreId;let i=t.id||t.name||t.constructor.name;return t.isGlobal?i:(i=`${i}--${o}`,r?`${i}--${r}`:i)}getStore(t,e={}){const s=this.getStoreId(t,e);return this.stores.has(s)?this.stores.get(s):t.isGlobal?this.createStore(t,{id:s,contextId:"global",parentId:o,suspenseId:"",componentName:"root-app",componentProps:{}}):this.lookupStore(s,e)}lookupStore(t,e){const{contextId:s,parentId:r}=e,i=t.split("--")?.[0],{ids:n,parentId:a}=this.storesRelations.get(s)??{ids:new Set,parentId:r},l=[...n].filter(t=>t.startsWith(`${i}--`));if(1===l.length)return this.stores.get(l[0]);if(l.length>1)this.logger.err("Parent context has multiple stores with the same id, please pass key to getStore function.");else if(a&&a!==o)return this.lookupStore(t,{contextId:this.getBiggerContext(a,r)})}getBiggerContext(t,e){if(!t)return e;if(!e)return t;const s=/[^a-zA-Z]/g;return t.replace(s,"")>e.replace(s,"")?t:e}createStore(e,s){const{id:r,contextId:n,parentId:a,suspenseId:l,componentName:h,componentProps:d}=s;if(this.stores.has(r))return this.stores.get(r);const p=new e({...this.storesParams,storeManager:this,getStore:(t,e={contextId:n,parentId:a})=>this.getStore(t,e),componentProps:d,initState:this.initState[r]});return p.libStoreId=r,p.isGlobal=e.isGlobal,p.libStoreContextId=e.isGlobal?"global":n,p.libStoreParentId=e.isGlobal||!a||a===n?o:a,p.libStoreSuspenseId=l,p.libStoreComponentName=h,this.setStoreStatus(p,e.isGlobal?S.inUse:S.init),this.prepareStore(p),t.publish(i.CREATE_STORE,{store:e}),p}createStores(t,e,s,o,r,i={}){const{failedCreationStrategy:n}=this.options,a=t.reduce((t,[a,l])=>{const{id:h,store:d,isParent:p=!1}="store"in l?l:{store:l,id:void 0,isParent:!1};let S=h||(p?this.getStore(d,{contextId:s,parentId:e})?.libStoreId:this.getStoreId(d,{key:a,contextId:s}));if(!S){const i=`Cannot find or create store '${a}': '${this.getStoreId(d)}'`;if(this.logger.warn(i),this.logger.debug(i,{contextId:s,parentId:e,suspenseId:o,componentName:r,isParent:p},!0),"dummy"!==n)return"empty"===n&&(t.hasCreationFailure=!0),t;S=this.getStoreId(d,{key:a,contextId:s})}const c=this.createStore(d,{id:S,contextId:s,parentId:e,suspenseId:o,componentName:r,componentProps:d.isGlobal||p?{}:i});return p?t.parentStores[a]=c:c.isGlobal?t.globalStores[a]=c:t.relativeStores[a]=c,t},{relativeStores:{},parentStores:{},globalStores:{},hasCreationFailure:!1});return this.createRelationContext(s,e,r),a}createRelationContext(t,e,s){this.storesRelations.has(t)||this.storesRelations.set(t,{ids:new Set,parentId:e&&e!==t?e:o,componentName:s})}removeRelationContext(t){const e=this.storesRelations.get(t);!e||t===o||e.ids.size>0||this.storesRelations.delete(t)}appendDestroyCallback(t,e){if(!e)return;const s=t.onDestroy?.bind(t);t.onDestroy=()=>{e(),s?.()}}prepareStore(t){const e=t.libStoreId,s=t.libStoreContextId,o=t.libStoreSuspenseId;if(this.stores.has(e))return;const i=this.initState[e];if(i&&r(t,i),"wakeup"in t&&u.persistedStores.has(e)&&t.wakeup?.({initState:i,persistedState:this.storage?.getStoreData(t),manager:this}),u.persistedStores.has(e)&&"addOnChangeListener"in t){const e=t.addOnChangeListener(t,this);this.appendDestroyCallback(t,e)}const n=t.init?.();"function"==typeof n&&this.appendDestroyCallback(t,n),this.createRelationContext(s,t.libStoreParentId,t.libStoreComponentName),this.suspenseRelations.has(o)||this.suspenseRelations.set(o,new Set);const{ids:a}=this.storesRelations.get(s);this.stores.set(e,t),a.add(e),this.suspenseRelations.get(o).add(e)}removeStore(e){const s=e.libStoreId,o=e.libStoreSuspenseId,{ids:r}=this.storesRelations.get(e.libStoreContextId)??{ids:new Set};this.stores.has(s)&&(this.stores.delete(s),r.delete(s),o&&this.suspenseRelations.get(o)?.has(s)&&this.suspenseRelations.get(o).delete(s),this.removeRelationContext(e.libStoreContextId),"onDestroy"in e&&e.onDestroy?.(),t.publish(i.DELETE_STORE,{store:e}))}mountStores(e,{globalStores:s={},relativeStores:o={}}){const{shouldRemoveInitState:r}=this.options,n={...s,...o};return Object.values(n).forEach(e=>{const s=e.libStoreId;r&&this.initState[s]&&delete this.initState[s],this.setStoreStatus(e,S.inUse),t.publish(i.MOUNT_STORE,{store:e})}),()=>{Object.values(n).forEach(e=>{e.isGlobal||(this.setStoreStatus(e,S.unused),t.publish(i.UNMOUNT_STORE,{store:e}))}),this.removeRelationContext(e)}}destroy(){for(const t of Array.from(this.stores.values()))clearTimeout(t.libDestroyTimer),this.removeStore(t);this.storesRelations.clear(),this.suspenseRelations.clear()}touchedStores(t){Object.values(t).forEach(t=>{t.libStoreStatus!==S.init||t.isGlobal||this.setStoreStatus(t,S.touched)})}setStoreStatus(t,e){const{destroyTimers:{init:s=500,touched:o=1e4,unused:r=1e3}={}}=this.options;t.libStoreStatus=e,clearTimeout(t.libDestroyTimer);let i=0;switch(e){case S.init:i=s;break;case S.touched:i=o;break;case S.unused:i=r}i&&(t.libDestroyTimer=setTimeout(()=>this.removeStore(t),i))}getStoreState(t,e=!1){return t.toJSON?.()??u.getObservableProps(t,e)}toJSON(t,e=!1){const s={},o=Array.isArray(t)?t.reduce((t,e)=>(this.stores.has(e)&&t.set(e,this.stores.get(e)),t),new Map):this.stores;for(const[t,r]of o.entries())s[t]=this.getStoreState(r,e);return s}async savePersistedStore(t){if(this.options.shouldDisablePersist||!this.storage)return!1;try{return await this.storage.saveStoreData(t,this.getStoreState(t,!0)),!0}catch(t){this.logger.err("Failed to persist stores: ",t)}return!1}static getObservableProps(t,o=!1){const r=e(t);return Object.entries(r).reduce((e,[r,i])=>({...e,...s(t,r)&&!l(t,r,o)||h(t,r)?{[r]:i}:{},...a(t,r)?{[r]:u.getObservableProps(t[r])}:{}}),{})}static persistStore(t,e,s={}){return u.persistedStores.add(e),t.libStoreId=e,"libStorageOptions"in t.prototype||(t.prototype.libStorageOptions=s),"wakeup"in t.prototype||(t.prototype.wakeup=c),"addOnChangeListener"in t.prototype||(t.prototype.addOnChangeListener=d),t}}export{u as default};
 //# sourceMappingURL=manager.js.map