Dynamic Micro-Frontend Shell

A host shell that loads remote micro apps, allows runtime addition of new micro apps, and renders them through a pluggable router component.

Capabilities

Custom route rendering

• On initial load, renders provided micro apps using a supplied route renderer, showing the route renderer's loading view while remote assets fetch. @test
• When navigation hits an unknown path, falls back to a host-defined page instead of delegating to micro apps. @test

Runtime app injection

• Clicking an "Add app" control registers a new micro app definition (id, basename, asset URL) from provided data; the new app becomes routable without a full reload and uses its basename when matching paths. @test
• Registering an app with an existing id replaces the prior definition and renders content from the new asset URL on the next navigation. @test

Enter/leave notifications

• Navigating between micro apps triggers enter/leave notifications carrying app id and pathname to the layout callback. @test

Implementation

@generates

API

export interface MicroAppDefinition {
  id: string;
  basename: string;
  assetUrl: string;
  title?: string;
}

export interface RouteRendererProps {
  app: MicroAppDefinition;
  status: "loading" | "error" | "ready";
  children?: React.ReactNode;
}

export type RouteRenderer = (props: RouteRendererProps) => React.ReactElement;

export interface ShellConfig {
  apps: MicroAppDefinition[];
  routeRenderer: RouteRenderer;
  hostFallback: React.ReactElement;
  onAppEnter?: (payload: { appId: string; pathname: string }) => void;
  onAppLeave?: (payload: { appId: string; pathname: string }) => void;
}

export interface ShellInstance {
  addOrReplaceApp: (app: MicroAppDefinition) => void;
  Shell: React.ComponentType;
}

/**
 * Creates a shell instance that renders configured micro apps,
 * supports runtime app registration, and relays enter/leave events.
 */
export function createMicroShell(config: ShellConfig): ShellInstance;

Dependencies { .dependencies }

@ice/plugin-icestark { .dependency }

Provides framework-mode micro-frontend orchestration, dynamic app registration, and pluggable routing for host shells.