Update electron (major) (#1968)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/@types/electron-devtools-installer.d.ts

@@ -0,0 +1,18 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+// import "electron-devtools-installer";
+
+declare module "electron-devtools-installer" {
+    interface ExtensionReference {
+        id: string;
+        electron: string;
+    }
+
+    export const REACT_DEVELOPER_TOOLS: ExtensionReference;
+    export default function install(extension: ExtensionReference): Promise<string>;
+}

src/@types/global.d.ts

@@ -9,7 +9,7 @@ import { BrowserWindow } from "electron";
 import Store from "electron-store";
 import AutoLaunch from "auto-launch";
 
-import { AppLocalization } from "../language-helper";
+import { AppLocalization } from "../language-helper.js";
 
 // global type extensions need to use var for whatever reason
 /* eslint-disable no-var */

src/displayMediaCallback.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Streams } from "electron";
+import type { Streams } from "electron";
 
 type DisplayMediaCallback = (streams: Streams) => void;
 

src/electron-main.ts

@@ -9,31 +9,34 @@ Please see LICENSE files in the repository root for full details.
 */
 
 // Squirrel on windows starts the app with various flags as hooks to tell us when we've been installed/uninstalled etc.
-import "./squirrelhooks";
+import "./squirrelhooks.js";
 import { app, BrowserWindow, Menu, autoUpdater, protocol, dialog, Input, Event, session } from "electron";
+// eslint-disable-next-line n/file-extension-in-import
 import * as Sentry from "@sentry/electron/main";
 import AutoLaunch from "auto-launch";
-import path from "path";
+import path, { dirname } from "node:path";
 import windowStateKeeper from "electron-window-state";
 import Store from "electron-store";
-import fs, { promises as afs } from "fs";
-import { URL } from "url";
+import fs, { promises as afs } from "node:fs";
+import { URL, fileURLToPath } from "node:url";
 import minimist from "minimist";
 
-import "./ipc";
-import "./keytar";
-import "./seshat";
-import "./settings";
-import * as tray from "./tray";
-import { buildMenuTemplate } from "./vectormenu";
-import webContentsHandler from "./webcontents-handler";
-import * as updater from "./updater";
-import { getProfileFromDeeplink, protocolInit } from "./protocol";
-import { _t, AppLocalization } from "./language-helper";
-import { setDisplayMediaCallback } from "./displayMediaCallback";
-import { setupMacosTitleBar } from "./macos-titlebar";
-import { loadJsonFile } from "./utils";
-import { setupMediaAuth } from "./media-auth";
+import "./ipc.js";
+import "./keytar.js";
+import "./seshat.js";
+import "./settings.js";
+import * as tray from "./tray.js";
+import { buildMenuTemplate } from "./vectormenu.js";
+import webContentsHandler from "./webcontents-handler.js";
+import * as updater from "./updater.js";
+import { getProfileFromDeeplink, protocolInit } from "./protocol.js";
+import { _t, AppLocalization } from "./language-helper.js";
+import { setDisplayMediaCallback } from "./displayMediaCallback.js";
+import { setupMacosTitleBar } from "./macos-titlebar.js";
+import { loadJsonFile } from "./utils.js";
+import { setupMediaAuth } from "./media-auth.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const argv = minimist(process.argv, {
     alias: { help: "h" },
