Upgrade to Electron 5 and upgrade other dependencies (wulkano#664)

main/about.js

@@ -1,6 +1,6 @@
 const electron = require('electron');
 const {is} = require('electron-util');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 const delay = require('delay');
 
 const loadRoute = require('./utils/routes');
@@ -28,6 +28,7 @@ const openAboutWindow = () => {
     title: '',
     center: true,
     webPreferences: {
+      nodeIntegration: true,
       webSecurity: !is.development // Disable webSecurity in dev to load video over file:// protocol while serving over insecure http, this is not needed in production where we use file:// protocol for html serving.
     },
     show: false

main/common/plugins.js

@@ -4,7 +4,7 @@ const electron = require('electron');
 const got = require('got');
 const execa = require('execa');
 const makeDir = require('make-dir');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 
 const {app, Notification} = electron;
 

main/config.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const {BrowserWindow} = require('electron');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 const pEvent = require('p-event');
 
 const loadRoute = require('./utils/routes');
@@ -19,7 +19,10 @@ const openConfigWindow = async pluginName => {
     titleBarStyle: 'hiddenInset',
     show: false,
     parent: prefsWindow,
-    modal: true
+    modal: true,
+    webPreferences: {
+      nodeIntegration: true
+    }
   });
 
   loadRoute(configWindow, 'config');

main/cropper.js

@@ -43,7 +43,10 @@ const openCropper = (display, activeDisplayId) => {
     moveable: false,
     frame: false,
     transparent: true,
-    show: false
+    show: false,
+    webPreferences: {
+      nodeIntegration: true
+    }
   });
 
   loadRoute(cropper, 'cropper');

main/editor.js

@@ -5,7 +5,7 @@ const path = require('path');
 const fs = require('fs');
 const EventEmitter = require('events');
 const pify = require('pify');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 const {is} = require('electron-util');
 const moment = require('moment');
 
