icestark

In icestark, micro-applications are frontend resources with a lifecycle consisting of two stages: mounting to the main application and unmounting from the main application.

There are two ways to declare these lifecycles:

1. Using mount/unmount (Recommended)

To ensure better compatibility with the single-spa ecosystem, it is recommended to export mount and unmount functions in UMD format (available in icestark 1.6.0+).

2. Using Global Registration

You can use registerAppEnter and registerAppLeave from @ice/stark-app to handle lifecycle events.

// Option 1: Recommended (UMD export)
import ReactDOM from 'react-dom';
import App from './App';

export function mount(props) {
  ReactDOM.render(<App />, props.container);
}

export function unmount(props) {
  ReactDOM.unmountComponentAtNode(props.container);
}

// Option 2: Global registration
import ReactDOM from 'react-dom';
import { registerAppEnter, registerAppLeave } from '@ice/stark-app';
import App from './App';

registerAppEnter((props) => {
  ReactDOM.render(<App />, props.container);
});

registerAppLeave((props) => {
  ReactDOM.unmountComponentAtNode(props.container);
});

In an icestark system, the Main Application (also known as the Framework Application or Base Application) is a singleton component. A well-designed Main Application should have a limited scope to ensure stability and prevent coupling. Its responsibilities are strictly limited to two tasks:

1. System-wide Layout Design: Defining the overall visual structure and shell of the application.
2. Micro-app Configuration and Registration: Managing the lifecycle and settings of all micro-apps within the system.

Best Practices

To maintain system stability and micro-app independence, avoid including specific page UI code in the Main Application. Overloading the Main Application leads to:

• Style Conflicts: Excessive CSS in the Main Application increases the risk of collisions with micro-apps.
• Tight Coupling: Providing global APIs from the Main Application can break the independence of micro-apps.
• Stability Risks: Since the Main Application is a centralized component, changes to it theoretically require regression testing across all micro-apps. Keeping it simple ensures it remains stable.

When packing code as a micro module (using UMD), you can specify a lifecycle by exporting mount and unmount functions. These functions are triggered when the micro module is mounted or unmounted from the host application.

• mount(ModuleComponent, targetNode, props): Triggered when the module is mounted. Use this to render the component into the target DOM node.
• unmount(targetNode): Triggered when the module is unmounted. Use this to clean up the component or DOM node.

const SampleComponent = () => {
  return <div>Sample</div>;
}

// mount function will be trigger when mount micro module
export function mount(ModuleComponent, targetNode, props) {
  ReactDOM.render(<ModuleComponent {...props} />, targetNode);
}

// unmount function will be trigger when unmount micro module
export function unmount(targetNode) {
  ReactDOM.unmountComponentAtNode(targetNode);
}

export default SampleComponent;

Centralized Registration

Use registerModules to pre-register modules so they can be loaded by name using <MicroModule moduleName="..." />.

import { MicroModule, registerModules } from '@ice/stark-module';

registerModules([
  { url: 'https://localhost/module-a.js', name: 'module-a' },
  { url: 'https://localhost/module-b.js', name: 'module-b' },
]);

const App = () => (
  <div>
    <MicroModule moduleName="module-a" />
    <MicroModule moduleName="module-b" />
  </div>
);

Custom Lifecycle

If a module does not export mount or unmount, you can provide them directly in the moduleInfo object. Note that exported module lifecycles take precedence over these.

const moduleInfo = {
  name: 'moduleName',
  url: 'https://localhost/module.js',
  mount: (ModuleComponent, mountNode, props) => {
    ReactDOM.render(<ModuleComponent />, mountNode, props);
  },
};

Registering Local Modules

You can render built-in local components by using the render property in registerModules.

import LocalComponent from './localComponent';

registerModules([
  {
    name: 'moduleName',
    render: () => LocalComponent,
  }
]);