Combine single-spa with module federation

single-spa-mf

combine single-spa with module federation


API

import { registerApplication, LifeCycles } from 'single-spa';
import * as webpack from './webpack';
export { webpack };
export interface MFAppHandle {
    mount: (el: HTMLElement) => Promise<void> | void;
    unmount: (el: HTMLElement) => Promise<void> | void;
}
declare type SingleSpaConfig = Parameters<typeof registerApplication>[0];
export interface MFApp {
    activeWhen: SingleSpaConfig['activeWhen'];
    /** main app module */
    app?: (e: {
        name: string;
    }) => Promise<LifeCycles<any>>;
    /** app entry url */
    entry?: (e: {
        name: string;
        entryName: string;
    }) => string | Promise<string>;
    customProps?: SingleSpaConfig['customProps'];
    loader?: MFAppHandle;
    error?: MFAppHandle;
}
export declare type MFApps = Record<string, MFApp>;
export declare function initMFApps(apps: MFApps): void;
export * from 'single-spa';

demo

react + react-router + styled-components + single-spa + module federation + yarn3

nvm install 16.13.1
corepack enable
yarn
yarn dlx @yarnpkg/sdks vscode
yarn plugin import typescript
yarn plugin import version
yarn build
yarn start

main app: http://localhost:3001/

app2: http://localhost:3003/

app1: http://localhost:3002/

GitHub

View Github