feat: Add react and mobx integration

9 files changed, 217 insertions, 82 deletions

diff --git a/package.json b/package.json
index 64508db..cf271bd 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@typescript-eslint/parser": "^5.8.0",
     "cross-env": "7.0.3",
     "electron": "16.0.5",
-    "electron-builder": "22.14.5",
+    "electron-builder": "22.14.11",
     "eslint": "8.5.0",
     "rollup": "^2.61.1",
     "typescript": "4.5.4",
diff --git a/packages/main/package.json b/packages/main/package.json
index 22afafa..1f5e749 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@types/electron-devtools-installer": "^2.2.0",
-    "@types/node": "^16.11.17",
+    "@types/node": "^17.0.4",
     "electron-devtools-installer": "^3.2.0",
     "typescript": "^4.5.4",
     "vite": "^2.7.6"
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index ee627b4..ceec3a5 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -15,6 +15,7 @@
     "@mui/material": "^5.2.5",
     "@sophie/shared": "workspace:*",
     "mobx": "^6.3.10",
+    "mobx-react-lite": "^3.2.2",
     "mobx-state-tree": "^5.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx
new file mode 100644
index 0000000..51c39f7
--- /dev/null
+++ b/packages/renderer/src/components/StoreProvider.tsx
@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from 'react';
+
+import type { RootStore } from '../stores/RootStore';
+
+const StoreContext = createContext<RootStore | null>(null);
+
+export function useStore(): RootStore {
+  const store = useContext(StoreContext);
+  if (store === null) {
+    throw new Error('useStore can only be called inside of StoreProvider');
+  }
+  return store;
+}
+
+export function StoreProvider({ children, store }: {
+  children: JSX.Element | JSX.Element[],
+  store: RootStore,
+}): JSX.Element {
+  return (
+    <StoreContext.Provider value={store}>
+      {children}
+    </StoreContext.Provider>
+  );
+}
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..8be4f6a
--- /dev/null
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -0,0 +1,26 @@
+import { observer } from 'mobx-react-lite';
+import {
+  unstable_createMuiStrictModeTheme as createTheme,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
+import React from 'react';
+
+import { useStore } from './StoreProvider';
+
+export const ThemeProvider = observer(({ children }: {
+  children: JSX.Element | JSX.Element[],
+}): JSX.Element => {
+  const { shared: { shouldUseDarkColors } } = useStore();
+
+  const theme = createTheme({
+    palette: {
+      mode: shouldUseDarkColors ? 'dark' : 'light',
+    },
+  });
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      {children}
+    </MuiThemeProvider>
+  );
+});
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 37daaa6..34b21de 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -2,56 +2,49 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-import { applyPatch, applySnapshot } from 'mobx-state-tree';
+import { observer } from 'mobx-react-lite';
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
-import {
-  unstable_createMuiStrictModeTheme as createTheme,
-  ThemeProvider,
-} from '@mui/material/styles';
 import React from 'react';
 import { render } from 'react-dom';
-import { sharedStore } from '@sophie/shared';
 
+import { StoreProvider, useStore } from './components/StoreProvider';
+import { ThemeProvider } from './components/ThemeProvider';
 import { exposeToReduxDevtools } from './devTools';
+import { createAndConnectRootStore } from './stores/RootStore';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
-const store = sharedStore.create();
+const store = createAndConnectRootStore(window.sophieRenderer);
 
 if (isDevelopment) {
   exposeToReduxDevtools(store);
 }
 
