STRIPES-861 integration of module federation logic in the main branch.

CHANGELOG.md

@@ -5,7 +5,9 @@
 * Unlock `esbuild-loader` from `~3.0.0`, bumping to `^4.2.2`. Refs STRWEB-95.
 * Prune dead code, `stripes.js` and its dep `commander`. Refs STRWEB-134.
 * Provide `getDynamicModule`, returning a module via `import()`. Refs STRWEB-137.
-* Add `subscribesTo` field to module metadata. Refs STRWEB-143.
+* * Add `subscribesTo` field to module metadata. Refs STRWEB-143.
+* Add `StripesLocalFederation` plugin, inject module federation plugin for federated platforms and modules. Refs STRIPES-861.
+* Adjust `StripesTranslationsPlugin` for working at the module level and including translations from `stripesDeps`. Refs STRIPES-861.
 
 ## [6.0.0](https://github.com/folio-org/stripes-webpack/tree/v6.0.0) (2025-02-24)
 [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v5.2.0...v6.0.0)

consts.js

@@ -0,0 +1,59 @@
+// Anythign that we want *the platform to provide to modules should be here.
+// If an item is not in this list, modules will each load their own version of it.
+// This can be problematic for React Context if mutliple copies of the same context are loaded.
+
+const singletons = {
+  '@folio/stripes-components': '^13.1.0',
+  '@folio/stripes-connect': '^10.0.1',
+  '@folio/stripes-core': '^11.1.0',
+  "moment": "^2.29.0",
+  'react': '~18.3',
+  'react-dom': '~18.3',
+  'react-intl': '^7.1.14',
+  'react-query': '^3.39.3',
+  'react-redux': '^8.1',
+  'react-router': '^5.2.0',
+  'react-router-dom': '^5.2.0',
+  'redux-observable': '^1.2.0',
+  'rxjs': '^6.6.3',
+};
+
+/** getHostAppSingletons
+* get singletons from stripes-core package.json on Github.
+*/
+const getHostAppSingletons = () => {
+  let platformSingletons = {};
+
+  const handlePkgData = (corePkg) => {
+    const pkgObject = corePkg.data ? JSON.parse(corePkg.data) : corePkg;
+    const stripesCoreVersion = pkgObject.version;
+    platformSingletons['@folio/stripes-core'] = `~${stripesCoreVersion}`;
+    Object.keys(singletons).forEach(dep => {
+      const depVersion = pkgObject.peerDependencies[dep];
+      if (depVersion) {
+        platformSingletons[dep] = depVersion;
+      }
+    });
+    platformSingletons = { ...platformSingletons, ...singletons };
+  }
+
+  let corePkg;
+  // try to get the locally installed stripes-core
+  try {
+    corePkg = require('@folio/stripes-core/package.json');
+  } catch (e) {
+    corePkg = singletons;
+    throw new Error('Error retrieving singletons list from platform. Falling back to static list');
+  }
+
+  handlePkgData(corePkg);
+  return platformSingletons;
+}
+
+const defaultentitlementUrl = 'http://localhost:3001/registry';
+
+module.exports = {
+  defaultentitlementUrl,
+  singletons,
+  getHostAppSingletons
+};

package.json

@@ -31,14 +31,17 @@
     "@cerner/duplicate-package-checker-webpack-plugin": "~2.1.0",
     "@csstools/postcss-global-data": "^3.0.0",
     "@csstools/postcss-relative-color-syntax": "^3.0.7",
+    "@octokit/rest": "^19.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@svgr/webpack": "^8.1.0",
     "add-asset-html-webpack-plugin": "^6.0.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.3",
     "buffer": "^6.0.3",
     "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "^13.0.1",
     "core-js": "^3.6.1",
+    "cors": "^2.8.5",
     "css-loader": "^6.4.0",
     "csv-loader": "^3.0.3",
     "debug": "^4.0.1",
@@ -52,6 +55,7 @@
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.7.6",
     "node-object-hash": "^1.2.0",
+    "portfinder": "^1.0.32",
     "postcss": "^8.4.2",
     "postcss-custom-media": "^9.0.1",
     "postcss-import": "^15.0.1",
@@ -70,6 +74,7 @@
     "util-ex": "^0.3.15",
     "validate-npm-package-name": "^6.0.2",
     "webpack-dev-middleware": "^5.2.1",
