From 950fb9be8061e2a26e0536b98c6a3ee230618f54 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Thu, 23 Dec 2021 13:40:47 +0100
Subject: 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.
---
 packages/renderer/src/devTools.ts | 37 +++++++++++++++++++++++++++++++++++++
 packages/renderer/src/index.tsx   | 23 ++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 packages/renderer/src/devTools.ts

(limited to 'packages/renderer/src')

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>
-- 
cgit v1.2.3-54-g00ecf