refactor: Less boilerplate around SophieRenderer

3 files changed, 21 insertions, 12 deletions

diff --git a/packages/renderer/src/devTools.ts b/packages/renderer/src/devTools.ts
index 44c87ae..7c44559 100644
--- a/packages/renderer/src/devTools.ts
+++ b/packages/renderer/src/devTools.ts
@@ -64,7 +64,9 @@ export function hotReloadServices(): void {
   import.meta.hot?.on(
     'sophie:reload-services',
     () => {
-      window.sophieRenderer.reloadAllServices();
+      window.sophieRenderer.dispatchAction({
+        action: 'reload-all-services',
+      });
     },
   );
 }
diff --git a/packages/renderer/src/stores/RendererEnv.ts b/packages/renderer/src/stores/RendererEnv.ts
index f2ec519..d687738 100644
--- a/packages/renderer/src/stores/RendererEnv.ts
+++ b/packages/renderer/src/stores/RendererEnv.ts
@@ -19,10 +19,10 @@
  */
 
 import { getEnv as getAnyEnv, IAnyStateTreeNode } from 'mobx-state-tree';
-import type { SophieRenderer } from '@sophie/shared';
+import type { Action } from '@sophie/shared';
 
 export interface RendererEnv {
-  ipc: Omit<SophieRenderer, 'setSharedStoreListener'>;
+  dispatchMainAction(action: Action): void;
 }
 
 /**
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index 001f23a..3de82ac 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -31,16 +31,22 @@ import {
   ThemeSource,
 } from '@sophie/shared';
 
-import { getEnv } from './RendererEnv';
+import { getEnv, RendererEnv } from './RendererEnv';
 
 export const rendererStore = types.model('RendererStore', {
   shared: types.optional(sharedStore, {}),
 }).actions((self) => ({
-  setBrowserViewBounds(bounds: BrowserViewBounds) {
-    getEnv(self).ipc.setBrowserViewBounds(bounds);
+  setBrowserViewBounds(browserViewBounds: BrowserViewBounds) {
+    getEnv(self).dispatchMainAction({
+      action: 'set-browser-view-bounds',
+      browserViewBounds,
+    });
   },
-  setThemeSource(mode: ThemeSource) {
-    getEnv(self).ipc.setThemeSource(mode);
+  setThemeSource(themeSource: ThemeSource) {
+    getEnv(self).dispatchMainAction({
+      action: 'set-theme-source',
+      themeSource,
+    });
   },
   toggleDarkMode() {
     if (self.shared.shouldUseDarkColors) {
@@ -62,11 +68,12 @@ export interface RendererStore extends Instance<typeof rendererStore> {}
  * @param ipc The `sophieRenderer` context bridge.
  */
 export function createAndConnectRendererStore(ipc: SophieRenderer): RendererStore {
-  const store = rendererStore.create({}, {
-    ipc,
-  });
+  const env: RendererEnv = {
+    dispatchMainAction: ipc.dispatchAction,
+  }
+  const store = rendererStore.create({}, env);
 
-  ipc.setSharedStoreListener({
+  ipc.onSharedStoreChange({
     onSnapshot(snapshot) {
       applySnapshot(store.shared, snapshot);
     },