feat: allow experimental usage of react-refresh for HMR

README.md

@@ -154,11 +154,26 @@ hooks.any.setupProxyOnAfter((app, server, settings) => {
 });
 ```
 
+#### React refresh (experimental)
+
+This package provide an experimental HMR based on `react-refresh`. 
+To enable it you must either override the option `withReactRefresh` using hooks.
+
+```js
+hooks.browser.overrideOptions(options => {
+    options.withReactRefresh = true;
+
+    return options;
+});
+```
+
 #### Hot reload entry point
 
 The hot reload for browser apps is based on `react-deep-force-updates`.
 Setup your entry point as the following example.
 
+**if you use `react-refresh` experimental feature, you don't have to do any of this for your HMR**
+
 ```js
 import { createElement } from 'react';
 // react-deep-force-update will be nullify by null-loader for production

configs/options.js

@@ -23,6 +23,8 @@ const getOptions = () => {
         port,
         protocol: process.env.HTTPS === 'true' ? 'https' : 'http',
         disableHostCheck: process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+        // experimental feature(s)
+        withReactRefresh: false,
     };
 };
 

configs/webpackReact.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -28,6 +29,7 @@ const getWebpackConfig = settings => {
         cssRegex,
         lessModuleRegex,
         lessRegex,
+        withReactRefresh,
     } = options;
 
     return {
@@ -160,6 +162,7 @@ const getWebpackConfig = settings => {
                                             },
                                         },
                                     ],
+                                    isEnvDevelopment && withReactRefresh && require.resolve('react-refresh/babel'),
                                 ],
                                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                                 // It enables caching results in ./node_modules/.cache/babel-loader/
@@ -341,6 +344,9 @@ const getWebpackConfig = settings => {
             // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
             // You can remove this if you don't use Moment.js:
             new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+            // React refresh experimental feature
+            // https://github.com/pmmmwh/react-refresh-webpack-plugin
+            isEnvDevelopment && withReactRefresh && new ReactRefreshWebpackPlugin({ disableRefreshCheck: true }),
         ].filter(Boolean),
 
         optimization: {