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/preload/package.json              |  4 +-
 packages/preload/src/SophieRendererImpl.ts | 74 ++++++++++++++++++++++++++++++
 packages/preload/src/index.ts              | 11 ++---
 3 files changed, 81 insertions(+), 8 deletions(-)
 create mode 100644 packages/preload/src/SophieRendererImpl.ts

(limited to 'packages/preload')

diff --git a/packages/preload/package.json b/packages/preload/package.json
index 5556c10..2ad215c 100644
--- a/packages/preload/package.json
+++ b/packages/preload/package.json
@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@sophie/shared": "workspace:*",
-    "electron": "^16.0.5"
+    "electron": "^16.0.5",
+    "mobx": "^6.3.10",
+    "mobx-state-tree": "^5.1.0"
   },
   "devDependencies": {
     "typescript": "^4.5.4",
diff --git a/packages/preload/src/SophieRendererImpl.ts b/packages/preload/src/SophieRendererImpl.ts
new file mode 100644
index 0000000..e03c89e
--- /dev/null
+++ b/packages/preload/src/SophieRendererImpl.ts
@@ -0,0 +1,74 @@
+import { ipcRenderer } from 'electron';
+import type { IJsonPatch } from 'mobx-state-tree';
+import {
+  MainToRendererIpcMessage,
+  RendererToMainIpcMessage,
+  sharedStore,
+  SharedStoreListener,
+  SharedStoreSnapshotIn,
+  SophieRenderer
+} from '@sophie/shared';
+
+export type MessageSender = (channel: RendererToMainIpcMessage, ...args: unknown[]) => void;
+
+export class SophieRendererImpl implements SophieRenderer {
+  readonly #send: MessageSender;
+
+  #listener: SharedStoreListener | null = null;
+
+  #snapshot: SharedStoreSnapshotIn | null = null;
+
+  constructor(send: MessageSender) {
+    this.#send = send;
+  }
+
+  sharedStoreSnapshotReceived(snapshot: unknown): void {
+    if (sharedStore.is(snapshot)) {
+      if (this.#listener === null) {
+        this.#snapshot = snapshot;
+      } else {
+        this.#listener.onSnapshot(snapshot);
+      }
+    } else {
+      console.error('Received invalid snapshot', snapshot);
+      this.#snapshot = null;
+    }
+  }
+
+  sharedStorePatchReceived(patch: unknown): void {
+    if (this.#listener !== null) {
+      // `mobx-state-tree` will validate the patch, so we can safely cast here.
+      this.#listener.onPatch(patch as IJsonPatch);
+    }
+  }
+
+  setSharedStoreListener(listener: SharedStoreListener): void {
+    this.#listener = listener;
+    if (this.#snapshot !== null) {
+      listener.onSnapshot(this.#snapshot);
+      this.#snapshot = null;
+    }
+    this.#send(RendererToMainIpcMessage.SharedStoreSnapshotRequest);
+  }
+
+  buttonClick(): void {
+    this.#send(RendererToMainIpcMessage.ButtonClick);
+  }
+}
+
+export function createSophieRenderer(): SophieRenderer {
+  const impl = new SophieRendererImpl(ipcRenderer.send);
+
+  ipcRenderer.on(MainToRendererIpcMessage.SharedStoreSnapshot, (_event, snapshot) => {
+    impl.sharedStoreSnapshotReceived(snapshot);
+  });
+
+  ipcRenderer.on(MainToRendererIpcMessage.SharedStorePatch, (_event, patch) => {
+    impl.sharedStorePatchReceived(patch);
+  });
+
+  return {
+    setSharedStoreListener: impl.setSharedStoreListener.bind(impl),
+    buttonClick: impl.buttonClick.bind(impl),
+  };
+}
diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
index 830901a..19d1285 100644
--- a/packages/preload/src/index.ts
+++ b/packages/preload/src/index.ts
@@ -1,10 +1,7 @@
-import { contextBridge, ipcRenderer } from 'electron';
-import { RendererIpcMessage, SophieRenderer } from '@sophie/shared';
+import { contextBridge } from 'electron';
 
-const sophieRenderer: SophieRenderer = {
-  buttonClicked() {
-    ipcRenderer.send(RendererIpcMessage.ButtonClicked);
-  }
-};
+import { createSophieRenderer } from './SophieRendererImpl';
+
+const sophieRenderer = createSophieRenderer();
 
 contextBridge.exposeInMainWorld('sophieRenderer', sophieRenderer);
-- 
cgit v1.2.3-54-g00ecf