Example of carbon / patternfly view switching

build/webpack.client.dev.js

@@ -23,6 +23,7 @@ const {
   withMiniCssExtractPlugin,
   withWebpackBundleAnalyzerPlugin,
   withTsconfigPathsPlugin,
+  withModuleFederationPlugin
 } = plugins;
 const {
   withStylingModuleLoader,
@@ -52,6 +53,7 @@ const devSpecificConfig = {
       analyzerMode: 'static',
       reportFilename: `${BUNDLE_ANALYSER_DIR}/bundles.html`, // when in dev mode, produce a static html file
     }),
+    withModuleFederationPlugin
   ],
   resolve: {
     plugins: [withTsconfigPathsPlugin({ configFile: 'client/tsconfig.json' })],
@@ -79,6 +81,9 @@ const devSpecificConfig = {
       errors: true,
     },
   },
+  output: {
+    publicPath: `http${devEnvToUseTls ? 's' : ''}://${webpackDevServer.hostname}:${webpackDevServer.port}/`
+  }
 };
 
 module.exports = returnBasicConfigMergedWith(devSpecificConfig);

build/webpack.client.prod.js

@@ -5,7 +5,7 @@
 
 // client production specific plugins and webpack configuration
 const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const { BannerPlugin } = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -69,7 +69,7 @@ const prodSpecificConfig = {
           },
         },
       }),
-      new OptimizeCSSAssetsPlugin({}),
+      new CSSMinimizerWebpackPlugin({}),
     ],
     splitChunks: {
       chunks: 'all',
@@ -93,7 +93,7 @@ const prodSpecificConfig = {
     // gzip compress all built js output
     new CompressionPlugin({
       test: /\\*\.js$/, // apply only on js files
-      filename: '[path].gz[query]', // output file name
+      filename: '[path][base].gz[query]', // output file name
       algorithm: 'gzip', // compress via gzip
       threshold: 0, // applies to all files
       minRatio: 0.8, // keep compressed file if smaller by this %

build/webpack.common.js

@@ -6,6 +6,7 @@ const path = require('path');
 const webpack = require('webpack');
 const merge = require('lodash.merge');
 const { PRODUCTION, DEVELOPMENT } = require('../utils/tooling/constants.js');
+const { dependencies, federatedModuleName } = require('../package.json');
 
 // constants
 const UI_TITLE = 'Strimzi UI';
@@ -57,8 +58,31 @@ const withWebpackBundleAnalyzerPlugin = returnPluginWithConfig(
 
 const withTsconfigPathsPlugin = returnPluginWithConfig(TsconfigPathsPlugin, {});
 
+const withModuleFederationPlugin = new webpack.container.ModuleFederationPlugin(
+  {
+    name: federatedModuleName,
+    filename: 'remoteEntry.js',
+    exposes: {
+      './Home': './client/Panels/Home',
+    },
+    shared: {
+      ...dependencies,
+      react: {
+        eager: true,
+        singleton: true,
+        requiredVersion: dependencies.react,
+      },
+      'react-dom': {
+        eager: true,
+        singleton: true,
+        requiredVersion: dependencies['react-dom'],
+      },
+    },
+  }
+);
+
 const withNormalModuleReplacementPlugin = () =>
-  new webpack.NormalModuleReplacementPlugin(/.carbon./, (resource) => {
+  new webpack.NormalModuleReplacementPlugin(/\.carbon/, (resource) => {
     const viewLayer = (process.env.VL || 'carbon').toLowerCase();
     resource.request = resource.request.replace('carbon', viewLayer);
   });
@@ -138,7 +162,7 @@ const withImageModuleLoader = returnModuleRuleWithConfig(
     {
       loader: 'file-loader',
       options: {
-        publicPath: '/images/',
+        //publicPath: '/images/',
         outputPath: 'images/',
       },
     },
@@ -179,6 +203,7 @@ module.exports = {
     withMiniCssExtractPlugin,
     withWebpackBundleAnalyzerPlugin,
     withTsconfigPathsPlugin,
+    withModuleFederationPlugin,
   },
   moduleLoaders: {
     withStylingModuleLoader,

client/Bootstrap/bootstrap.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import { init } from 'i18n';
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { Home } from 'Panels/Home';
+
+init(); //Bootstrap i18next support
+ReactDOM.render(<Home />, document.getElementById('root'));

client/Bootstrap/index.tsx

@@ -1,11 +1 @@
-/*
- * Copyright Strimzi authors.
- * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
- */
-import { init } from 'i18n';
-import ReactDOM from 'react-dom';
-import React from 'react';
-import { Home } from 'Panels/Home';
-
-init(); //Bootstrap i18next support
-ReactDOM.render(<Home />, document.getElementById('root'));
+import('./bootstrap');

client/Panels/Home/Home.steps.tsx → client/Panels/Home/Home.carbon.steps.tsx

@@ -4,7 +4,7 @@
  */
 import { Given, When, Then, Fusion } from 'jest-cucumber-fusion';
 import { render, RenderResult } from '@testing-library/react';
-import { Home } from '.';
+import { Home } from './Home.carbon';
 import React, { ReactElement } from 'react';
 
 let renderResult: RenderResult;

client/Panels/Home/Home.tsx → client/Panels/Home/Home.carbon.tsx

@@ -17,3 +17,5 @@ const Home: FunctionComponent = ({ children }) => {
 };
 
 export { Home };
+
+export default Home;

client/Panels/Home/Home.patternfly.steps.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import { Given, When, Then, Fusion } from 'jest-cucumber-fusion';
+import { render, RenderResult } from '@testing-library/react';
+import { Home } from './Home.patternfly';
+import React, { ReactElement } from 'react';
+
+let renderResult: RenderResult;
+let component: ReactElement;
+
+Given('a Home component', () => {
+  component = <Home />;
+});
+
+When('it is rendered', () => {
+  renderResult = render(component);
+});
+
+Then('it should display text', () => {
+  const { getByText } = renderResult;
+  expect(getByText('Welcome to the Strimzi UI for PatternFly')).toBeInTheDocument();
+});
+
+Fusion('Home.feature');

client/Panels/Home/Home.patternfly.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import React, { FunctionComponent } from 'react';
+import image from 'Images/logo.png';
+import './style.scss';
+import '@patternfly/react-core/dist/styles/base.css';
+
+const Home: FunctionComponent = ({ children }) => {
+  return (
+    <div className='home'>
+      <img src={image} alt='Strimzi logo' />
+      Welcome to the Strimzi UI for PatternFly
+      {children}
+    </div>
+  );
+};
+
+export { Home };

client/Panels/Home/index.ts

@@ -2,4 +2,4 @@
  * Copyright Strimzi authors.
  * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
  */
-export { Home } from './Home';
+export { Home } from './Home.carbon';

client/jest.config.js

@@ -15,6 +15,7 @@ const config = {
   moduleNameMapper: {
     ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
     ...jestModuleMapper,
+    "\\.(css|less)$": "<rootDir>/../node_modules/@patternfly/react-styles/__mocks__/styleMock.js"
   },
   testEnvironment: 'jsdom',
   collectCoverageFrom: [
@@ -27,6 +28,7 @@ const config = {
     '!jest.config.js',
     // Wrapper around graphql - not something we need/wish to test
     '!Bootstrap/GraphQLClient/**',
+    '!Bootstrap/bootstrap.tsx'
   ],
 };