Adding webpack fast refresh support.

master
Thomas Hintz 4 years ago
parent 92eb1d9653
commit 6219e65e66

52
package-lock.json generated

@ -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",

@ -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",

@ -1919,12 +1919,11 @@ 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;
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>
@ -1934,7 +1933,7 @@ class StartGame extends React.Component {
<h3>Players</h3>
<ul>
<li><PlayerColorIcon color={color} /> {playerName}</li>
{this.props.game.otherPlayers.map((p, i) => (
{game.otherPlayers.map((p, i) => (
<li key={i}>
<PlayerColorIcon color={p.player.color} /> {p.player.name}
{playerName === host ? (
@ -1961,13 +1960,12 @@ class StartGame extends React.Component {
<li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>
</ul>
<label>
<input type="checkbox" onChange={this.props.toggleReady} />
<input type="checkbox" onChange={toggleReady} />
Ready to start
</label>
</>
);
}
}
const SCREENS = { summary: 'summary', misc: 'misc', farms: 'farms',
cards: 'cards', trade: 'trade', loans: 'loans',

@ -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]',
},
},
{

@ -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')],
},
},
],
},
],
},
});
}

Loading…
Cancel
Save