<!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> <!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. --> ## Current Behavior <!-- This is the behavior we have today --> We currently have hombrewed support for Dynamic Module Federation. However, Module Federation 2.0 comes with more powerful helpers to handle dynamic federation. ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> For new host projects using dynamic federation, use the Module Federation Runtime. For existing hosts using Nx's dynamic federation, continue to use it when adding new remotes to it. Deprecate Nx's dynamic federation helpers with intended removal in Nx 22 ### Example Screenshot of Deprecation Message <img width="810" alt="image" src="https://github.com/user-attachments/assets/6c6a9504-6d89-497b-9259-9272b3f47276"> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
147 lines
4.3 KiB
TypeScript
147 lines
4.3 KiB
TypeScript
export type ResolveRemoteUrlFunction = (
|
|
remoteName: string
|
|
) => string | Promise<string>;
|
|
|
|
declare const __webpack_init_sharing__: (scope: 'default') => Promise<void>;
|
|
declare const __webpack_share_scopes__: { default: unknown };
|
|
|
|
let resolveRemoteUrl: ResolveRemoteUrlFunction;
|
|
|
|
/**
|
|
* @deprecated Use Runtime Helpers from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
|
|
*/
|
|
export function setRemoteUrlResolver(
|
|
_resolveRemoteUrl: ResolveRemoteUrlFunction
|
|
) {
|
|
resolveRemoteUrl = _resolveRemoteUrl;
|
|
}
|
|
|
|
let remoteUrlDefinitions: Record<string, string>;
|
|
|
|
/**
|
|
* @deprecated Use init() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
|
|
* If you have a remote app called `my-remote-app` and you want to use the `http://localhost:4201/mf-manifest.json` as the remote url, you should change it from:
|
|
* ```ts
|
|
* import { setRemoteDefinitions } from '@nx/angular/mf';
|
|
*
|
|
* setRemoteDefinitions({
|
|
* 'my-remote-app': 'http://localhost:4201/mf-manifest.json'
|
|
* });
|
|
* ```
|
|
* to use init():
|
|
* ```ts
|
|
* import { init } from '@module-federation/enhanced/runtime';
|
|
*
|
|
* init({
|
|
* name: 'host',
|
|
* remotes: [{
|
|
* name: 'my-remote-app',
|
|
* entry: 'http://localhost:4201/mf-manifest.json'
|
|
* }]
|
|
* });
|
|
* ```
|
|
*/
|
|
export function setRemoteDefinitions(definitions: Record<string, string>) {
|
|
remoteUrlDefinitions = definitions;
|
|
}
|
|
|
|
/**
|
|
* @deprecated Use registerRemotes() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
|
|
* If you set a remote app with `setRemoteDefinition` such as:
|
|
* ```ts
|
|
* import { setRemoteDefinition } from '@nx/angular/mf';
|
|
*
|
|
* setRemoteDefinition(
|
|
* 'my-remote-app',
|
|
* 'http://localhost:4201/mf-manifest.json'
|
|
* );
|
|
* ```
|
|
* change it to use registerRemotes():
|
|
* ```ts
|
|
* import { registerRemotes } from '@module-federation/enhanced/runtime';
|
|
*
|
|
* registerRemotes([
|
|
* {
|
|
* name: 'my-remote-app',
|
|
* entry: 'http://localhost:4201/mf-manifest.json'
|
|
* }
|
|
* ]);
|
|
* ```
|
|
*/
|
|
export function setRemoteDefinition(remoteName: string, remoteUrl: string) {
|
|
remoteUrlDefinitions ??= {};
|
|
remoteUrlDefinitions[remoteName] = remoteUrl;
|
|
}
|
|
|
|
let remoteModuleMap = new Map<string, unknown>();
|
|
let remoteContainerMap = new Map<string, unknown>();
|
|
|
|
/**
|
|
* @deprecated Use loadRemote() from '@module-federation/enhanced/runtime' instead. This will be removed in Nx 22.
|
|
* If you set a load a remote with `loadRemoteModule` such as:
|
|
* ```ts
|
|
* import { loadRemoteModule } from '@nx/angular/mf';
|
|
*
|
|
* loadRemoteModule('my-remote-app', './Module').then(m => m.RemoteEntryModule);
|
|
* ```
|
|
* change it to use loadRemote():
|
|
* ```ts
|
|
* import { loadRemote } from '@module-federation/enhanced/runtime';
|
|
*
|
|
* loadRemote<typeof import('my-remote-app/Module')>('my-remote-app/Module').then(m => m.RemoteEntryModule);
|
|
* ```
|
|
*/
|
|
export async function loadRemoteModule(remoteName: string, moduleName: string) {
|
|
const remoteModuleKey = `${remoteName}:${moduleName}`;
|
|
if (remoteModuleMap.has(remoteModuleKey)) {
|
|
return remoteModuleMap.get(remoteModuleKey);
|
|
}
|
|
|
|
const container = remoteContainerMap.has(remoteName)
|
|
? remoteContainerMap.get(remoteName)
|
|
: await loadRemoteContainer(remoteName);
|
|
|
|
const factory = await container.get(moduleName);
|
|
const Module = factory();
|
|
|
|
remoteModuleMap.set(remoteModuleKey, Module);
|
|
|
|
return Module;
|
|
}
|
|
|
|
function loadModule(url: string) {
|
|
return import(/* webpackIgnore:true */ url);
|
|
}
|
|
|
|
let initialSharingScopeCreated = false;
|
|
|
|
async function loadRemoteContainer(remoteName: string) {
|
|
if (!resolveRemoteUrl && !remoteUrlDefinitions) {
|
|
throw new Error(
|
|
'Call setRemoteDefinitions or setRemoteUrlResolver to allow Dynamic Federation to find the remote apps correctly.'
|
|
);
|
|
}
|
|
|
|
if (!initialSharingScopeCreated) {
|
|
initialSharingScopeCreated = true;
|
|
await __webpack_init_sharing__('default');
|
|
}
|
|
|
|
const remoteUrl = remoteUrlDefinitions
|
|
? remoteUrlDefinitions[remoteName]
|
|
: await resolveRemoteUrl(remoteName);
|
|
|
|
let containerUrl = remoteUrl;
|
|
if (!remoteUrl.endsWith('.mjs') && !remoteUrl.endsWith('.js')) {
|
|
containerUrl = `${remoteUrl}${
|
|
remoteUrl.endsWith('/') ? '' : '/'
|
|
}remoteEntry.mjs`;
|
|
}
|
|
|
|
const container = await loadModule(containerUrl);
|
|
await container.init(__webpack_share_scopes__.default);
|
|
|
|
remoteContainerMap.set(remoteName, container);
|
|
return container;
|
|
}
|