@redhat-cloud-services/frontend-components-config-utilities 1.5.3 → 1.5.7

package/README.md

@@ -123,3 +123,71 @@ This packages exposes these federated shared dependencies
 * `@redhat-cloud-services/frontend-components` - version taken from your `package.json`
 * `@redhat-cloud-services/frontend-components-utilities` - version taken from your `package.json`
 * `@redhat-cloud-services/frontend-components-notifications` - version taken from your `package.json`
+
+## Extensions plugin
+
+In order to share some code into extension points or to add new extension point we can use `ExtensionsPlugin`
+
+Simply import it in your webpack config and add it to your plugins
+
+```JS
+const { resolve } = require('path');
+const config = require('@redhat-cloud-services/frontend-components-config');
+const ExtensionsPlugin = require('@redhat-cloud-services/frontend-components-config/extensions-plugin');
+
+const { config: webpackConfig, plugins } = config({
+  rootFolder: resolve(__dirname, '../'),
+  ...(process.env.BETA && { deployment: 'beta/apps' }),
+});
+
+plugins.push(
+  require('@redhat-cloud-services/frontend-components-config/federated-modules')({
+    root: resolve(__dirname, '../'),
+  }),
+  new ExtensionsPlugin({})
+);
+
+module.exports = {
+  ...webpackConfig,
+  plugins
+}
+```
+
+### Arguments
+
+There are three arguments `ExtensionsPlugin` constructor accepts:
+* `pluginConfig`
+* `fedModuleConfig`
+* `options`
+
+### `pluginConfig`
+
+This config contains information about extensions, plugin requirements, its name and description. Most of it (name, description and version) is calculated from your root `package.json`. But you can override these values:
+
+* `name` - plugin name (pulled from `package.json`)
+* `version` - version of the plugin
+* `displayName` - display name of the plugin
+* `description` - description of the plugin (pulled from `package.json`)
+* `dependencies` - object of dependencies which will be passed down to module federation (no need to list general react dependencies)
+* `disableStaticPlugins` - list of static plugins this plugin disables on load
+* `extensions` - list of extension objects.
+
+#### extension object
+
+Each extension object requires a `type` and `properties`. The type can be either custom extension or one of predefined:
+
+* `console.navigation/section` - a section in navigation (identifies secondary nav)
+  * `properties`
+    * `id` - id of the section
+    * `name` - name of the section, this will be shown in the UI
+* `console.page/route` - route passed to react-router
+  * `properties` - in theory any react-router path prop can be used here
+    * `path` - (string, or array) path on which the component will be rendered
+    * `component`
+      * `$codeRef` - federated module used to render on the route
+* `console.navigation/href` - navigation href, used to render leafs of navigation
+  * `properties`
+    * `id` - id of the href
+    * `section` - (optional) used to group nav items under section (omit for flat nav)
+    * `name` - name of the href, thiw will be shown in the UI
+    * `href` - used to mutate the URL

package/extension-mapper.js

