feat: Add shared package for electron ipc

16 files changed, 144 insertions, 9 deletions

diff --git a/packages/main/package.json b/packages/main/package.json
index 11a6270..63da432 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -5,9 +5,10 @@
   "main": "dist/index.cjs",
   "scripts": {
     "build": "vite build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc"
   },
   "dependencies": {
+    "@sophie/shared": "workspace:*",
     "electron": "^16.0.5"
   },
   "devDependencies": {
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index ef954e1..cd04276 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -1,5 +1,6 @@
 import { app, BrowserWindow } from 'electron';
 import { join } from 'path';
+import { RendererIpcMessage } from '@sophie/shared';
 import { URL } from 'url';
 
 const isSingleInstance = app.requestSingleInstanceLock();
@@ -49,9 +50,10 @@ function createWindow(): Promise<void> {
     }
   });
 
+  const { webContents } = mainWindow;
+
   // See https://github.com/MarshallOfSound/electron-devtools-installer/issues/195#issuecomment-998872878
   if (isDevelopment) {
-    const { webContents } = mainWindow;
     webContents.once('dom-ready', () => {
       webContents.once('devtools-opened', () => {
         mainWindow?.focus();
@@ -64,6 +66,17 @@ function createWindow(): Promise<void> {
     mainWindow?.show();
   });
 
+  webContents.on('ipc-message', (_event, channel, ...args) => {
+    switch (channel) {
+      case RendererIpcMessage.ButtonClicked:
+        console.log('Button clicked');
+        break;
+      default:
+        console.warn('Unknown IPC message:', channel, args);
+        break;
+    }
+  });
+
   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/tsconfig.json b/packages/main/tsconfig.json
index 1a569d2..970215c 100644
--- a/packages/main/tsconfig.json
+++ b/packages/main/tsconfig.json
@@ -1,11 +1,17 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "noEmit": true,
     "types": [
       "node",
       "vite/client"
     ]
   },
+  "references": [
+    {
+      "path": "../shared"
+    }
+  ],
   "include": [
     "src/**/*.ts",
     "types/**/*.d.ts"
diff --git a/packages/preload/package.json b/packages/preload/package.json
index 5417ec0..5556c10 100644
--- a/packages/preload/package.json
+++ b/packages/preload/package.json
@@ -2,12 +2,14 @@
   "name": "@sophie/preload",
   "version": "0.1.0",
   "private": true,
+  "sideEffects": false,
   "main": "dist/index.cjs",
   "scripts": {
     "build": "vite build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc"
   },
   "dependencies": {
+    "@sophie/shared": "workspace:*",
     "electron": "^16.0.5"
   },
   "devDependencies": {
diff --git a/packages/preload/src/index.ts b/packages/preload/src/index.ts
index 7d5eff5..830901a 100644
--- a/packages/preload/src/index.ts
+++ b/packages/preload/src/index.ts
@@ -1,4 +1,10 @@
-import { contextBridge } from 'electron';
+import { contextBridge, ipcRenderer } from 'electron';
+import { RendererIpcMessage, SophieRenderer } from '@sophie/shared';
 
-contextBridge.exposeInMainWorld('sophieRenderer', {
-});
+const sophieRenderer: SophieRenderer = {
+  buttonClicked() {
+    ipcRenderer.send(RendererIpcMessage.ButtonClicked);
+  }
+};
+
+contextBridge.exposeInMainWorld('sophieRenderer', sophieRenderer);
diff --git a/packages/preload/tsconfig.json b/packages/preload/tsconfig.json
index 6bb6145..8bfa0ec 100644
--- a/packages/preload/tsconfig.json
+++ b/packages/preload/tsconfig.json
@@ -1,5 +1,13 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "references": [
+    {
+      "path": "../shared"
+    }
+  ],
   "include": [
     "src/**/*.ts"
   ]
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index b18b2fe..559e668 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -5,7 +5,7 @@
   "main": "dist/index.html",
   "scripts": {
     "build": "vite build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
@@ -13,6 +13,7 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.2.5",
+    "@sophie/shared": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 67bdf93..452448c 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -22,7 +22,10 @@ function App() {
     <React.StrictMode>
       <ThemeProvider theme={theme}>
         <CssBaseline enableColorScheme />
-        <Button variant="contained">
+        <Button
+          variant="contained"
+          onClick={window.sophieRenderer.buttonClicked}
+        >
           Hello Sophie!
         </Button>
       </ThemeProvider>
diff --git a/packages/renderer/tsconfig.json b/packages/renderer/tsconfig.json
index 4a80025..668356c 100644
--- a/packages/renderer/tsconfig.json
+++ b/packages/renderer/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "noEmit": true,
     "jsx": "react",
     "lib": [
       "dom",
@@ -8,8 +9,14 @@
       "esnext"
     ]
   },
+  "references": [
+    {
+      "path": "../shared"
+    }
+  ],
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*.tsx",
+    "types/**/*.d.ts"
   ]
 }
diff --git a/packages/renderer/types/sophieRenderer.d.ts b/packages/renderer/types/sophieRenderer.d.ts
new file mode 100644
index 0000000..b5b5da1
--- /dev/null
+++ b/packages/renderer/types/sophieRenderer.d.ts
@@ -0,0 +1,7 @@
+import type { SophieRenderer } from '@sophie/shared';
+
+declare global {
+  interface Window {
+    readonly sophieRenderer: SophieRenderer;
+  }
+}
diff --git a/packages/shared/package.json b/packages/shared/package.json
new file mode 100644
index 0000000..ccde705
--- /dev/null
+++ b/packages/shared/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@sophie/shared",
+  "version": "0.1.0",
+  "private": true,
+  "main": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^4.5.4",
+    "vite": "^2.7.6"
+  }
+}
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
new file mode 100644
index 0000000..91a0a3c
--- /dev/null
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -0,0 +1,3 @@
+export interface SophieRenderer {
+  buttonClicked(): void;
+}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
new file mode 100644
index 0000000..f95675d
--- /dev/null
+++ b/packages/shared/src/index.ts
@@ -0,0 +1,3 @@
+export type { SophieRenderer } from './contextBridge/SophieRenderer';
+
+export { RendererIpcMessage } from './ipc/RendererIpcMessage';
diff --git a/packages/shared/src/ipc/RendererIpcMessage.ts b/packages/shared/src/ipc/RendererIpcMessage.ts
new file mode 100644
index 0000000..cfb87ae
--- /dev/null
+++ b/packages/shared/src/ipc/RendererIpcMessage.ts
@@ -0,0 +1,3 @@
+export enum RendererIpcMessage {
+  ButtonClicked = "button-clicked"
+}
diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json
new file mode 100644
index 0000000..d441cc8
--- /dev/null
+++ b/packages/shared/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "emitDeclarationOnly": true,
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}
diff --git a/packages/shared/vite.config.js b/packages/shared/vite.config.js
new file mode 100644
index 0000000..cbebb8a
--- /dev/null
+++ b/packages/shared/vite.config.js
@@ -0,0 +1,44 @@
+// @ts-check
+
+import { builtinModules } from 'module';
+
+// `resolveJsonModule` is disabled for this package, but vite will load the json nevertheless.
+// @ts-expect-error
+import { chrome, node } from '../../.electron-vendors.cache.json';
+
+/** @type string */
+const PACKAGE_ROOT = __dirname;
+
+/**
+ * @type {import('vite').UserConfig}
+ * @see https://vitejs.dev/config/
+ */
+const config = {
+  mode: process.env.MODE,
+  root: PACKAGE_ROOT,
+  envDir: process.cwd(),
+  build: {
+    sourcemap: 'inline',
+    target: [
+      `chrome${chrome}`,
+      `node${node}`
+    ],
+    outDir: 'dist',
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['cjs'],
+    },
+    rollupOptions: {
+      external: [
+        ...builtinModules,
+      ],
+      output: {
+        entryFileNames: '[name].cjs',
+      },
+    },
+    emptyOutDir: false, // Do not remove `.d.ts` files.
+    brotliSize: false,
+  },
+};
+
+export default config;