Merge pull request #16 from grimmerk/update_electron_ts_version

Update electron ts version & add Code Explainer Feature section in doc

Author: grimmerk

README.md

@@ -57,43 +57,15 @@ Use this to quickly open and switch VS Code projects.
 8. [fixed] close the packaged app via cmd+q seems not close SwitchV-server-macos process? check by command: lsof -i:55688. Use ctrl+c to stop development (running via yarn start) is OK. (add close button on tray to help? I guess it is not helping). 
     1. Solved by electron sending kill server process in the before-quick event handler. Another person suggests to add one more step to handle SIGINT signal on server side, ref https://stackoverflow.com/questions/71523442/child-process-doesnt-exit.
 
-### debugger issue 
+### Use VS Code Debugger  
 
 **To debug main process**
 
-Below is a workaround way to debug main process: Its reference is 
-https://github.com/electron-userland/electron-forge/issues/1369#issuecomment-1172913835
-  
+In VS Code Run and Debug, choose `Electron: Main Process` to launch and debug.
 
-```json
-{
-  "type": "node",
-  "request": "launch",
-  "name": "Electron Main",
-  "runtimeExecutable": "npm",
-  "runtimeArgs": [
-      "run",
-      "start",
-  ],
-  "cwd": "${workspaceFolder}"
-}
-```
-
-electron-forge official site only mention how to debug main process but it has a bug 
-https://github.com/electron-userland/electron-forge/issues/1369
-
-```json
-{
-  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-nix",
-}
-```
-
-Error: Cannot find module '/Users/liamdawson/w/@electron-forge/cli/dist/electron-forge-start'
-
-
-**To debug render process (workaround way)**
+**To debug render process (below set up becomes broken after the timing updating electron 29 and add 2nd window, please directly set up breakpoints in the opened dev tool instead) **
 