+    "webpack-dev-server": "^4.13.1",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-remove-empty-scripts": "^1.0.1",
     "webpack-virtual-modules": "^0.4.3"

test/webpack/stripes-config-plugin.spec.js

@@ -136,7 +136,7 @@ describe('The stripes-config-plugin', function () {
       expect(writeModuleArgs[0]).to.be.a('string').that.equals('node_modules/stripes-config.js');
 
       // TODO: More thorough analysis of the generated virtual module
-      expect(writeModuleArgs[1]).to.be.a('string').with.match(/export { okapi, config, modules, branding, errorLogging, translations, metadata, icons }/);
+      expect(writeModuleArgs[1]).to.be.a('string').with.match(/export { branding, config, errorLogging, icons, metadata, modules, okapi, translations }/);
     });
   });
 

test/webpack/stripes-translations-plugin.spec.js

@@ -9,8 +9,8 @@ const StripesTranslationsPlugin = require('../../webpack/stripes-translations-pl
 
 // Stub the parts of the webpack compiler that the StripesTranslationsPlugin interacts with
 const compilerStub = {
-  apply: () => {},
-  plugin: () => {},
+  apply: () => { },
+  plugin: () => { },
   options: {
     output: {
       publicPath: '/',
@@ -21,22 +21,22 @@ const compilerStub = {
   },
   hooks: {
     beforeWrite: {
-      tap: () => {},
+      tap: () => { },
     },
     emit: {
-      tapAsync: () => {},
+      tapAsync: () => { },
     },
     processAssets: {
-      tap: () => {},
+      tap: () => { },
     },
     thisCompilation: {
-      tap: () => {},
+      tap: () => { },
     },
     contextModuleFactory: {
-      tap: () => {},
+      tap: () => { },
     },
     afterResolve: {
-      tap: () => {},
+      tap: () => { },
     }
   }
 };
@@ -52,6 +52,8 @@ describe('The stripes-translations-plugin', function () {
         '@folio/checkout': {},
       },
     };
+
+    this.stripesFederateConfig = { ...this.stripesConfig, federate: true };
   });
 
   describe('constructor', function () {
@@ -89,12 +91,12 @@ describe('The stripes-translations-plugin', function () {
       this.sandbox.spy(webpack.ContextReplacementPlugin.prototype, 'apply');
       this.sandbox.spy(compilerStub.hooks.emit, 'tapAsync');
       this.sandbox.spy(compilerStub.hooks.thisCompilation, 'tap');
-      this.sandbox.stub(StripesTranslationsPlugin, 'loadFile').returns({ key1: 'Value 1', key2: 'Value 2' });
+      this.sandbox.stub(StripesTranslationsPlugin, 'loadFile').returns({ key1: 'Value 1', key2: 'Value 2', name: 'testPackage', stripes: { stripesDeps: ['stripes-federate-dependency'] } });
       this.compilationStub = {
         assets: {},
         hooks: {
           processAssets: {
-            tap: () => {}
+            tap: () => { }
           },
         },
       };
@@ -131,6 +133,15 @@ describe('The stripes-translations-plugin', function () {
       expect(this.sut.modules).to.be.an('object').with.property('stripes-dependency');
     });
 
+    it('includes certain modules and stripes-deps in "federate" mpode', function () {
+      // federate mode is per-module, so the plugin executes outside of StripesConfigPlugin, with its own hook.
+      this.sut = new StripesTranslationsPlugin(this.stripesFederateConfig);
+      this.sut.apply({ ...compilerStub, context: __dirname });
+
+      expect(this.sut.modules).to.be.an('object').with.property('testPackage');
+      expect(this.sut.modules).to.be.an('object').with.property('stripes-federate-dependency');
+    });
+
     it('generates an emit function with all translations', function () {
       this.sut = new StripesTranslationsPlugin(this.stripesConfig);
       this.sut.apply(compilerStub);
@@ -156,6 +167,30 @@ describe('The stripes-translations-plugin', function () {
       expect(emitFiles).to.match(/translations\/fr-\d+\.json/);
     });
 
+    it('generates an emit function with all translations (federate mode)', function () {
+      this.sut = new StripesTranslationsPlugin(this.stripesFederateConfig);
+      this.sut.apply({ ...compilerStub, context: __dirname });
+
+      // Get the callback passed to 'thisCompilation' hook
+      const pluginArgs = compilerStub.hooks.thisCompilation.tap.getCall(0).args;
+      const compilerCallback = pluginArgs[1];
+
+      compilerCallback(this.compilationStub);
+
+      const compilationArgs = this.compilationStub.hooks.processAssets.tap.getCall(0).args;
+      const compilationCallback = compilationArgs[1];
+
+      // Call it and observe the modification to compilation.asset
+      compilationCallback();
+
+      const emitFiles = Object.keys(this.compilationStub.assets);
+
+      expect(emitFiles).to.have.length(3);
+      expect(emitFiles).to.match(/translations\/en-\d+\.json/);
+      expect(emitFiles).to.match(/translations\/es-\d+\.json/);
+      expect(emitFiles).to.match(/translations\/fr-\d+\.json/);
+    });
+
     it('applies ContextReplacementPlugins when language filters are set', function () {
       this.sut = new StripesTranslationsPlugin(this.stripesConfig);
       this.sut.languageFilter = ['en'];

webpack.config.base.js

@@ -65,6 +65,7 @@ const baseConfig = {
     }),
     new webpack.EnvironmentPlugin(['NODE_ENV']),
     new RemoveEmptyScriptsPlugin(),
+    new webpack.ManifestPlugin({ entrypoints: true }),
   ],
   module: {
     rules: [
@@ -162,7 +163,7 @@ const buildConfig = (modulePaths) => {
     test: /\.css$/,
     exclude: [cssDistPathRegex],
     use: [
-      { loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader'  },
+      { loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader' },
       {
         loader: 'css-loader',
         options: {

webpack.config.cli.dev.js

@@ -9,7 +9,9 @@ const esbuildLoaderRule = require('./webpack/esbuild-loader-rule');
 const utils = require('./webpack/utils');
 const buildBaseConfig = require('./webpack.config.base');
 const cli = require('./webpack.config.cli');
-
+const { getHostAppSingletons } = require('./consts');
+const { ModuleFederationPlugin } = require('webpack').container;
+const { processShared } = require('./webpack/utils');
 
 const useBrowserMocha = () => {
   return tryResolve('mocha/mocha-es2018.js') ? 'mocha/mocha-es2018.js' : 'mocha';
@@ -56,10 +58,17 @@ const buildConfig = (stripesConfig) => {
   if (utils.isDevelopment) {
     devConfig.plugins = devConfig.plugins.concat([
       new webpack.HotModuleReplacementPlugin(),
-      new ReactRefreshWebpackPlugin()
+      new ReactRefreshWebpackPlugin(),
     ]);
   }
 
+  // Enable module federation, setting up the host platform to share singletons (react, stripes-core, etc) with remote modules.
+  if (stripesConfig.okapi.entitlementUrl) {
+    const hostAppSingletons = getHostAppSingletons();
+    const shared = processShared(hostAppSingletons, { singleton: true, eager: true });
+    devConfig.plugins.push(new ModuleFederationPlugin({ name: 'host', shared }));
+  }
+
   // This alias avoids a console warning for react-dom patch
   devConfig.resolve.alias.process = 'process/browser.js';
   devConfig.resolve.alias['mocha'] = useBrowserMocha();

webpack.config.cli.prod.js

@@ -9,6 +9,10 @@ const buildBaseConfig = require('./webpack.config.base');
 const cli = require('./webpack.config.cli');
 const esbuildLoaderRule = require('./webpack/esbuild-loader-rule');
 const { getModulesPaths, getStripesModulesPaths, getTranspiledModules } = require('./webpack/module-paths');
+const { processShared } = require('./webpack/utils');
+const { ModuleFederationPlugin } = require('webpack').container;
+const { getHostAppSingletons } = require('./consts');
+
 
 const buildConfig = (stripesConfig, options = {}) => {
   const modulePaths = getModulesPaths(stripesConfig.modules);
@@ -54,6 +58,15 @@ const buildConfig = (stripesConfig, options = {}) => {
     }),
   ]);
 
+  // build platform with Module Federation if --federate flag is passed
+  if (options.federate) {
+    const singletons = getHostAppSingletons();
+    const shared = processShared(singletons, { singleton: true, eager: true });
+    prodConfig.plugins.push(
+      new ModuleFederationPlugin({ name: 'host', shared })
+    );
+  }
+
   prodConfig.optimization = {
     mangleWasmImports: false,
     minimizer: [