refactor: upgrade to ESM and secure IPC communication

- Upgrade to ESM module system with type: module
- Regenerate Electron Forge scaffolding for better ESM compatibility
- Convert Vite configs from .mjs to .ts for better type safety
- Implement secure IPC communication using contextBridge
- Add automatic type inference for API interfaces
- Fix ESLint configuration to ignore build files
- Add @types/electron-squirrel-startup for proper typing
- Restructure main process files for better organization
- Update all renderer components to use new secure API

All linting and type checks pass ✅

Author: pd4d10

.yarnrc.yml

@@ -6,6 +6,15 @@ import reactHooks from "eslint-plugin-react-hooks";
 import stylistic from "@stylistic/eslint-plugin";
 
 export default [
+  {
+    // Ignore build and generated files
+    ignores: [
+      ".vite/**/*",
+      "out/**/*",
+      "node_modules/**/*",
+      "dist/**/*"
+    ],
+  },
   {
     files: ["src/**/*.{ts,tsx}"],
     languageOptions: {
@@ -37,7 +46,6 @@ export default [
 
       // TODO: re-enable these rules
       "@typescript-eslint/unbound-method": "off",
-      "@typescript-eslint/no-require-imports": "off",
 
       // Disable conflicting base ESLint rules
       "no-unused-vars": "off",
@@ -111,9 +119,6 @@ export default [
       "@stylistic/jsx-max-props-per-line": ["error", { maximum: 1, when: "multiline" }],
       "@stylistic/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
 
-      // Electron-specific exceptions
-      "@typescript-eslint/no-var-requires": "off", // Allow require() in Electron main process
-
       // Project-specific adjustments for Electron/React app
       "@typescript-eslint/no-unsafe-member-access": "off", // Electron IPC and external APIs
       "@typescript-eslint/no-unsafe-assignment": "off", // Electron IPC and external APIs

dprint.json

@@ -0,0 +1,70 @@
+import type { ForgeConfig } from '@electron-forge/shared-types';
+import { MakerSquirrel } from '@electron-forge/maker-squirrel';
+import { MakerZIP } from '@electron-forge/maker-zip';
+import { MakerDeb } from '@electron-forge/maker-deb';
+import { MakerRpm } from '@electron-forge/maker-rpm';
+import { VitePlugin } from '@electron-forge/plugin-vite';
+import { FusesPlugin } from '@electron-forge/plugin-fuses';
+import { FuseV1Options, FuseVersion } from '@electron/fuses';
+
+const config: ForgeConfig = {
+  packagerConfig: {
+    asar: true,
+  },
+  rebuildConfig: {},
+  makers: [
+    new MakerSquirrel({}),
+    new MakerZIP({}, ['darwin']),
+    new MakerRpm({}),
+    new MakerDeb({}),
+  ],
+  plugins: [
+    new VitePlugin({
+      // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
+      // If you are familiar with Vite configuration, it will look really familiar.
+      build: [
+        {
+          // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
+          entry: 'src/main.ts',
+          config: 'vite.main.config.ts',
+          target: 'main',
+        },
+        {
+          entry: 'src/preload.ts',
+          config: 'vite.preload.config.ts',
+          target: 'preload',
+        },
+      ],
+      renderer: [
+        {
+          name: 'main_window',
+          config: 'vite.renderer.config.ts',
+        },
+      ],
+    }),
+    // Fuses are used to enable/disable various Electron functionality
+    // at package time, before code signing the application
+    new FusesPlugin({
+      version: FuseVersion.V1,
+      [FuseV1Options.RunAsNode]: false,
+      [FuseV1Options.EnableCookieEncryption]: true,
+      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
+      [FuseV1Options.EnableNodeCliInspectArguments]: false,
+      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
+      [FuseV1Options.OnlyLoadAppFromAsar]: true,
+    }),
+  ],
+  publishers: [
+    {
+      name: "@electron-forge/publisher-github",
+      config: {
+        repository: {
+          owner: "pd4d10",
+          name: "debugtron",
+        },
+      },
+    },
+  ],
+};
+
+export default config;

eslint.config.js

@@ -0,0 +1 @@
+/// <reference types="@electron-forge/plugin-vite/forge-vite-env" />

forge.config.js

@@ -1,5 +1,6 @@
 {
   "name": "debugtron",
+  "productName": "Debugtron",
   "version": "1.0.0-alpha.0",
   "description": "Debug in-production Electron based App",
   "repository": "pd4d10/debugtron",
@@ -15,7 +16,6 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "electron-redux": "^2.0.0",
     "electron-squirrel-startup": "^1.0.1",
     "redux": "^5.0.1",
     "registry-js": "^1.16.1",
@@ -27,15 +27,17 @@
     "@blueprintjs/select": "^5.3.21",
     "@electron-forge/cli": "^7.9.0",
     "@electron-forge/maker-deb": "^7.9.0",
-    "@electron-forge/maker-dmg": "^7.9.0",
     "@electron-forge/maker-rpm": "^7.9.0",
     "@electron-forge/maker-squirrel": "^7.9.0",
     "@electron-forge/maker-zip": "^7.9.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.9.0",
+    "@electron-forge/plugin-fuses": "^7.9.0",
     "@electron-forge/plugin-vite": "^7.9.0",
     "@electron-forge/publisher-github": "^7.9.0",
+    "@electron/fuses": "^1.8.0",
     "@reduxjs/toolkit": "^2.9.0",
     "@stylistic/eslint-plugin": "^5.4.0",
+    "@types/electron-squirrel-startup": "^1.0.2",
     "@types/ini": "^4.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.24",
@@ -50,6 +52,7 @@
     "@xterm/xterm": "^5.5.0",
     "electron": "^31.7.7",
     "electron-devtools-installer": "^3.2.1",
+    "electron-redux": "^2.0.0",
     "electron-update-notification": "^0.1.0",
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
@@ -72,6 +75,5 @@
     "universal-analytics": "^0.5.3",
     "vite": "^5.4.20"
   },
-  "packageManager": "yarn@1.22.22",
-  "productName": "Debugtron"
+  "packageManager": "yarn@1.22.22"
 }

forge.config.ts

@@ -1,15 +1,20 @@
 import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 import { app, BrowserWindow, ipcMain, Menu, MenuItem, nativeImage, shell } from "electron";
 
-import type { AppInfo } from "../reducers/app";
+import type { AppInfo } from "./reducers/app";
 
-import { debug, debugPath, init } from "./actions";
-import { store } from "./store";
-import { setReporter, setUpdater } from "./utils";
+import { debug, debugPath, init } from "./main/actions";
+import { store } from "./main/store";
+import { setReporter, setUpdater } from "./main/utils";
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
-if (require("electron-squirrel-startup")) {
+import squirrelStartup from "electron-squirrel-startup";
+if (squirrelStartup) {
   app.quit();
 }
 
@@ -22,11 +27,9 @@ const createWindow = () => {
     titleBarStyle: "hidden",
     trafficLightPosition: { x: 14, y: 14 },
     icon: process.platform === "linux"
-      ? nativeImage.createFromDataURL(require("../../assets/icon.png"))
+      ? nativeImage.createFromPath(path.join(__dirname, "../../assets/icon.png"))
       : undefined,
     webPreferences: {
-      nodeIntegration: true,
-      contextIsolation: false, // for `require`
       preload: path.join(__dirname, "preload.js"),
     },
   });
@@ -40,7 +43,7 @@ const createWindow = () => {
   }
 
   if (!app.isPackaged) {
-    mainWindow.webContents.openDevTools();
+    mainWindow.webContents.openDevTools({ mode: "detach" });
   }
 
   mainWindow.on("closed", () => {
@@ -109,7 +112,7 @@ if (!gotTheLock) {
         debugPath(path),
       );
     });
-    ipcMain.on("open-window", (_, url: string) => {
+    ipcMain.on("open-devtools", (_, url: string) => {
       const win = new BrowserWindow();
       // console.log(url)
       void win.loadURL(url);

forge.env.d.ts

@@ -1,7 +1,61 @@
-// const { contextBridge, ipcRenderer } = require("electron");
+import { contextBridge, ipcRenderer } from "electron";
+// Keep electron-redux for state synchronization
+import { preload } from "electron-redux/preload";
 
-// contextBridge.exposeInMainWorld("electronAPI", {
-//   openFile: () => ipcRenderer.invoke("openFile"),
-// });
+preload();
 
-require("electron-redux/preload");
+/**
+ * Helper function to create IPC send methods
+ */
+function createIPCSender(channel: string) {
+  return (...args: unknown[]) => {
+    ipcRenderer.send(channel, ...args);
+  };
+}
+
+/**
+ * Helper function to create event listeners
+ */
+function createEventListener(channel: string) {
+  return (callback: (event: unknown, ...args: unknown[]) => void) => {
+    const wrappedCallback = (event: unknown, ...args: unknown[]) => {
+      callback(event, ...args);
+    };
+    ipcRenderer.on(channel, wrappedCallback);
+    return () => ipcRenderer.removeListener(channel, wrappedCallback);
+  };
+}
+
+/**
+ * Helper function to create utility methods
+ */
+function createUtilityMethods() {
+  return {
+    removeAllListeners: (channel: string) => ipcRenderer.removeAllListeners(channel),
+  };
+}
+
+// Define the API implementation using builders
+const debugtronAPI = {
+  // App debugging operations
+  debug: createIPCSender("debug"),
+  debugPath: createIPCSender("debug-path"),
+
+  // DevTools operations
+  openDevTools: createIPCSender("open-devtools"),
+
+  // General window operations
+  openWindow: createIPCSender("open-window"),
+
+  // Event listeners (for future use)
+  onSessionUpdate: createEventListener("session-updated"),
+
+  // Utility methods
+  ...createUtilityMethods(),
+} as const;
+
+// Export the type for use in renderer process
+export type DebugTronAPI = typeof debugtronAPI;
+
+// Expose safe APIs to renderer process
+contextBridge.exposeInMainWorld("debugtronAPI", debugtronAPI);

package.json

@@ -58,7 +58,7 @@ export const Header: FC = () => {
         onItemSelect={(item) => {
           const appInfo = appState[item.id];
           if (appInfo) {
-            require("electron").ipcRenderer.send("debug", appInfo);
+            window.debugtronAPI.debug(appInfo);
           }
         }}
       >
@@ -101,7 +101,7 @@ export const Header: FC = () => {
           text="Debug"
           icon="build"
           onClick={() => {
-            require("electron").ipcRenderer.send("debug-path", input);
+            window.debugtronAPI.debugPath(input);
           }}
         />
       </ControlGroup>