@redhat-cloud-services/frontend-components-config-utilities 1.5.6 → 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.6",
+    "version": "1.5.7",
     "description": "Utilities for shared config used in RedHat Cloud Services project.",
     "main": "index.js",
     "publishConfig": {