@@ -40,6 +40,7 @@ const openEditorWindow = async (filePath, {recordedFps, isNewRecording, original
     height: MIN_WINDOW_HEIGHT,
     frame: false,
     webPreferences: {
+      nodeIntegration: true,
       webSecurity: !is.development // Disable webSecurity in dev to load video over file:// protocol while serving over insecure http, this is not needed in production where we use file:// protocol for html serving.
     },
     transparent: true,

main/export-list.js

@@ -1,9 +1,9 @@
 /* eslint-disable array-element-newline */
 'use strict';
-const {dialog, ipcMain, BrowserWindow} = require('electron');
+const {dialog, BrowserWindow} = require('electron');
 const fs = require('fs');
 const pify = require('pify');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 const base64Img = require('base64-img');
 const tmp = require('tmp');
 const ffmpeg = require('@ffmpeg-installer/ffmpeg');
@@ -235,7 +235,7 @@ ipc.answerRenderer('open-export', createdAt => exportList.openExport(createdAt))
 
 ipc.answerRenderer('export-snapshot', saveSnapshot);
 
-ipcMain.on('drag-export', async (event, createdAt) => {
+ipc.on('drag-export', async (event, createdAt) => {
   const exportItem = exportList.getExport(createdAt);
   const file = exportItem && exportItem.data.filePath;
 

main/export-options.js

@@ -3,7 +3,7 @@ const path = require('path');
 const fs = require('fs');
 const electron = require('electron');
 const Store = require('electron-store');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 const makeDir = require('make-dir');
 
 const {app} = electron;

main/exports.js

@@ -19,7 +19,10 @@ const openExportsWindow = async () => {
       maximizable: false,
       fullscreenable: false,
       titleBarStyle: 'hiddenInset',
-      show: false
+      show: false,
+      webPreferences: {
+        nodeIntegration: true
+      }
     });
 
     const titlebarHeight = 37;

main/global-accelerators.js

@@ -1,6 +1,6 @@
 'use strict';
 const {globalShortcut} = require('electron');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 const shortcutToAccelerator = require('./utils/shortcut-to-accelerator');
 const store = require('./common/settings');
 const {openCropperWindow, isCropperOpen} = require('./cropper');

main/menus.js

@@ -3,7 +3,7 @@
 const os = require('os');
 const {Menu, app, dialog, BrowserWindow} = require('electron');
 const {openNewGitHubIssue, appMenu} = require('electron-util');
-const ipc = require('electron-better-ipc');
+const {ipcMain: ipc} = require('electron-better-ipc');
 
 const {supportedVideoExtensions} = require('./common/constants');
 const {openPrefsWindow} = require('./preferences');
@@ -116,7 +116,7 @@ appMenuItem.submenu[0] = aboutItem;
 const applicationMenuTemplate = [
   appMenuItem,
   {
-    label: 'File',
+    role: 'fileMenu',
     submenu: [
       openFileItem,
       {
@@ -142,7 +142,7 @@ const applicationMenuTemplate = [
     role: 'editMenu'
   },
   {
-    role: 'window',
+    role: 'windowMenu',
     submenu: [
       {
         role: 'minimize'

main/preferences.js

@@ -27,7 +27,10 @@ const openPrefsWindow = async () => {
     maximizable: false,
     fullscreenable: false,
     titleBarStyle: 'hiddenInset',
-    show: false
+    show: false,
+    webPreferences: {
+      nodeIntegration: true
+    }
   });
 
   const titlebarHeight = 85;

package.json

@@ -26,57 +26,58 @@
   },
   "dependencies": {
     "@ffmpeg-installer/ffmpeg": "^1.0.17",
-    "@sentry/browser": "^4.6.1",
-    "@sentry/electron": "^0.15.0",
+    "@sentry/browser": "^5.1.1",
+    "@sentry/electron": "^0.17.1",
     "@sindresorhus/do-not-disturb": "^1.0.0",
-    "@sindresorhus/to-milliseconds": "^1.0.0",
+    "@sindresorhus/to-milliseconds": "^1.2.0",
     "ajv": "^6.9.1",
     "aperture": "^5.2.0",
     "base64-img": "^1.0.4",
     "classnames": "^2.2.6",
-    "delay": "^4.1.0",
-    "electron-better-ipc": "^0.1.2",
-    "electron-log": "^2.2.17",
+    "delay": "^4.2.0",
+    "electron-better-ipc": "^0.3.0",
+    "electron-log": "^3.0.5",
     "electron-next": "^3.1.5",
-    "electron-store": "^2.0.0",
+    "electron-store": "^3.2.0",
     "electron-updater": "^4.0.6",
     "electron-util": "^0.11.0",
     "execa": "^1.0.0",
     "file-icon": "^3.0.0",
-    "first-run": "^1.2.0",
+    "first-run": "^2.0.0",
     "got": "^9.6.0",
     "hide-desktop-icons": "^0.4.0",
-    "insight": "^0.10.1",
+    "insight": "^0.10.3",
     "lodash": "^4.17.10",
     "mac-windows": "^0.7.1",
-    "macos-version": "^5.0.0",
-    "make-dir": "^2.0.0",
+    "macos-version": "^5.2.0",
+    "make-dir": "^3.0.0",
     "moment": "^2.24.0",
-    "move-file": "^1.0.0",
+    "move-file": "^1.2.0",
     "nearest-normal-aspect-ratio": "^1.2.1",
     "node-mac-app-icon": "^1.4.0",
     "npm": "^6.8.0",
-    "p-cancelable": "^1.0.0",
-    "p-event": "^2.3.1",
+    "p-cancelable": "^2.0.0",
+    "p-event": "^4.1.0",
     "pify": "^4.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-linkify": "^0.2.2",
-    "semver": "^5.6.0",
-    "tempy": "^0.2.1",
+    "semver": "^6.0.0",
+    "tempy": "^0.3.0",
     "tildify": "^1.2.0",
-    "tmp": "^0.0.33",
+    "tmp": "^0.1.0",
     "unstated": "^1.2.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
-    "electron": "^4.0.5",
-    "electron-builder": "^20.38.5",
-    "eslint-config-xo-react": "^0.18.0",
+    "electron": "^5.0.0",
+    "electron-builder": "^20.39.0",
+    "eslint-config-xo-react": "^0.19.0",
     "eslint-plugin-react": "^7.12.4",
-    "husky": "^1.3.1",
-    "next": "^8.0.1",
+    "eslint-plugin-react-hooks": "^1.6.0",
+    "husky": "^2.1.0",
+    "next": "^8.1.0",
     "xo": "^0.24.0"
   },
   "xo": {

renderer/containers/editor.js

@@ -98,7 +98,7 @@ export default class EditorContainer extends Container {
 
   saveOriginal = () => {
     const {filePath, originalFilePath} = this.state;
-    const ipc = require('electron-better-ipc');
+    const {ipcRenderer: ipc} = require('electron-better-ipc');
     ipc.callMain('save-original', {inputPath: originalFilePath || filePath});
   }
 
@@ -157,7 +157,7 @@ export default class EditorContainer extends Container {
     const time = this.videoContainer.state.currentTime;
     const {filePath} = this.state;
 
-    const ipc = require('electron-better-ipc');
+    const {ipcRenderer: ipc} = require('electron-better-ipc');
 
     ipc.callMain('export-snapshot', {
       inputPath: filePath,
@@ -190,7 +190,7 @@ export default class EditorContainer extends Container {
       originalFps
     };
 
-    const ipc = require('electron-better-ipc');
+    const {ipcRenderer: ipc} = require('electron-better-ipc');
 
     ipc.callMain('export', data);
     ipc.callMain('update-usage', {format, plugin: pluginName});

renderer/containers/exports.js

@@ -8,7 +8,7 @@ export default class ExportsContainer extends Container {
   }
 
   mount = async () => {
-    ipc = require('electron-better-ipc');
+    ipc = require('electron-better-ipc').ipcRenderer;
     const exports = await ipc.callMain('get-exports');
 
     this.setState({

renderer/containers/preferences.js

@@ -14,7 +14,7 @@ export default class PreferencesContainer extends Container {
     this.settings = this.remote.require('./common/settings');
     this.plugins = this.remote.require('./common/plugins');
     this.track = this.remote.require('./common/analytics').track;
-    this.ipc = require('electron-better-ipc');
+    this.ipc = require('electron-better-ipc').ipcRenderer;
 
     const pluginsInstalled = this.plugins.getInstalled().sort((a, b) => a.prettyName.localeCompare(b.prettyName));
 

renderer/pages/about.js

@@ -18,7 +18,7 @@ export default class AboutPage extends React.Component {
   }
 
   componentDidUpdate() {
-    const ipc = require('electron-better-ipc');
+    const {ipcRenderer: ipc} = require('electron-better-ipc');
     ipc.callMain('about-ready');
   }
 

renderer/pages/config.js

@@ -11,7 +11,7 @@ export default class ConfigPage extends React.Component {
   state = {pluginName: ''}
 
   componentDidMount() {
-    const ipc = require('electron-better-ipc');
+    const {ipcRenderer: ipc} = require('electron-better-ipc');
 
     ipc.answerMain('plugin', pluginName => {
       configContainer.setPlugin(pluginName);

renderer/pages/editor.js

@@ -16,7 +16,7 @@ export default class EditorPage extends React.Component {
   wasPaused = false;
 
   componentDidMount() {
-    const ipc = require('electron-better-ipc');
+    const {ipcRenderer: ipc} = require('electron-better-ipc');
 
     ipc.answerMain('file', async ({filePath, fps, originalFilePath}) => {
       await new Promise((resolve, reject) => {

renderer/pages/preferences.js

@@ -15,7 +15,7 @@ export default class PreferencesPage extends React.Component {
 
   componentDidMount() {
     preferencesContainer.mount(this.setOverlay);
-    const ipc = require('electron-better-ipc');
+    const {ipcRenderer: ipc} = require('electron-better-ipc');
     ipc.answerMain('open-plugin-config', preferencesContainer.openPluginsConfig);
   }