@redhat-cloud-services/frontend-components-config 4.7.2 → 5.0.0-beta.1

package/README.md

@@ -7,7 +7,6 @@
     - [Removed features with webpack 5](#removed-features-with-webpack-5)
   - [useProxy](#useproxy)
     - [Attributes](#attributes)
-      - [useChromeTemplate](#usechrometemplate)
       - [localChrome](#localchrome)
       - [keycloakUri](#keycloakuri)
       - [Registry](#registry)
@@ -69,7 +68,6 @@ const { config: webpackConfig, plugins } = config({
 |---------|----|-----------|
 |[useProxy](#useproxy)|`boolean`|Enables webpack proxy.|
 |[proxyURL](#proxyURL)|`string`|URL to proxy Akamai environment requests to.|
-|[useChromeTemplate](#useChromeTemplate)|`boolean`|Load chrome HTMl template.|
 |[localChrome](#localChrome)|`string`|Path to your local chrome build folder.|
 |[keycloakUri](#keycloakUri)|`string`|Uri to inject into proxied chrome assets.|
 |[registry](#registry)|`(({ app, server, compiler, standaloneConfig }) => void)[]`|Express middleware to register.|
@@ -83,23 +81,6 @@ const { config: webpackConfig, plugins } = config({
 |[bounceProd](#bounceProd)|`boolean` = `false`|Bounce all non-GET requests via server requests.|
 
 
-#### useChromeTemplate
-
-**This option will become the default. App-specific templates are deprecated**
-
-To load chrome HTML template instead of using the APP-specific template add `useChromeTemplate` flag to your config.
-
-```js
-const config = require('@redhat-cloud-services/frontend-components-config');
-
-const { config: webpackConfig, plugins } = config({
-  rootFolder: resolve(__dirname, '../'),
-  useProxy: true,
-  useChromeTemplate: true
-  ...
-});
-```
-
 #### localChrome
 
 You can also easily run you application with a local build of Chrome by adding `localChrome: <absolute_path_to_chrome_build_folder>`.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.7.2",
+    "version": "5.0.0-beta.1",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
     "bin": {
@@ -21,7 +21,7 @@
     "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/config#readme",
     "dependencies": {
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
-        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.31",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^2.0.0-beta.1",
         "assert": "^2.0.0",
         "axios": "^0.27.2",
         "babel-loader": "^8.2.5",
@@ -39,7 +39,7 @@
         "html-webpack-plugin": "^5.5.0",
         "https-proxy-agent": "^5.0.1",
         "http-server": "^13.1.0",
-        "mini-css-extract-plugin": "^1.6.2",
+        "mini-css-extract-plugin": "^2.7.3",
         "inquirer": "^8.2.4",
         "js-yaml": "^4.1.0",
         "jws": "^4.0.0",

package/src/config.js

@@ -35,7 +35,6 @@ module.exports = ({
   registry,
   client = {},
   bundlePfModules = false,
-  useChromeTemplate = true,
   bounceProd,
   useAgent,
   useDevBuild = true,
@@ -242,7 +241,7 @@ module.exports = ({
         target,
         registry,
         onBeforeSetupMiddleware: ({ chromePath }) => {
-          if (useChromeTemplate && chromePath) {
+          if (chromePath) {
             copyTemplate(chromePath);
           }
         },

package/src/plugins.js

@@ -2,29 +2,12 @@ const { SourceMapDevToolPlugin } = require('webpack');
 const { ProvidePlugin, DefinePlugin } = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-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,
-  appDeployment,
-  htmlPlugin,
-  replacePlugin,
-  insights,
-  modules,
-  generateSourceMaps,
-  plugins,
-  useChromeTemplate = true,
-  definePlugin = {},
-  _unstableHotReload = false,
-  useFileHash = true,
-} = {}) => {
+module.exports = ({ rootFolder, insights, generateSourceMaps, plugins, 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 [
@@ -44,26 +27,8 @@ module.exports = ({
     }),
     new CleanWebpackPlugin({
       cleanStaleWebpackAssets: false,
-      cleanOnceBeforeBuildPatterns: useChromeTemplate ? ['**/*', '!index.html'] : ['**/*'],
+      cleanOnceBeforeBuildPatterns: ['**/*', '!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),
@@ -73,7 +38,6 @@ module.exports = ({
       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,72 +1,30 @@
 import plugins from './plugins';
 import path from 'path';
 
-const HTML_WEBPACK = 2;
-const REPLACE = 3;
-const DEFINE_PLUGIN = 4;
+const DEFINE_PLUGIN = 2;
 
 describe('plugins generations, no option', () => {
-  const enabledPlugins = plugins({ useChromeTemplate: false, rootFolder: '/foo/bar' });
+  const enabledPlugins = plugins({ rootFolder: '/foo/bar' });
 
   it('should generate plugins', () => {
-    expect(enabledPlugins.length).toBe(7);
+    expect(enabledPlugins.length).toBe(4);
   });
 
   it('should generate plugins with sourceMaps', () => {
-    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('/foo/bar/src/index.html');
+    const enabledPlugins = plugins({ generateSourceMaps: true, rootFolder: '/foo/bar' });
+    expect(enabledPlugins.length).toBe(5);
   });
 });
 
 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);
-  });
-});
-
-describe('rootFolder', () => {
-  const enabledPlugins = plugins({ rootFolder: '/test/folder', useChromeTemplate: false });
-
-  it('should generate correct template path for HtmlWebpackPlugin', () => {
-    expect(enabledPlugins[HTML_WEBPACK].userOptions.template).toBe('/test/folder/src/index.html');
-  });
-});
-
-describe('appDeployment', () => {
-  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'));
-  });
-});
-
-it('htmlPlugin should update', () => {
-  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',
-        replacement: 'test-string',
-      },
-    ],
+  const pluginsWithTs = plugins({ generateSourceMaps: true, rootFolder: path.resolve(__dirname, '../../../') });
+  it('should have TSForkPlugin and 6 plugins in todal', () => {
+    expect(pluginsWithTs).toHaveLength(6);
   });
-  enabledPlugins[REPLACE].replace({ html: '@@another string @@env' }, (_, { html }) => expect(html).toBe('test-string string '));
 });
 
 it('definePlugin should have default replace of CRC_APP_NAME', () => {
   const enabledPlugins = plugins({
-    useChromeTemplate: false,
     rootFolder: '/foo/bar',
     insights: { appname: 'test_app' },
   });
@@ -76,7 +34,6 @@ 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'),
     },

package/src/scripts/webpack.plugins.js

@@ -9,6 +9,7 @@ const plugins = [
   fedModulePlugin({
     root: rootDir,
     useFileHash: process.env.NODE_ENV === 'production',
+    separateRuntime: !!fecConfig._unstableHotReload,
     /** Load optional config for federated modules */
     ...fecConfig.moduleFederation,
   }),

package/chunk-mapper.js

@@ -1,3 +0,0 @@
-const chunkMapper = require('@redhat-cloud-services/frontend-components-config-utilities/chunk-mapper');
-
-module.exports = chunkMapper;