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.

1 files changed, 49 insertions, 0 deletions

diff --git a/packages/main/src/devTools.ts b/packages/main/src/devTools.ts
new file mode 100644
index 0000000..d02bfbf
--- /dev/null
+++ b/packages/main/src/devTools.ts
@@ -0,0 +1,49 @@
+import type { App, BrowserWindow } from 'electron';
+
+/**
+ * Installs the react and redux developer tools extensions.
+ *
+ * We use the redux devtools and connect the mobx store to it with `mst-middlewares`,
+ * because the mobx-state-tree devtools are currently unmaintained.
+ *
+ * @param app The electron application instance.
+ */
+export function installDevToolsExtensions(app: App): void {
+  app.whenReady().then(async () => {
+    const {
+      default: installExtension,
+      REACT_DEVELOPER_TOOLS,
+      REDUX_DEVTOOLS,
+    } = await import('electron-devtools-installer');
+    installExtension(
+      [
+        REACT_DEVELOPER_TOOLS,
+        REDUX_DEVTOOLS,
+      ],
+      {
+        forceDownload: false,
+        loadExtensionOptions: {
+          allowFileAccess: true,
+        },
+      },
+    );
+  }).catch((err) => {
+    console.error('Failed to install devtools extension', err);
+  });
+}
+
+/**
+ * Opens the developer tools while applying a workaround to enable the redux devtools.
+ *
+ * @param browserWindow The browser window to open the devtools in.
+ * @see https://github.com/MarshallOfSound/electron-devtools-installer/issues/195#issuecomment-998872878
+ */
+export function openDevToolsWhenReady(browserWindow: BrowserWindow): void {
+  const { webContents } = browserWindow;
+  webContents.once('dom-ready', () => {
+    webContents.once('devtools-opened', () => {
+      browserWindow?.focus();
+    });
+    webContents.openDevTools();
+  });
+}