Adds MobX / MobX React Lite (#75)

* feat: add mobx

* docs: fix typo

* docs: update README with mobx results

* refactor: rename mobx to mobx-react-lite for consistency with react binding names

---------

Co-authored-by: Eric Masiello <emasiello@vistaprint.com>

__tests__/all_spec.js

@@ -33,6 +33,7 @@ const names = [
   'react-rxjs',
   'simplux',
   'react-query',
+  'mobx-react-lite',
 ];
 
 names.forEach((name) => {

package.json

@@ -35,6 +35,7 @@
     "build:effector": "cross-env NAME=effector webpack",
     "build:react-rxjs": "cross-env NAME=react-rxjs webpack",
     "build:valtio": "cross-env NAME=valtio webpack",
+    "build:mobx-react-lite": "cross-env NAME=mobx-react-lite webpack",
     "build-all": "run-s build:*"
   },
   "keywords": [
@@ -53,6 +54,8 @@
     "effector-react": "^22.4.0",
     "graphql": "^16.6.0",
     "jotai": "^2.0.0",
+    "mobx": "^6.8.0",
+    "mobx-react-lite": "^3.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hooks-global-state": "^2.1.0",

src/common.js

@@ -67,6 +67,7 @@ export const createApp = (
   useDouble,
   Root = React.Fragment,
   componentWrapper = React.memo,
+  mainWrapper = (fn) => fn,
 ) => {
   const Counter = componentWrapper(() => {
     const count = useCount();
@@ -80,7 +81,7 @@ export const createApp = (
     return <div className="count">{count}</div>;
   });
 
-  const Main = () => {
+  const Main = mainWrapper(() => {
     const [isPending, startTransition] = useTransition();
     const [mode, setMode] = useState(null);
     const transitionHide = () => {
@@ -142,7 +143,7 @@ export const createApp = (
         <div id="mainCount" className="count">{mode === 'deferred' ? deferredCount : count}</div>
       </div>
     );
-  };
+  });
 
   const App = () => (
     <Root>

src/mobx-react-lite/index.js

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+
+import {
+  reducer,
+  initialState,
+  selectCount,
+  incrementAction,
+  doubleAction,
+  createApp,
+} from '../common';
+
+const state = observable(initialState);
+
+const useCount = () => selectCount(state);
+
+const useIncrement = () => useCallback(() => {
+  const newState = reducer(state, incrementAction);
+  runInAction(() => {
+    Object.keys(newState).forEach((key) => {
+      state[key] = newState[key];
+    });
+  });
+}, []);
+
+const useDouble = () => useCallback(() => {
+  const newState = reducer(state, doubleAction);
+  runInAction(() => {
+    Object.keys(newState).forEach((key) => {
+      state[key] = newState[key];
+    });
+  });
+}, []);
+
+export default createApp(useCount, useIncrement, useDouble, React.Fragment, observer, observer);

update_readme.js

@@ -19,6 +19,7 @@ const libraries = {
   'react-rxjs': '<a href="https://react-rxjs.org">react-rxjs</a>',
   simplux: '<a href="https://github.com/MrWolfZ/simplux">simplux</a>',
   'react-query': '<a href="https://react-query.tanstack.com/">react-query</a>',
+  'mobx-react-lite': '<a href="https://github.com/mobxjs/mobx-react-lite">mobx-react-lite</a>',
 };
 
 const numTests = 10;

yarn.lock

@@ -5204,6 +5204,16 @@ mkdirp@^0.5.6:
   dependencies:
     minimist "^1.2.6"
 
+mobx-react-lite@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz#d59156a96889cdadad751e5e4dab95f28926dfff"
+  integrity sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==
+
+mobx@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.8.0.tgz#59051755fdb5c8a9f3f2e0a9b6abaf86bab7f843"
+  integrity sha512-+o/DrHa4zykFMSKfS8Z+CPSEg5LW9tSNGTuN8o6MF1GKxlfkSHSeJn5UtgxvPkGgaouplnrLXCF+duAsmm6FHQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"