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

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.
Files changed (2) hide show
  1. package/README.md +29 -8
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -6,10 +6,11 @@
6
6
 
7
7
  - One way to escape state tree 🌲🌳🌴.
8
8
  - Ready to use with Suspense.
9
+ - Support SSR.
10
+ - Support render to stream.
9
11
  - Manage your Mobx stores like a boss - debug like a hacker.
10
12
  - Simple idea - simple implementation.
11
13
  - Small package size.
12
- - Support render to stream.
13
14
  - Support code splitting out of the box.
14
15
  - Access stores from other stores.
15
16
  - Can be a replacement for react context.
@@ -51,13 +52,14 @@
51
52
  The React-mobx-manager package is distributed using [npm](https://www.npmjs.com/), the node package manager.
52
53
 
53
54
  ```
54
- npm i --save @lomray/react-mobx-manager
55
+ npm i --save @lomray/react-mobx-manager @lomray/consistent-suspense
55
56
  ```
56
57
 
57
- __WARNING:__ this package use [@lomray/consistent-suspense](https://github.com/Lomray-Software/consistent-suspense) for generate stable id's inside Suspense.
58
+ __NOTE:__ this package use [@lomray/consistent-suspense](https://github.com/Lomray-Software/consistent-suspense) for generate stable id's inside Suspense.
58
59
 
59
- **Optional:** Configure your bundler to keep classnames and function names in production OR use `id` for each store OR use `Vite plugins`:
60
+ __Choose one of store id generating strategy__:
60
61
 
62
+ 1. Configure your bundler to keep classnames and function names. Store id will be generated from class names (chose unique class names).
61
63
  - **React:** (craco or webpack config, terser options)
62
64
  ```bash
63
65
  terserOptions.keep_classnames = true;
@@ -75,8 +77,24 @@ module.exports = {
75
77
  }
76
78
  }
77
79
  ```
80
+ 2. Define `id` for each store.
81
+
82
+ ```typescript
83
+ import { makeObservable } from "mobx";
84
+
85
+ class MyStore {
86
+ /**
87
+ * Define unique store id
88
+ */
89
+ static id = 'Unique-store-id';
90
+
91
+ constructor() {
92
+ makeObservable(this, {})
93
+ }
94
+ }
95
+ ```
96
+ 3. Use `Vite plugins`.
78
97
 
79
- - **Vite plugins:**
80
98
  ```typescript
81
99
  import { defineConfig } from 'vite';
82
100
  import react from '@vitejs/plugin-react';
@@ -84,6 +102,9 @@ import MobxManager from '@lomray/react-mobx-manager/plugins/vite/index';
84
102
 
85
103
  // https://vitejs.dev/config/
86
104
  export default defineConfig({
105
+ /**
106
+ * Store id's will be generated automatically, just chill
107
+ */
87
108
  plugins: [react(), MobxManager()]
88
109
  });
89
110
 
@@ -117,7 +138,7 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
117
138
 
118
139
  root.render(
119
140
  <React.StrictMode>
120
- <ConsistentSuspenseProvider> {/** required, see warning above **/}
141
+ <ConsistentSuspenseProvider> {/** required **/}
121
142
  <StoreManagerProvider storeManager={storeManager} shouldInit>
122
143
  <App />
123
144
  </StoreManagerProvider>
@@ -225,7 +246,7 @@ const User: FC<TProps> = ({ userStore: { name } }) => {
225
246
  export default withStores(User, stores);
226
247
  ```
227
248
 
228
- [See app example](example) for a better understanding.
249
+ [See app example](https://github.com/Lomray-Software/vite-template) for a better understanding.
229
250
 
230
251
  ## Support SSR
231
252
  Does this library support SSR? Short answer - yes, but we need some steps to prepare our framework.
@@ -234,7 +255,7 @@ Does this library support SSR? Short answer - yes, but we need some steps to pre
234
255
  - Look at [NextJS example](https://github.com/Lomray-Software/nextjs-mobx-store-manager-example) for a better understanding (needs writing a wrapper).
235
256
 
236
257
  ## Important Tips
237
- - Create **singleton** store only for global stores e.g, for application settings, logged user, etc.
258
+ - Create **singleton** store only for global stores e.g, for application settings, logged user, theme, etc.
238
259
  - To get started, stick to the concept: Store for Component. Don't connect (through withStores) not singleton store to several components.
239
260
 
240
261
  ## Documentation
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lomray/react-mobx-manager",
3
- "version": "2.0.0-beta.19",
3
+ "version": "2.0.0-beta.20",
4
4
  "description": "This package provides Mobx stores manager for react.",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -51,7 +51,7 @@
51
51
  "prepare": "husky install"
52
52
  },
53
53
  "dependencies": {
54
- "@lomray/consistent-suspense": "^1.2.2",
54
+ "@lomray/consistent-suspense": "^1.3.0",
55
55
  "@lomray/event-manager": "^1.2.2"
56
56
  },
57
57
  "devDependencies": {
@@ -74,7 +74,7 @@
74
74
  "semantic-release": "^21.0.2",
75
75
  "ttypescript": "^1.5.15",
76
76
  "typescript": "^4.7.4",
77
- "vite": "^4.4.2"
77
+ "vite": "^4.4.4"
78
78
  },
79
79
  "peerDependencies": {
80
80
  "hoist-non-react-statics": "^3.3.2",