makes hot module reloading a thing! (#41)

* Add proper dependencies
* Turn off Electron error warnings in console (temporarily)

Author: saylestyler

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["react-hot-loader/babel"]
+}

app/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render } from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
+import { hot } from 'react-hot-loader/root';
 import './app.global.css';
 import ThemeContext from './contexts/themeContext';
 import themes from './themes/themes';
@@ -21,22 +21,21 @@ const Index = () => {
   ];
   const [context, setContext] = useState(modes);
   const serveMode = context.reduce((acc, mode) => {
-      if (mode.active) acc = mode.value;
-      return acc;
-    }, 'defaultTheme');
+    if (mode.active) acc = mode.value;
+    return acc;
+  }, 'defaultTheme');
 
   return (
     <ThemeContext.Provider value={[context, setContext]}>
       <ThemeProvider theme={themes[serveMode]}>
-        <AppContainer>
-          <BrowserRouter>
-            <Routes />
-          </BrowserRouter>
-        </AppContainer>
+        <BrowserRouter>
+          <Routes />
+        </BrowserRouter>
       </ThemeProvider>
     </ThemeContext.Provider>
   );
 };
-render(<Index />, document.getElementById('root'));
 
+hot(Index);
 
+render(<Index />, document.getElementById('root'));

app/main.dev.ts

@@ -33,6 +33,7 @@ if (
   process.env.NODE_ENV === 'development' ||
   process.env.DEBUG_PROD === 'true'
 ) {
+  process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
   require('electron-debug')();
 }
 

configs/webpack.config.base.js

@@ -1,28 +1,36 @@
-/**
- * Base webpack config used across other specific configs
- */
-
 import path from 'path';
 import webpack from 'webpack';
 import { dependencies } from '../package.json';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 export default {
   externals: [...Object.keys(dependencies || {})],
-
   module: {
     rules: [
       {
-        test: /\.[jt]sx?$/,
+        test: /\.(j|t)sx?$/,
         exclude: /node_modules/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              cacheDirectory: true
-            }
-          },
-          'ts-loader'
-        ]
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            babelrc: false,
+            presets: [
+              [
+                '@babel/preset-env',
+                { targets: { browsers: 'last 2 versions' } } // #TODO: electron@our.version?
+              ],
+              '@babel/preset-typescript',
+              '@babel/preset-react'
+            ],
+            plugins: [
+              // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
+              ['@babel/plugin-proposal-decorators', { legacy: true }],
+              ['@babel/plugin-proposal-class-properties', { loose: true }],
+              'react-hot-loader/babel'
+            ]
+          }
+        }
       }
     ]
   },
@@ -33,18 +41,17 @@ export default {
     libraryTarget: 'commonjs2'
   },
 
-  /**
-   * Determine the array of extensions that should be used to resolve modules.
-   */
   resolve: {
-    extensions: ['.js', '.ts', '.tsx', '.json']
+    extensions: ['.js', '.ts', '.tsx', '.json'],
+    alias: {
+      'react-dom': '@hot-loader/react-dom'
+    }
   },
 
   plugins: [
     new webpack.EnvironmentPlugin({
-      NODE_ENV: 'production'
+      NODE_ENV: 'development'
     }),
-
     new webpack.NamedModulesPlugin()
   ]
 };

configs/webpack.config.renderer.dev.babel.js

@@ -46,7 +46,7 @@ export default merge.smart(baseConfig, {
   target: 'electron-renderer',
 
   entry: [
-    'react-hot-loader/patch',
+    'react-hot-loader/babel',
     `webpack-dev-server/client?http://localhost:${port}/`,
     'webpack/hot/only-dev-server',
     require.resolve('../app/index.tsx')

package.json

@@ -9,7 +9,7 @@
     "build-e2e": "cross-env E2E_BUILD=true yarn build",
     "build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
     "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
-    "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
+    "dev": "cross-env START_HOT=1 NODE_ENV=development node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
     "package": "yarn build && electron-builder build --publish never",
     "package-all": "yarn build && electron-builder build -mwl",
     "package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
@@ -235,7 +235,7 @@
     "ts-loader": "^5.3.2",
     "typescript": "^3.2.2",
     "url-loader": "^1.1.2",
-    "webpack": "^4.28.3",
+    "webpack": "^4.35.0",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.2.0",
     "webpack-dev-server": "^3.1.14",
@@ -244,6 +244,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.6.3",
+    "@hot-loader/react-dom": "^16.8.6",
     "@types/pg": "^7.4.14",
     "@types/styled-components": "^4.1.16",
     "@typescript-eslint/parser": "^1.10.2",
@@ -255,10 +256,11 @@
     "eslint-config-react-app": "^4.0.1",
     "eslint-plugin-flowtype": "^3.10.3",
     "eslint-plugin-react-hooks": "^1.6.0",
+    "fork-ts-checker-webpack-plugin": "^1.3.7",
     "history": "^4.7.2",
     "pg": "^7.11.0",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react-dom": "npm:@hot-loader/react-dom",
     "react-hot-loader": "^4.6.3",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",