add withMobx HOC

Author: nghiepit

README.md

@@ -7,6 +7,8 @@
 
 :warning: This will work only with Next.js 6+ :warning:
 
+## Example: https://github.com/zeit/next.js/tree/canary/examples/with-mobx-wrapper
+
 ## Features
 
 - Simple API, easy steps to set up
@@ -23,82 +25,20 @@ $ yarn add next-mobx-wrapper
 
 ## Usage
 
-### Step 1: Injection multiple store
-
-Below, we have two stores: `commonStore`, `userStore`
-
-Create the `stores/with-mobx.js` file with the following minimal code:
-
-```js
-// stores/with-mobx.js
-
-import React from 'react';
-import {configure} from 'mobx';
-
-import {getCommonStore} from './common';
-import {getUserStore} from './user'; // *Here*
-
-configure({enforceActions: 'observed'});
-
-export default App => {
-  return class AppWithMobx extends React.Component {
-    static async getInitialProps(appContext) {
-      const commonStore = getCommonStore();
-      const userStore = getUserStore(); // *Here*
-
-      // *Here*
-      // Provide the store to getInitialProps of pages
-      appContext.ctx.store = {
-        commonStore,
-        userStore,
-      };
-
-      let appProps = {};
-      if (typeof App.getInitialProps === 'function') {
-        appProps = await App.getInitialProps.call(App, appContext);
-      }
-
-      return {
-        ...appProps,
-        initialMobxState: appContext.ctx.store,
-      };
-    }
-
-    constructor(props) {
-      super(props);
-      const {commonStore, userStore} = props.initialMobxState;
-
-      this.commonStore = getCommonStore(commonStore);
-      this.userStore = getUserStore(userStore); // *Here*
-    }
-
-    render() {
-      // And *Here*
-      return (
-        <App
-          {...this.props}
-          store={{
-            commonStore: this.commonStore,
-            userStore: this.userStore,
-          }}
-        />
-      );
-    }
-  };
-};
-```
-
-Wrap `HOC` to `_app.js`
+### Step 1: Wrap `withMobx HOC` to `_app.js`
 
 ```js
 // pages/_app.js
 
 import ErrorPage from 'next/error';
+import {withMobx} from 'next-mobx-wrapper'; // *Here*
+import {configure} from 'mobx';
 import {Provider, useStaticRendering} from 'mobx-react';
-import withMobxStore from '../stores/with-mobx'; // *Here*
 
 const isServer = !process.browser;
-useStaticRendering(isServer); // not `true` value
+
+configure({enforceActions: 'observed'});
+useStaticRendering(isServer); // NOT `true` value
 
 class MyApp extends App {
   static async getInitialProps({Component, ctx}) {
@@ -129,10 +69,12 @@ class MyApp extends App {
   }
 }
 
-export default withMobxStore(MyApp); // *Here*
+export default withMobx(MyApp); // *Here*
 ```
 
-### Step 2: Create `userStore` sample
+### Step 2: Make stores
+
+- Create `userStore` sample:
 
 ```js
 // stores/user.js
@@ -160,14 +102,26 @@ class Store extends BaseStore {
   };
 }
 
-// *Here*
 // Make sure the store’s unique name
+// AND getCounterStore, counterStore must be same formula
+// Example: getUserStore => userStore
+// Example: getProductStore => productStore
 export const getUserStore = getOrCreateStore('userStore', Store);
 ```
 
+- Make the `rootStore`:
+
+```js
+// stores/index.js
+// Just only simple
+
+export {getCounterStore} from './counter';
+export {getUserStore} from './user';
+```
+
 ### Step 3: Binding data
 
-Any page
+- Any pages
 
 ```js
 // pages/user.js
@@ -180,14 +134,14 @@ class User extends React.Component {
 
     const user = userStore.getUserById(id);
 
-    if (user) {
+    if (!user) {
       return {
-        user,
+        statusCode: 404,
       };
     }
 
     return {
-      statusCode: 404,
+      user,
     };
   }
 
@@ -203,7 +157,7 @@ class User extends React.Component {
 export default User;
 ```
 
-Or any component
+- Or any components
 
 ```js
 // components/UserInfo.jsx
@@ -232,7 +186,7 @@ class UserInfo extends React.Component {
 ## API
 
 ```js
-import {BaseStore, getOrCreateStore} from 'next-mobx-wrapper';
+import {withMobx, BaseStore, getOrCreateStore} from 'next-mobx-wrapper';
 ```
 
 ## License

package.json

@@ -20,6 +20,7 @@
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-proposal-decorators": "^7.1.6",
     "next": "^7.0.2",
+    "react": "^16.6.3",
     "rimraf": "^2.6.2"
   },
   "peerDependencies": {

src/index.js

@@ -1,3 +1,4 @@
+export {default as withMobx} from './with-mobx';
 import {isServer, mapToJson, jsonToMap} from './utils';
 
 const __NEXT_MOBX_STORE__ = new Map();

src/utils.js

@@ -1,5 +1,9 @@
 export const isServer = !process.browser;
 
+// getCounterStore=> counterStore
+export const getKeyNameStore = fnName =>
+  fnName.replace(/^get(.)/, (match, p1) => p1.toLowerCase());
+
 export const mapToJson = map => {
   try {
     return JSON.stringify([...map]);

src/with-mobx.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {getKeyNameStore} from './utils';
+
+export default (getStores = {}) => App => {
+  return class AppWithMobx extends React.Component {
+    static async getInitialProps(appContext) {
+      let appProps = {};
+
+      // Provide the store to getInitialProps of pages
+      appContext.ctx.store = {};
+      for (const fnName in getStores) {
+        const storeKeyName = getKeyNameStore(fnName);
+        appContext.ctx.store[storeKeyName] = getStores[fnName]();
+      }
+
+      if (typeof App.getInitialProps === 'function') {
+        appProps = await App.getInitialProps(appContext);
+      }
+
+      return {
+        ...appProps,
+        initialMobxState: appContext.ctx.store,
+      };
+    }
+
+    constructor(props) {
+      super(props);
+      this.store = {};
+
+      for (const fnName in getStores) {
+        const storeKeyName = getKeyNameStore(fnName);
+        this.store[storeKeyName] = getStores[fnName](
+          props.initialMobxState[storeKeyName],
+        );
+      }
+    }
+
+    render() {
+      const {initialMobxState, ...rest} = this.props;
+      return <App {...rest} store={{...this.store}} />;
+    }
+  };
+};

yarn.lock

@@ -2812,7 +2812,7 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-loose-envify@^1.0.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3563,7 +3563,7 @@ [email protected]:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-[email protected]:
+[email protected], prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -3678,6 +3678,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
   integrity sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==
 
+react@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.11.2"
+
 read-pkg@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
@@ -3882,6 +3892,14 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.2.tgz#a8db5399d06eba5abac51b705b7151d2319d33d3"
+  integrity sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"