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.

3 files changed, 81 insertions, 8 deletions

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);