upgrade electron v13 -> v26

Author: kirjavascript

package-lock.json

@@ -9,7 +9,7 @@
         "node-sass": "git+https://github.com/TomiBelan/node-sass-wasm#built/master"
     },
     "dependencies": {
-        "@electron/remote": "^1.1.0",
+        "@electron/remote": "^2.0.11",
         "@react-spring/web": "^9.6.0",
         "arcsecond": "^3.1.2",
         "array-move": "^3.0.1",
@@ -18,7 +18,7 @@
         "d3-dispatch": "^1.0.3",
         "d3-drag": "^1.2.5",
         "d3-selection": "^1.1.0",
-        "electron": "13.6.9",
+        "electron": "^26.2.4",
         "flexlayout-react": "^0.4.5",
         "lodash": "^4.17.19",
         "marked": "^0.3.6",

package.json

@@ -19,6 +19,8 @@ function createWindow() {
         },
     });
 
+    require('./remote/main').enable(mainWindow.webContents);
+
     mainWindow.setMenu(null);
     mainWindow.loadFile('./index.html');
 

static/index.js

@@ -1,13 +1,16 @@
 # @electron/remote
 
+[![CircleCI build status](https://circleci.com/gh/electron/remote/tree/main.svg?style=shield)](https://circleci.com/gh/electron/remote/tree/main)
+[![npm version](http://img.shields.io/npm/v/@electron/remote.svg)](https://npmjs.org/package/@electron/remote)
+
 `@electron/remote` is an [Electron](https://electronjs.org) module that bridges
 JavaScript objects from the main process to the renderer process. This lets you
 access main-process-only objects as if they were available in the renderer
 process.
 
 > ⚠️ **Warning!** This module has [many subtle
 > pitfalls][remote-considered-harmful]. There is almost always a better way to
-> accomplish your task than using this module. For example, [`ipcRenderer.invoke`](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args) can serve many common use cases.
+> accomplish your task than using this module. For example, [`ipcRenderer.invoke`](https://www.electronjs.org/docs/latest/api/ipc-renderer#ipcrendererinvokechannel-args) can serve many common use cases.
 
 `@electron/remote` is a replacement for the built-in `remote` module in
 Electron, which is deprecated and will eventually be removed.
@@ -52,12 +55,13 @@ configure your bundler appropriately to package the code of `@electron/remote`
 in the preload script. Of course, [using `@electron/remote` makes the sandbox
 much less effective][remote-considered-harmful].
 
-**Note:** `@electron/remote` respects the `enableRemoteModule` WebPreferences
+**Note:** In `electron >= 14.0.0`, you must use the new `enable` API to enable the remote module for each desired `WebContents` separately: `require("@electron/remote/main").enable(webContents)`.
+
+In `electron < 14.0.0`, `@electron/remote` respects the `enableRemoteModule` WebPreferences
 value. You must pass `{ webPreferences: { enableRemoteModule: true } }` to
 the constructor of `BrowserWindow`s that should be granted permission to use
 `@electron/remote`.
 
-
 # API Reference
 
 The `remote` module provides a simple way to do inter-process communication
@@ -85,9 +89,11 @@ of the remote module:
 require('@electron/remote/main').initialize()
 ```
 
-**Note:** The remote module can be disabled for security reasons in the following contexts:
-- [`BrowserWindow`](browser-window.md) - by setting the `enableRemoteModule` option to `false`.
-- [`<webview>`](webview-tag.md) - by setting the `enableremotemodule` attribute to `false`.
+**Note:** In `electron >= 14.0.0` the remote module is disabled by default for any `WebContents` instance and is only enabled for specified `WebContents` after explicitly calling `require("@electron/remote/main").enable(webContents)`.
+
+In `electron < 14.0.0` the remote module can be disabled for security reasons in the following contexts:
+- [`BrowserWindow`](https://www.electronjs.org/docs/latest/api/browser-window) - by setting the `enableRemoteModule` option to `false`.
+- [`<webview>`](https://www.electronjs.org/docs/latest/api/webview-tag) - by setting the `enableremotemodule` attribute to `false`.
 
 ## Remote Objects
 
@@ -214,8 +220,8 @@ e.g.
 ```sh
 project/
 ├── main
-│   ├── foo.js
-│   └── index.js
+│   ├── foo.js
+│   └── index.js
 ├── package.json
 └── renderer
     └── index.js

static/remote/README.md

@@ -29,20 +29,23 @@ exports.browserModuleNames = [
     'powerMonitor',
     'powerSaveBlocker',
     'protocol',
+    'pushNotifications',
+    'safeStorage',
     'screen',
     'session',
     'ShareMenu',
     'systemPreferences',
     'TopLevelWindow',
     'TouchBar',
     'Tray',
+    'utilityProcess',
     'View',
     'webContents',
     'WebContentsView',
     'webFrameMain',
 ].concat(exports.commonModuleNames);
 const features = get_electron_binding_1.getElectronBinding('features');
-if (!features || features.isDesktopCapturerEnabled()) {
+if (!features || !features.isDesktopCapturerEnabled || features.isDesktopCapturerEnabled()) {
     exports.browserModuleNames.push('desktopCapturer');
 }
 if (!features || features.isViewApiEnabled()) {

static/remote/dist/src/common/module-names.js

@@ -1 +1 @@
-export { initialize } from './server';
+export { initialize, enable } from "./server";

static/remote/dist/src/main/index.d.ts

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialize = void 0;
+exports.enable = exports.initialize = void 0;
 var server_1 = require("./server");
 Object.defineProperty(exports, "initialize", { enumerable: true, get: function () { return server_1.initialize; } });
+Object.defineProperty(exports, "enable", { enumerable: true, get: function () { return server_1.enable; } });

static/remote/dist/src/main/index.js

@@ -1,3 +1,4 @@
 import { WebContents } from 'electron';
-export declare const isRemoteModuleEnabled: (contents: WebContents) => any;
+export declare const isRemoteModuleEnabled: (contents: WebContents) => boolean | undefined;
+export declare function enable(contents: WebContents): void;
 export declare function initialize(): void;

static/remote/dist/src/main/server.d.ts

@@ -3,13 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialize = exports.isRemoteModuleEnabled = void 0;
+exports.initialize = exports.enable = exports.isRemoteModuleEnabled = void 0;
 const events_1 = require("events");
 const objects_registry_1 = __importDefault(require("./objects-registry"));
 const type_utils_1 = require("../common/type-utils");
 const electron_1 = require("electron");
 const get_electron_binding_1 = require("../common/get-electron-binding");
+const { Promise } = global;
 const v8Util = get_electron_binding_1.getElectronBinding('v8_util');
+const hasWebPrefsRemoteModuleAPI = (() => {
+    var _a, _b;
+    const electronVersion = Number((_b = (_a = process.versions.electron) === null || _a === void 0 ? void 0 : _a.split(".")) === null || _b === void 0 ? void 0 : _b[0]);
+    return Number.isNaN(electronVersion) || electronVersion < 14;
+})();
 // The internal properties of Function.
 const FUNCTION_PROPERTIES = [
     'length', 'name', 'arguments', 'caller', 'prototype'
@@ -293,19 +299,23 @@ const isRemoteModuleEnabledImpl = function (contents) {
 };
 const isRemoteModuleEnabledCache = new WeakMap();
 const isRemoteModuleEnabled = function (contents) {
-    if (!isRemoteModuleEnabledCache.has(contents)) {
+    if (hasWebPrefsRemoteModuleAPI && !isRemoteModuleEnabledCache.has(contents)) {
         isRemoteModuleEnabledCache.set(contents, isRemoteModuleEnabledImpl(contents));
     }
     return isRemoteModuleEnabledCache.get(contents);
 };
 exports.isRemoteModuleEnabled = isRemoteModuleEnabled;
+function enable(contents) {
+    isRemoteModuleEnabledCache.set(contents, true);
+}
+exports.enable = enable;
 const handleRemoteCommand = function (channel, handler) {
     electron_1.ipcMain.on(channel, (event, contextId, ...args) => {
         let returnValue;
         if (!exports.isRemoteModuleEnabled(event.sender)) {
             event.returnValue = {
                 type: 'exception',
-                value: valueToMeta(event.sender, contextId, new Error('@electron/remote is disabled for this WebContents. Set {enableRemoteModule: true} in WebPreferences to enable it.'))
+                value: valueToMeta(event.sender, contextId, new Error('@electron/remote is disabled for this WebContents. Call require("@electron/remote/main").enable(webContents) to enable it.'))
             };
             return;
         }
@@ -338,8 +348,6 @@ let initialized = false;
 function initialize() {
     if (initialized)
         throw new Error('@electron/remote has already been initialized');
-    if (Number(process.versions.electron.split('.')[0]) >= 14)
-        throw new Error('@electron/remote >= 2.x is required for Electron >= 14. See https://github.com/electron/remote/blob/main/docs/migration-2.md for migration instructions.');
     initialized = true;
     handleRemoteCommand("REMOTE_BROWSER_WRONG_CONTEXT_ERROR" /* BROWSER_WRONG_CONTEXT_ERROR */, function (event, contextId, passedContextId, id) {
         const objectId = [passedContextId, id];
@@ -433,7 +441,8 @@ function initialize() {
             return valueToMeta(event.sender, contextId, func(...args), true);
         }
         catch (error) {
-            const err = new Error(`Could not call remote function '${func.name || 'anonymous'}'. Check that the function signature is correct. Underlying error: ${error.message}\nUnderlying stack: ${error.stack}\n`);
+            const err = new Error(`Could not call remote function '${func.name || "anonymous"}'. Check that the function signature is correct. Underlying error: ${error}\n` +
+                (error instanceof Error ? `Underlying stack: ${error.stack}\n` : ""));
             err.cause = error;
             throw err;
         }
@@ -456,7 +465,8 @@ function initialize() {
             return valueToMeta(event.sender, contextId, object[method](...args), true);
         }
         catch (error) {
-            const err = new Error(`Could not call remote method '${method}'. Check that the method signature is correct. Underlying error: ${error.message}\nUnderlying stack: ${error.stack}\n`);
+            const err = new Error(`Could not call remote method '${method}'. Check that the method signature is correct. Underlying error: ${error}` +
+                (error instanceof Error ? `Underlying stack: ${error.stack}\n` : ""));
             err.cause = error;
             throw err;
         }

static/remote/dist/src/main/server.js

@@ -6,6 +6,7 @@ const type_utils_1 = require("../common/type-utils");
 const electron_1 = require("electron");
 const module_names_1 = require("../common/module-names");
 const get_electron_binding_1 = require("../common/get-electron-binding");
+const { Promise } = global;
 const callbacksRegistry = new callbacks_registry_1.CallbacksRegistry();
 const remoteObjectCache = new Map();
 const finalizationRegistry = new FinalizationRegistry((id) => {
@@ -247,6 +248,8 @@ function proxyFunctionProperties(remoteMemberFunction, metaId, name) {
 }
 // Convert meta data from browser into real value.
 function metaToValue(meta) {
+    if (!meta)
+        return {};
     if (meta.type === 'value') {
         return meta.value;
     }