or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

child-applications.mdcontext-utilities.mdframework-applications.mdindex.mdplugin-configuration.md
tile.json

index.mddocs/

@ice/plugin-icestark

@ice/plugin-icestark provides seamless integration of icestark micro-frontends framework with Ice.js applications. It supports both framework applications (parent/container apps) and sub-applications (child/micro apps) in a micro-frontends architecture, enabling developers to build scalable micro-frontend systems with dynamic app loading, error handling, and customizable layouts.

Package Information

  • Package Name: @ice/plugin-icestark
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D @ice/plugin-icestark

Core Imports

import icestark from '@ice/plugin-icestark';

For type definitions:

import { defineFrameworkConfig, defineChildConfig } from '@ice/plugin-icestark/types';
import type { 
  FrameworkConfig, 
  ChildConfig, 
  AppConfig, 
  RouteInfo, 
  LifecycleOptions,
  FrameworkComponent 
} from '@ice/plugin-icestark/types';

For runtime context utilities:

import { FrameworkContext, useFrameworkContext } from '@ice/plugin-icestark/Context';

Basic Usage

Framework Application Setup

// ice.config.mts
import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';

export default defineConfig(() => ({
  plugins: [
    icestark({ type: 'framework' }),
  ],
}));

// src/app.ts
import { defineFrameworkConfig } from '@ice/plugin-icestark/types';

export const icestark = defineFrameworkConfig(() => ({
  getApps: async () => [
    {
      name: 'sub-app',
      activePath: '/sub-app',
      container: '#app-container',
      url: ['//localhost:3001/build/js/index.js'],
    },
  ],
}));

Sub-Application Setup

// ice.config.mts
import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';

export default defineConfig(() => ({
  plugins: [
    icestark({ type: 'child' }),
  ],
}));

// src/app.ts
import { defineChildConfig } from '@ice/plugin-icestark/types';

export const icestark = defineChildConfig(() => ({
  mount: (options) => {
    console.log('Child app mounted:', options);
  },
  unmount: (options) => {
    console.log('Child app unmounted:', options);
  },
}));

Architecture

@ice/plugin-icestark is built around several key components:

  • Plugin Configuration: Main plugin factory that configures webpack for framework or child modes
  • Runtime System: Separate runtime modules for framework and child applications
  • Type System: Complete TypeScript definitions with configuration helpers
  • Context Management: React context utilities for sharing data between framework and child apps
  • Lifecycle Management: Hooks for managing sub-application mount/unmount cycles

Capabilities

Plugin Configuration

Core plugin functionality for configuring Ice.js applications as framework or child applications in a micro-frontends setup.

interface PluginOptions {
  type: 'child' | 'framework';
  library?: string | string[];
}

declare function icestark(options: PluginOptions): Plugin;

// Internal constant
declare const PLUGIN_NAME: '@ice/plugin-icestark';

Plugin Configuration

Framework Application Support

Framework application functionality for managing and routing to multiple sub-applications with configurable layouts and error handling.

interface FrameworkConfig {
  getApps?: (data?: any) => (AppConfig[] | Promise<AppConfig[]>);
  appRouter?: Omit<AppRouterProps, 'onRouteChange' | 'onAppEnter' | 'onAppLeave'>;
  layout?: ComponentType<any>;
  AppRoute?: typeof AppRoute;
}

function defineFrameworkConfig(config: FrameworkConfig | (() => FrameworkConfig)): FrameworkConfig;

Framework Applications

Child Application Support

Child/sub-application functionality for lifecycle management and integration with framework applications.

interface ChildConfig {
  mount?: (options?: LifecycleOptions) => Promise<void> | void;
  unmount?: (options?: LifecycleOptions) => Promise<void> | void;
  bootstrap?: (options?: any) => Promise<void> | void;
}

function defineChildConfig(config: ChildConfig | (() => ChildConfig)): ChildConfig;

interface LifecycleOptions {
  container: Element;
  customProps?: Record<string, any>;
}

Child Applications

Context Utilities

React context utilities for sharing data and state between framework and child applications.

export const FrameworkContext: React.Context<{}>;

export function useFrameworkContext<T extends object>(): T;

Context Utilities

Types

interface RouteInfo {
  pathname?: string;
  query?: object;
  hash?: string;
  routeType?: string;
}

type FrameworkComponent = ComponentType<RouteInfo>;

type AppConfig = CompatibleAppConfig;

// External types from @ice/stark (for reference)
interface CompatibleAppConfig {
  name: string;
  activePath: string | string[];
  container?: string | Element;
  url?: string | string[];
  title?: string;
  entry?: string | string[];
  entryContent?: string;
  mount?: (props: any) => void;
  unmount?: (props: any) => void;
  loadScriptMode?: 'import' | 'fetch';
}

interface AppRouterProps {
  onRouteChange?: (pathname: string, query: object, hash: string, routeType: string) => void;
  onAppEnter?: (appConfig: AppConfig) => void;
  onAppLeave?: (appConfig: AppConfig) => void;
  ErrorComponent?: ComponentType<{ error: Error }>;
  LoadingComponent?: ComponentType<any>;
  NotFoundComponent?: ComponentType<any>;
  shouldAssetsRemove?: (asset: string, app: AppConfig) => boolean;
}

// Re-exported from React
type ComponentType<P = {}> = React.ComponentType<P>;

// Plugin system types from @ice/app/types
interface Plugin {
  name: string;
  setup: (api: PluginAPI) => void;
  runtime?: string;
}

Dependencies

This plugin depends on:

  • @ice/stark: Core icestark functionality for micro-frontends
  • @ice/stark-app: Additional icestark utilities
  • @ice/app/types: Ice.js plugin system types
  • @ice/runtime/types: Ice.js runtime types