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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.6.24",
+    "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,9 @@ 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');
 
 module.exports = ({
   rootFolder,
@@ -19,53 +22,60 @@ module.exports = ({
   plugins,
   useChromeTemplate = true,
   definePlugin = {},
-} = {}) => [
-  ...(generateSourceMaps
-    ? [
-        new SourceMapDevToolPlugin({
-          test: 'js',
-          exclude: /(node_modules|bower_components)/i,
-          filename: 'sourcemaps/[name].[contenthash].js.map',
-        }),
-      ]
-    : []),
-  new MiniCssExtractPlugin({
-    chunkFilename: 'css/[name].[contenthash].css',
-    filename: 'css/[name].[contenthash].css',
-    ignoreOrder: true,
-  }),
-  new CleanWebpackPlugin({
-    cleanStaleWebpackAssets: false,
-    cleanOnceBeforeBuildPatterns: useChromeTemplate ? ['**/*', '!index.html'] : ['**/*'],
-  }),
-  ...(useChromeTemplate
-    ? []
-    : [
-        new HtmlWebpackPlugin({
-          title: 'My App',
-          filename: 'index.html',
-          template: `${rootFolder || ''}/src/index.html`,
-          inject: false,
-          ...(htmlPlugin || {}),
-        }),
-        new HtmlReplaceWebpackPlugin([
-          {
-            pattern: '@@env',
-            replacement: appDeployment || '',
-          },
-          ...(replacePlugin || []),
+  _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: fileHash ? 'sourcemaps/[name].js.map' : 'sourcemaps/[name].[contenthash].js.map',
+          }),
+        ]
+      : []),
+    new MiniCssExtractPlugin({
+      chunkFilename: fileHash ? 'css/[name].css' : 'css/[name].[contenthash].css',
+      filename: fileHash ? 'css/[name].css' : 'css/[name].[contenthash].css',
+      ignoreOrder: true,
+    }),
+    new CleanWebpackPlugin({
+      cleanStaleWebpackAssets: false,
+      cleanOnceBeforeBuildPatterns: useChromeTemplate ? ['**/*', '!index.html'] : ['**/*'],
+    }),
+    ...(useChromeTemplate
+      ? []
+      : [
+          new HtmlWebpackPlugin({
+            title: 'My App',
+            filename: 'index.html',
+            template: `${rootFolder || ''}/src/index.html`,
+            inject: false,
+            ...(htmlPlugin || {}),
+          }),
+          new HtmlReplaceWebpackPlugin([
+            {
+              pattern: '@@env',
+              replacement: appDeployment || '',
+            },
+            ...(replacePlugin || []),
+          ]),
         ]),
-      ]),
-  new DefinePlugin({
-    // we have to wrap the appname string in another string because of how define plugin explodes strings
-    CRC_APP_NAME: JSON.stringify(insights?.appname),
-    ...(definePlugin || {}),
-  }),
-  new ProvidePlugin({
-    process: 'process/browser.js',
-    Buffer: ['buffer', 'Buffer'],
-  }),
-  new ChunkMapperPlugin({ modules: [...(insights ? [jsVarName(insights.appname)] : []), ...(modules || [])] }),
-  new ForkTsCheckerWebpackPlugin(),
-  ...(plugins || []),
-];
+    new DefinePlugin({
+      // we have to wrap the appname string in another string because of how define plugin explodes strings
+      CRC_APP_NAME: JSON.stringify(insights?.appname),
+      ...(definePlugin || {}),
+    }),
+    new ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new ChunkMapperPlugin({ _unstableHotReload, modules: [...(insights ? [jsVarName(insights.appname)] : []), ...(modules || [])] }),
+    ...(hasTsConfig ? [new ForkTsCheckerWebpackPlugin()] : []),
+    ...(plugins || []),
+    ...(_unstableHotReload ? [new ReactRefreshWebpackPlugin()] : []),
+  ];
+};

package/src/plugins.test.js

@@ -1,23 +1,31 @@
 import plugins from './plugins';
+import path from 'path';
 
 const HTML_WEBPACK = 2;
 const REPLACE = 3;
 const DEFINE_PLUGIN = 4;
 
 describe('plugins generations, no option', () => {
-  const enabledPlugins = plugins({ useChromeTemplate: false });
+  const enabledPlugins = plugins({ useChromeTemplate: false, rootFolder: '/foo/bar' });
 
   it('should generate plugins', () => {
-    expect(enabledPlugins.length).toBe(8);
+    expect(enabledPlugins.length).toBe(7);
   });
 
   it('should generate plugins with sourceMaps', () => {
-    const enabledPlugins = plugins({ generateSourceMaps: true, useChromeTemplate: false });
-    expect(enabledPlugins.length).toBe(9);
+    const enabledPlugins = plugins({ generateSourceMaps: true, useChromeTemplate: false, rootFolder: '/foo/bar' });
+    expect(enabledPlugins.length).toBe(8);
   });
 
   it('should generate correct template path for HtmlWebpackPlugin', () => {
-    expect(enabledPlugins[HTML_WEBPACK].userOptions.template).toBe('/src/index.html');
+    expect(enabledPlugins[HTML_WEBPACK].userOptions.template).toBe('/foo/bar/src/index.html');
+  });
+});
+
+describe('TS for plugins', () => {
+  const pluginsWithTs = plugins({ generateSourceMaps: true, useChromeTemplate: false, rootFolder: path.resolve(__dirname, '../../../') });
+  it('should have TSForkPlugin and 9 plugins in todal', () => {
+    expect(pluginsWithTs).toHaveLength(9);
   });
 });
 
@@ -30,7 +38,7 @@ describe('rootFolder', () => {
 });
 
 describe('appDeployment', () => {
-  const enabledPlugins = plugins({ appDeployment: '/test/folder', useChromeTemplate: false });
+  const enabledPlugins = plugins({ appDeployment: '/test/folder', useChromeTemplate: false, rootFolder: '/foo/bar' });
 
   it('should replace correct string', () => {
     enabledPlugins[REPLACE].replace({ html: 'string @@env' }, (_, { html }) => expect(html).toBe('string /test/folder'));
@@ -38,13 +46,14 @@ describe('appDeployment', () => {
 });
 
 it('htmlPlugin should update', () => {
-  const enabledPlugins = plugins({ htmlPlugin: { title: 'myTitle' }, useChromeTemplate: false });
+  const enabledPlugins = plugins({ htmlPlugin: { title: 'myTitle' }, useChromeTemplate: false, rootFolder: '/foo/bar' });
   expect(enabledPlugins[HTML_WEBPACK].userOptions.title).toBe('myTitle');
 });
 
 it('replacePlugin should update', () => {
   const enabledPlugins = plugins({
     useChromeTemplate: false,
+    rootFolder: '/foo/bar',
     replacePlugin: [
       {
         pattern: '@@another',
@@ -58,6 +67,7 @@ it('replacePlugin should update', () => {
 it('definePlugin should have default replace of CRC_APP_NAME', () => {
   const enabledPlugins = plugins({
     useChromeTemplate: false,
+    rootFolder: '/foo/bar',
     insights: { appname: 'test_app' },
   });
   expect(enabledPlugins[DEFINE_PLUGIN].definitions.CRC_APP_NAME).toBe('"test_app"');
@@ -65,6 +75,7 @@ it('definePlugin should have default replace of CRC_APP_NAME', () => {
 
 it('definePlugin should update', () => {
   const enabledPlugins = plugins({
+    rootFolder: '/foo/bar',
     useChromeTemplate: false,
     definePlugin: {
       SOME_VAR: JSON.stringify('test_val'),