Update Electron 7, TypeScript 3.7, Webpack 4

.appveyor.yml

@@ -8,7 +8,7 @@ skip_tags: true
 build: off
 
 environment:
-  nodejs_version: "8.9.4"
+  nodejs_version: "10"
 
 cache:
   - node_modules

.travis.yml

@@ -3,7 +3,7 @@ osx_image: xcode9.3
 
 language: node_js
 node_js:
-  - "8.9"
+  - "10"
 
 branches:
   except:

.yarnrc

@@ -1,5 +1,5 @@
 save-exact true
 disturl "https://atom.io/download/electron"
-target "2.0.2"
+target "7.1.2"
 runtime "electron"
 build-from-source true

package.json

@@ -11,18 +11,18 @@
   },
   "scripts": {
     "start": "electron app/development",
-    "watch": "webpack --watch",
+    "watch": "webpack --mode=development --watch",
     "test": "yarn run test:unit && yarn run test:integration",
     "test:unit": "electron-mocha --grep @remote --invert \"./test/unit/**/*.test.{ts,tsx}\"",
     "test:unit:remote": "electron-mocha --grep @remote \"./test/unit/**/*.test.{ts,tsx}\"",
-    "test:build": "webpack --env.BUILD_ENV=test && electron-builder build --config electron-builder.test.yml --publish never --dir",
+    "test:build": "webpack --env.BUILD_ENV=test --mode=development && electron-builder build --config electron-builder.test.yml --publish never --dir",
     "test:integration": "yarn run test:build && mocha --exit test/integration/test.ts",
     "lint": "yarn run lint:eslint && yarn run lint:tsc && yarn run lint:prettier",
     "lint:eslint": "eslint --ext '.js,.jsx,.ts,.tsx' .",
     "lint:tsc": "tsc --noEmit",
     "lint:prettier": "prettier --list-different ./**/*.{js,jsx,ts,tsx,css,json}",
     "format": "prettier --write '**/*.{js,jsx,ts,tsx,css,json}'",
-    "publish": "webpack --env.BUILD_ENV=production && electron-builder build --publish always",
+    "publish": "webpack --env.BUILD_ENV=production --mode=production && electron-builder build --publish always",
     "ci": "yarn run lint && yarn run test"
   },
   "dependencies": {
@@ -31,9 +31,9 @@
     "classnames": "2.2.5",
     "codemirror": "5.33.0",
     "csv-stringify": "2.0.1",
-    "electron-is-dev": "0.3.0",
-    "electron-log": "2.2.14",
-    "electron-updater": "2.21.10",
+    "electron-is-dev": "1.1.0",
+    "electron-log": "3.0.9",
+    "electron-updater": "4.2.0",
     "font-awesome": "4.7.0",
     "fs-extra": "5.0.0",
     "immup": "3.0.0",
@@ -43,47 +43,48 @@
     "moment": "2.20.1",
     "mysql2": "1.5.3",
     "pg": "7.4.3",
-    "plotly.js": "1.32.0",
+    "plotly.js": "1.51.1",
     "react": "16.7.0",
     "react-dom": "16.7.0",
     "react-micro-flyout": "1.0.1",
     "react-modal": "3.1.10",
     "react-select": "1.2.1",
-    "sqlite3": "4.0.2",
+    "sqlite3": "4.1.0",
     "td": "0.3.0"
   },
   "devDependencies": {
     "@types/classnames": "2.2.3",
     "@types/codemirror": "0.0.55",
     "@types/csv-stringify": "1.4.1",
     "@types/mocha": "2.2.46",
-    "@types/node": "9.3.0",
-    "@types/plotly.js": "1.28.10",
+    "@types/node": "12.12.12",
+    "@types/plotly.js": "1.44.17",
     "@types/react": "16.0.34",
     "@types/react-dom": "16.0.3",
     "@types/react-select": "1.1.0",
     "@types/webdriverio": "4.10.3",
     "clean-webpack-plugin": "0.1.19",
     "copy-webpack-plugin": "4.5.1",
     "css-loader": "0.28.8",
-    "electron": "2.0.8",
-    "electron-builder": "20.8.1",
+    "electron": "7.1.2",
+    "electron-builder": "21.2.0",
     "electron-mocha": "6.0.1",
     "electron-publisher-s3": "20.14.4",
     "eslint": "4.16.0",
     "eslint-config-prettier": "2.9.0",
     "eslint-plugin-react": "7.5.1",
     "execa": "0.9.0",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.6",
+    "file-loader": "~4.3.0",
+    "mini-css-extract-plugin": "~0.8.0",
     "prettier": "1.14.0",
-    "spectron": "3.7.2",
-    "ts-loader": "3.2.0",
+    "spectron": "9.0.0",
+    "ts-loader": "6.2.1",
     "ts-node": "5.0.1",
-    "typescript": "2.9.1",
-    "typescript-eslint-parser": "15.0.0",
+    "typescript": "3.7.2",
+    "typescript-eslint-parser": "22.0.0",
     "url-loader": "0.6.2",
-    "webpack": "3.10.0",
+    "webpack": "4.41.2",
+    "webpack-cli": "3.3.10",
     "webpack-node-externals": "1.6.0"
   },
   "license": "MIT"

