feat: Main to renderer store synchronization

Patches are send in one direction only, from the main to the renderer,
so all actions have to go through the context bridge and the renderer
IPC to modify the store in the renderer. This makes the store in the
main process a single source of truth, which simplifies debugging and
state persistence.

The store in the renderer is connected to redux devtools for inspection,
but playing back the state in the devtools won't change the sotre in
main process.

5 files changed, 69 insertions, 3 deletions

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 559e668..ee627b4 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -14,13 +14,17 @@
     "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.2.5",
     "@sophie/shared": "workspace:*",
+    "mobx": "^6.3.10",
+    "mobx-state-tree": "^5.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/react": "^17.0.37",
+    "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@vitejs/plugin-react": "^1.1.3",
+    "mst-middlewares": "^5.1.0",
+    "remotedev": "^0.2.9",
     "typescript": "^4.5.4",
     "vite": "^2.7.6"
   }
diff --git a/packages/renderer/src/devTools.ts b/packages/renderer/src/devTools.ts
new file mode 100644
index 0000000..5930c48
--- /dev/null
+++ b/packages/renderer/src/devTools.ts
@@ -0,0 +1,37 @@
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
+
+/**
+ * Connects the `model` to the redux devtools extension after loading the required
+ * dependencies asynchronously.
+ *
+ * We have to apply a workaround to load `remotedev` by shimming the `global` object,
+ * because `remotedev` uses an old version of `socketcluster-client` that refers to
+ * `global` instead of `globalThis`.
+ *
+ * Due to the old dependencies, this function is not safe to call in production.
+ * However, we don't bundle `remotedev` in production, so the call would fail anyways.
+ *
+ * @param model The store to connect to the redux devtools.
+ * @see https://github.com/SocketCluster/socketcluster-client/issues/118#issuecomment-469064682
+ */
+async function exposeToReduxDevtoolsAsync(model: IAnyStateTreeNode): Promise<void> {
+  (window as { global?: unknown }).global = window;
+
+  const [remotedev, { connectReduxDevtools }] = await Promise.all([
+    // @ts-ignore
+    import('remotedev'),
+    import('mst-middlewares'),
+  ]);
+  connectReduxDevtools(remotedev, model);
+}
+
+/**
+ * Connects the `model` to the redux devtools extension.
+ *
+ * @param model The store to connect to the redux devtools.
+ */
+export function exposeToReduxDevtools(model: IAnyStateTreeNode): void {
+  exposeToReduxDevtoolsAsync(model).catch((err) => {
+    console.error('Could not connect to Redux devtools', err);
+  });
+}
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 452448c..37daaa6 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -2,6 +2,7 @@ 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 Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
 import {
@@ -10,6 +11,26 @@ import {
 } from '@mui/material/styles';
 import React from 'react';
 import { render } from 'react-dom';
+import { sharedStore } from '@sophie/shared';
+
+import { exposeToReduxDevtools } from './devTools';
+
+const isDevelopment = import.meta.env.MODE === 'development';
+
+const store = sharedStore.create();
+
+if (isDevelopment) {
+  exposeToReduxDevtools(store);
+}
+
+window.sophieRenderer.setSharedStoreListener({
+  onSnapshot(snapshot) {
+    applySnapshot(store, snapshot);
+  },
+  onPatch(patch) {
+    applyPatch(store, patch);
+  },
+});
 
 const theme = createTheme({
   palette: {
@@ -24,7 +45,7 @@ function App() {
         <CssBaseline enableColorScheme />
         <Button
           variant="contained"
-          onClick={window.sophieRenderer.buttonClicked}
+          onClick={window.sophieRenderer.buttonClick}
         >
           Hello Sophie!
         </Button>
diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json
index 668356c..8746462 100644
--- a/packages/renderer/tsconfig.json
+++ b/packages/renderer/tsconfig.json
@@ -7,6 +7,9 @@
       "dom",
       "dom.iterable",
       "esnext"
+    ],
+    "types": [
+      "vite/client"
     ]
   },
   "references": [
diff --git a/packages/renderer/vite.config.js b/packages/renderer/vite.config.js
index ff34b6d..87c2d0c 100644
--- a/packages/renderer/vite.config.js
+++ b/packages/renderer/vite.config.js
@@ -3,7 +3,6 @@
 /* eslint-env node */
 
 import { builtinModules } from 'module';
-import { join } from 'path';
 import react from '@vitejs/plugin-react';
 
 // `resolveJsonModule` is disabled for this package, but vite will load the json nevertheless.
@@ -36,6 +35,8 @@ const config = {
     assetsDir: '.',
     rollupOptions: {
       external: [
+        'mst-middlewares',
+        'remotedev',
         ...builtinModules,
       ],
     },