From 950fb9be8061e2a26e0536b98c6a3ee230618f54 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy 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/main/package.json | 6 ++-- packages/main/src/devTools.ts | 49 ++++++++++++++++++++++++++ packages/main/src/index.ts | 66 +++++++++++++++++------------------ packages/main/src/stores/RootStore.ts | 12 +++++++ 4 files changed, 97 insertions(+), 36 deletions(-) create mode 100644 packages/main/src/devTools.ts create mode 100644 packages/main/src/stores/RootStore.ts (limited to 'packages/main') diff --git a/packages/main/package.json b/packages/main/package.json index 63da432..22afafa 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -9,11 +9,13 @@ }, "dependencies": { "@sophie/shared": "workspace:*", - "electron": "^16.0.5" + "electron": "^16.0.5", + "mobx": "^6.3.10", + "mobx-state-tree": "^5.1.0" }, "devDependencies": { "@types/electron-devtools-installer": "^2.2.0", - "@types/node": "^16.11.15", + "@types/node": "^16.11.17", "electron-devtools-installer": "^3.2.0", "typescript": "^4.5.4", "vite": "^2.7.6" 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(); + }); +} diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index cd04276..dbe6890 100644 --- a/packages/main/src/index.ts +++ b/packages/main/src/index.ts @@ -1,8 +1,18 @@ import { app, BrowserWindow } from 'electron'; +import { getSnapshot, onPatch } from 'mobx-state-tree'; import { join } from 'path'; -import { RendererIpcMessage } from '@sophie/shared'; +import { + MainToRendererIpcMessage, + RendererToMainIpcMessage, +} from '@sophie/shared'; import { URL } from 'url'; +import { + installDevToolsExtensions, + openDevToolsWhenReady, +} from './devTools'; +import { rootStore } from './stores/RootStore'; + const isSingleInstance = app.requestSingleInstanceLock(); const isDevelopment = import.meta.env.MODE === 'development'; @@ -14,62 +24,46 @@ if (!isSingleInstance) { app.enableSandbox(); if (isDevelopment) { - app.whenReady().then(async () => { - const { - default: installExtension, - MOBX_DEVTOOLS, - REACT_DEVELOPER_TOOLS, - } = await import('electron-devtools-installer'); - installExtension( - [ - MOBX_DEVTOOLS, - REACT_DEVELOPER_TOOLS, - ], - { - forceDownload: false, - loadExtensionOptions: { - allowFileAccess: true, - }, - }, - ); - }).catch((err) => { - console.error('Failed to install devtools extension', err); - }); + installDevToolsExtensions(app); } let mainWindow: BrowserWindow | null = null; +const store = rootStore.create({ + shared: { + clickCount: 1, + }, +}); + function createWindow(): Promise { mainWindow = new BrowserWindow({ show: false, + autoHideMenuBar: true, webPreferences: { nativeWindowOpen: true, webviewTag: false, sandbox: true, preload: join(__dirname, '../../preload/dist/index.cjs'), - } + }, }); - const { webContents } = mainWindow; - - // See https://github.com/MarshallOfSound/electron-devtools-installer/issues/195#issuecomment-998872878 if (isDevelopment) { - webContents.once('dom-ready', () => { - webContents.once('devtools-opened', () => { - mainWindow?.focus(); - }); - webContents.openDevTools(); - }); + openDevToolsWhenReady(mainWindow); } mainWindow.on('ready-to-show', () => { mainWindow?.show(); }); + const { webContents } = mainWindow; + webContents.on('ipc-message', (_event, channel, ...args) => { switch (channel) { - case RendererIpcMessage.ButtonClicked: - console.log('Button clicked'); + case RendererToMainIpcMessage.SharedStoreSnapshotRequest: + webContents.send(MainToRendererIpcMessage.SharedStoreSnapshot, getSnapshot(store.shared)); + break; + case RendererToMainIpcMessage.ButtonClick: + store.buttonClick(); break; default: console.warn('Unknown IPC message:', channel, args); @@ -77,6 +71,10 @@ function createWindow(): Promise { } }); + onPatch(store.shared, (patch) => { + webContents.send(MainToRendererIpcMessage.SharedStorePatch, patch); + }); + const pageUrl = (isDevelopment && import.meta.env.VITE_DEV_SERVER_URL !== undefined) ? import.meta.env.VITE_DEV_SERVER_URL : new URL('../renderer/dist/index.html', `file://${__dirname}`).toString(); diff --git a/packages/main/src/stores/RootStore.ts b/packages/main/src/stores/RootStore.ts new file mode 100644 index 0000000..a9c1290 --- /dev/null +++ b/packages/main/src/stores/RootStore.ts @@ -0,0 +1,12 @@ +import { Instance, types } from 'mobx-state-tree'; +import { sharedStore } from '@sophie/shared'; + +export const rootStore = types.model('RootStore', { + shared: sharedStore, +}).actions((self) => ({ + buttonClick() { + self.shared.clickCount += 1; + }, +})); + +export interface RootStore extends Instance {} -- cgit v1.2.3-70-g09d2