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,
       ],
     },