Refactor dynamic module import transform code

Author: vojtechszocs

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx

@@ -9,11 +9,11 @@ import {
 import { Bullseye, Pagination, Tooltip } from '@patternfly/react-core';
 import {
   DataView,
+  DataViewFilters,
   DataViewState,
   DataViewTable,
   DataViewToolbar,
 } from '@patternfly/react-data-view';
-import DataViewFilters from '@patternfly/react-data-view/dist/esm/DataViewFilters';
 import { ColumnsIcon, UndoIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import { InnerScrollContainer, Tbody, Td, Tr } from '@patternfly/react-table';

frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-webpack.md

@@ -10,6 +10,12 @@ For current development version of Console, use `4.x.0-prerelease.n` packages.
 For older 1.x plugin SDK packages, refer to "OpenShift Console Versions vs SDK Versions" compatibility
 table in [Console dynamic plugins README](./README.md).
 
+## 4.22.0-prerelease.3 - TBD
+
+- **Breaking**: `ConsoleRemotePlugin` shared dynamic module option `transformImports` renamed to `moduleFilter` ([CONSOLE-5065], [#16224])
+- Update the default list of PatternFly packages that support dynamic modules ([CONSOLE-5065], [#16182])
+- Add support for `dist/dynamic-modules.json` when resolving dynamic module maps ([CONSOLE-5065], [#16224])
+
 ## 4.22.0-prerelease.2 - 2026-03-26
 
 - **Deprecated**: `loadPluginEntry` callback is deprecated in favor of `__load_plugin_entry__`. Migrate by
@@ -110,6 +116,7 @@ table in [Console dynamic plugins README](./README.md).
 [CONSOLE-4400]: https://issues.redhat.com/browse/CONSOLE-4400
 [CONSOLE-4623]: https://issues.redhat.com/browse/CONSOLE-4623
 [CONSOLE-5050]: https://issues.redhat.com/browse/CONSOLE-5050
+[CONSOLE-5065]: https://issues.redhat.com/browse/CONSOLE-5065
 [CONSOLE-5135]: https://issues.redhat.com/browse/CONSOLE-5135
 [OCPBUGS-30762]: https://issues.redhat.com/browse/OCPBUGS-30762
 [OCPBUGS-30824]: https://issues.redhat.com/browse/OCPBUGS-30824
@@ -145,3 +152,5 @@ table in [Console dynamic plugins README](./README.md).
 [#15934]: https://github.com/openshift/console/pull/15934
 [#15945]: https://github.com/openshift/console/pull/15945
 [#16178]: https://github.com/openshift/console/pull/16178
+[#16182]: https://github.com/openshift/console/pull/16182
+[#16224]: https://github.com/openshift/console/pull/16224

frontend/packages/console-dynamic-plugin-sdk/src/shared-modules/shared-modules-meta.ts

@@ -17,7 +17,11 @@ type SharedModuleMetadata = Partial<{
    */
   allowFallback: boolean;
 
-  /** A message describing the deprecation, if the module is deprecated. */
+  /**
+   * A message describing the deprecation, if the module has been deprecated.
+   *
+   * @default false
+   */
   deprecated: string | false;
 }>;
 

frontend/packages/console-dynamic-plugin-sdk/src/webpack/ConsoleRemotePlugin.ts

@@ -1,4 +1,3 @@
-import * as fs from 'fs';
 import * as path from 'path';
 import type {
   EncodedExtension,
@@ -18,16 +17,13 @@ import {
   getSharedModuleMetadata,
 } from '../shared-modules/shared-modules-meta';
 import type { DynamicModuleMap } from '../utils/dynamic-module-parser';
-import { getDynamicModuleMap } from '../utils/dynamic-module-parser';
 import { parseJSONC } from '../utils/jsonc';
 import { loadSchema } from '../utils/schema';
 import { ExtensionValidator } from '../validation/ExtensionValidator';
 import { SchemaValidator } from '../validation/SchemaValidator';
 import { ValidationResult } from '../validation/ValidationResult';
-import type { DynamicModuleImportLoaderOptions } from './loaders/dynamic-module-import-loader';
-
-const dynamicModuleImportLoader =
-  '@openshift-console/dynamic-plugin-sdk-webpack/lib/webpack/loaders/dynamic-module-import-loader';
+import type { DynamicModulePackageSpecs } from './DynamicModuleImportPlugin';
+import { DynamicModuleImportPlugin, resolveDynamicModuleMaps } from './DynamicModuleImportPlugin';
 
 const loadPluginPackageJSON = () => readPkg.sync({ normalize: false }) as ConsolePluginPackageJSON;
 
@@ -130,7 +126,7 @@ const getDeprecatedSharedModuleWarnings = (pkg: ConsolePluginPackageJSON): strin
 
     if (deprecated && pluginDeps[moduleName]) {
       warnings.push(
-        `shared modules: [DEPRECATION ALERT] '${moduleName}' is deprecated. ${deprecated}`,
+        `[DEPRECATION WARNING] Console provided shared module ${moduleName} has been deprecated: ${deprecated}`,
       );
     }
   });
@@ -169,24 +165,26 @@ const validateConsoleProvidedSharedModules = (pkg: ConsolePluginPackageJSON) =>
 /**
  * PatternFly packages that support dynamic modules to be used with webpack module federation.
  *
- * Console provided {@link sharedPluginModules} should NOT be listed here.
+ * Console provided {@link sharedPluginModules} should _NOT_ be listed here.
  */
 const dynamicModulePatternFlyPackages = [
-  '@patternfly/react-charts',
   '@patternfly/react-core',
   '@patternfly/react-data-view',
   '@patternfly/react-icons',
   '@patternfly/react-table',
   '@patternfly/react-templates',
 ];
 
-type DynamicModulePackageSpec = Partial<{
-  /** @default 'dist/esm/index.js' */
-  indexModule: string;
+export const dynamicModulePackageSpecs = dynamicModulePatternFlyPackages.reduce<
+  DynamicModulePackageSpecs
+>((acc, moduleName) => ({ ...acc, [moduleName]: {} }), {});
 
-  /** @default 'module' */
-  resolutionField: string;
-}>;
+export const dynamicModuleImportTransformFilter = (moduleRequest: string) => {
+  const isCode = /\.(jsx?|tsx?)$/.test(moduleRequest);
+  const isVendor = moduleRequest.includes('/node_modules/');
+
+  return isCode && (!isVendor || moduleRequest.includes('/node_modules/@openshift-console/'));
+};
 
 export type ConsoleRemotePluginOptions = Partial<{
   /**
@@ -250,9 +248,9 @@ export type ConsoleRemotePluginOptions = Partial<{
   /**
    * Some vendor packages may support dynamic modules to be used with webpack module federation.
    *
-   * If a module request matches the `transformImports` filter, that module will have its imports
-   * transformed so that any _index_ imports for given vendor packages become imports for specific
-   * dynamic modules of these vendor packages.
+   * If a module request matches the `moduleFilter`, code of that module will be modified so that
+   * any _index_ imports for given vendor packages become imports for specific dynamic modules of
+   * these vendor packages.
    *
    * For example, the following import:
    * ```ts
@@ -268,11 +266,23 @@ export type ConsoleRemotePluginOptions = Partial<{
    * Each dynamic module (such as `@patternfly/react-core/dist/dynamic/components/Alert`) will
    * be treated as a separate shared module at runtime. This approach allows for more efficient
    * federation of vendor package code, as opposed to sharing the whole vendor package index
-   * (such as `@patternfly/react-core`) that pulls in all of its code.
+   * (such as `@patternfly/react-core`) that would cause all of its code to be pulled into the
+   * Console compilation and inflate the vendor bundle size.
    */
   sharedDynamicModuleSettings: Partial<{
     /**
-     * Paths to `node_modules` directories to search when parsing dynamic modules.
+     * Packages that support dynamic modules for use with webpack module federation.
+     *
+     * Each vendor package listed here should include a `dist/dynamic` directory containing
+     * `package.json` files representing parts of that package to be shared separately between
+     * the Console application and its plugins at runtime.
+     *
+     * If not specified, use a default list of PatternFly packages that support dynamic modules.
+     */
+    packageSpecs: DynamicModulePackageSpecs;
+
+    /**
+     * Paths to `node_modules` directories to search when resolving dynamic modules.
      *
      * Paths listed here _must_ be absolute.
      *
@@ -284,33 +294,22 @@ export type ConsoleRemotePluginOptions = Partial<{
     modulePaths: string[];
 
     /**
-     * Attempt to parse dynamic modules for these packages.
-     *
-     * Each package listed here should include a `dist/dynamic` directory containing `package.json`
-     * files that refer to specific modules of that package.
-     *
-     * If not specified, use packages listed in {@link dynamicModulePatternFlyPackages} with default
-     * settings.
-     */
-    packageSpecs: Record<string, DynamicModulePackageSpec>;
-
-    /**
-     * Import transformations will be applied to modules that match this filter.
+     * Modules that match this filter will have their imports transformed.
      *
      * If not specified, the following conditions must be all true for a module to be matched:
-     * - request ends with one of `.js`, `.jsx`, `.ts`, `.tsx`
+     * - request ends with `.js`, `.jsx`, `.ts` or `.tsx`
      * - request does not contain `node_modules` path elements (i.e. not a vendor module request),
      *   _except_ for `@openshift-console/*` packages
      */
-    transformImports: (moduleRequest: string) => boolean;
+    moduleFilter: (moduleRequest: string) => boolean;
   }>;
 }>;
 
 /**
  * Generates Console dynamic plugin remote container and related assets.
  *
- * Refer to `frontend/packages/console-dynamic-plugin-sdk/src/shared-modules.ts` for details on
- * Console application vs. dynamic plugins shared module configuration.
+ * Refer to `console-dynamic-plugin-sdk/src/shared-modules.ts` for details on Console provided
+ * shared modules and their configuration.
  *
  * @see {@link sharedPluginModules}
  * @see {@link getSharedModuleMetadata}
@@ -342,6 +341,8 @@ export class ConsoleRemotePlugin implements WebpackPluginInstance {
       validateConsoleProvidedSharedModules(this.pkg).report();
     }
 
+    validateConsoleBuildMetadata(this.adaptedOptions.pluginMetadata).report();
+
     const overlapDependencyNames = _.intersection(
       Object.keys(this.adaptedOptions.pluginMetadata.dependencies ?? {}),
       Object.keys(this.adaptedOptions.pluginMetadata.optionalDependencies ?? {}),
@@ -359,24 +360,10 @@ export class ConsoleRemotePlugin implements WebpackPluginInstance {
       path.resolve(process.cwd(), 'node_modules'),
     ];
 
-    const sharedDynamicModulePackageSpecs =
-      this.adaptedOptions.sharedDynamicModuleSettings.packageSpecs ??
-      dynamicModulePatternFlyPackages.reduce<Record<string, DynamicModulePackageSpec>>(
-        (acc, moduleName) => ({ ...acc, [moduleName]: {} }),
-        {},
-      );
-
-    this.sharedDynamicModuleMaps = Object.entries(sharedDynamicModulePackageSpecs).reduce<
-      Record<string, DynamicModuleMap>
-    >((acc, [pkgName, { indexModule = 'dist/esm/index.js', resolutionField = 'module' }]) => {
-      const basePath = resolvedModulePaths
-        .map((p) => path.resolve(p, pkgName))
-        .find((p) => fs.existsSync(p) && fs.statSync(p).isDirectory());
-
-      return basePath
-        ? { ...acc, [pkgName]: getDynamicModuleMap(basePath, indexModule, resolutionField) }
-        : acc;
-    }, {});
+    this.sharedDynamicModuleMaps = resolveDynamicModuleMaps(
+      this.adaptedOptions.sharedDynamicModuleSettings.packageSpecs ?? dynamicModulePackageSpecs,
+      resolvedModulePaths,
+    );
   }
 
   apply(compiler: Compiler) {
@@ -401,6 +388,8 @@ export class ConsoleRemotePlugin implements WebpackPluginInstance {
 
     const logger = compiler.getInfrastructureLogger(ConsoleRemotePlugin.name);
 
+    // Dynamic plugin assets should be loaded from /api/plugins/<plugin-name> endpoint.
+    // Console Bridge server will fetch the asset from the appropriate plugin web server.
     const publicPath = `/api/plugins/${name}/`;
 
     if (compiler.options.output.publicPath !== undefined) {
@@ -454,10 +443,14 @@ export class ConsoleRemotePlugin implements WebpackPluginInstance {
           : 'plugin-entry.js',
     }).apply(compiler);
 
-    validateConsoleBuildMetadata(pluginMetadata).report();
+    new DynamicModuleImportPlugin({
+      dynamicModuleMaps: this.sharedDynamicModuleMaps,
+      moduleFilter: sharedDynamicModuleSettings.moduleFilter ?? dynamicModuleImportTransformFilter,
+    }).apply(compiler);
 
-    if (validateExtensionIntegrity) {
-      compiler.hooks.emit.tap(ConsoleRemotePlugin.name, (compilation) => {
+    // Post-build validations performed before emitting assets
+    compiler.hooks.emit.tap(ConsoleRemotePlugin.name, (compilation) => {
+      if (validateExtensionIntegrity) {
         const result = new ExtensionValidator('Console plugin extensions').validate(
           compilation,
           extensions,
@@ -471,49 +464,11 @@ export class ConsoleRemotePlugin implements WebpackPluginInstance {
           error.file = extensionsFile;
           compilation.errors.push(error);
         }
-      });
-    }
-
-    const transformImports =
-      sharedDynamicModuleSettings.transformImports ??
-      ((moduleRequest) => {
-        const isCode = /\.(jsx?|tsx?)$/.test(moduleRequest);
-        const isVendor = moduleRequest.includes('/node_modules/');
-
-        return isCode && (!isVendor || moduleRequest.includes('/node_modules/@openshift-console/'));
-      });
+      }
 
-    compiler.hooks.thisCompilation.tap(ConsoleRemotePlugin.name, (compilation) => {
       getDeprecatedSharedModuleWarnings(this.pkg).forEach((message) => {
         compilation.warnings.push(new compiler.webpack.WebpackError(message));
       });
-
-      const modifiedModules: string[] = [];
-
-      compiler.webpack.NormalModule.getCompilationHooks(compilation).beforeLoaders.tap(
-        ConsoleRemotePlugin.name,
-        (loaders, normalModule) => {
-          const { userRequest } = normalModule;
-
-          const moduleRequest = userRequest.substring(
-            userRequest.lastIndexOf('!') === -1 ? 0 : userRequest.lastIndexOf('!') + 1,
-          );
-
-          if (!modifiedModules.includes(moduleRequest) && transformImports(moduleRequest)) {
-            const loaderOptions: DynamicModuleImportLoaderOptions = {
-              dynamicModuleMaps: this.sharedDynamicModuleMaps,
-              resourceMetadata: { jsx: /\.(jsx|tsx)$/.test(moduleRequest) },
-            };
-
-            normalModule.loaders.push({
-              loader: dynamicModuleImportLoader,
-              options: loaderOptions,
-            } as any);
-
-            modifiedModules.push(moduleRequest);
-          }
-        },
-      );
     });
   }
 }