Implement MobX

__tests__/all_spec.js

@@ -17,6 +17,7 @@ const names = [
   // 'react-state',
   'react-redux',
   'zustand',
+  'mobx',
   'react-tracked',
   'constate',
   'react-hooks-global-state',

package.json

@@ -17,6 +17,7 @@
     "dev-server": "webpack serve --mode=development",
     "http-server": "http-server dist",
     "build:react-redux": "cross-env NAME=react-redux webpack",
+    "build:mobx": "cross-env NAME=mobx webpack",
     "build:react-tracked": "cross-env NAME=react-tracked webpack",
     "build:constate": "cross-env NAME=constate webpack",
     "build:zustand": "cross-env NAME=zustand webpack",
@@ -52,6 +53,8 @@
     "effector-react": "^22.0.6",
     "graphql": "^16.3.0",
     "jotai": "^1.5.3",
+    "mobx": "^6.4.1",
+    "mobx-react": "^7.3.0",
     "react": "18.0.0-rc.0-next-2ed58eb88-20220126",
     "react-dom": "18.0.0-rc.0-next-2ed58eb88-20220126",
     "react-hooks-global-state": "^1.0.2",

src/common.js

@@ -80,7 +80,7 @@ export const createApp = (
     return <div className="count">{count}</div>;
   });
 
-  const Main = () => {
+  const Main = componentWrapper(() => {
     const [isPending, startTransition] = useTransition();
     const [mode, setMode] = useState(null);
     const transitionHide = () => {
@@ -142,7 +142,7 @@ export const createApp = (
         <div id="mainCount" className="count">{mode === 'deferred' ? deferredCount : count}</div>
       </div>
     );
-  };
+  });
 
   const App = () => (
     <Root>

src/index.js

@@ -18,7 +18,11 @@ document.title = name;
 
 // concurrent mode
 const root = ReactDOM.createRoot(document.getElementById('app'));
-root.render(<App />);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
 
 // sync mode
 // ReactDOM.render(<App />, document.getElementById('app'));

src/mobx/index.js

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useCallback } from 'react';
+import * as mobx from 'mobx';
+import * as mobxReact from 'mobx-react';
+
+import {
+  createApp,
+} from '../common';
+
+const createStore = () => mobx.observable({ count: 0 });
+
+const StateCtx = createContext();
+
+const useCount = () => useContext(StateCtx).count;
+
+const useIncrement = () => {
+  const store = useContext(StateCtx);
+
+  return useCallback(() => {
+    mobx.runInAction(() => {
+      store.count += 1;
+    });
+  }, [store]);
+};
+
+const useDouble = () => {
+  const store = useContext(StateCtx);
+
+  return useCallback(() => {
+    mobx.runInAction(() => {
+      store.count *= 2;
+    });
+  }, [store]);
+};
+
+const Root = ({ children }) => {
+  const [state] = React.useState(() => createStore());
+  return (
+    <StateCtx.Provider value={state}>{children}</StateCtx.Provider>
+  );
+};
+
+export default createApp(
+  useCount,
+  useIncrement,
+  useDouble,
+  Root,
+  mobxReact.observer,
+);

update_readme.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 
 const libraries = {
   'react-redux': '<a href="https://react-redux.js.org">react-redux</a>',
+  mobx: '<a href="https://github.com/mobxjs/mobx">mobx</a>',
   zustand: '<a href="https://github.com/pmndrs/zustand">zustand</a>',
   'react-tracked': '<a href="https://react-tracked.js.org">react-tracked</a>',
   constate: '<a href="https://github.com/diegohaz/constate">constate</a>',

yarn.lock

@@ -5126,6 +5126,23 @@ mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.5"
 
+mobx-react-lite@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.3.0.tgz#7174e807201943beff6f9d3701492314c9fc0db3"
+  integrity sha512-U/kMSFtV/bNVgY01FuiGWpRkaQVHozBq5CEBZltFvPt4FcV111hEWkgwqVg9GPPZSEuEdV438PEz8mk8mKpYlA==
+
+mobx-react@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.3.0.tgz#a17dedb71b75dad2337e3f95eb753179f6cfe732"
+  integrity sha512-RGEcwZokopqyJE5JPwXKB9FWMSqFM9NJVO2QPI+z6laJTJeBHqvPicjnKgY5mvihxTeXB1+72TnooqUePeGV1g==
+  dependencies:
+    mobx-react-lite "^3.3.0"
+
+mobx@^6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.4.1.tgz#c1d0eeb37ceb31bb2020a85f6bf856782d47fe60"
+  integrity sha512-NFXx0uMbGBgsa0uxhH099L8cMuoRQWh01q6Sf0ZX/3hFU7svJ7yfTD+1LnLMa5wzY/b7gImAeMsR1p0wordDnA==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"