-[electron site](https://www.electronjs.org/docs/latest/tutorial/debugging-vscode) and [ms github site](https://github.com/Microsoft/vscode-recipes/tree/master/Electron) both mention below setting to debug main proces 
+[electron site](https://www.electronjs.org/docs/latest/tutorial/debugging-vscode) and [ms github site](https://github.com/Microsoft/vscode-recipes/tree/master/Electron) both mention below setting to debug main process
 
 
 ```json 
@@ -107,7 +79,7 @@ and ms github site has a extra setting for debugging render process. But the abo
 1. `yarn start` (to start webpack server part) 
 2. launch compound "Electron: All" launch setting (from ms github site) to debug main & **render processes**. 
 
-The drawback is you will see two copy of SwitchV. And attaching render process takes a little time (e.g. only stop at some breakpoints after a while/refresh).
+The drawback is you will see two copy of SwitchV. And attaching render process takes a little time (e.g. only stop at some breakpoints after a while/refresh).~~
 
 ## notes about packaging a macOS app
 

electron/.vscode/launch.json

@@ -2,22 +2,27 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Node.js - Debug Current File",
+            "name": "Electron: Main Process",
             "type": "node",
             "request": "launch",
-            "program": "${file}"
+            "cwd": "${workspaceFolder}",
+            "runtimeExecutable": "yarn",
+            "windows": {
+                "runtimeExecutable": "yarn.cmd"
+            },
+            "runtimeArgs": [
+                "start"
+            ],
+            "outputCapture": "std",
         },
         {
+            "name": "Debug Current File",
             "type": "node",
             "request": "launch",
-            "name": "Electron Main",
-            "runtimeExecutable": "npm",
-            "runtimeArgs": [
-                "run",
-                "start",
-                "--remote-debugging-port=9223"
-            ],
-            "cwd": "${workspaceFolder}"
+            "program": "${file}",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
         },
         {
             "type": "node",

electron/forge.config.ts

@@ -8,8 +8,9 @@ import { WebpackPlugin } from '@electron-forge/plugin-webpack';
 import { mainConfig } from './webpack.main.config';
 import { rendererConfig } from './webpack.renderer.config';
 
-const fs = require('fs');
+import * as fs from 'fs';
 
+// Ensure compatibility with Electron Forge v7
 const config: ForgeConfig = {
   hooks: {
     generateAssets: async () => {

electron/package.json

@@ -6,59 +6,59 @@
   "main": ".webpack/main",
   "scripts": {
     "db": "prisma migrate dev",
-    "start": "NODE_ENV=development electron-forge start",
-    "dev": "EMBEDSERVER=1 NODE_ENV=development electron-forge start",
-    "start:explainer": "NODE_ENV=development electron-forge start",
+    "start": "cross-env NODE_ENV=development electron-forge start",
+    "dev": "cross-env EMBEDSERVER=1 NODE_ENV=development electron-forge start",
+    "start:explainer": "cross-env NODE_ENV=development electron-forge start",
     "package": "electron-forge package",
-    "package_mas": "npm run prebuild && BUILD_TYPE=prod electron-forge package --platform=mas && npm run postbuild",
+    "package_mas": "npm run prebuild && cross-env BUILD_TYPE=prod electron-forge package --platform=darwin -- --mas && npm run postbuild",
     "prebuild": "sh prebuild.sh",
     "postbuild": "sh postbuild.sh",
-    "make": "npm run prebuild && BUILD_TYPE=prod electron-forge make && npm run postbuild",
-    "make_mas": "npm run prebuild && BUILD_TYPE=prod electron-forge make --platform=mas && npm run postbuild",
-    "make:staging": "npm run prebuild && BUILD_TYPE=staging electron-forge make && npm run postbuild",
+    "make": "npm run prebuild && cross-env BUILD_TYPE=prod electron-forge make && npm run postbuild",
+    "make_mas": "npm run prebuild && cross-env BUILD_TYPE=prod electron-forge make --platform=darwin -- --mas && npm run postbuild",
+    "make:staging": "npm run prebuild && cross-env BUILD_TYPE=staging electron-forge make && npm run postbuild",
     "make-x86": "electron-forge make --arch=x64 --platform=darwin",
     "publish": "electron-forge publish",
     "lint": "eslint --ext .ts,.tsx .",
-    "db:migrate": "prisma migrate dev"
+    "db:migrate": "prisma migrate dev",
+    "watch": "webpack --watch"
+
   },
   "keywords": [],
   "author": {
     "name": "Grimmer",
-    "email": "grimmer0125@gmail.com"
+    "email": "k@grimmer.com"
   },
   "license": "MIT",
-  "config": {
-    "forge": "./config.forge.js"
-  },
   "devDependencies": {
-    "@electron-forge/cli": "^6.0.4",
-    "@electron-forge/maker-deb": "^6.0.4",
-    "@electron-forge/maker-rpm": "^6.0.4",
-    "@electron-forge/maker-squirrel": "^6.0.4",
-    "@electron-forge/maker-zip": "^6.0.4",
-    "@electron-forge/plugin-webpack": "^6.0.4",
+    "@electron-forge/cli": "^7.2.0",
+    "@electron-forge/maker-deb": "^7.2.0",
+    "@electron-forge/maker-rpm": "^7.2.0",
+    "@electron-forge/maker-squirrel": "^7.2.0",
+    "@electron-forge/maker-zip": "^7.2.0",
+    "@electron-forge/plugin-webpack": "^7.2.0",
     "@types/express": "^4.17.17",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
     "@types/react-highlight-words": "^0.16.4",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vercel/webpack-asset-relocator-loader": "^1.7.3",
     "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.0.0",
-    "electron": "^22.0.0",
-    "eslint": "^8.0.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "fork-ts-checker-webpack-plugin": "^7.2.14",
+    "electron": "^29.4.6",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "node-loader": "^2.0.0",
-    "prettier": "^2.8.1",
-    "style-loader": "^3.0.0",
-    "ts-loader": "^9.2.2",
-    "ts-node": "^10.9.1",
-    "typescript": "~4.5.4",
+    "prettier": "^3.2.5",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.3.3",
     "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
@@ -82,8 +82,9 @@
     "react-highlight-words": "^0.18.0",
     "react-markdown": "^8.0.5",
     "react-select": "^5.4.0",
-    "react-syntax-highlighter": "^15.5.0", 
+    "react-syntax-highlighter": "^15.5.0",
     "reflect-metadata": "^0.1.13",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "rxjs": "^7.8.1"
   }
 }

electron/src/main.ts

@@ -160,7 +160,7 @@ const createWindow = (): BrowserWindow => {
     width: 800,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
-      devTools: false, //isDebug,
+      devTools: true, //isDebug,
     },
 
     // hide window by default

electron/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES6",
+    "target": "ES2020",
     "allowJs": true,
     "module": "commonjs",
     "skipLibCheck": true,
@@ -13,14 +13,23 @@
     "resolveJsonModule": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "isolatedModules": true,
     "paths": {
       "*": [
         "node_modules/*"
       ]
     },
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"]
   },
   "include": [
     "src/**/*"
-  ]
+  ],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  }
 }

electron/webpack.main.config.ts

@@ -2,9 +2,6 @@ import type { Configuration } from 'webpack';
 
 import { rules } from './webpack.rules';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-// const nodeExternals = require('webpack-node-externals');
-
 export const mainConfig: Configuration = {
   /**
    * This is the main entry point for your application, it's the first file
@@ -20,8 +17,20 @@ export const mainConfig: Configuration = {
     '@nestjs/websockets',
     '@nestjs/websockets/socket-module',
     '@nestjs/microservices/microservices-module',
-  ], //[nodeExternals()],
+    'rxjs/add/observable/fromEvent',
+    'rxjs/Observable',
+    'swagger-ui-express',
+    'class-validator',
+    'class-transformer'
+  ],
   resolve: {
     extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
+    fallback: {
+      path: false,
+      fs: false,
+      child_process: false
+    }
   },
+  // Node.js polyfills are no longer included by default in webpack 5
+  target: 'electron-main',
 };

electron/webpack.renderer.config.ts

@@ -14,6 +14,18 @@ export const rendererConfig: Configuration = {
   },
   plugins,
   resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
+    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
+    fallback: {
+      path: false,
+      fs: false
+    }
   },
+  // For Electron 28+, we need to use web instead of electron-renderer for security reasons
+  // but need to provide node integration for compatibility
+  target: 'web',
+  // These are needed for webpack hot reloading to work with Electron's contextIsolation 
+  output: {
+    publicPath: '/',
+    globalObject: 'globalThis'
+  }
 };