Use preload script and context bridge

electron.vite.config.ts

@@ -1,70 +1,81 @@
 import preact from "@preact/preset-vite";
 import { defineConfig } from "electron-vite";
 import * as path from "node:path";
-import electronRenderer from "vite-plugin-electron-renderer";
 import purgeCss from "vite-plugin-purgecss";
 
 export default defineConfig(({ mode }) => {
     // electron 37 uses node 22 and chromium 138
     const nodeTarget = "node22";
     const chromeTarget = "chrome138";
-    const isProduction = mode === "production";
+    const entryFileNames = "[name].js";
+    const assetFileNames = "assets/[name][extname]";
+    const minify = mode === "production";
+    const outDir = path.join(__dirname, "out");
+    const sourcemap = true;
+    const emptyOutDir = false;
 
     return {
         main: {
             build: {
-                outDir: path.join(__dirname, "out"),
                 target: nodeTarget,
-                sourcemap: true,
-                minify: isProduction,
-                emptyOutDir: true,
+                outDir: outDir,
+                minify,
+                sourcemap,
+                emptyOutDir,
 
                 rollupOptions: {
                     input: path.join(__dirname, "src/main.ts"),
                     // The clipboard events doesn't work if we roll them up in the same bundle
                     external: ["clipboard-event"],
                     output: {
-                        entryFileNames: "[name].js",
-                        assetFileNames: "assets/[name][extname]",
+                        entryFileNames,
+                        assetFileNames,
                     },
                 },
             },
         },
 
-        // preload: {
-        //     build: {
-        //         target: nodeTarget,
-        //     },
-        // },
+        preload: {
+            build: {
+                target: nodeTarget,
+                outDir,
+                minify,
+                sourcemap,
+                emptyOutDir,
+
+                rollupOptions: {
+                    input: path.join(__dirname, "src/preload.ts"),
+                    output: {
+                        entryFileNames,
+                        assetFileNames,
+                    },
+                },
+            },
+        },
 
         renderer: {
             base: "./",
             root: path.join(__dirname, "src/renderer"),
 
             build: {
-                outDir: path.join(__dirname, "out"),
                 target: chromeTarget,
-                sourcemap: true,
-                minify: isProduction,
-                emptyOutDir: false,
+                outDir,
+                minify,
+                sourcemap,
+                emptyOutDir,
                 // Always emit separate files
                 assetsInlineLimit: 0,
 
                 rollupOptions: {
                     input: path.join(__dirname, "src/renderer/index.html"),
-
                     output: {
-                        entryFileNames: "[name].js",
-                        assetFileNames: "assets/[name][extname]",
+                        entryFileNames,
+                        assetFileNames,
                     },
                 },
             },
 
-            plugins: [preact(), { ...purgeCss({}), enforce: "post" }, electronRenderer()],
-
-            optimizeDeps: {
-                exclude: ["electron"],
-            },
+            plugins: [preact(), { ...purgeCss({}), enforce: "post" }],
         },
     };
 });

eslint.config.ts

@@ -1,14 +1,23 @@
 import eslintJs from "@eslint/js";
 import eslintPrettier from "eslint-config-prettier/flat";
+import importPlugin from "eslint-plugin-import";
 import reactPlugin from "eslint-plugin-react";
+import path from "node:path";
 import eslintTs from "typescript-eslint";
 
+const SRC = path.resolve("src");
+const RENDERER = path.join(SRC, "renderer");
+const COMMON = path.join(SRC, "common");
+const TYPES = path.join(SRC, "types");
+const NODE_MODULES = path.resolve("node_modules");
+
 export default eslintTs.config(
     eslintJs.configs.recommended,
     eslintTs.configs.recommendedTypeChecked,
     reactPlugin.configs.flat.recommended,
     reactPlugin.configs.flat["jsx-runtime"],
     eslintPrettier,
+
     {
         languageOptions: {
             parser: eslintTs.parser,
@@ -22,10 +31,22 @@ export default eslintTs.config(
             },
         },
 
+        plugins: {
+            import: importPlugin,
+        },
+
         settings: {
             react: {
                 version: "detect",
             },
+            "import/resolver": {
+                typescript: {
+                    project: ["tsconfig.json", "src/renderer/tsconfig.json"],
+                    noWarnOnMultipleProjects: true,
+                    // Always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+                    alwaysTryTypes: true,
+                },
+            },
         },
 
         rules: {
@@ -55,6 +76,42 @@ export default eslintTs.config(
             ],
         },
     },
+
+    {
+        files: ["src/renderer/**/*"],
+        languageOptions: {
+            parserOptions: {
+                // Needed for ESLint to use the correct tsconfig
+                project: ["./src/renderer/tsconfig.json"],
+            },
+        },
+    },
+
+    {
+        files: ["src/{types,common,renderer}/**/*"],
+        rules: {
+            "import/no-nodejs-modules": "error",
+            "@typescript-eslint/no-restricted-imports": ["error", "electron"],
+
+            // Boundaries:
+            //  - types → only src/types (and not node_modules)
+            //  - common → only src/common + src/types (and not node_modules)
+            //  - renderer → only src/renderer + src/common + src/types
+            "import/no-restricted-paths": [
+                "error",
+                {
+                    zones: [
+                        { target: TYPES, from: SRC, except: [TYPES] },
+                        { target: TYPES, from: NODE_MODULES },
+                        { target: COMMON, from: SRC, except: [COMMON, TYPES] },
+                        { target: COMMON, from: NODE_MODULES },
+                        { target: RENDERER, from: SRC, except: [RENDERER, TYPES, COMMON] },
+                    ],
+                },
+            ],
+        },
+    },
+
     {
         files: ["eslint.config.ts", "electron.vite.config.ts", "scripts/**/*", "src/typings/**/*"],
         extends: [eslintTs.configs.disableTypeChecked],