Micro-Frontend Child Entry Safeguards

Create a child-application entry that mounts safely both inside and outside a micro-frontend host, honoring host-provided routing base paths and avoiding duplicate React mounts from repeated script execution.

Capabilities

Basename awareness

• When a host exposes a basename (for example via global context or mount props), the entry renders routing under that base instead of assuming root. @test

Container-safe rendering

• When a host calls mount with a container element, rendering targets that container and creates or reuses an #ice-container inside it before bootstrapping the app; if no container is provided, a default #ice-container in the document body is used. @test

Remount prevention

• Running the entry code multiple times outside a host must not double-mount the app or duplicate the root DOM node, even if the global lifecycle registration runs more than once. @test

Standalone fallback

• If no host globals exist, the entry renders once into a default #ice-container while still remaining compatible with later host-driven mount/unmount calls using the same root. @test

Implementation

@generates

API

import type { ComponentType } from "react";

export interface ChildRuntime {
  mount(props?: { container?: Element; basename?: string; customProps?: Record<string, unknown> }): Promise<void>;
  unmount(props?: { container?: Element }): Promise<void>;
}

export function registerChildApp(App: ComponentType, options?: {
  defaultBasename?: string;
  defaultContainerId?: string;
  customProps?: Record<string, unknown>;
}): ChildRuntime;

Dependencies { .dependencies }

@ice/plugin-icestark { .dependency }

Provides micro-frontend child rendering helpers, lifecycle wiring, and host integration safeguards.