feat: enable react-fast-refresh

core/core/src/build.ts

@@ -65,6 +65,10 @@ export interface BuildProps {
    * webpack mode
    */
   mode?: Configuration['mode'];
+  /**
+   * enable react fast-refresh, default true
+   */
+  fastRefresh?: boolean;
   /**
    * loaders custom options shortcut.
    * This can be used for quick options setup instead of using the webpack hook

core/webpack-configs/package.json

@@ -35,6 +35,7 @@
     "@component-controls/react-docgen-info": "^3.1.5",
     "@component-controls/react-docgen-typescript-info": "^3.1.5",
     "@component-controls/store": "^3.1.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "babel-loader": "^8.2.2",
     "babel-preset-react-app": "^10.0.0",
     "core-js": "^3.9.1",
@@ -47,6 +48,8 @@
     "path": "^0.12.7",
     "postcss-loader": "^5.0.0",
     "raw-loader": "^4.0.2",
+    "react-dev-utils": "^11.0.4",
+    "react-refresh": "^0.9.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "typescript": "^4.0.5",

core/webpack-configs/src/react/index.ts

@@ -2,6 +2,7 @@ import path from 'path';
 import { Configuration, RuleSetUseItem } from 'webpack';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import {
   PresetCallback,
   BuildProps,
@@ -10,9 +11,16 @@ import {
 } from '@component-controls/core';
 import { findUpFile } from '@component-controls/core/node-utils';
 
+/**
+ portions of the code taken from react-scripts:
+ https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js
+ */
+
 export const react: PresetCallback = (options: BuildProps) => {
   const isProd = process.env.NODE_ENV === 'production';
+  const isDev = process.env.NODE_ENV === 'development';
   const cssLoaders: RuleSetUseItem[] = [];
+  const { fastRefresh = true } = options;
   const postcssOptions = customLoaderOptions(options, 'postcss-loader', {});
   const postCssOptionsFile = findUpFile(process.cwd(), 'postcss.config.js');
   const hasPostCss = Object.keys(postcssOptions).length || postCssOptionsFile;
@@ -33,6 +41,7 @@ export const react: PresetCallback = (options: BuildProps) => {
       new MiniCssExtractPlugin({
         filename: options.cssFileName || defCssFileName,
       }),
+      isDev && fastRefresh && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
     optimization: {
       minimizer: [isProd && new CssMinimizerPlugin()].filter(Boolean),

yarn.lock

@@ -21894,6 +21894,36 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
+react-dev-utils@^11.0.4:
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
+  integrity sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==
+  dependencies:
+    "@babel/code-frame" "7.10.4"
+    address "1.1.2"
+    browserslist "4.14.2"
+    chalk "2.4.2"
+    cross-spawn "7.0.3"
+    detect-port-alt "1.1.6"
+    escape-string-regexp "2.0.0"
+    filesize "6.1.0"
+    find-up "4.1.0"
+    fork-ts-checker-webpack-plugin "4.1.6"
+    global-modules "2.0.0"
+    globby "11.0.1"
+    gzip-size "5.1.1"
+    immer "8.0.1"
+    is-root "2.1.0"
+    loader-utils "2.0.0"
+    open "^7.0.2"
+    pkg-up "3.1.0"
+    prompts "2.4.0"
+    react-error-overlay "^6.0.9"
+    recursive-readdir "2.2.2"
+    shell-quote "1.7.2"
+    strip-ansi "6.0.0"
+    text-table "0.2.0"
+
 react-dev-utils@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.3.tgz#5b42d9ea58d5e9e017a2f57a40a8af408a3a46fb"