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

CHANGELOG.md

@@ -6,6 +6,8 @@
 * 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.
+* Adjust `StripesTranslationsPlugin` for working at the module level and including translations from `stripesDeps`. Refs STRIPES-861.
+* Implement module federation functionality for building and serving remote modules. Refs STRIPES-861.
 * Generate an asset manifest for the build. Refs STRWEB-144.
 
 ## [6.0.0](https://github.com/folio-org/stripes-webpack/tree/v6.0.0) (2025-02-24)

consts.js

@@ -0,0 +1,68 @@
+// Anything 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 multiple copies of the same context are loaded.
+
+// This list is best thought of as 'aliases' vs package-names. Whether or not the host
+// app provides the dependency depends on exactly *how the remote app imports it.
+// ex:
+//    ✓ import { Route } from 'react-router'   // covered by this list
+//    ✗ import Route from 'react-router/route' // not covered
+// deep imports should be marked with their offending app for future pruning of this list.
+// ui-modules should not have deep imports unless they absolutely have to.
+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',
+  'rxjs/operators': '^6.6.3', // for eholdings usage
+};
+
+/**
+ * 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

@@ -38,7 +38,9 @@
     "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 +54,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 +73,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/federate.spec.js

@@ -0,0 +1,172 @@
+const expect = require('chai').expect;
+const sinon = require('sinon');
+const path = require('path');
+// Ensure global test setup (sinon-chai) is applied when mocha is invoked for this single spec
+require('./test-setup.spec');
+
+describe('The federate function', function () {
+  let fetchStub;
+  let webpackStub;
+  let WebpackDevServerModule;
+  let WebpackDevServerStub;
+  let tryResolveStub;
+  let buildConfigStub;
+  let consoleLogStub;
+  let consoleErrorStub;
+  let processExitStub;
+  let compilerShutdownFn;
+  let federate;
+
+  beforeEach(function () {
+    // Stub global fetch (used for registry POST/DELETE)
+    fetchStub = sinon.stub(global, 'fetch').resolves();
+
+    // Stub webpack (returns a compiler stub)
+    webpackModule = require('webpack');
+
+    const compilerStub = {
+      hooks: {
+        shutdown: {
+          tapPromise: sinon.stub().callsFake((name, fn) => {
+            // capture shutdown function for later simulation
+            compilerShutdownFn = fn;
+          })
+        }
+      }
+    };
+
+    // replace webpack module export with a stub function that returns our compiler
+    webpackStub = sinon.stub().callsFake((cfg) => compilerStub);
+    try {
+      require.cache[require.resolve('webpack')].exports = webpackStub;
+    } catch (e) {
+      // ignore if cannot patch
+    }
+
+    // Stub WebpackDevServer constructor
+    WebpackDevServerModule = require('webpack-dev-server');
+
+    WebpackDevServerStub = sinon.stub().callsFake((devServerCfg, compiler) => ({
+      start: sinon.stub().resolves()
+    }));
+
+    // replace the module export on the real webpack-dev-server module (for when federate requires it)
+    // Some versions export a class; we attach our stub to the module export
+    Object.keys(WebpackDevServerModule).forEach(k => {
+      // noop - ensure module is loaded
+    });
+    // patching the module's export directly (works for common test environment)
+    try {
+      // In many installs webpack-dev-server exports a function/class; overwrite it safely
+      require.cache[require.resolve('webpack-dev-server')].exports = WebpackDevServerStub;
+    } catch (e) {
+      // ignore if cannot patch
+    }
+
+    // Stub module-paths.tryResolve
+    const modulePaths = require('../../webpack/module-paths');
+    tryResolveStub = sinon.stub(modulePaths, 'tryResolve').returns(path.join(__dirname, 'fixtures', 'package.json'));
+
+    // Stub the build config factory by injecting a fake module into the require cache
+    buildConfigStub = sinon.stub().returns({ devServer: {} });
+    try {
+      const resolved = require.resolve('../../webpack.config.federate.remote');
+      require.cache[resolved] = { id: resolved, filename: resolved, loaded: true, exports: buildConfigStub };
+    } catch (e) {
+      // ignore if cannot inject
+    }
+
+    // Stub console and process.exit
+    consoleLogStub = sinon.stub(console, 'log');
+    consoleErrorStub = sinon.stub(console, 'error');
+    processExitStub = sinon.stub(process, 'exit');
+
+    // Now require the federate module under test after stubs are in place
+    delete require.cache[require.resolve('../../webpack/federate')];
+    federate = require('../../webpack/federate');
+  });
+
+  afterEach(function () {
+    // restore any sinon stubs we created in this file
+    sinon.restore();
+
+    // Clean up any patched module export
+    try {
+      // restore webpack-dev-server to original export by reloading module
+      delete require.cache[require.resolve('webpack-dev-server')];
+      require('webpack-dev-server');
+    } catch (e) {
+      // ignore
+    }
+  });
+
+  it('starts federation successfully', async function () {
+    const stripesConfig = { okapi: { discoveryUrl: 'http://localhost:3001/registry' } };
+
+    await federate(stripesConfig, { port: 3003 });
+
+    // ensure package.json resolution was tried
+    expect(tryResolveStub).to.have.been.calledWith(sinon.match.string);
+
+    // ensure fetch was called to POST to registry
+    expect(fetchStub).to.have.been.calledWith('http://localhost:3001/registry', sinon.match.object);
+
+    // ensure webpack and dev server were invoked
+    expect(webpackStub).to.have.been.called;
+    expect(WebpackDevServerStub).to.have.been.called;
+
+    // ensure console logged the server start
+    expect(consoleLogStub).to.have.been.calledWith('Starting remote server on port 3003');
+  });
+
+  it('uses default port when not provided', async function () {
+    const stripesConfig = { okapi: { discoveryUrl: 'http://localhost:3001/registry' } };
+
+    await federate(stripesConfig);
+
+    expect(consoleLogStub).to.have.been.calledWith('Starting remote server on port 3002');
+  });
+
+  it('exits when package.json not found', async function () {
+    // make tryResolve return falsy
+    const modulePaths = require('../../webpack/module-paths');
+    tryResolveStub.returns(false);
+
+    // Make process.exit throw so the function stops executing and we can assert the behaviour
+    processExitStub.callsFake(() => { throw new Error('process.exit called'); });
+
+    let thrown;
+    try {
+      await federate({ okapi: { discoveryUrl: 'http://localhost:3001/registry' } });
+    } catch (e) {
+      thrown = e;
+    }
+
+    expect(thrown).to.be.an('error');
+    expect(consoleErrorStub).to.have.been.calledWith('package.json not found');
+    expect(processExitStub).to.have.been.called;
+  });
+
+  it('exits when registry post fails', async function () {
+    fetchStub.rejects(new Error('Network error'));
+
+    await federate({ okapi: { discoveryUrl: 'http://localhost:3001/registry' } });
+
+    expect(consoleErrorStub).to.have.been.calledWith(sinon.match(/^Local discovery not found/));
+    expect(processExitStub).to.have.been.called;
+  });
+
+  it('handles shutdown hook (DELETE is called)', async function () {
+    const stripesConfig = { okapi: { discoveryUrl: 'http://localhost:3001/registry' } };
+
+    await federate(stripesConfig, { port: 3004 });
+
+    // we captured the shutdown function when compiler.hooks.shutdown.tapPromise was called
+    expect(compilerShutdownFn).to.be.a('function');
+
+    // simulate shutdown - it should call fetch with DELETE
+    await compilerShutdownFn();
+
+    expect(fetchStub).to.have.been.calledWith('http://localhost:3001/registry', sinon.match({ method: 'DELETE' }));
+  });
+});

test/webpack/fixtures/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "test-module",
+  "version": "1.0.0",
+  "description": "test description",
+  "stripes": {
+    "permissionSets": ["perm1"],
+    "other": "config"
+  },
+  "main": "index.js"
+}

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 }/);
     });
   });