Add mobx-react-lite (codesandbox#1956)

Author: MichaelDeBoey

packages/app/package.json

@@ -200,6 +200,7 @@
     "memoize-one": "^4.0.0",
     "mobx": "^4.0.0",
     "mobx-react": "^5.2.3",
+    "mobx-react-lite": "^1.3.2",
     "mobx-state-tree": "^3.3.0",
     "moment": "^2.18.1",
     "monaco-editor-textmate": "^2.0.0",

packages/app/src/app/index.js

@@ -11,6 +11,7 @@ import {
 } from '@codesandbox/common/lib/utils/analytics';
 import '@codesandbox/common/lib/global.css';
 
+import { Signals, Store } from 'app/store';
 import history from 'app/utils/history';
 import { client } from 'app/graphql/client';
 import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker';
@@ -119,16 +120,21 @@ function boot() {
     });
 
     try {
+      const { signals, store } = controller.provide();
       render(
-        <Provider {...controller.provide()}>
-          <ApolloProvider client={client}>
-            <ThemeProvider theme={theme}>
-              <Router history={history}>
-                <App />
-              </Router>
-            </ThemeProvider>
-          </ApolloProvider>
-        </Provider>,
+        <Signals.Provider value={signals}>
+          <Store.Provider value={store}>
+            <Provider {...{ signals, store }}>
+              <ApolloProvider client={client}>
+                <ThemeProvider theme={theme}>
+                  <Router history={history}>
+                    <App />
+                  </Router>
+                </ThemeProvider>
+              </ApolloProvider>
+            </Provider>
+          </Store.Provider>
+        </Signals.Provider>,
         rootEl
       );
     } catch (e) {

packages/app/src/app/store/index.js

@@ -1,5 +1,6 @@
-import { Module } from 'cerebral';
 import HttpProvider from '@cerebral/http';
+import { Module } from 'cerebral';
+import { createContext, useContext } from 'react';
 
 import model from './model';
 import ApiProvider from './providers/Api';
@@ -39,6 +40,12 @@ import live from './modules/live';
 import dashboard from './modules/dashboard';
 import userNotifications from './modules/user-notifications';
 
+export const Signals = createContext();
+export const Store = createContext();
+
+export const useSignals = () => useContext(Signals);
+export const useStore = () => useContext(Store);
+
 export default Module({
   model,
   state: {

yarn.lock

@@ -16740,6 +16740,11 @@ [email protected], [email protected], [email protected], "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdir
   dependencies:
     minimist "0.0.8"
 
+mobx-react-lite@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-1.3.2.tgz#4366048b5d283d12a82053367638b5d79281951f"
+  integrity sha512-D8VZEsxSxMNYDJmw2SgUXVAgpOlVYmp3hBCusoe+LuBDYUqyn2K3RPrMEF0rIzYJAvqpyv7YRrH8I3eBsPPx1A==
+
 mobx-react@^5.2.3:
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.4.3.tgz#6709b7dd89670c40e9815914ac2ca49cc02bfb47"