@@ -373,14 +376,10 @@ app.on("ready", async () => {
 
     if (argv["devtools"]) {
         try {
-            // eslint-disable-next-line @typescript-eslint/no-require-imports
-            const { default: installExt, REACT_DEVELOPER_TOOLS, REACT_PERF } = require("electron-devtools-installer");
+            const { default: installExt, REACT_DEVELOPER_TOOLS } = await import("electron-devtools-installer");
             installExt(REACT_DEVELOPER_TOOLS)
                 .then((name: string) => console.log(`Added Extension: ${name}`))
                 .catch((err: unknown) => console.log("An error occurred: ", err));
-            installExt(REACT_PERF)
-                .then((name: string) => console.log(`Added Extension: ${name}`))
-                .catch((err: unknown) => console.log("An error occurred: ", err));
         } catch (e) {
             console.log(e);
         }
@@ -453,7 +452,7 @@ app.on("ready", async () => {
         defaultHeight: 768,
     });
 
-    const preloadScript = path.normalize(`${__dirname}/preload.js`);
+    const preloadScript = path.normalize(`${__dirname}/preload.cjs`);
     global.mainWindow = new BrowserWindow({
         // https://www.electronjs.org/docs/faq#the-font-looks-blurry-what-is-this-and-what-can-i-do
         backgroundColor: "#fff",

src/ipc.ts

@@ -9,11 +9,11 @@ import { app, autoUpdater, desktopCapturer, ipcMain, powerSaveBlocker, TouchBar,
 import { relaunchApp } from "electron-clear-data";
 
 import IpcMainEvent = Electron.IpcMainEvent;
-import { recordSSOSession } from "./protocol";
-import { randomArray } from "./utils";
-import { Settings } from "./settings";
-import { keytar } from "./keytar";
-import { getDisplayMediaCallback, setDisplayMediaCallback } from "./displayMediaCallback";
+import { recordSSOSession } from "./protocol.js";
+import { randomArray } from "./utils.js";
+import { Settings } from "./settings.js";
+import { keytar } from "./keytar.js";
+import { getDisplayMediaCallback, setDisplayMediaCallback } from "./displayMediaCallback.js";
 
 ipcMain.on("setBadgeCount", function (_ev: IpcMainEvent, count: number): void {
     if (process.platform !== "win32") {

src/keytar.ts

@@ -9,8 +9,7 @@ import type * as Keytar from "keytar"; // Hak dependency type
 
 let keytar: typeof Keytar | undefined;
 try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    keytar = require("keytar");
+    keytar = await import("keytar");
 } catch (e) {
     if ((<NodeJS.ErrnoException>e).code === "MODULE_NOT_FOUND") {
         console.log("Keytar isn't installed; secure key storage is disabled.");

src/language-helper.ts

@@ -7,10 +7,14 @@ Please see LICENSE files in the repository root for full details.
 
 import counterpart from "counterpart";
 import { TranslationKey as TKey } from "matrix-web-i18n";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 
 import type Store from "electron-store";
 import type EN from "./i18n/strings/en_EN.json";
-import { loadJsonFile } from "./utils";
+import { loadJsonFile } from "./utils.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const FALLBACK_LOCALE = "en";
 

src/macos-titlebar.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { BrowserWindow } from "electron";
+import type { BrowserWindow } from "electron";
 
 export function setupMacosTitleBar(window: BrowserWindow): void {
     if (process.platform !== "darwin") return;

src/media-auth.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { BrowserWindow, ipcMain, session } from "electron";
+import { type BrowserWindow, ipcMain, session } from "electron";
 
 /**
  * Check for feature support from the server.

src/preload.cts

@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
+// This file is compiled to CommonJS rather than ESM otherwise the browser chokes on the import statement.
+
 import { ipcRenderer, contextBridge, IpcRendererEvent } from "electron";
 
 // Expose only expected IPC wrapper APIs to the renderer process to avoid

src/protocol.ts

@@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { app } from "electron";
-import { URL } from "url";
-import path from "path";
-import fs from "fs";
+import { URL } from "node:url";
+import path from "node:path";
+import fs from "node:fs";
 
 const LEGACY_PROTOCOL = "element";
 const PROTOCOL = "io.element.desktop";

src/seshat.ts

@@ -6,8 +6,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { app, ipcMain } from "electron";
-import { promises as afs } from "fs";
-import path from "path";
+import { promises as afs } from "node:fs";
+import path from "node:path";
 
 import type {
     Seshat as SeshatType,
@@ -15,8 +15,8 @@ import type {
     ReindexError as ReindexErrorType,
 } from "matrix-seshat"; // Hak dependency type
 import IpcMainEvent = Electron.IpcMainEvent;
-import { randomArray } from "./utils";
-import { keytar } from "./keytar";
+import { randomArray } from "./utils.js";
+import { keytar } from "./keytar.js";
 
 let seshatSupported = false;
 let Seshat: typeof SeshatType;
@@ -24,8 +24,7 @@ let SeshatRecovery: typeof SeshatRecoveryType;
 let ReindexError: typeof ReindexErrorType;
 
 try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const seshatModule = require("matrix-seshat");
+    const seshatModule = await import("matrix-seshat");
     Seshat = seshatModule.Seshat;
     SeshatRecovery = seshatModule.SeshatRecovery;
     ReindexError = seshatModule.ReindexError;

src/settings.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as tray from "./tray";
+import * as tray from "./tray.js";
 
 interface Setting {
     read(): Promise<any>;

src/squirrelhooks.ts

@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import path from "path";
-import { spawn } from "child_process";
+import path from "node:path";
+import { spawn } from "node:child_process";
 import { app } from "electron";
 
 export function getSquirrelExecutable(): string {

src/tray.ts

@@ -9,11 +9,11 @@ Please see LICENSE files in the repository root for full details.
 
 import { app, Tray, Menu, nativeImage } from "electron";
 import pngToIco from "png-to-ico";
-import path from "path";
-import fs from "fs";
+import path from "node:path";
+import fs from "node:fs";
 import { v5 as uuidv5 } from "uuid";
 
-import { _t } from "./language-helper";
+import { _t } from "./language-helper.js";
 
 let trayIcon: Tray | null = null;
 

src/updater.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import { app, autoUpdater, ipcMain } from "electron";
 import fs from "node:fs/promises";
 
-import { getSquirrelExecutable } from "./squirrelhooks";
+import { getSquirrelExecutable } from "./squirrelhooks.js";
 
 const UPDATE_POLL_INTERVAL_MS = 60 * 60 * 1000;
 const INITIAL_UPDATE_DELAY_MS = 30 * 1000;

src/utils.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import crypto from "crypto";
+import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
 

src/vectormenu.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { app, shell, Menu, MenuItem, MenuItemConstructorOptions } from "electron";
 
-import { _t } from "./language-helper";
+import { _t } from "./language-helper.js";
 
 const isMac = process.platform === "darwin";
 

src/webcontents-handler.ts

@@ -21,13 +21,13 @@ import {
     IpcMainEvent,
     Event,
 } from "electron";
-import url from "url";
-import fs from "fs";
+import url from "node:url";
+import fs from "node:fs";
 import fetch from "node-fetch";
-import { pipeline } from "stream/promises";
-import path from "path";
+import { pipeline } from "node:stream/promises";
+import path from "node:path";
 
-import { _t } from "./language-helper";
+import { _t } from "./language-helper.js";
 
 const MAILTO_PREFIX = "mailto:";