-window.sophieRenderer.setSharedStoreListener({
-  onSnapshot(snapshot) {
-    applySnapshot(store, snapshot);
-  },
-  onPatch(patch) {
-    applyPatch(store, patch);
-  },
-});
+const Example = observer(() => {
+  const { shared: { clickCount } } = useStore();
 
-const theme = createTheme({
-  palette: {
-    mode: 'dark',
-  },
+  return (
+    <Button
+      variant="contained"
+      onClick={() => store.buttonClick()}
+    >
+      Hello Sophie! {clickCount}
+    </Button>
+  );
 });
 
-function App() {
+function Root(): JSX.Element {
   return (
     <React.StrictMode>
-      <ThemeProvider theme={theme}>
-        <CssBaseline enableColorScheme />
-        <Button
-          variant="contained"
-          onClick={window.sophieRenderer.buttonClick}
-        >
-          Hello Sophie!
-        </Button>
-      </ThemeProvider>
+      <StoreProvider store={store}>
+        <ThemeProvider>
+          <CssBaseline enableColorScheme />
+          <Example />
+        </ThemeProvider>
+      </StoreProvider>
     </React.StrictMode>
   );
 }
 
-render(<App />, document.querySelector('#app'));
+render(<Root />, document.querySelector('#app'));
diff --git a/packages/renderer/src/stores/RootStore.ts b/packages/renderer/src/stores/RootStore.ts
new file mode 100644
index 0000000..86efac6
--- /dev/null
+++ b/packages/renderer/src/stores/RootStore.ts
@@ -0,0 +1,61 @@
+import {
+  applySnapshot,
+  applyPatch,
+  getEnv as getAnyEnv,
+  IAnyStateTreeNode,
+  Instance,
+  types
+} from 'mobx-state-tree';
+import { sharedStore, SophieRenderer } from '@sophie/shared';
+
+export interface RootEnv {
+  ipc: SophieRenderer;
+}
+
+/**
+ * Gets a well-typed environment from `model`.
+ *
+ * Only useable inside state trees created by `createAndConnectRootStore`.
+ *
+ * @param model The state tree node.
+ */
+export function getEnv(model: IAnyStateTreeNode): RootEnv {
+  return getAnyEnv<RootEnv>(model);
+}
+
+export const rootStore = types.model('RootStore', {
+  shared: sharedStore,
+}).actions((self) => ({
+  buttonClick() {
+    getEnv(self).ipc.buttonClick();
+  },
+}));
+
+export interface RootStore extends Instance<typeof rootStore> {}
+
+/**
+ * Creates a new `RootStore` with a new environment and connects it to `ipc`.
+ *
+ * Changes to the `shared` store in the main process will be propagated to
+ * the newly created store via `ipc`.
+ *
+ * @param ipc The `sophieRenderer` context bridge.
+ */
+export function createAndConnectRootStore(ipc: SophieRenderer): RootStore {
+  const store = rootStore.create({
+    shared: {},
+  }, {
+    ipc,
+  });
+
+  ipc.setSharedStoreListener({
+    onSnapshot(snapshot) {
+      applySnapshot(store.shared, snapshot);
+    },
+    onPatch(patch) {
+      applyPatch(store.shared, patch);
+    },
+  });
+
+  return store;
+}
diff --git a/packages/shared/src/stores/SharedStore.ts b/packages/shared/src/stores/SharedStore.ts
index 8933bca..31504be 100644
--- a/packages/shared/src/stores/SharedStore.ts
+++ b/packages/shared/src/stores/SharedStore.ts
@@ -7,6 +7,7 @@ import {
 } from 'mobx-state-tree';
 
 export const sharedStore = types.model("SharedStore", {
+  shouldUseDarkColors: true,
   clickCount: 0
 });
 
diff --git a/yarn.lock b/yarn.lock
index d05bdbc..e7c4f74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -824,7 +824,7 @@ __metadata:
   dependencies:
     "@sophie/shared": "workspace:*"
     "@types/electron-devtools-installer": ^2.2.0
-    "@types/node": ^16.11.17
+    "@types/node": ^17.0.4
     electron: ^16.0.5
     electron-devtools-installer: ^3.2.0
     mobx: ^6.3.10
@@ -861,6 +861,7 @@ __metadata:
     "@types/react-dom": ^17.0.11
     "@vitejs/plugin-react": ^1.1.3
     mobx: ^6.3.10
+    mobx-react-lite: ^3.2.2
     mobx-state-tree: ^5.1.0
     mst-middlewares: ^5.1.0
     react: ^17.0.2
@@ -898,6 +899,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tootallnate/once@npm:2":
+  version: 2.0.0
+  resolution: "@tootallnate/once@npm:2.0.0"
+  checksum: ad87447820dd3f24825d2d947ebc03072b20a42bfc96cbafec16bff8bbda6c1a81fcb0be56d5b21968560c5359a0af4038a68ba150c3e1694fe4c109a063bed8
+  languageName: node
+  linkType: hard
+
 "@types/debug@npm:^4.1.6":
   version: 4.1.7
   resolution: "@types/debug@npm:4.1.7"
@@ -963,10 +971,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*":
-  version: 17.0.2
-  resolution: "@types/node@npm:17.0.2"
-  checksum: a827d2542ef7adba5c79ba7f85b7c2ba8256d317bd99d77ed7af237cfebae0034dff5c4182e1845e6fbef29ae4c78186c4b4a7dbf236037a04120783aa30ba74
+"@types/node@npm:*, @types/node@npm:^17.0.4":
+  version: 17.0.4
+  resolution: "@types/node@npm:17.0.4"
+  checksum: 92e6a25fea2314cd34e81962bd07c8b79b92cae04d84a0336a8c49a2b8aa4c34ff8cb428baeac2022daf597809bd3b7987c624b07a91c4d01b6230f82c293190
   languageName: node
   linkType: hard
 
@@ -977,13 +985,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^16.11.17":
-  version: 16.11.17
-  resolution: "@types/node@npm:16.11.17"
-  checksum: 86ed84f79450f6aba1a6ef09f8407c10076966c3cc7cc4eb3d35b8ae4f47817e525641396ef0a667fa0a88fcdf484f6182812c074601403083bdf3b5e1ac0313
-  languageName: node
-  linkType: hard
-
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/parse-json@npm:4.0.0"
@@ -1325,9 +1326,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"app-builder-lib@npm:22.14.5":
-  version: 22.14.5
-  resolution: "app-builder-lib@npm:22.14.5"
+"app-builder-lib@npm:22.14.11":
+  version: 22.14.11
+  resolution: "app-builder-lib@npm:22.14.11"
   dependencies:
     7zip-bin: ~5.1.1
     "@develar/schema-utils": ~2.6.5
@@ -1335,13 +1336,13 @@ __metadata:
     "@malept/flatpak-bundler": ^0.4.0
     async-exit-hook: ^2.0.1
     bluebird-lst: ^1.0.9
-    builder-util: 22.14.5
-    builder-util-runtime: 8.9.1
+    builder-util: 22.14.7
+    builder-util-runtime: 8.9.2
     chromium-pickle-js: ^0.2.0
     debug: ^4.3.2
     ejs: ^3.1.6
     electron-osx-sign: ^0.5.0
-    electron-publish: 22.14.5
+    electron-publish: 22.14.7
     form-data: ^4.0.0
     fs-extra: ^10.0.0
     hosted-git-info: ^4.0.2
@@ -1354,7 +1355,7 @@ __metadata:
     sanitize-filename: ^1.6.3
     semver: ^7.3.5
     temp-file: ^3.4.0
-  checksum: 50aaea3979970d59137e50d1a6da650801e5d4d6119a57a94355697fd90c4fc956b37758dbd6ba284aa2a829cf4c6c19a46514e4b0046cf9b644847866875714
+  checksum: 4afcf8107368e2e4268076ba2944f12018dc50c61fd7c8da71ccee5bb000db8fa8195bd8e44ed420f3aebefa177ebd0bc91edd6d3a4c296d0d3c2ba6b8162962
   languageName: node
   linkType: hard
 
@@ -1616,36 +1617,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"builder-util-runtime@npm:8.9.1":
-  version: 8.9.1
-  resolution: "builder-util-runtime@npm:8.9.1"
+"builder-util-runtime@npm:8.9.2":
+  version: 8.9.2
+  resolution: "builder-util-runtime@npm:8.9.2"
   dependencies:
     debug: ^4.3.2
     sax: ^1.2.4
-  checksum: c319a9bce54b08ac93ad34d5d6ac4c4d0400435f9bddee247a67f54e637a4fc1b262b9709c58fed861c7b05243f0c232b6a8c7c3b92863530d544e6e3c15e5ec
+  checksum: 35adcd6162e2ed16635ff7b7ecc353e400dcbbb3e7cd01823bfefc7256cefca8c820f62d15a0f7dbee1c7495a5f1fba4e0e238857a79b48d5f6bd35064f27208
   languageName: node
   linkType: hard
 
-"builder-util@npm:22.14.5":
-  version: 22.14.5
-  resolution: "builder-util@npm:22.14.5"
+"builder-util@npm:22.14.7":
+  version: 22.14.7
+  resolution: "builder-util@npm:22.14.7"
   dependencies:
     7zip-bin: ~5.1.1
     "@types/debug": ^4.1.6
     "@types/fs-extra": ^9.0.11
     app-builder-bin: 3.7.1
     bluebird-lst: ^1.0.9
-    builder-util-runtime: 8.9.1
+    builder-util-runtime: 8.9.2
     chalk: ^4.1.1
     cross-spawn: ^7.0.3
     debug: ^4.3.2
     fs-extra: ^10.0.0
+    http-proxy-agent: ^5.0.0
+    https-proxy-agent: ^5.0.0
     is-ci: ^3.0.0
     js-yaml: ^4.1.0
     source-map-support: ^0.5.19
     stat-mode: ^1.0.0
     temp-file: ^3.4.0
-  checksum: ead70484827ad8ccb67fc5be728759a8dee7bf14c120f4d4a8aa126b3850fa2de9301e00ec8310de2e918b8574650f2c261d7fc32a1b098378a99b08dfcbb738
+  checksum: 4f850a8d1bbf12823b6ca712aeaf99474a4799107b92f3aad64910935fe5b01ca1c6cc29e0c2344a03249ba88f654be3bd6775c2ef634977de44510dd36bb37d
   languageName: node
   linkType: hard
 
@@ -2148,13 +2151,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dmg-builder@npm:22.14.5":
-  version: 22.14.5
-  resolution: "dmg-builder@npm:22.14.5"
+"dmg-builder@npm:22.14.11":
+  version: 22.14.11
+  resolution: "dmg-builder@npm:22.14.11"
   dependencies:
-    app-builder-lib: 22.14.5
-    builder-util: 22.14.5
-    builder-util-runtime: 8.9.1
+    app-builder-lib: 22.14.11
+    builder-util: 22.14.7
+    builder-util-runtime: 8.9.2
     dmg-license: ^1.0.9
     fs-extra: ^10.0.0
     iconv-lite: ^0.6.2
@@ -2162,7 +2165,7 @@ __metadata:
   dependenciesMeta:
     dmg-license:
       optional: true
-  checksum: 8b707da83a59c800b45391c5e8097dc702c162a30e1a5a46b59a4f19b8080ec2901f99a789d76fd448fa859e746731de1136e8b297355673112a93fa2a367380
+  checksum: f00391010971d965b415d41a7e25865a573c2bf9f967ee5dd5c0053fe27f8c627ae6755751c6d8d0eeff1f1c9de0735976ba91a4b5ddc67f60663f7da21cb3eb
   languageName: node
   linkType: hard
 
@@ -2244,16 +2247,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-builder@npm:22.14.5":
-  version: 22.14.5
-  resolution: "electron-builder@npm:22.14.5"
+"electron-builder@npm:22.14.11":
+  version: 22.14.11
+  resolution: "electron-builder@npm:22.14.11"
   dependencies:
     "@types/yargs": ^17.0.1
-    app-builder-lib: 22.14.5
-    builder-util: 22.14.5
-    builder-util-runtime: 8.9.1
+    app-builder-lib: 22.14.11
+    builder-util: 22.14.7
+    builder-util-runtime: 8.9.2
     chalk: ^4.1.1
-    dmg-builder: 22.14.5
+    dmg-builder: 22.14.11
     fs-extra: ^10.0.0
     is-ci: ^3.0.0
     lazy-val: ^1.0.5
@@ -2263,7 +2266,7 @@ __metadata:
   bin:
     electron-builder: cli.js
     install-app-deps: install-app-deps.js
-  checksum: b33929c9676c34192012cd056cfb06950ee785adeb2c2f8f749e241bae9534c1c7461a4e8b594c764dbdc7cc381568d9812d936a2475684745e8cbb1300c4713
+  checksum: 8a5e3cf2a286186ca1703f7458c7253b3716d1e5f82edf404ba5b0479b2d1dc3845b48ab6d7733add879cb4a692ef48b9d8a0f67e0702711d3be7952f3281288
   languageName: node
   linkType: hard
 
@@ -2296,18 +2299,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-publish@npm:22.14.5":
-  version: 22.14.5
-  resolution: "electron-publish@npm:22.14.5"
+"electron-publish@npm:22.14.7":
+  version: 22.14.7
+  resolution: "electron-publish@npm:22.14.7"
   dependencies:
     "@types/fs-extra": ^9.0.11
-    builder-util: 22.14.5
-    builder-util-runtime: 8.9.1
+    builder-util: 22.14.7
+    builder-util-runtime: 8.9.2
     chalk: ^4.1.1
     fs-extra: ^10.0.0
     lazy-val: ^1.0.5
     mime: ^2.5.2
-  checksum: 8b7b47879d0f870eff4eb78085d24a9813e0b52783717299149d31d2d5cef77ff376604e536b0bea8c37acdf0ccc929fed3d78ad2837f4746d89e0d5484f5f33
+  checksum: a1584c23dc34e4c19f0a7418706715b0e39caf6516195cd6426bdbf432164a4af5993851b7c0a4eda72883ba0b24ab711483772fa85fc97b88de93d817c90f0c
   languageName: node
   linkType: hard
 
@@ -3240,6 +3243,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http-proxy-agent@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "http-proxy-agent@npm:5.0.0"
+  dependencies:
+    "@tootallnate/once": 2
+    agent-base: 6
+    debug: 4
+  checksum: e2ee1ff1656a131953839b2a19cd1f3a52d97c25ba87bd2559af6ae87114abf60971e498021f9b73f9fd78aea8876d1fb0d4656aac8a03c6caa9fc175f22b786
+  languageName: node
+  linkType: hard
+
 "https-proxy-agent@npm:^5.0.0":
   version: 5.0.0
   resolution: "https-proxy-agent@npm:5.0.0"
@@ -3966,6 +3980,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mobx-react-lite@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "mobx-react-lite@npm:3.2.2"
+  peerDependencies:
+    mobx: ^6.1.0
+    react: ^16.8.0 || ^17
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: f64957cb71e45f8bbce0429b90f15fef6e0ad06a38e1522cf887900a2869e157beb3438bf6c2621cfc6907ad891428726686d7b544988995745e9a9c8255ff95
+  languageName: node
+  linkType: hard
+
 "mobx-state-tree@npm:^5.1.0":
   version: 5.1.0
   resolution: "mobx-state-tree@npm:5.1.0"
@@ -4883,7 +4912,7 @@ __metadata:
     "@typescript-eslint/parser": ^5.8.0
     cross-env: 7.0.3
     electron: 16.0.5
-    electron-builder: 22.14.5
+    electron-builder: 22.14.11
     eslint: 8.5.0
     rollup: ^2.61.1
     typescript: 4.5.4