Upgrade to Electron 27

.erb/configs/webpack.config.base.js → .erb/configs/webpack.config.base.ts

@@ -2,46 +2,51 @@
  * Base webpack config used across other specific configs
  */
 
-import path from 'path';
 import webpack from 'webpack';
-import { dependencies as externals, version, productName } from '../../src/package.json';
+import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
+import { dependencies as externals, version, productName } from '../../release/app/package.json';
+import webpackPaths from './webpack.paths';
 
-export default {
+const configuration: webpack.Configuration = {
   externals: [...Object.keys(externals || {})],
 
+  stats: 'errors-only',
+
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
+        test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
+          loader: 'ts-loader',
           options: {
-            cacheDirectory: true,
+            // Remove this line to enable type checking in webpack builds
+            transpileOnly: true,
+            compilerOptions: {
+              module: 'esnext',
+            },
           },
         },
       },
     ],
   },
 
   output: {
-    path: path.join(__dirname, '../../src'),
+    path: webpackPaths.srcPath,
     // https://github.com/webpack/webpack/issues/1114
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
   },
 
   /**
    * Determine the array of extensions that should be used to resolve modules.
    */
   resolve: {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
-    modules: [path.join(__dirname, '../src'), 'node_modules'],
-    /*
-      Workaround for https://github.com/apollographql/apollo-server/issues/4637#issuecomment-706813287
-     */
-    alias: {
-      graphql$: path.resolve(__dirname, '../../node_modules/graphql/index.js'),
-    },
+    modules: [webpackPaths.srcPath, 'node_modules'],
+    // There is no need to add aliases here, the paths in tsconfig get mirrored
+    plugins: [new TsconfigPathsPlugins()],
   },
 
   plugins: [
@@ -54,3 +59,5 @@ export default {
     }),
   ],
 };
+
+export default configuration;

.erb/configs/webpack.config.eslint.ts

@@ -0,0 +1,2 @@
+/* eslint import/no-unresolved: off, import/no-self-import: off */
+module.exports = require('./webpack.config.renderer.dev').default;

.erb/configs/webpack.config.main.prod.babel.js → .erb/configs/webpack.config.main.prod.ts

@@ -8,43 +8,45 @@ import { merge } from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import baseConfig from './webpack.config.base';
-import CheckNodeEnv from '../scripts/CheckNodeEnv';
-import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
+import webpackPaths from './webpack.paths';
+import checkNodeEnv from '../scripts/check-node-env';
+import deleteSourceMaps from '../scripts/delete-source-maps';
 
-CheckNodeEnv('production');
-DeleteSourceMaps();
+checkNodeEnv('production');
+deleteSourceMaps();
 
