@lomray/react-mobx-manager 2.0.0-beta.10 → 2.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -5
- package/lib/context.d.ts +0 -2
- package/lib/context.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<h1 align='center'>Mobx stores manager for React</h1>
|
|
6
6
|
|
|
7
7
|
- One way to escape state tree 🌲🌳🌴.
|
|
8
|
+
- Ready to use with Suspense.
|
|
8
9
|
- Manage your Mobx stores like a boss - debug like a hacker.
|
|
9
10
|
- Simple idea - simple implementation.
|
|
10
11
|
- Small package size.
|
|
@@ -52,6 +53,8 @@ The React-mobx-manager package is distributed using [npm](https://www.npmjs.com/
|
|
|
52
53
|
npm i --save @lomray/react-mobx-manager
|
|
53
54
|
```
|
|
54
55
|
|
|
56
|
+
__WARNING:__ this package use [@lomray/consistent-suspense](https://github.com/Lomray-Software/consistent-suspense) for generate stable id's inside Suspense.
|
|
57
|
+
|
|
55
58
|
**Optional:** Configure your bundler to keep classnames and function names in production OR use `id` for each store:
|
|
56
59
|
|
|
57
60
|
- **React:** (craco or webpack config, terser options)
|
|
@@ -77,24 +80,27 @@ Import `Manager, StoreManagerProvider` from `@lomray/react-mobx-manager` into yo
|
|
|
77
80
|
```typescript jsx
|
|
78
81
|
import React from 'react';
|
|
79
82
|
import ReactDOM from 'react-dom/client';
|
|
80
|
-
import '
|
|
83
|
+
import { ConsistentSuspenseProvider } from '@lomray/consistent-suspense';
|
|
81
84
|
import { Manager, StoreManagerProvider, MobxLocalStorage } from '@lomray/react-mobx-manager';
|
|
82
85
|
import App from './app';
|
|
83
86
|
import MyApiClient from './services/my-api-client';
|
|
87
|
+
import './index.css';
|
|
84
88
|
|
|
85
89
|
const apiClient = new MyApiClient();
|
|
86
90
|
const storeManager = new Manager({
|
|
87
91
|
storage: new MobxLocalStorage(), // optional: needs for persisting stores
|
|
88
|
-
storesParams: { apiClient }, // optional: we can provide our api client for access from the store
|
|
92
|
+
storesParams: { apiClient }, // optional: we can provide our api client for access from the each store
|
|
89
93
|
});
|
|
90
94
|
|
|
91
95
|
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
|
|
92
96
|
|
|
93
97
|
root.render(
|
|
94
98
|
<React.StrictMode>
|
|
95
|
-
<
|
|
96
|
-
<
|
|
97
|
-
|
|
99
|
+
<ConsistentSuspenseProvider> {/** required, see warning above **/}
|
|
100
|
+
<StoreManagerProvider storeManager={storeManager} shouldInit>
|
|
101
|
+
<App />
|
|
102
|
+
</StoreManagerProvider>
|
|
103
|
+
</ConsistentSuspenseProvider>
|
|
98
104
|
</React.StrictMode>,
|
|
99
105
|
);
|
|
100
106
|
```
|
|
@@ -468,6 +474,9 @@ Lifecycles:
|
|
|
468
474
|
- init
|
|
469
475
|
- onDestroy
|
|
470
476
|
|
|
477
|
+
## Demo
|
|
478
|
+
Explore [demo app](https://github.com/Lomray-Software/vite-template) to more understand.
|
|
479
|
+
|
|
471
480
|
## React Native debug plugin
|
|
472
481
|
For debug state, you can use [Reactotron debug plugin](https://github.com/Lomray-Software/reactotron-mobx-store-manager)
|
|
473
482
|
|
package/lib/context.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { IConsistentSuspense } from '@lomray/consistent-suspense';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { FC, ReactElement } from "react";
|
|
5
4
|
import Manager from "./manager.js";
|
|
@@ -9,7 +8,6 @@ interface IStoreManagerProvider {
|
|
|
9
8
|
shouldInit?: boolean;
|
|
10
9
|
fallback?: ReactElement;
|
|
11
10
|
children?: React.ReactNode;
|
|
12
|
-
suspenseProvider?: Partial<IConsistentSuspense>;
|
|
13
11
|
}
|
|
14
12
|
interface IStoreManagerParentProvider {
|
|
15
13
|
parentId: string;
|
package/lib/context.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
|
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({}),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);
|