Merge branch 'main' into nav/try-out-themeing

.erb/configs/.eslintrc

@@ -2,6 +2,8 @@
   "rules": {
     "no-console": "off",
     "global-require": "off",
-    "import/no-dynamic-require": "off"
+    "import/no-dynamic-require": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

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

@@ -6,7 +6,7 @@ import webpack from 'webpack';
 import webpackPaths from './webpack.paths';
 import { dependencies as externals } from '../../release/app/package.json';
 
-export default {
+const configuration: webpack.Configuration = {
   externals: [...Object.keys(externals || {})],
 
   stats: 'errors-only',
@@ -18,6 +18,10 @@ export default {
         exclude: /node_modules/,
         use: {
           loader: 'ts-loader',
+          options: {
+            // Remove this line to enable type checking in webpack builds
+            transpileOnly: true,
+          },
         },
       },
     ],
@@ -45,3 +49,5 @@ export default {
     }),
   ],
 };
+
+export default configuration;

.erb/configs/webpack.config.main.prod.ts

@@ -22,7 +22,7 @@ const devtoolsConfig =
       }
     : {};
 
-export default merge(baseConfig, {
+const configuration: webpack.Configuration = {
   ...devtoolsConfig,
 
   mode: 'production',
@@ -49,9 +49,7 @@ export default merge(baseConfig, {
 
   plugins: [
     new BundleAnalyzerPlugin({
-      analyzerMode:
-        process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
-      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
     }),
 
     /**
@@ -79,4 +77,6 @@ export default merge(baseConfig, {
     __dirname: false,
     __filename: false,
   },
-});
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.config.renderer.dev.dll.ts

@@ -14,7 +14,7 @@ checkNodeEnv('development');
 
 const dist = webpackPaths.dllPath;
 
-export default merge(baseConfig, {
+const configuration: webpack.Configuration = {
   context: webpackPaths.rootPath,
 
   devtool: 'eval',
@@ -72,4 +72,6 @@ export default merge(baseConfig, {
       },
     }),
   ],
-});
+};
+
+export default merge(baseConfig, configuration);

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

@@ -5,10 +5,10 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import chalk from 'chalk';
 import { merge } from 'webpack-merge';
 import { spawn, execSync } from 'child_process';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import baseConfig from './webpack.config.base';
 import webpackPaths from './webpack.paths';
 import checkNodeEnv from '../scripts/check-node-env';
-import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
 // 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
@@ -18,7 +18,8 @@ if (process.env.NODE_ENV === 'production') {
 
 const port = process.env.PORT || 1212;
 const manifest = path.resolve(webpackPaths.dllPath, 'renderer.json');
-const requiredByDLLConfig = module.parent.filename.includes(
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const requiredByDLLConfig = module.parent!.filename.includes(
   'webpack.config.renderer.dev.dll'
 );
 
@@ -37,7 +38,7 @@ if (
   execSync('npm run postinstall');
 }
 
-export default merge(baseConfig, {
+const configuration: webpack.Configuration = {
   devtool: 'inline-source-map',
 
   mode: 'development',
@@ -47,8 +48,6 @@ export default merge(baseConfig, {
   entry: [
     `webpack-dev-server/client?http://localhost:${port}/dist`,
     'webpack/hot/only-dev-server',
-    'core-js',
-    'regenerator-runtime/runtime',
     path.join(webpackPaths.srcRendererPath, 'index.tsx'),
   ],
 
@@ -84,37 +83,28 @@ export default merge(baseConfig, {
         use: ['style-loader', 'css-loader', 'sass-loader'],
         exclude: /\.module\.s?(c|a)ss$/,
       },
-      //Font Loader
+      // Fonts
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
-      // SVG Font
+      // Images
       {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'image/svg+xml',
-          },
-        },
-      },
-      // Common Image Formats
-      {
-        test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
-        use: 'url-loader',
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
       },
     ],
   },
   plugins: [
-    requiredByDLLConfig
-      ? null
-      : new webpack.DllReferencePlugin({
-          context: webpackPaths.dllPath,
-          manifest: require(manifest),
-          sourceType: 'var',
-        }),
+    ...(requiredByDLLConfig
+      ? []
+      : [
+          new webpack.DllReferencePlugin({
+            context: webpackPaths.dllPath,
+            manifest: require(manifest),
+            sourceType: 'var',
+          }),
+        ]),
 
     new webpack.NoEmitOnErrorsPlugin(),
 
@@ -160,6 +150,8 @@ export default merge(baseConfig, {
     __filename: false,
   },
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   devServer: {
     port,
     compress: true,
@@ -170,7 +162,6 @@ export default merge(baseConfig, {
     },
     historyApiFallback: {
       verbose: true,
-      disableDotRule: false,
     },
     onBeforeSetupMiddleware() {
       console.log('Starting Main Process...');
@@ -179,8 +170,11 @@ export default merge(baseConfig, {
         env: process.env,
         stdio: 'inherit',
       })
-        .on('close', (code) => process.exit(code))
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        .on('close', (code: number) => process.exit(code!))
         .on('error', (spawnError) => console.error(spawnError));
     },
   },
-});
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.config.renderer.prod.ts

@@ -25,18 +25,14 @@ const devtoolsConfig =
       }
     : {};
 
-export default merge(baseConfig, {
+const configuration: webpack.Configuration = {
   ...devtoolsConfig,
 
   mode: 'production',
 
   target: ['web', 'electron-renderer'],
 
-  entry: [
-    'core-js',
-    'regenerator-runtime/runtime',
-    path.join(webpackPaths.srcRendererPath, 'index.tsx'),
-  ],
+  entry: [path.join(webpackPaths.srcRendererPath, 'index.tsx')],
 
   output: {
     path: webpackPaths.distRendererPath,
@@ -70,26 +66,15 @@ export default merge(baseConfig, {
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
         exclude: /\.module\.s?(c|a)ss$/,
       },
-      //Font Loader
+      // Fonts
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
-      // SVG Font
-      {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'image/svg+xml',
-          },
-        },
-      },
-      // Common Image Formats
+      // Images
       {
-        test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
-        use: 'url-loader',
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
       },
     ],
   },
@@ -124,9 +109,7 @@ export default merge(baseConfig, {
     }),
 
     new BundleAnalyzerPlugin({
-      analyzerMode:
-        process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
-      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
     }),
 
     new HtmlWebpackPlugin({
@@ -141,4 +124,6 @@ export default merge(baseConfig, {
       isDevelopment: process.env.NODE_ENV !== 'production',
     }),
   ],
-});
+};
+
+export default merge(baseConfig, configuration);

.erb/scripts/.eslintrc

@@ -3,6 +3,7 @@
     "no-console": "off",
     "global-require": "off",
     "import/no-dynamic-require": "off",
-    "import/no-extraneous-dependencies": "off"
+    "import/no-extraneous-dependencies": "off",
+    "react/jsx-props-no-spreading": "off"
   }
 }

.erb/scripts/check-native-dep.js

@@ -38,7 +38,9 @@ ${chalk.whiteBright.bgGreen.bold('npm uninstall your-package')}
  )}
 ${chalk.whiteBright.bgRed.bold('npm install your-package')}
  ${chalk.bold('Install the package to "./release/app/package.json"')}
-${chalk.whiteBright.bgGreen.bold('cd ./release/app && npm install your-package')}
+${chalk.whiteBright.bgGreen.bold(
+  'cd ./release/app && npm install your-package'
+)}
  Read more about native dependencies at:
 ${chalk.bold(
   'https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure'

.erb/scripts/clean.js

@@ -1,6 +1,6 @@
 import rimraf from 'rimraf';
-import webpackPaths from '../configs/webpack.paths.ts';
 import process from 'process';
+import webpackPaths from '../configs/webpack.paths';
 
 const args = process.argv.slice(2);
 const commandMap = {

.erb/scripts/electron-rebuild.js

@@ -1,4 +1,3 @@
-import path from 'path';
 import { execSync } from 'child_process';
 import fs from 'fs';
 import { dependencies } from '../../release/app/package.json';
@@ -9,7 +8,7 @@ if (
   fs.existsSync(webpackPaths.appNodeModulesPath)
 ) {
   const electronRebuildCmd =
-    '../../node_modules/.bin/electron-rebuild --force --types prod,dev,optional --module-dir .';
+    '../../node_modules/.bin/electron-rebuild --parallel --force --types prod,dev,optional --module-dir .';
   const cmd =
     process.platform === 'win32'
       ? electronRebuildCmd.replace(/\//g, '\\')

.erb/scripts/link-modules.ts

@@ -1,8 +1,8 @@
 import fs from 'fs';
 import webpackPaths from '../configs/webpack.paths';
 
-const srcNodeModulesPath = webpackPaths.srcNodeModulesPath;
-const appNodeModulesPath = webpackPaths.appNodeModulesPath
+const { srcNodeModulesPath } = webpackPaths;
+const { appNodeModulesPath } = webpackPaths;
 
 if (!fs.existsSync(srcNodeModulesPath) && fs.existsSync(appNodeModulesPath)) {
   fs.symlinkSync(appNodeModulesPath, srcNodeModulesPath, 'junction');

.erb/scripts/notarize.js

@@ -7,13 +7,15 @@ exports.default = async function notarizeMacos(context) {
     return;
   }
 
-  if (!process.env.CI) {
+  if (process.env.CI !== 'true') {
     console.warn('Skipping notarizing step. Packaging is not running in CI');
     return;
   }
 
   if (!('APPLE_ID' in process.env && 'APPLE_ID_PASS' in process.env)) {
-    console.warn('Skipping notarizing step. APPLE_ID and APPLE_ID_PASS env variables must be set');
+    console.warn(
+      'Skipping notarizing step. APPLE_ID and APPLE_ID_PASS env variables must be set'
+    );
     return;
   }
 

.eslintrc.js

@@ -5,6 +5,9 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     // Since React 17 and typescript 4.1 you can safely disable the rule
     'react/react-in-jsx-scope': 'off',
+    'import/no-unresolved': 'error',
+    'react/jsx-props-no-spreading': 'off',
+    'react-hooks/exhaustive-deps': 'off',
   },
   parserOptions: {
     ecmaVersion: 2020,
@@ -20,6 +23,7 @@ module.exports = {
       webpack: {
         config: require.resolve('./.erb/configs/webpack.config.eslint.ts'),
       },
+      typescript: {},
     },
     'import/parsers': {
       '@typescript-eslint/parser': ['.ts', '.tsx'],

.github/workflows/test.yml

@@ -15,13 +15,25 @@ jobs:
         uses: actions/checkout@v1
 
       - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
-          node-version: 16.14.0
+          node-version: 16
 
-      - name: npm install
+      - name: Install intial npm deps
         run: |
-          npm install
+          npm install typescript ts-node tslib @types/node electron-rebuild electron@^15.3.0 node-gyp
+          npm rebuild node-gyp
+          
+      - name: Install native modules
+        run: |
+          cd ./release/app
+          DEBUG=electron-rebuild npm install --no-optional 
+
+      - name: Install regular modules
+        run: |
+          pwd
+          cd ../../
+          npm install --no-optional
 
       - name: npm test
         env: