Migrate electron frontend from JavaScript to TypeScript (#1032)

Converts all 5 source files to TypeScript using the same conventions as
the recent client migration: strict null checks, NodeNext modules, and
@typescript-eslint v8. Adds a tsc compilation step (output to dist/)
since the Electron main process needs real .js files unlike the
Vite-built client.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Tim020

.github/workflows/nodelint.yml

@@ -41,3 +41,15 @@ jobs:
           node-version: 24
       - run: npm ci
       - run: npm run ci-lint
+  run-typecheck-electron:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./electron
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+      - run: npm ci
+      - run: npm run typecheck

electron/eslint.config.mjs

@@ -2,65 +2,64 @@ import js from '@eslint/js';
 import globals from 'globals';
 import prettierConfig from 'eslint-config-prettier';
 import prettierPlugin from 'eslint-plugin-prettier';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+
+const sharedRules = {
+  'prettier/prettier': 'error',
+  ...prettierConfig.rules,
+  'max-len': 'off',
+  'no-plusplus': 'off',
+};
+
+const tsRules = {
+  ...sharedRules,
+  '@typescript-eslint/no-explicit-any': 'off',
+  '@typescript-eslint/no-unused-vars': 'warn',
+  // TypeScript handles undefined-variable checks; no-undef causes false positives
+  // on TS-specific constructs (namespaces, declare global, etc.)
+  'no-undef': 'off',
+};
 
 export default [
   {
-    ignores: [
-      '**/node_modules/**',
-      '**/out/**',
-      '**/dist/**',
-      '*.backup',
-    ],
+    ignores: ['**/node_modules/**', '**/out/**', '**/dist/**', '*.backup'],
   },
   js.configs.recommended,
+  // ESM TypeScript files (main process + services)
   {
-    files: ['**/*.js'],
+    files: ['**/*.ts'],
     plugins: {
       prettier: prettierPlugin,
+      '@typescript-eslint': tsPlugin,
     },
     languageOptions: {
+      parser: tsParser,
       ecmaVersion: 2022,
       sourceType: 'module',
       globals: {
         ...globals.node,
         ...globals.es2021,
       },
     },
-    rules: {
-      // Prettier integration - runs Prettier as an ESLint rule
-      'prettier/prettier': 'error',
-
-      // Disable formatting rules that conflict with Prettier
-      ...prettierConfig.rules,
-
-      // Let Prettier handle line length (via printWidth config)
-      'max-len': 'off',
-
-      // Custom linting rules (non-formatting)
-      'no-unused-vars': 'warn',
-      'no-plusplus': 'off',
-    },
+    rules: tsRules,
   },
-  // CommonJS files (preload scripts must be CJS when sandbox is enabled)
+  // CommonJS TypeScript files (preload must be CJS when sandbox is enabled)
   {
-    files: ['**/*.cjs'],
+    files: ['**/*.cts'],
     plugins: {
       prettier: prettierPlugin,
+      '@typescript-eslint': tsPlugin,
     },
     languageOptions: {
+      parser: tsParser,
       ecmaVersion: 2022,
       sourceType: 'commonjs',
       globals: {
         ...globals.node,
         ...globals.es2021,
       },
     },
-    rules: {
-      'prettier/prettier': 'error',
-      ...prettierConfig.rules,
-      'max-len': 'off',
-      'no-unused-vars': 'warn',
-      'no-plusplus': 'off',
-    },
+    rules: tsRules,
   },
 ];

electron/main.js electron/main.tselectron/main.js renamed to electron/main.ts

@@ -1,9 +1,3 @@
-/**
- * Electron Main Process
- *
- * Handles window creation, IPC communication, and app lifecycle.
- */
-
 import { app, BrowserWindow, ipcMain } from 'electron';
 import path from 'path';
 import url from 'url';
@@ -13,25 +7,16 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// Services
 import ConnectionManager from './services/ConnectionManager.js';
 import VersionChecker from './services/VersionChecker.js';
 import MDNSDiscovery from './services/MDNSDiscovery.js';
 
-// Determine if running in development mode
 const isDev = process.argv.includes('--dev') || process.env.NODE_ENV === 'development';
 
-// Keep a global reference of the window object
-let mainWindow;
-
-// Initialize services
-let connectionManager;
+let connectionManager: ConnectionManager;
 
-/**
- * Create the main browser window
- */
-function createWindow() {
-  mainWindow = new BrowserWindow({
+function createWindow(): void {
+  const win = new BrowserWindow({
     width: 1200,
     height: 800,
     minWidth: 800,
@@ -42,24 +27,18 @@ function createWindow() {
       contextIsolation: true,
       sandbox: true,
     },
-    show: false, // Don't show until ready
+    show: false,
   });
 
-  // Load the appropriate URL
   if (isDev) {
-    // Development: Load from Vite dev server
-    mainWindow.loadURL('http://localhost:5173');
-
-    // Open DevTools in development
-    mainWindow.webContents.openDevTools();
+    win.loadURL('http://localhost:5173');
+    win.webContents.openDevTools();
   } else {
-    // Production: Load built files from client/dist-electron (Electron-specific build)
-    // In packaged app, extraResource files are in process.resourcesPath
     const staticPath = app.isPackaged
       ? path.join(process.resourcesPath, 'dist-electron')
       : path.join(__dirname, '../client/dist-electron');
 
-    mainWindow.loadURL(
+    win.loadURL(
       url.format({
         pathname: path.join(staticPath, 'index.html'),
         protocol: 'file:',
@@ -68,29 +47,19 @@ function createWindow() {
     );
   }
 
-  // Show window when ready to avoid flicker
-  mainWindow.once('ready-to-show', () => {
-    mainWindow.show();
+  win.once('ready-to-show', () => {
+    win.show();
   });
 
   // Enable DevTools with keyboard shortcut (Cmd/Ctrl+Shift+I) in production
-  mainWindow.webContents.on('before-input-event', (event, input) => {
+  win.webContents.on('before-input-event', (event, input) => {
     if (input.key === 'I' && input.shift && (input.meta || input.control)) {
-      mainWindow.webContents.toggleDevTools();
+      win.webContents.toggleDevTools();
     }
   });
-
-  // Emitted when the window is closed
-  mainWindow.on('closed', () => {
-    mainWindow = null;
-  });
 }
 
-/**
- * Register IPC handlers for renderer communication
- */
-function registerIPCHandlers() {
-  // Connection management
+function registerIPCHandlers(): void {
   ipcMain.handle('connections:getAll', async () => {
     return connectionManager.getAllConnections();
   });
@@ -119,13 +88,11 @@ function registerIPCHandlers() {
     return connectionManager.clearActiveConnection();
   });
 
-  // Server URL synchronous getter (for platform layer)
   ipcMain.on('server:getURLSync', (event) => {
     const activeConnection = connectionManager.getActiveConnection();
     event.returnValue = activeConnection ? activeConnection.url : null;
   });
 
-  // Storage operations (for platform layer)
   ipcMain.handle('storage:get', async (event, key) => {
     return connectionManager.getStorageItem(key);
   });
@@ -142,18 +109,15 @@ function registerIPCHandlers() {
     return connectionManager.clearStorage();
   });
 
-  // App information
   ipcMain.handle('app:getVersion', async () => {
     return app.getVersion();
   });
 
-  // Version checking
   ipcMain.handle('version:check', async (event, serverUrl) => {
     const clientVersion = app.getVersion();
     return VersionChecker.checkVersion(serverUrl, clientVersion);
   });
 
-  // mDNS discovery
   ipcMain.handle('mdns:discover', async (event, timeout = 5000) => {
     return MDNSDiscovery.discoverServers(timeout);
   });
@@ -164,33 +128,24 @@ function registerIPCHandlers() {
   });
 }
 
-// App lifecycle events
 app.whenReady().then(() => {
-  // Initialize services
   connectionManager = new ConnectionManager();
-
-  // Register IPC handlers
   registerIPCHandlers();
-
-  // Create window
   createWindow();
 
   app.on('activate', () => {
-    // On macOS, re-create window when dock icon is clicked and no windows open
     if (BrowserWindow.getAllWindows().length === 0) {
       createWindow();
     }
   });
 });
 
-// Quit when all windows are closed (except on macOS)
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
     app.quit();
   }
 });
 
-// Handle app errors
 process.on('uncaughtException', (error) => {
   console.error('Uncaught exception:', error);
 });