feat: electron upgrade - 18.0.3 => 20.2.0

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [macOS-latest, ubuntu-latest, windows-latest]
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x, 18.x]
 
     steps:
       - uses: actions/checkout@v2

.husky/_/husky.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/usr/bin/env sh
 if [ -z "$husky_skip_init" ]; then
   debug () {
     if [ "$HUSKY_DEBUG" = "1" ]; then
@@ -6,7 +6,7 @@ if [ -z "$husky_skip_init" ]; then
     fi
   }
 
-  readonly hook_name="$(basename "$0")"
+  readonly hook_name="$(basename -- "$0")"
   debug "starting $hook_name..."
 
   if [ "$HUSKY" = "0" ]; then
@@ -19,7 +19,8 @@ if [ -z "$husky_skip_init" ]; then
     . ~/.huskyrc
   fi
 
-  export readonly husky_skip_init=1
+  readonly husky_skip_init=1
+  export husky_skip_init
   sh -e "$0" "$@"
   exitCode="$?"
 
@@ -27,5 +28,9 @@ if [ -z "$husky_skip_init" ]; then
     echo "husky - $hook_name hook exited with code $exitCode (error)"
   fi
 
+  if [ $exitCode = 127 ]; then
+    echo "husky - command not found in PATH=$PATH"
+  fi
+
   exit $exitCode
 fi

README.md