@@ -0,0 +1,77 @@
+const webpack = require('webpack');
+
+class ExtensionsMapper {
+    constructor(plugin, options) {
+        if (!plugin) {
+            throw new Error('Missing plugin config!');
+        }
+
+        this.plugin = plugin;
+        this.options = {
+            remoteEntryCallback: 'window.loadPluginEntry',
+            remoteEntryFile: 'plugin-entry.js',
+            pluginManifestFile: 'plugin-manifest.json',
+            ...options
+        };
+    }
+
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap(ExtensionsMapper.name, (compilation) => {
+            // Generate extensions manifest
+            compilation.hooks.processAssets.tap(
+                {
+                    name: ExtensionsMapper.name,
+                    stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+                },
+                () => {
+                    compilation.emitAsset(
+                        this.options.pluginManifestFile,
+                        new webpack.sources.RawSource(
+                            Buffer.from(JSON.stringify({
+                                version: '0.0.0',
+                                description: '',
+                                displayName: '',
+                                dependencies: {},
+                                disableStaticPlugins: {},
+                                ...this.plugin
+                            }, null, 2))
+                        )
+                    );
+                }
+            );
+
+            // Update plugin-entry.js file
+            compilation.hooks.processAssets.tap(
+                {
+                    name: ExtensionsMapper.name,
+                    stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+                },
+                () => {
+                    compilation.updateAsset(this.options.remoteEntryFile, (source) => {
+                        const newSource = new webpack.sources.ReplaceSource(source);
+
+                        const fromIndex = source
+                        .source()
+                        .toString()
+                        .indexOf(`${this.options.remoteEntryCallback}(`);
+
+                        if (fromIndex < 0) {
+                            const error = new webpack.WebpackError(`Missing call to ${this.options.remoteEntryCallback}`);
+                            error.file = this.options.remoteEntryFile;
+                            compilation.errors.push(error);
+                        } else {
+                            newSource.insert(
+                                fromIndex + this.options.remoteEntryCallback.length + 1,
+                                `'${this.plugin.name}@${this.plugin.version}', `
+                            );
+                        }
+
+                        return newSource;
+                    });
+                }
+            );
+        });
+    }
+}
+
+module.exports = ExtensionsMapper;

package/extensions-plugin.js

@@ -0,0 +1,54 @@
+const { resolve } = require('path');
+const fedModule = require('./federated-modules');
+const ExtensionsMapper = require('./extension-mapper');
+
+class ExtensionsPlugin {
+    constructor(plugin, fedMod, options) {
+        if (!plugin) {
+            throw new Error('Missing plugin config!');
+        }
+
+        this.plugin = plugin;
+        this.fedMod = {
+            moduleName: 'plugin-entry',
+            libName: 'window.loadPluginEntry',
+            useFileHash: false,
+            libType: 'jsonp',
+            ...fedMod
+        };
+        this.options = {
+            remoteEntryCallback: 'window.loadPluginEntry',
+            remoteEntryFile: `${this.fedMod.moduleName}.js`,
+            pluginManifestFile: 'plugin-manifest.json',
+            ...options
+        };
+    }
+
+    apply(compiler) {
+        const root = this.fedMod.root || compiler.context;
+        const { insights, version, description } = require(resolve(root, './package.json')) || {};
+
+        // create federation module
+        fedModule({
+            ...this.fedMod,
+            root
+        }).apply(compiler);
+
+        // generate plugin manifest and update plugin-entry file
+        new ExtensionsMapper(
+            {
+                ...this.plugin,
+                name: this.plugin.name || (insights && insights.appname),
+                version: this.plugin.version || version || '0.0.0',
+                displayName: this.plugin.displayName || '',
+                description: this.plugin.description || description || '',
+                dependencies: { ...this.plugin.dependencies || {} },
+                disableStaticPlugins: [ ...this.plugin.disableStaticPlugins || [] ],
+                extensions: [ ...this.plugin.extensions || [] ]
+            },
+            this.options
+        ).apply(compiler);
+    }
+}
+
+module.exports = ExtensionsPlugin;

package/federated-modules.js

