Adding webpack fast refresh support.

2020-08-28 09:35:02 -07:00
parent 92eb1d9653
commit 6219e65e66
5 changed files with 126 additions and 52 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1793,6 +1793,28 @@
        }
      }
    },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.1.tgz",
+      "integrity": "sha512-MzM87WdX2r2KRFfhEho7oGyK1XRE/J9WwjB3v6oLQHN0dzBypBZxSWjnoYx+RWneRCsg8Sin1myf+EjX1fqIbQ==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "^0.0.7",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^1.2.1",
+        "native-url": "^0.2.6",
+        "schema-utils": "^2.6.5",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
    "@samverschueren/stream-to-observable": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
@@ -4841,6 +4863,15 @@
        }
      }
    },
+    "error-stack-parser": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+      "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+      "dev": true,
+      "requires": {
+        "stackframe": "^1.1.1"
+      }
+    },
    "es-abstract": {
      "version": "1.17.5",
      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
@@ -8437,6 +8468,15 @@
      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
      "dev": true
    },
+    "native-url": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+      "dev": true,
+      "requires": {
+        "querystring": "^0.2.0"
+      }
+    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -10265,6 +10305,12 @@
        "react-is": "^16.9.0"
      }
    },
+    "react-refresh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
+      "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==",
+      "dev": true
+    },
    "read-chunk": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz",
@@ -11511,6 +11557,12 @@
      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
      "dev": true
    },
+    "stackframe": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+      "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
+      "dev": true
+    },
    "static-extend": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
@@ -40,6 +41,7 @@
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
+    "react-refresh": "^0.8.3",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "terser-webpack-plugin": "^2.3.5",
--- a/src/components/farm/Board.jsx
+++ b/src/components/farm/Board.jsx
@@ -1919,54 +1919,52 @@ class Info extends React.Component {
    }
 }

-class StartGame extends React.Component {
-    render() {
-        const { auditThreshold, downPayment, loanInterest, maxDebt, startingOtbs, startingCash, startingDebt } = this.props.game.settings;
-        const playerName = this.props.player.name;
-        const { color } = this.props.player;
-        const { name, host } = this.props.game;
-        return (
-            <>
-                <h1>Lobby</h1>
-                <p>
-                    <b>Game</b>: {name}
-                </p>
-                <h3>Players</h3>
-                <ul>
-                    <li><PlayerColorIcon color={color} /> {playerName}</li>
-                    {this.props.game.otherPlayers.map((p, i) => (
-                        <li key={i}>
-                            <PlayerColorIcon color={p.player.color} /> {p.player.name}
-                            {playerName === host ? (
-                                 <span title="Kick Player" className="kick-player" onClick={() => kickPlayer(p.player.name)}>
-                                     <FontAwesomeIcon icon={faBan} />
-                                 </span>
-                            ): (<></>)}
-                        </li>
-                    ))}
-                    <li>
-                        <span className="add-ai" onClick={addAIPlayer}>
-                            <FontAwesomeIcon icon={faPlusCircle} />AI
-                        </span>
+const StartGame = ({ game, player, toggleReady }) => {
+    const { auditThreshold, downPayment, loanInterest, maxDebt, startingOtbs, startingCash, startingDebt } = game.settings;
+    const playerName = player.name;
+    const { color } = player;
+    const { name, host } = game;
+    return (
+        <>
+            <h1>Lobby</h1>
+            <p>
+                <b>Game</b>: {name}
+            </p>
+            <h3>Players</h3>
+            <ul>
+                <li><PlayerColorIcon color={color} /> {playerName}</li>
+                {game.otherPlayers.map((p, i) => (
+                    <li key={i}>
+                        <PlayerColorIcon color={p.player.color} /> {p.player.name}
+                        {playerName === host ? (
+                             <span title="Kick Player" className="kick-player" onClick={() => kickPlayer(p.player.name)}>
+                                 <FontAwesomeIcon icon={faBan} />
+                             </span>
+                        ): (<></>)}
                    </li>
-                </ul>
-                <h4>Game Settings</h4>
-                <ul>
-                    <li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li>
-                    <li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li>
-                    <li><b>Loan Interest</b>: {loanInterest * 100}%</li>
-                    <li><b>Required Down Payment</b>: {downPayment * 100}%</li>
-                    <li><b>Starting {itemCardShort}</b>: {startingOtbs}</li>
-                    <li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li>
-                    <li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>
-                </ul>
-                <label>
-                    <input type="checkbox" onChange={this.props.toggleReady} />
-                    Ready to start
-                </label>
-            </>
-        );
-    }
+                ))}
+                <li>
+                    <span className="add-ai" onClick={addAIPlayer}>
+                        <FontAwesomeIcon icon={faPlusCircle} />AI
+                    </span>
+                </li>
+            </ul>
+            <h4>Game Settings</h4>
+            <ul>
+                <li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li>
+                <li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li>
+                <li><b>Loan Interest</b>: {loanInterest * 100}%</li>
+                <li><b>Required Down Payment</b>: {downPayment * 100}%</li>
+                <li><b>Starting {itemCardShort}</b>: {startingOtbs}</li>
+                <li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li>
+                <li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>
+            </ul>
+            <label>
+                <input type="checkbox" onChange={toggleReady} />
+                Ready to start
+            </label>
+        </>
+    );
 }

 const SCREENS = { summary: 'summary', misc: 'misc', farms: 'farms',
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -31,7 +31,7 @@ module.exports = {
        app: './src/index.jsx',
    },
    output: {
-        filename: './assets/[name].[contenthash].js',
+        filename: './assets/[name].[hash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    optimization: {
@@ -55,8 +55,8 @@ module.exports = {
        }),
        new FaviconsWebpackPlugin('./assets/img/tractor.svg'),
        new MiniCssExtractPlugin({
-            filename: './assets/[name].[contenthash].css',
-            chunkFilename: './assets/[id].[contenthash].css',
+            filename: './assets/[name].[hash].css',
+            chunkFilename: './assets/[id].[hash].css',
        }),
        new CopyPlugin([
            { from: './src/server/farm.scm', to: './[name].[ext]' },
@@ -96,14 +96,14 @@ module.exports = {
                test: /\.(svg|png|gif)$/,
                loader: 'file-loader',
                options: {
-                    name: './assets/img/[name].[contenthash].[ext]',
+                    name: './assets/img/[name].[hash].[ext]',
                },
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
-                    name: './assets/font/[name].[contenthash].[ext]',
+                    name: './assets/font/[name].[hash].[ext]',
                },
            },
            {
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -20,6 +20,8 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');

+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
 module.exports = function(env) {
    return merge(common, {
        mode: 'development',
@@ -27,6 +29,7 @@ module.exports = function(env) {
        devServer: {
            port: 9000,
            contentBase: './dist',
+            hot: true,
            proxy: {
                '/websocket': {
                    target: 'ws://localhost:8080',
@@ -39,5 +42,24 @@ module.exports = function(env) {
                      path.resolve(__dirname, env.assets),
                      'node_modules']
        },
+        plugins: [
+            new ReactRefreshWebpackPlugin()
+        ],
+        module: {
+            rules: [
+                {
+                    test: /\.jsx?$/,
+                    exclude: /node_modules/,
+                    use: [
+                        {
+                            loader: require.resolve('babel-loader'),
+                            options: {
+                                plugins: [require.resolve('react-refresh/babel')],
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
    });
 }