or run

npx @tessl/cli init
Log in

Version

Files

tile.json

task.mdevals/scenario-1/

Async Micro Frontend Router Shell

Create a framework-level router wrapper that discovers micro frontends asynchronously and mounts them alongside the existing application routes.

Capabilities

Async app discovery

  • When appData contains { token: "abc" }, the discovery step retrieves micro-app definitions from https://example.local/apps?token=abc and returns two entries: a dashboard app active at /dashboard and an admin app active at /admin, each including a title string. @test

Router wrapper renders micro apps

  • With the discovered apps available, the wrapper renders both micro apps and still renders the original application router for any unmatched path under /. @test

Layout receives lifecycle info

  • The layout component receives updates for pathname, appEnter, and appLeave as navigation occurs and reflects those values in the rendered output. @test

Loading and error handoff

  • While app definitions are being fetched, a loading view is shown; if discovery fails, an error view is shown without breaking the base router. @test

Implementation

@generates

API

export interface MicroAppDefinition {
  name: string;
  title: string;
  activePath: string;
  url: string | string[];
}

export interface FrameworkLayoutProps {
  pathname: string;
  routeInfo: Record<string, unknown>;
  appEnter: Partial<MicroAppDefinition>;
  appLeave: Partial<MicroAppDefinition>;
  updateApps(apps: MicroAppDefinition[]): void;
  children?: React.ReactNode;
}

export interface FrameworkIcestarkConfig {
  getApps(appData?: Record<string, any>): Promise<MicroAppDefinition[]> | MicroAppDefinition[];
  layout?: React.ComponentType<FrameworkLayoutProps>;
  appRouter?: {
    ErrorComponent?: React.ComponentType<any>;
    LoadingComponent?: React.ComponentType<any>;
    NotFoundComponent?: React.ComponentType<any>;
    shouldAssetsRemove?: (assetUrl: string) => boolean;
  };
}

export const icestark: FrameworkIcestarkConfig;

Dependencies { .dependencies }

@ice/plugin-icestark { .dependency }

Provides router wrapping and micro-frontend orchestration for Ice.js framework apps.