-const devtoolsConfig = process.env.DEBUG_PROD === 'true' ? {
-  devtool: 'source-map'
-} : {};
-
-export default merge(baseConfig, {
-  ...devtoolsConfig,
+const configuration: webpack.Configuration = {
+  devtool: 'source-map',
 
   mode: 'production',
 
   target: 'electron-main',
 
-  entry: './src/main.dev.ts',
+  entry: {
+    main: path.join(webpackPaths.srcMainPath, 'main.ts'),
+    preload: path.join(webpackPaths.srcMainPath, 'preload.ts'),
+  },
 
   output: {
-    path: path.join(__dirname, '../../'),
-    filename: './src/main.prod.js',
+    path: webpackPaths.distMainPath,
+    filename: '[name].js',
+    library: {
+      type: 'umd',
+    },
   },
 
   optimization: {
     minimizer: [
       new TerserPlugin({
         parallel: true,
       }),
-    ]
+    ],
   },
 
   plugins: [
     new BundleAnalyzerPlugin({
-      analyzerMode:
-        process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
-      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
+      analyzerPort: 8888,
     }),
 
     /**
@@ -61,6 +63,10 @@ export default merge(baseConfig, {
       DEBUG_PROD: false,
       START_MINIMIZED: false,
     }),
+
+    new webpack.DefinePlugin({
+      'process.type': '"browser"',
+    }),
   ],
 
   /**
@@ -72,4 +78,6 @@ export default merge(baseConfig, {
     __dirname: false,
     __filename: false,
   },
-});
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.config.preload.dev.ts

@@ -0,0 +1,71 @@
+import path from 'path';
+import webpack from 'webpack';
+import { merge } from 'webpack-merge';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
+import checkNodeEnv from '../scripts/check-node-env';
+
+// When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
+// at the dev webpack config is not accidentally run in a production environment
+if (process.env.NODE_ENV === 'production') {
+  checkNodeEnv('development');
+}
+
+const configuration: webpack.Configuration = {
+  devtool: 'inline-source-map',
+
+  mode: 'development',
+
+  target: 'electron-preload',
+
+  entry: path.join(webpackPaths.srcMainPath, 'preload.ts'),
+
+  output: {
+    path: webpackPaths.dllPath,
+    filename: 'preload.js',
+    library: {
+      type: 'umd',
+    },
+  },
+
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
+    }),
+
+    /**
+     * Create global constants which can be configured at compile time.
+     *
+     * Useful for allowing different behaviour between development builds and
+     * release builds
+     *
+     * NODE_ENV should be production so that modules do not perform certain
+     * development checks
+     *
+     * By default, use 'development' as NODE_ENV. This can be overriden with
+     * 'staging', for example, by changing the ENV variables in the npm scripts
+     */
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development',
+    }),
+
+    new webpack.LoaderOptionsPlugin({
+      debug: true,
+    }),
+  ],
+
+  /**
+   * Disables webpack processing of __dirname and __filename.
+   * If you run the bundle in node.js it falls back to these values of node.js.
+   * https://github.com/webpack/webpack/issues/2010
+   */
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+
+  watch: true,
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.config.renderer.dev.dll.babel.js → .erb/configs/webpack.config.renderer.dev.dll.ts

@@ -4,17 +4,18 @@
 
 import webpack from 'webpack';
 import path from 'path';
-import {merge} from 'webpack-merge';
+import { merge } from 'webpack-merge';
 import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
 import {dependencies} from '../../package.json';
-import CheckNodeEnv from '../scripts/CheckNodeEnv';
+import CheckNodeEnv from '../scripts/check-node-env';
 
 CheckNodeEnv('development');
 
-const dist = path.join(__dirname, '../dll');
+const dist = webpackPaths.dllPath;
 
-export default merge(baseConfig, {
-  context: path.join(__dirname, '../..'),
+const configuration: webpack.Configuration = {
+  context: webpackPaths.rootPath,
 
   devtool: 'eval',
 
@@ -27,17 +28,19 @@ export default merge(baseConfig, {
   /**
    * Use `module` from `webpack.config.renderer.dev.js`
    */
-  module: require('./webpack.config.renderer.dev.babel').default.module,
+  module: require('./webpack.config.renderer.dev').default.module,
 
   entry: {
     renderer: Object.keys(dependencies || {}).filter((dep) => dep !== 'autosuggest-highlight'),
   },
 
   output: {
-    library: 'renderer',
     path: dist,
     filename: '[name].dev.dll.js',
-    libraryTarget: 'var',
+    library: {
+      name: 'renderer',
+      type: 'var',
+    },
   },
 
   plugins: [
@@ -62,11 +65,13 @@ export default merge(baseConfig, {
     new webpack.LoaderOptionsPlugin({
       debug: true,
       options: {
-        context: path.join(__dirname, '../../src'),
+        context: webpackPaths.srcPath,
         output: {
-          path: path.join(__dirname, '../dll'),
+          path: webpackPaths.dllPath,
         },
       },
     }),
   ],
-});
+};
+
+export default merge(baseConfig, configuration);