The qiankun framework is composed of three main parts:
- qiankun: Manages sub-route registration, project startup, and JS sandbox lifecycle.
- single-spa: Manages sub-app registration, route listening, and the mounting/unmounting process.
- import-html-entry: Handles fetching remote HTML resources and parsing them for templates, CSS, and JS.
Sub-applications are registered using registerMicroApps, which wraps single-spa's registerApplication to integrate qiankun's loading and sandbox logic.
import { registerApplication } from 'single-spa';
export function registerMicroApps(apps, lifeCycles) {
const unregisteredApps = apps.filter((app) => !microApps.some((registeredApp) => registeredApp.name === app.name));
microApps = [...microApps, ...unregisteredApps];
unregisteredApps.forEach((app) => {
const { name, activeRule, loader = noop, props, ...appConfig } = app;
registerApplication({
name,
app: async () => {
loader(true);
await frameworkStartedDefer.promise;
const { mount, ...otherMicroAppConfigs } = (
await loadApp({ name, props, ...appConfig }, frameworkConfiguration, lifeCycles)
)();
return {
mount: [async () => loader(true), ...toArray(mount), async () => loader(false)],
...otherMicroAppConfigs,
};
},
activeWhen: activeRule,
customProps: props,
});
});
}