@@ -50,9 +50,9 @@ Depending on your need, putting up [Electron](https://www.electronjs.org/) and [
 To clone and run this repository, you'll need installed on your computer at least :
 
 - [Git](https://git-scm.com)
-- [Node 12.20, 14.15 or 16.10](https://nodejs.org/en/download/)
+- [Node 14.15.0 or later](https://nodejs.org/en/download/)
-- [Npm 7+](https://docs.npmjs.com/about-npm)
+- [Npm 7 or later](https://docs.npmjs.com/about-npm)
-- [Angular-CLI 13](https://angular.io/cli)
+- [Angular-CLI 14 or later](https://angular.io/cli)
 
 Then from your command line:
 
@@ -89,6 +89,15 @@ npm start
 | `npm run make`              | Generate platform distributables (./out) |
 | `npm run clean`             | Delete generated outputs                 |
 
+## Behind a proxy
+
+After settings **HTTP_PROXY** and **HTTPS_PROXY** environment variables :
+
+```bash
+# Install dependencies
+npx cross-env ELECTRON_GET_USE_PROXY=true GLOBAL_AGENT_HTTPS_PROXY=%HTTPS_PROXY% npm install
+```
+
 ### Adding dependencies
 
 This project architecture is based on [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces). This allows having different version of the same dependency depending on your workspace :

package.json

@@ -102,63 +102,63 @@
 		}
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^16.2.3",
+		"@commitlint/cli": "^17.1.2",
-		"@commitlint/config-conventional": "^16.2.1",
+		"@commitlint/config-conventional": "^17.1.0",
-		"@electron-forge/cli": "^6.0.0-beta.63",
+		"@electron-forge/cli": "^6.0.0-beta.66",
-		"@electron-forge/maker-deb": "^6.0.0-beta.63",
+		"@electron-forge/maker-deb": "^6.0.0-beta.66",
-		"@electron-forge/maker-dmg": "^6.0.0-beta.63",
+		"@electron-forge/maker-dmg": "^6.0.0-beta.66",
-		"@electron-forge/maker-rpm": "^6.0.0-beta.63",
+		"@electron-forge/maker-rpm": "^6.0.0-beta.66",
-		"@electron-forge/maker-squirrel": "^6.0.0-beta.63",
+		"@electron-forge/maker-squirrel": "^6.0.0-beta.66",
-		"@electron-forge/maker-zip": "^6.0.0-beta.63",
+		"@electron-forge/maker-zip": "^6.0.0-beta.66",
-		"@electron-forge/plugin-webpack": "6.0.0-beta.63",
+		"@electron-forge/plugin-webpack": "6.0.0-beta.66",
-		"@types/lodash": "^4.14.181",
+		"@types/lodash": "^4.14.185",
-		"@types/node": "^17.0.23",
+		"@types/node": "^18.7.18",
-		"@typescript-eslint/eslint-plugin": "^5.18.0",
+		"@typescript-eslint/eslint-plugin": "^5.38.0",
-		"@typescript-eslint/parser": "^5.18.0",
+		"@typescript-eslint/parser": "^5.38.0",
-		"@vercel/webpack-asset-relocator-loader": "^1.7.2",
+		"@vercel/webpack-asset-relocator-loader": "^1.7.3",
-		"@wdio/allure-reporter": "^7.19.1",
+		"@wdio/allure-reporter": "^7.24.1",
-		"@wdio/cli": "^7.19.3",
+		"@wdio/cli": "^7.24.1",
-		"@wdio/jasmine-framework": "^7.19.3",
+		"@wdio/jasmine-framework": "^7.24.1",
-		"@wdio/local-runner": "^7.19.3",
+		"@wdio/local-runner": "^7.24.1",
-		"@wdio/spec-reporter": "^7.19.1",
+		"@wdio/spec-reporter": "^7.24.1",
-		"allure-commandline": "^2.17.2",
+		"allure-commandline": "^2.18.1",
 		"chokidar-cli": "^3.0.0",
-		"chromedriver": "^100.0.0",
+		"chromedriver": "^104.0.0",
-		"copy-webpack-plugin": "^10.2.4",
+		"copy-webpack-plugin": "^11.0.0",
 		"cross-env": "^7.0.3",
 		"css-loader": "^6.7.1",
-		"electron": "^18.0.3",
+		"electron": "^20.2.0",
 		"eslint": "^8.23.1",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-import-resolver-typescript": "^3.5.1",
 		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-sonarjs": "^0.15.0",
 		"eslint-plugin-unicorn": "^43.0.2",
-		"fork-ts-checker-webpack-plugin": "^7.2.3",
+		"fork-ts-checker-webpack-plugin": "^7.2.13",
-		"husky": "^7.0.4",
+		"husky": "^8.0.1",
-		"lint-staged": "^12.3.7",
+		"lint-staged": "^13.0.3",
 		"node-loader": "^2.0.0",
-		"npm-check-updates": "^12.5.8",
+		"npm-check-updates": "^16.2.1",
 		"npm-run-all": "^4.1.5",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"shx": "^0.3.4",
-		"standard-version": "^9.3.2",
+		"standard-version": "^9.5.0",
 		"style-loader": "^3.3.1",
 		"tree-kill": "^1.2.2",
-		"ts-loader": "^9.2.8",
+		"ts-loader": "^9.4.1",
-		"ts-node": "^10.7.0",
+		"ts-node": "^10.9.1",
-		"typescript": "^4.6.3",
+		"typescript": "^4.8.3",
 		"wait-on": "^6.0.1",
 		"wdio-chromedriver-service": "^7.3.2",
-		"wdio-electron-service": "^2.1.0",
+		"wdio-electron-service": "^3.5.0",
-		"wdio-wait-for": "^2.2.5"
+		"wdio-wait-for": "^2.2.6"
 	},
 	"dependencies": {
 		"@electron/remote": "^2.0.8",
 		"electron-squirrel-startup": "^1.0.0",
-		"fs-extra": "^10.0.1",
+		"fs-extra": "^10.1.0",
-		"winston": "^3.7.2"
+		"winston": "^3.8.2"
 	},
 	"lint-staged": {
 		"*.ts": "npm run lint"

workspaces/electron-app/main/components/window.ts

@@ -31,6 +31,11 @@ export class Window {
 				// Isolate window context to protect against prototype pollution
 				// except in e2e test when that access is required
 				contextIsolation: global.appConfig.isContextIsolation,
+				// Introduced in Electron 20 and enabled by default
+				// Among others security constraints, it prevents from required
+				// CommonJS modules imports into preload script
+				// which is not bundled yet in dev mode
+				sandbox: global.appConfig.isSandbox,
 				// Use a preload script to enhance security
 				preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
 			},

workspaces/electron-app/renderer/preload.ts

@@ -1,4 +1,4 @@
-// To secure user platform when running renderer process stuff,
+/*/ To secure user platform when running renderer process stuff,
 // Node.JS and Electron APIs are only available in this script
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 import { WindowApi, WindowApiConst } from 'shared-lib';
@@ -31,6 +31,27 @@ if (process.env.X_NODE_ENV === 'e2e-test') {
 	// ContextBridge API can only be used when contextIsolation is enabled
 	// which is normally the case except in e2e test mode
 	contextBridge.exposeInMainWorld('api', windowApi);
+}*/
+
+import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
+import { WindowApiConst } from 'shared-lib';
+
+contextBridge.exposeInMainWorld('api', {
+	node: () => process.versions.node,
+	chrome: () => process.versions.chrome,
+	electron: () => process.versions.electron,
+	send: <In>(channel: string, input: In) => {
+		if (WindowApiConst.SENDING_SAFE_CHANNELS.includes(channel)) {
+			ipcRenderer.send(channel, input);
 		}
+	},
+	receive: <Out>(channel: string, callback: (output: Out) => void) => {
+		// Deliberately strip event as it includes `sender`
+		ipcRenderer.on(channel, (_event: IpcRendererEvent, ...parameters: any[]) =>
+			callback(parameters[0])
+		);
+	},
+	// we can also expose variables, not just functions
+});
 
 console.log('The preload script has been injected successfully.');

workspaces/shared-lib/models/config/app-config.ts

@@ -17,6 +17,9 @@ export interface AppConfig {
 	/** Tells if  `contextIsolation` and `worldSafeExecuteJavaScript` webPreferences are enabled */
 	isContextIsolation: boolean;
 
+	/** Tells if `isSandbox` webPreference is enabled */
+	isSandbox: boolean;
+
 	/** Tells if `isEnableRemoteModule` webPreference is enabled */
 	isEnableRemoteModule: boolean;