CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-single-spa

The router for easy microfrontends that enables multiple frameworks to coexist on the same page.

Pending
Overview
Eval results
Files

application-management.mddocs/

Application Management

Core functionality for registering, unregistering, and managing microfrontend applications throughout their lifecycle.

Capabilities

Register Application

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

Unregister Application

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

Unload Application

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

Get Application Names

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"]

Get Mounted Applications

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)

Get Application Status

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

Check Activity Functions

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

Path to Activity Function

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

Core Types

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

docs

application-management.md

application-status-lifecycle.md

configuration-timeouts.md

error-handling.md

index.md

navigation-routing.md

parcels-system.md

tile.json