src/main/index.ts

@@ -10,11 +10,19 @@ process.on("uncaughtException", err => {
   logger.error(err);
 });
 
+// https://github.com/electron/electron/issues/2984#issuecomment-145419711
+process.once("loaded", () => {
+  global.setImmediate = setImmediate;
+});
+
 function createWindow() {
   mainWindow = new electron.BrowserWindow({
     width: 1280,
     height: 780,
-    title: "Bdash"
+    title: "Bdash",
+    webPreferences: {
+      nodeIntegration: true
+    }
   });
 
   mainWindow.loadURL(`file://${__dirname}/../index.html`);

src/main/menu.ts

@@ -4,17 +4,17 @@ import isDev from "electron-is-dev";
 
 const editMenu: Electron.MenuItemConstructorOptions = {
   label: "Edit",
-  submenu: [{ role: "cut" }, { role: "copy" }, { role: "paste" }, { role: "selectall" }]
+  submenu: [{ role: "cut" }, { role: "copy" }, { role: "paste" }, { role: "selectAll" }]
 };
 
 const viewMenu: Electron.MenuItemConstructorOptions = {
   label: "View",
   submenu: [
-    { role: "toggledevtools" },
+    { role: "toggleDevTools" },
     { type: "separator" },
-    { role: "resetzoom" },
-    { role: "zoomin" },
-    { role: "zoomout" }
+    { role: "resetZoom" },
+    { role: "zoomIn" },
+    { role: "zoomOut" }
   ]
 };
 
@@ -51,8 +51,8 @@ const checkForUpdateItem = {
       case UpdateState.UpdateDownloaded: {
         const message = "There is an available update. Restart app to apply the latest update.";
         const buttons = ["Update Now", "Later"];
-        dialog.showMessageBox({ message, buttons }, buttonIndex => {
-          if (buttonIndex === 0) {
+        dialog.showMessageBox({ message, buttons }).then(result => {
+          if (result.response === 0) {
             updater.quit();
           }
         });
@@ -66,13 +66,13 @@ const template: Electron.MenuItemConstructorOptions[] = [editMenu, viewMenu, win
 
 if (process.platform === "darwin") {
   template.unshift({
-    label: app.getName(),
+    label: app.name,
     submenu: [
       { role: "about" },
       checkForUpdateItem,
       { type: "separator" },
       { role: "hide" },
-      { role: "hideothers" },
+      { role: "hideOthers" },
       { role: "unhide" },
       { type: "separator" },
       { role: "quit" }

webpack.config.js

@@ -1,14 +1,15 @@
+const path = require("path");
 const webpack = require("webpack");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const nodeExternals = require("webpack-node-externals");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = env => {
   const buildEnv = (env && env.BUILD_ENV) || "development";
   const isDevelopment = buildEnv === "development";
-  const appDir = `./app/${buildEnv}`;
-  const distDir = `${appDir}/out`;
+  const appDir = path.join(__dirname, "app", buildEnv);
+  const distDir = path.join(appDir, "out");
   const copyTargetFiles = [
     "static/index.html",
     "static/index.js",
@@ -17,7 +18,7 @@ module.exports = env => {
     "yarn.lock"
   ];
 
-  const extractTextPlugin = new ExtractTextPlugin({ filename: `${distDir}/app.css` });
+  const extractTextPlugin = new MiniCssExtractPlugin({ filename: "app.css" });
   const cleanPlugin = new CleanWebpackPlugin(appDir);
   const copyPlugin = new CopyWebpackPlugin(copyTargetFiles.map(filePath => ({ from: filePath, to: appDir })));
   const definePlugin = new webpack.DefinePlugin({
@@ -38,7 +39,10 @@ module.exports = env => {
     {
       target: "electron-main",
       entry: "./src/main/index.ts",
-      output: { filename: `${distDir}/main.js` },
+      output: {
+        path: distDir,
+        filename: "main.js"
+      },
       module: {
         rules: [
           {
@@ -56,7 +60,10 @@ module.exports = env => {
     {
       target: "electron-renderer",
       entry: "./src/renderer/app.tsx",
-      output: { filename: `${distDir}/app.js` },
+      output: {
+        path: distDir,
+        filename: "app.js"
+      },
       module: {
         rules: [
           {
@@ -66,10 +73,13 @@ module.exports = env => {
           },
           {
             test: /\.css$/,
-            use: ExtractTextPlugin.extract({
-              loader: "css-loader",
-              options: { sourceMap: true }
-            })
+            use: [
+              {
+                loader: MiniCssExtractPlugin.loader,
+                options: { sourceMap: true }
+              },
+              "css-loader"
+            ]
           },
           {
             test: /\.(png|ttf|eot|svg|woff|woff2)(\?.+)?$/,