Replace internal remote module usage

main/index.ts

@@ -7,8 +7,6 @@ import toMilliseconds from '@sindresorhus/to-milliseconds';
 import './windows/load';
 import './utils/sentry';
 
-require('electron-timber').hookConsole({main: true, renderer: true});
-
 import {settings} from './common/settings';
 import {plugins} from './plugins';
 import {initializeTray} from './tray';
@@ -25,6 +23,9 @@ import {windowManager} from './windows/manager';
 import {setupProtocol} from './utils/protocol';
 import {stopRecordingWithNoEdit} from './aperture';
 
+const remoteMain = require('@electron/remote/main');
+remoteMain.initialize();
+
 const prepareNext = require('electron-next');
 
 const filesToOpen: string[] = [];

main/plugins/plugin.ts

@@ -59,7 +59,7 @@ class BasePlugin {
   }
 }
 
-export interface KapPlugin<Config = any> {
+export interface KapPlugin<Config extends Record<string, any> = any> {
   shareServices?: Array<ShareService<Config>>;
   editServices?: Array<EditService<Config>>;
   recordServices?: Array<RecordService<Config>>;

main/windows/config.ts

@@ -7,6 +7,8 @@ import pEvent from 'p-event';
 import {loadRoute} from '../utils/routes';
 import {windowManager} from './manager';
 
+const remoteMain = require('@electron/remote/main');
+
 const openConfigWindow = async (pluginName: string) => {
   const prefsWindow = await windowManager.preferences?.open();
   const configWindow = new BrowserWindow({
@@ -23,11 +25,12 @@ const openConfigWindow = async (pluginName: string) => {
     modal: true,
     webPreferences: {
       nodeIntegration: true,
-      enableRemoteModule: true,
       contextIsolation: false
     }
   });
 
+  remoteMain.enable(configWindow.webContents);
+
   loadRoute(configWindow, 'config');
 
   configWindow.webContents.on('did-finish-load', async () => {
@@ -53,11 +56,12 @@ const openEditorConfigWindow = async (pluginName: string, serviceTitle: string,
     modal: true,
     webPreferences: {
       nodeIntegration: true,
-      enableRemoteModule: true,
       contextIsolation: false
     }
   });
 
+  remoteMain.enable(configWindow.webContents);
+
   loadRoute(configWindow, 'config');
 
   configWindow.webContents.on('did-finish-load', async () => {

main/windows/cropper.ts

@@ -12,6 +12,8 @@ const croppers = new Map<number, BrowserWindow>();
 let notificationId: number | undefined;
 let isOpen = false;
 
+const remoteMain = require('@electron/remote/main');
+
 const closeAllCroppers = () => {
   screen.removeAllListeners('display-removed');
   screen.removeAllListeners('display-added');
@@ -47,11 +49,12 @@ const openCropper = (display: Display, activeDisplayId?: number) => {
     show: false,
     webPreferences: {
       nodeIntegration: true,
-      enableRemoteModule: true,
       contextIsolation: false
     }
   });
 
+  remoteMain.enable(cropper.webContents);
+
   loadRoute(cropper, 'cropper');
 
   cropper.setAlwaysOnTop(true, 'screen-saver', 1);

main/windows/dialog.ts

@@ -5,6 +5,8 @@ import {ipcMain as ipc} from 'electron-better-ipc';
 import {loadRoute} from '../utils/routes';
 import {windowManager} from './manager';
 
+const remoteMain = require('@electron/remote/main');
+
 const DIALOG_MIN_WIDTH = 420;
 const DIALOG_MIN_HEIGHT = 150;
 
@@ -26,11 +28,12 @@ const showDialog = async (options: DialogOptions) => new Promise<number | void>(
     useContentSize: true,
     webPreferences: {
       nodeIntegration: true,
-      enableRemoteModule: true,
       contextIsolation: false
     }
   });
 
+  remoteMain.enable(dialogWindow.webContents);
+
   loadRoute(dialogWindow, 'dialog');
 
   let buttons: any[];

main/windows/kap-window.ts

@@ -4,6 +4,8 @@ import pEvent from 'p-event';
 import {customApplicationMenu, defaultApplicationMenu, MenuModifier} from '../menus/application';
 import {loadRoute} from '../utils/routes';
 
+const remoteMain = require('@electron/remote/main');
+
 interface KapWindowOptions<State> extends Electron.BrowserWindowConstructorOptions {
   route: string;
   waitForMount?: boolean;
@@ -51,13 +53,14 @@ export default class KapWindow<State = any> {
       ...rest,
       webPreferences: {
         nodeIntegration: true,
-        enableRemoteModule: true,
         contextIsolation: false,
         ...rest.webPreferences
       },
       show: false
     });
 
+    remoteMain.enable(this.browserWindow.webContents);
+
     this.id = this.browserWindow.id;
     KapWindow.windows.set(this.id, this);
 

main/windows/preferences.ts

@@ -7,6 +7,8 @@ import {loadRoute} from '../utils/routes';
 import {track} from '../common/analytics';
 import {windowManager} from './manager';
 
+const remoteMain = require('@electron/remote/main');
+
 let prefsWindow: BrowserWindow | undefined;
 
 export type PreferencesWindowOptions = any;
@@ -39,11 +41,12 @@ const openPrefsWindow = async (options?: PreferencesWindowOptions) => {
     vibrancy: 'window',
     webPreferences: {
       nodeIntegration: true,
-      enableRemoteModule: true,
       contextIsolation: false
     }
   });
 
+  remoteMain.enable(prefsWindow.webContents);
+
   const titlebarHeight = 85;
   prefsWindow.setSheetOffset(titlebarHeight);
 

package.json

@@ -25,14 +25,15 @@
     "build": "yarn build-main && yarn build-renderer",
     "dist": "npm run build && electron-builder",
     "pack": "npm run build && electron-builder --dir",
-    "postinstall": "electron-builder install-app-deps",
+    "postinstall": "patch-package && electron-builder install-app-deps",
     "sentry-version": "echo \"$npm_package_name@$npm_package_version\"",
     "dev": "next dev renderer"
   },
   "bundle": {
     "name": "Kap"
   },
   "dependencies": {
+    "@electron/remote": "^2.0.8",
     "@sentry/browser": "^6.2.2",
     "@sentry/electron": "^2.4.0",
     "@sindresorhus/to-milliseconds": "^1.2.0",
@@ -43,14 +44,13 @@
     "clean-stack": "^3.0.1",
     "cp-file": "^9.0.0",
     "delay": "^5.0.0",
-    "electron-better-ipc": "^1.1.1",
+    "electron-better-ipc": "^2.0.1",
     "electron-log": "^4.3.2",
     "electron-next": "^3.1.5",
     "electron-notarize": "^1.1.1",
     "electron-store": "^7.0.2",
-    "electron-timber": "^0.5.1",
     "electron-updater": "^4.3.8",
-    "electron-util": "^0.14.2",
+    "electron-util": "^0.17.2",
     "ensure-error": "^3.0.1",
     "execa": "5.0.0",
     "ffmpeg-static": "^4.4.1",
@@ -109,7 +109,7 @@
     "@typescript-eslint/parser": "^4.15.0",
     "ava": "^3.15.0",
     "babel-eslint": "^10.1.0",
-    "electron": "13.6.9",
+    "electron": "14.2.9",
     "electron-builder": "^23.3.3",
     "electron-builder-notarize": "^1.4.0",
     "eslint-config-xo": "^0.35.0",
@@ -119,7 +119,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.2.5",
     "module-alias": "^2.2.2",
-    "next": "^10.0.8",
+    "next": "10.2.3",
+    "patch-package": "^6.5.0",
     "run-electron": "^1.0.0",
     "sinon": "^9.2.4",
     "tap-xunit": "^2.4.1",

patches/electron-is-dev+1.2.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/electron-is-dev/index.js b/node_modules/electron-is-dev/index.js
+index 3b3fbc5..042a8a5 100644
+--- a/node_modules/electron-is-dev/index.js
++++ b/node_modules/electron-is-dev/index.js
+@@ -5,7 +5,7 @@ if (typeof electron === 'string') {
+ 	throw new TypeError('Not running in an Electron environment!');
+ }
+
+-const app = electron.app || electron.remote.app;
++const app = electron.app || require('@electron/remote');
+
+ const isEnvSet = 'ELECTRON_IS_DEV' in process.env;
+ const getFromEnv = parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;

renderer/components/action-bar/controls/main.js

@@ -1,4 +1,3 @@
-import electron from 'electron';
 import PropTypes from 'prop-types';
 import React from 'react';
 import css from 'styled-jsx/css';
@@ -24,11 +23,10 @@ const mainStyle = css`
 
 const MainControls = {};
 
-const remote = electron.remote || false;
 let menu;
 
 const buildMenu = async ({selectedApp}) => {
-  const {buildWindowsMenu} = remote.require('./utils/windows');
+  const {buildWindowsMenu} = await require('@electron/remote').require('./utils/windows');
   menu = await buildWindowsMenu(selectedApp);
 };
 
@@ -86,7 +84,7 @@ MainControls.Left = connect(
 
 class Right extends React.Component {
   onCogMenuClick = async () => {
-    const cogMenu = await electron.remote.require('./menus/cog').getCogMenu();
+    const cogMenu = await require('@electron/remote').require('./menus/cog').getCogMenu();
     cogMenu.popup();
   };
 

renderer/components/action-bar/record-button.js

@@ -1,4 +1,3 @@
-import electron from 'electron';
 import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -97,8 +96,7 @@ const RecordButton = ({
     event.stopPropagation();
 
     if (cropperExists) {
-      const {remote} = electron;
-      const {startRecording} = remote.require('./aperture');
+      const {startRecording} = require('@electron/remote').require('./aperture');
 
       willStartRecording();
 

renderer/components/cropper/cursor.js

@@ -1,12 +1,17 @@
-import electron from 'electron';
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
 import {connect, CursorContainer, CropperContainer} from '../../containers';
 
 class Cursor extends React.Component {
-  remote = electron.remote || false;
+  constructor() {
+    super();
+
+    if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
+      this.remote = require('@electron/remote');
+    }
+  }
 
   render() {
     if (!this.remote) {

renderer/components/editor/conversion/title-bar.tsx

@@ -2,17 +2,16 @@ import TrafficLights from 'components/traffic-lights';
 import {BackPlainIcon, MoreIcon} from 'vectors';
 import {UseConversionState} from 'hooks/editor/use-conversion';
 import {flags} from '../../../common/flags';
-import {MenuItemConstructorOptions, remote} from 'electron';
+import {MenuItemConstructorOptions} from 'electron';
 import {ExportStatus} from '../../../common/types';
 import {useMemo} from 'react';
-import {template} from 'lodash';
 import IconMenu from '../../icon-menu';
 
 const TitleBar = ({conversion, cancel, copy, retry, showInFolder}: {conversion: UseConversionState; cancel: () => any; copy: () => any; retry: () => any; showInFolder: () => void}) => {
-  const {api} = require('electron-util');
+  const remote = process.type === 'renderer' ? require('@electron/remote') : false;
   const shouldClose = async () => {
     if (conversion.status === ExportStatus.inProgress && !flags.get('backgroundEditorConversion')) {
-      await api.dialog.showMessageBox(remote.getCurrentWindow(), {
+      await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'info',
         message: 'Your export will continue in the background. You can access it through the Export History window.',
         buttons: ['Ok'],

renderer/components/editor/options/select.tsx

@@ -1,7 +1,7 @@
 import {DropdownArrowIcon, CancelIcon} from '../../../vectors';
 import classNames from 'classnames';
 import {useRef} from 'react';
-import {remote, MenuItemConstructorOptions, NativeImage} from 'electron';
+import {MenuItemConstructorOptions, NativeImage} from 'electron';
 
 type Option<T> = {
   label: string;
@@ -48,7 +48,7 @@ const Select = <T, >(props: Props<T>) => {
 
     const boundingRect = select.current.getBoundingClientRect();
 
-    const {Menu} = remote;
+    const {Menu} = require('@electron/remote');
 
     const convertToMenuTemplate = (option: Option<T> | Separator): MenuItemConstructorOptions => {
       if (option.separator) {

renderer/components/editor/video-controls-container.tsx

@@ -1,10 +1,9 @@
 import {createContainer} from 'unstated-next';
-import electron from 'electron';
 import {useRef, useState, useEffect} from 'react';
 
 const useVideoControls = () => {
   const videoRef = useRef<HTMLVideoElement>();
-  const currentWindow = electron.remote.getCurrentWindow();
+  const currentWindow = require('@electron/remote').getCurrentWindow();
   const wasPaused = useRef(true);
   const transitioningPauseState = useRef<Promise<void>>();
 

renderer/components/icon-menu.tsx

@@ -27,8 +27,7 @@ const IconMenu: FunctionComponent<IconMenuProps> = props => {
         y: Math.round(bottom)
       });
     } else {
-      const {api} = require('electron-util');
-      const menu = api.Menu.buildFromTemplate(props.template);
+      const menu = require('@electron/remote').Menu.buildFromTemplate(props.template);
       menu.popup({
         x: Math.round(left),
         y: Math.round(bottom)

renderer/components/preferences/categories/general.js

@@ -24,7 +24,7 @@ class General extends React.Component {
 
   componentDidMount() {
     this.setState({
-      showCursorSupported: electron.remote.require('macos-version').isGreaterThanOrEqualTo('10.13')
+      showCursorSupported: require('@electron/remote').require('macos-version').isGreaterThanOrEqualTo('10.13')
     });
   }
 

renderer/components/preferences/item/select.js

@@ -1,4 +1,3 @@
-import electron from 'electron';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -22,11 +21,13 @@ class Select extends React.Component {
   static getDerivedStateFromProps(nextProps) {
     const {options, onSelect, selected} = nextProps;
 
-    if (!electron.remote || options.length === 0) {
+    const remote = require('@electron/remote');
+
+    if (!remote || options.length === 0) {
       return {};
     }
 
-    const {Menu, MenuItem} = electron.remote;
+    const {Menu, MenuItem} = remote;
     const menu = new Menu();
 
     for (const option of options) {

renderer/components/preferences/shortcut-input.js

@@ -154,7 +154,7 @@ const ShortcutInput = ({shortcut = '', onChange, tabIndex}) => {
   };
 
   const openMenu = () => {
-    const {Menu} = require('electron').remote;
+    const {Menu} = require('@electron/remote');
     const menu = Menu.buildFromTemplate(presets.map(accelerator => ({
       label: accelerator.split('+').map(key => metaCharacters.get(key) || key).join(''),
       click: () => {