Convert Electron to TypeScript & adjust scripts and pipelines (#69)

.gitignore

@@ -41,3 +41,7 @@ storybook.log
 doctor-storybook.log
 
 *storybook.log
+public/app
+public/electron.js
+public/preload.js
+public/renderer.js

package.json

@@ -118,26 +118,26 @@
     "packs": "electron-builder --dir",
     "dist": "run-script-os",
     "predist": "node -e \"let pkg=require('./package.json'); pkg.homepage='.'; require('fs').writeFileSync('package.json', JSON.stringify(pkg, null, 2));\"",
-    "dist:win32": "set GENERATE_SOURCEMAP=false && set CI=false && react-scripts build && electron-builder --config electron-builder.json -w zip -w portable -w nsis",
-    "dist:default": "GENERATE_SOURCEMAP=false CI=false react-scripts build && electron-builder --config electron-builder.json",
+    "dist:win32": "set GENERATE_SOURCEMAP=false && set CI=false && react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder --config electron-builder.json -w zip -w portable -w nsis",
+    "dist:default": "GENERATE_SOURCEMAP=false CI=false react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder --config electron-builder.json",
     "distsetup": "run-script-os",
     "predistsetup": "node -e \"let pkg=require('./package.json'); pkg.homepage='.'; require('fs').writeFileSync('package.json', JSON.stringify(pkg, null, 2));\"",
-    "distsetup:win32": "set GENERATE_SOURCEMAP=false && set MS_STORE=true && react-scripts build && electron-builder --config electron-builder.json -w nsis",
-    "distsetup:default": "GENERATE_SOURCEMAP=false MS_STORE=true react-scripts build && electron-builder --config electron-builder.json",
+    "distsetup:win32": "set GENERATE_SOURCEMAP=false && set MS_STORE=true && react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder --config electron-builder.json -w nsis",
+    "distsetup:default": "GENERATE_SOURCEMAP=false MS_STORE=true react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder --config electron-builder.json",
     "distcc": "run-script-os",
     "predistcc": "node -e \"let pkg=require('./package.json'); pkg.homepage='.'; require('fs').writeFileSync('package.json', JSON.stringify(pkg, null, 2));\"",
-    "distcc:win32": "set GENERATE_SOURCEMAP=false && set CI=false && react-scripts build && electron-builder",
-    "distcc:default": "GENERATE_SOURCEMAP=false react-scripts build && electron-builder",
+    "distcc:win32": "set GENERATE_SOURCEMAP=false && set CI=false && react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder",
+    "distcc:default": "GENERATE_SOURCEMAP=false react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder",
     "distall": "run-script-os",
     "predistall": "set PUBLIC_URL=. && node -e \"let pkg=require('./package.json'); pkg.homepage='.'; require('fs').writeFileSync('package.json', JSON.stringify(pkg, null, 2));\"",
-    "distall:win32": "set GENERATE_SOURCEMAP=false && set CI=false && react-scripts build && electron-builder && electron-builder --config electron-builder.json -w zip -w portable -w nsis",
-    "distall:default": "GENERATE_SOURCEMAP=false CI=false react-scripts build && electron-builder && electron-builder --config electron-builder.json",
-    "dist-multi": "GENERATE_SOURCEMAP=false react-scripts build && electron-builder -mwl",
+    "distall:win32": "set GENERATE_SOURCEMAP=false && set CI=false && react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder && electron-builder --config electron-builder.json -w zip -w portable -w nsis",
+    "distall:default": "GENERATE_SOURCEMAP=false CI=false react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder && electron-builder --config electron-builder.json",
+    "dist-multi": "GENERATE_SOURCEMAP=false react-scripts build && npx tsc --project tsconfig.electron.json && electron-builder -mwl",
     "dev": "concurrently \"cross-env BROWSER=none yarn start\" \"yarn electron\"",
     "compile-electron": "run-script-os",
     "compile-electron:win32": "copy app\\*.ts build\\*.js",
     "compile-electron:default": "cp ./app/electron.ts ./build/electron.js && cp ./app/preload.ts ./build/preload.js && cp ./app/renderer.ts ./build/renderer.js && cp ./app/serviceWorker.ts ./build/serviceWorker.js",
-    "electron": "wait-on http://127.0.0.1:3000 && electron .",
+    "electron": "wait-on http://127.0.0.1:3000 && concurrently \"npx tsc --project tsconfig.electron.json --watch\" \"wait-on public/electron.js && electron .\"",
     "postinstall": "electron-builder install-app-deps",
     "prebuild-storybook": "run-script-os",
     "prebuild-storybook:win32": "set PUBLIC_URL=/LedFx-Frontend-v2/docs",
@@ -191,7 +191,9 @@
     "@types/babel__template": "^7.4.4",
     "@types/chart.js": "^2.9.41",
     "@types/color": "^4.2.0",
+    "@types/electron": "^1.6.12",
     "@types/eslint__js": "^8.42.3",
+    "@types/node": "^22.10.2",
     "@types/prop-types": "^15.7.11",
     "@types/react": "^18.3.12",
     "@types/react-beautiful-dnd": "^13.1.8",

public/electron.js → src/app/electron.ts

@@ -1,35 +1,34 @@
-/* eslint-disable no-console */
-import fs from 'fs'
-import path from 'path'
-import isCC from './app/utils/isCC.mjs'
-import isDev from 'electron-is-dev'
-import createWindow from './app/utils/win.mjs'
-import { app, nativeTheme, BrowserWindow, ipcMain, shell, session } from 'electron'
-import { createTray } from './app/utils/tray.mjs'
-import { startInstance, closeAllSubs } from './app/instances.js'
-import { handlers } from './app/handlers.js'
-import { setupProtocol, handleProtocol } from './app/protocol.js'
-import { EventEmitter } from 'events'
-import { fileURLToPath } from 'node:url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-EventEmitter.defaultMaxListeners = 15
-
-const reduxDevtoolsPath = 'C:\\Users\\Blade\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\lmhkpmbekcpmknklioeibfkpmmfibljd\\3.2.7_0'
-
-const subpy = null
-const subprocesses = {}
-let wind
-let win
-
-setupProtocol()
-const gotTheLock = app.requestSingleInstanceLock()
+import fs from 'fs';
+import path from 'path';
+import isCC from './app/utils/isCC.mjs';
+import isDev from 'electron-is-dev';
+import createWindow from './app/utils/win.mjs';
+import { app, nativeTheme, BrowserWindow, ipcMain, shell, session } from 'electron';
+import { createTray } from './app/utils/tray.mjs';
+import { startInstance, closeAllSubs } from './app/instances.js';
+import { handlers } from './app/handlers.js';
+import { setupProtocol, handleProtocol } from './app/protocol.js';
+import { EventEmitter } from 'events';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+EventEmitter.defaultMaxListeners = 15;
+
+const reduxDevtoolsPath = 'C:\\Users\\Blade\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\lmhkpmbekcpmknklioeibfkpmmfibljd\\3.2.7_0';
+
+const subpy: any = null;
+const subprocesses: Record<string, any> = {};
+let wind: BrowserWindow | null = null;
+let win: BrowserWindow | null = null;
+
+setupProtocol();
+const gotTheLock = app.requestSingleInstanceLock();
 
 if (!fs.existsSync(path.join(app.getPath('userData'), '.ledfx-cc'))) {
-  console.log('Creating .ledfx-cc folder')
-  fs.mkdirSync(path.join(app.getPath('userData'), '.ledfx-cc'))
+  console.log('Creating .ledfx-cc folder');
+  fs.mkdirSync(path.join(app.getPath('userData'), '.ledfx-cc'));
 }
 
 const ready = () =>
@@ -45,6 +44,7 @@ const ready = () =>
       : createWindow(win)
 
     const remoteMain = await import('@electron/remote/main/index.js')
+    if (!wind) return
     remoteMain.enable(wind.webContents)
 
     wind.webContents.setWindowOpenHandler(({ url }) => {

public/preload.js → src/app/preload.ts

@@ -1,15 +1,14 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { contextBridge, ipcRenderer } = require('electron');
+import { contextBridge, ipcRenderer } from 'electron'
 
 contextBridge.exposeInMainWorld('api', {
-  send: (channel, data) => {
+  send: (channel: string, data: any) => {
     // Whitelist channels
     const validChannels = ['toMain'];
     if (validChannels.includes(channel)) {
       ipcRenderer.send(channel, data);
     }
   },
-  receive: (channel, func) => {
+  receive: (channel: string, func: any) => {
     const validChannels = ['fromMain'];
     if (validChannels.includes(channel)) {
       // Deliberately strip event as it includes `sender`

tsconfig.electron.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "typeRoots": ["node_modules/@types"],
+    "types": ["node"],
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "outDir": "public",
+    "jsx": "react-jsx",
+    "skipLibCheck": true
+  },
+  "include": ["src/app"]
+}