@redhat-cloud-services/frontend-components-config 4.6.25 → 4.6.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.6.25",
+    "version": "4.6.26",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
     "bin": {
@@ -20,7 +20,8 @@
     },
     "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/config#readme",
     "dependencies": {
-        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.23",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.24",
         "assert": "^2.0.0",
         "axios": "^0.27.2",
         "babel-loader": "^8.2.5",
@@ -45,6 +46,7 @@
         "lodash": "^4.17.21",
         "path-browserify": "^1.0.1",
         "process": "^0.11.10",
+        "react-refresh": "^0.14.0",
         "sass": "^1.55.0",
         "sass-loader": "^11.1.1",
         "source-map-loader": "^3.0.1",

package/src/config.js

@@ -41,8 +41,9 @@ module.exports = ({
   useDevBuild = true,
   useCache = false,
   cacheConfig = {},
+  _unstableHotReload = false,
 } = {}) => {
-  const filenameMask = `js/[name]${useFileHash ? `.${Date.now()}.[fullhash]` : ''}.js`;
+  const filenameMask = `js/[name]${!_unstableHotReload && useFileHash ? `.${Date.now()}.[fullhash]` : ''}.js`;
   if (betaEnv) {
     env = `${betaEnv}-beta`;
     console.warn('betaEnv is deprecated in favor of env');
@@ -75,15 +76,29 @@ module.exports = ({
           },
         }
       : {}),
-    entry: {
-      App: appEntry,
-    },
+    entry: _unstableHotReload
+      ? {
+          main: appEntry,
+          vendors: ['react', 'react-dom', 'react-refresh/runtime'],
+        }
+      : {
+          App: appEntry,
+        },
     output: {
       filename: filenameMask,
       path: outputPath,
       publicPath,
       chunkFilename: filenameMask,
     },
+    ...(_unstableHotReload
+      ? {
+          optimization: {
+            // for HMR all runtime chunks must be in a single file
+            runtimeChunk: 'single',
+            removeEmptyChunks: true,
+          },
+        }
+      : {}),
     module: {
       rules: [
         {
@@ -179,7 +194,8 @@ module.exports = ({
       port: devServerPort,
       https: https || Boolean(useProxy),
       host: '0.0.0.0', // This shares on local network. Needed for docker.host.internal
-      hot: false, // Use livereload instead of HMR which is spotty with federated modules
+      hot: _unstableHotReload, // Use livereload instead of HMR which is spotty with federated modules
+      liveReload: !_unstableHotReload,
       allowedHosts: 'all',
       // https://github.com/bripkens/connect-history-api-fallback
       historyApiFallback: {

package/src/config.test.js

@@ -48,6 +48,7 @@ describe('should create dummy config with no options', () => {
       host: '0.0.0.0',
       port: 8002,
       hot: false,
+      liveReload: true,
       allowedHosts: 'all',
       historyApiFallback: {
         rewrites: [

package/src/plugins.js

@@ -7,6 +7,7 @@ const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');
 const ChunkMapperPlugin = require('@redhat-cloud-services/frontend-components-config-utilities/chunk-mapper');
 const jsVarName = require('@redhat-cloud-services/frontend-components-config-utilities/jsVarName');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const { glob } = require('glob');
 const path = require('path');
 
@@ -21,21 +22,24 @@ module.exports = ({
   plugins,
   useChromeTemplate = true,
   definePlugin = {},
+  _unstableHotReload = false,
+  useFileHash = true,
 } = {}) => {
   const hasTsConfig = glob.sync(path.resolve(rootFolder, './{tsconfig.json,!(node_modules)/**/tsconfig.json}')).length > 0;
+  const fileHash = !_unstableHotReload && useFileHash;
   return [
     ...(generateSourceMaps
       ? [
           new SourceMapDevToolPlugin({
             test: 'js',
             exclude: /(node_modules|bower_components)/i,
-            filename: 'sourcemaps/[name].[contenthash].js.map',
+            filename: fileHash ? 'sourcemaps/[name].js.map' : 'sourcemaps/[name].[contenthash].js.map',
           }),
         ]
       : []),
     new MiniCssExtractPlugin({
-      chunkFilename: 'css/[name].[contenthash].css',
-      filename: 'css/[name].[contenthash].css',
+      chunkFilename: fileHash ? 'css/[name].css' : 'css/[name].[contenthash].css',
+      filename: fileHash ? 'css/[name].css' : 'css/[name].[contenthash].css',
       ignoreOrder: true,
     }),
     new CleanWebpackPlugin({
@@ -69,8 +73,9 @@ module.exports = ({
       process: 'process/browser.js',
       Buffer: ['buffer', 'Buffer'],
     }),
-    new ChunkMapperPlugin({ modules: [...(insights ? [jsVarName(insights.appname)] : []), ...(modules || [])] }),
+    new ChunkMapperPlugin({ _unstableHotReload, modules: [...(insights ? [jsVarName(insights.appname)] : []), ...(modules || [])] }),
     ...(hasTsConfig ? [new ForkTsCheckerWebpackPlugin()] : []),
     ...(plugins || []),
+    ...(_unstableHotReload ? [new ReactRefreshWebpackPlugin()] : []),
   ];
 };