The router for easy microfrontends that enables multiple frameworks to coexist on the same page.
—
Core functionality for registering, unregistering, and managing microfrontend applications throughout their lifecycle.
Registers a microfrontend application with single-spa. Applications are automatically mounted and unmounted based on their activity function.
/**
* Register an application using a configuration object
* @param config - Application configuration object
*/
function registerApplication(config: RegisterApplicationConfig): void;
/**
* Register an application using individual parameters
* @param appName - Unique name for the application
* @param applicationOrLoadingFn - Application object or function returning application
* @param activityFn - Function determining when application should be active
* @param customProps - Optional custom properties passed to application
*/
function registerApplication(
appName: string,
applicationOrLoadingFn: Application,
activityFn: ActivityFn,
customProps?: CustomProps | CustomPropsFn
): void;
interface RegisterApplicationConfig {
name: string;
app: Application;
activeWhen: Activity;
customProps?: CustomProps | CustomPropsFn;
}
type Application = LifeCycles | ((config: AppProps) => Promise<LifeCycles>);
type Activity = ActivityFn | string | Array<ActivityFn | string>;
type ActivityFn = (location: Location) => boolean;
type CustomPropsFn = (name: string, location: Location) => CustomProps;Usage Examples:
import { registerApplication } from "single-spa";
// Register with configuration object
registerApplication({
name: "navbar",
app: () => import("./navbar/navbar.app.js"),
activeWhen: "/",
customProps: { theme: "dark" }
});
// Register with activity function
registerApplication(
"products",
() => import("./products/products.app.js"),
(location) => location.pathname.startsWith("/products"),
{ apiUrl: "https://api.example.com" }
);
// Register with path string
registerApplication(
"dashboard",
() => import("./dashboard/dashboard.app.js"),
"/dashboard"
);
// Register with multiple paths
registerApplication({
name: "user-profile",
app: () => import("./user-profile/user-profile.app.js"),
activeWhen: ["/profile", "/settings", "/account"]
});
// Register with custom props function
registerApplication({
name: "analytics",
app: () => import("./analytics/analytics.app.js"),
activeWhen: "/analytics",
customProps: (name, location) => ({
userId: getCurrentUserId(),
section: location.pathname.split("/")[2]
})
});Removes an application from single-spa. The application will be unmounted if currently mounted.
/**
* Unregister an application from single-spa
* @param appName - Name of the application to unregister
* @returns Promise that resolves when application is unregistered
*/
function unregisterApplication(appName: string): Promise<any>;Usage Examples:
import { unregisterApplication } from "single-spa";
// Unregister an application
await unregisterApplication("navbar");
// Unregister with error handling
try {
await unregisterApplication("products");
console.log("Products application unregistered successfully");
} catch (error) {
console.error("Failed to unregister products application:", error);
}Unloads an application from memory, removing it completely from single-spa's management.
/**
* Unload an application from memory
* @param appName - Name of the application to unload
* @param opts - Optional configuration
* @returns Promise that resolves when application is unloaded
*/
function unloadApplication(
appName: string,
opts?: { waitForUnmount: boolean }
): Promise<any>;Usage Examples:
import { unloadApplication } from "single-spa";
// Unload application immediately
await unloadApplication("legacy-app");
// Wait for unmount before unloading
await unloadApplication("critical-app", { waitForUnmount: true });Returns an array of all registered application names.
/**
* Get names of all registered applications
* @returns Array of application names
*/
function getAppNames(): string[];Usage Examples:
import { getAppNames } from "single-spa";
const allApps = getAppNames();
console.log("Registered applications:", allApps);
// Output: ["navbar", "products", "dashboard"]Returns an array of currently mounted application names.
/**
* Get names of currently mounted applications
* @returns Array of mounted application names
*/
function getMountedApps(): string[];Usage Examples:
import { getMountedApps } from "single-spa";
const mountedApps = getMountedApps();
console.log("Currently mounted:", mountedApps);
// Output: ["navbar", "products"] (based on current route)Gets the current lifecycle status of a specific application.
/**
* Get the current status of an application
* @param appName - Name of the application
* @returns Current status string or null if not found
*/
function getAppStatus(appName: string): string | null;Usage Examples:
import { getAppStatus, MOUNTED, NOT_LOADED } from "single-spa";
const status = getAppStatus("products");
if (status === MOUNTED) {
console.log("Products app is currently mounted");
} else if (status === NOT_LOADED) {
console.log("Products app hasn't been loaded yet");
}Checks which applications should be active for a given location.
/**
* Check which applications should be active for a location
* @param location - Location object to check against
* @returns Array of application names that should be active
*/
function checkActivityFunctions(location: Location): string[];Usage Examples:
import { checkActivityFunctions } from "single-spa";
// Check what should be active for current location
const activeApps = checkActivityFunctions(window.location);
console.log("Should be active:", activeApps);
// Check for a specific location
const testLocation = new URL("https://example.com/products/123");
const testActiveApps = checkActivityFunctions(testLocation);Creates an activity function from a path string, supporting exact matching.
/**
* Create an activity function from a path string
* @param path - Path pattern to match
* @param exactMatch - Whether to require exact path match (default: false)
* @returns Activity function that matches the path
*/
function pathToActiveWhen(path: string, exactMatch?: boolean): ActivityFn;Usage Examples:
import { registerApplication, pathToActiveWhen } from "single-spa";
// Prefix matching (default)
registerApplication({
name: "products",
app: () => import("./products/products.app.js"),
activeWhen: pathToActiveWhen("/products")
// Matches: /products, /products/123, /products/category/electronics
});
// Exact matching
registerApplication({
name: "home",
app: () => import("./home/home.app.js"),
activeWhen: pathToActiveWhen("/", true)
// Matches only: /
});interface LifeCycles {
bootstrap: LifeCycleFn | Array<LifeCycleFn>;
mount: LifeCycleFn | Array<LifeCycleFn>;
unmount: LifeCycleFn | Array<LifeCycleFn>;
update?: LifeCycleFn | Array<LifeCycleFn>;
}
interface AppProps {
name: string;
singleSpa: any;
mountParcel: (parcelConfig: ParcelConfig, customProps: ParcelProps & CustomProps) => Parcel;
}
type LifeCycleFn = (config: AppProps) => Promise<any>;
interface CustomProps {
[key: string]: any;
[key: number]: any;
}Install with Tessl CLI
npx tessl i tessl/npm-single-spa