From 1abedef20dd42a1aa6f6441a8d2f87cc425997e1 Mon Sep 17 00:00:00 2001 From: Jesse Chan Date: Wed, 9 Dec 2020 01:30:45 +0800 Subject: [PATCH] client: enable React Fast Refresh for development --- client/config/webpack.config.dev.js | 3 + package-lock.json | 113 ++++++++++++++++++++++++++++ package.json | 2 + 3 files changed, 118 insertions(+) diff --git a/client/config/webpack.config.dev.js b/client/config/webpack.config.dev.js index 2c58d59a..8cd5e659 100644 --- a/client/config/webpack.config.dev.js +++ b/client/config/webpack.config.dev.js @@ -3,6 +3,7 @@ const webpack = require('webpack'); const ESLintPlugin = require('eslint-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); const WebpackBar = require('webpackbar'); const paths = require('../../shared/config/paths'); @@ -19,6 +20,7 @@ module.exports = { loader: 'babel-loader', options: { babelrc: true, + plugins: [require.resolve('react-refresh/babel')], }, }, ], @@ -117,6 +119,7 @@ module.exports = { }), // This is necessary to emit hot updates (currently CSS only): new webpack.HotModuleReplacementPlugin(), + new ReactRefreshWebpackPlugin(), // Watcher doesn't work well if you mistype casing in a path so we use // a plugin that prints an error when you attempt to do this. // See https://github.com/facebookincubator/create-react-app/issues/240 diff --git a/package-lock.json b/package-lock.json index ee168a47..00fb68d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@babel/preset-react": "^7.12.7", "@babel/preset-typescript": "^7.12.7", "@formatjs/cli": "^2.13.15", + "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "@types/bencode": "^2.0.0", "@types/body-parser": "^1.19.0", "@types/classnames": "^2.2.11", @@ -136,6 +137,7 @@ "react-dropzone": "^11.2.4", "react-intl": "^5.10.6", "react-measure": "^2.5.2", + "react-refresh": "^0.9.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-transition-group": "^4.4.1", @@ -2224,6 +2226,62 @@ "node": ">=10" } }, + "node_modules/@pmmmwh/react-refresh-webpack-plugin": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz", + "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==", + "dev": true, + "dependencies": { + "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" + }, + "engines": { + "node": ">= 10.x" + }, + "peerDependencies": { + "@types/webpack": "4.x", + "react-refresh": ">=0.8.3 <0.10.0", + "sockjs-client": "^1.4.0", + "type-fest": "^0.13.1", + "webpack": ">=4.43.0 <6.0.0", + "webpack-dev-server": "3.x", + "webpack-hot-middleware": "2.x", + "webpack-plugin-serve": "0.x || 1.x" + }, + "peerDependenciesMeta": { + "@types/webpack": { + "optional": true + }, + "sockjs-client": { + "optional": true + }, + "type-fest": { + "optional": true + }, + "webpack-dev-server": { + "optional": true + }, + "webpack-hot-middleware": { + "optional": true + }, + "webpack-plugin-serve": { + "optional": true + } + } + }, + "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/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, + "engines": { + "node": ">= 8" + } + }, "node_modules/@react-dnd/asap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", @@ -13663,6 +13721,15 @@ "node": ">=0.10.0" } }, + "node_modules/native-url": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz", + "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==", + "dev": true, + "dependencies": { + "querystring": "^0.2.0" + } + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -19406,6 +19473,15 @@ "react-dom": ">0.13.0" } }, + "node_modules/react-refresh": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", + "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -26592,6 +26668,28 @@ "mkdirp": "^1.0.4" } }, + "@pmmmwh/react-refresh-webpack-plugin": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz", + "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==", + "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 + } + } + }, "@react-dnd/asap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", @@ -35908,6 +36006,15 @@ "to-regex": "^3.0.1" } }, + "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" + } + }, "natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -40415,6 +40522,12 @@ "resize-observer-polyfill": "^1.5.0" } }, + "react-refresh": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", + "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==", + "dev": true + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", diff --git a/package.json b/package.json index 02bdc0da..dcde244e 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "@babel/preset-react": "^7.12.7", "@babel/preset-typescript": "^7.12.7", "@formatjs/cli": "^2.13.15", + "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "@types/bencode": "^2.0.0", "@types/body-parser": "^1.19.0", "@types/classnames": "^2.2.11", @@ -185,6 +186,7 @@ "react-dropzone": "^11.2.4", "react-intl": "^5.10.6", "react-measure": "^2.5.2", + "react-refresh": "^0.9.0", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-transition-group": "^4.4.1",