@@ -27,6 +27,8 @@ module.exports = ({
     debug,
     moduleName,
     useFileHash = true,
+    libType = 'var',
+    libName,
     exclude = []
 }) => {
     const { dependencies, insights } = require(resolve(root, './package.json')) || {};
@@ -64,7 +66,7 @@ module.exports = ({
     return new ModuleFederationPlugin({
         name: appName,
         filename: `${appName}${useFileHash ? '.[chunkhash]' : ''}.js`,
-        library: { type: 'var', name: appName },
+        library: { type: libType, name: libName || appName },
         exposes: {
             ...exposes || {
                 './RootApp': resolve(root, './src/AppEntry')

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config-utilities",
-    "version": "1.5.3",
+    "version": "1.5.7",
     "description": "Utilities for shared config used in RedHat Cloud Services project.",
     "main": "index.js",
     "publishConfig": {

package/proxy.js

@@ -31,7 +31,8 @@ module.exports = ({
     useCloud = false,
     target = '',
     keycloakUri = '',
-    registry = []
+    registry = [],
+    isChrome = false
 }) => {
     const proxy = [];
     const majorEnv = env.split('-')[0];
@@ -50,12 +51,16 @@ module.exports = ({
     }
 
     let agent;
+
+    if (env.startsWith('prod') || env.startsWith('stage')) {
+        // PROD and stage are deployed with Akamai which requires a corporate proxy
+        agent = new HttpsProxyAgent(proxyURL);
+    }
+
     if (env.startsWith('stage')) {
         // stage-stable / stage-beta branches don't exist in build repos
         // Currently stage pulls from QA
         env = env.replace('stage', 'qa');
-        // QA and stage are deployed with Akamai which requires a corporate proxy
-        agent = new HttpsProxyAgent(proxyURL);
     }
 
     if (!Array.isArray(appUrl)) {
@@ -179,6 +184,19 @@ module.exports = ({
                 return false;
             },
             target,
+            ...(isChrome && {
+                bypass: (req) => {
+                    /**
+                     * Bypass any HTML requests if using chrome
+                     * Serves as a historyApiFallback when refreshing on any other URL than '/'
+                     */
+                    if (!req.url.match(/\/api\//) && !req.url.match(/\./) && req.headers.accept.includes('text/html')) {
+                        return '/';
+                    }
+
+                    return null;
+                }
+            }),
             router: router(target, useCloud),
             ...(agent && {
                 agent,
@@ -211,32 +229,38 @@ module.exports = ({
         },
         onBeforeSetupMiddleware({ app, compiler, options }) {
             app.enable('strict routing'); // trailing slashes are mean
-            let chromePath = localChrome;
-            if (standaloneConfig) {
-                if (standaloneConfig.chrome) {
-                    chromePath = resolvePath(reposDir, standaloneConfig.chrome.path);
-                    keycloakUri = standaloneConfig.chrome.keycloakUri;
-                }
-            } else if (!localChrome && useProxy) {
-                if (typeof defaultServices.chrome === 'function') {
-                    defaultServices.chrome = defaultServices.chrome({});
-                }
+            /**
+             * Allow serving chrome assets
+             * This will allow running chrome as a host application
+             */
+            if (!isChrome) {
+                let chromePath = localChrome;
+                if (standaloneConfig) {
+                    if (standaloneConfig.chrome) {
+                        chromePath = resolvePath(reposDir, standaloneConfig.chrome.path);
+                        keycloakUri = standaloneConfig.chrome.keycloakUri;
+                    }
+                } else if (!localChrome && useProxy) {
+                    if (typeof defaultServices.chrome === 'function') {
+                        defaultServices.chrome = defaultServices.chrome({});
+                    }
 
-                chromePath = checkoutRepo({
-                    repo: `${defaultServices.chrome.path}#${env}`,
-                    reposDir,
-                    overwrite: true
-                });
-            }
+                    chromePath = checkoutRepo({
+                        repo: `${defaultServices.chrome.path}#${env}`,
+                        reposDir,
+                        overwrite: true
+                    });
+                }
 
-            if (chromePath) {
-                registerChrome({
-                    app,
-                    chromePath,
-                    keycloakUri,
-                    https: Boolean(options.https),
-                    proxyVerbose
-                });
+                if (chromePath) {
+                    registerChrome({
+                        app,
+                        chromePath,
+                        keycloakUri,
+                        https: Boolean(options.https),
+                        proxyVerbose
+                    });
+                }
             }
 
             registry.forEach(cb => cb({

package/serve-federated.js

@@ -15,7 +15,11 @@ function federate(argv, cwd) {
 
     try {
         fs.statSync(configPath);
-        const config = require(configPath);
+        let config = require(configPath);
+        if (typeof config === 'function') {
+            config = config(process.env);
+        }
+
         const outputPath = config.output.path;
 
         concurrently([