// single-spa-config.js
import { registerApplication, start } from 'single-spa';
// Config with more expressive API
registerApplication({
  name: 'app1',
  app: () => import('src/app1/main.js'),
  activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
  customProps: {
    some: 'value',
  }
});
start();

console.log("The registered application has been loaded!");
export async function bootstrap(props) {
  const {
    name, // The name of the application
    singleSpa, // The singleSpa instance
    mountParcel, // Function for manually mounting
    customProps, // Additional custom information
  } = props; // Props are given to every lifecycle
  return Promise.resolve();
}
export async function mount(props) {...}
export async function unmount(props) {...}

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);
start();

/**
 * bootstrap 只會在微應(yīng)用初始化的時候調(diào)用一次，下次微應(yīng)用重新進(jìn)入時會直接調(diào)用 mount 鉤子，不會再重復(fù)觸發(fā) bootstrap。
 * 通常我們可以在這里做一些全局變量的初始化，比如不會在 unmount 階段被銷毀的應(yīng)用級別的緩存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}
/**
 * 應(yīng)用每次進(jìn)入都會調(diào)用 mount 方法，通常我們在這里觸發(fā)應(yīng)用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}
/**
 * 應(yīng)用每次 切出/卸載 會調(diào)用的方法，通常在這里我們會卸載微應(yīng)用的應(yīng)用實例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

import { registerApplication } from 'single-spa';
let microApps: Array<RegistrableApp<Record<string, unknown>>> = [];
export function registerMicroApps<T extends ObjectType>(
  apps: Array<RegistrableApp<T>>,
  lifeCycles?: FrameworkLifeCycles<T>,
) {
  // 判斷應(yīng)用是否注冊過，保證每個應(yīng)用只注冊一次
  const unregisteredApps = apps.filter((app) => !microApps.some((registeredApp) => registeredApp.name === app.name));
  microApps = [...microApps, ...unregisteredApps];
  unregisteredApps.forEach((app) => {
    // 取出用戶輸入的參數(shù)
    const { name, activeRule, loader = noop, props, ...appConfig } = app;
    // 調(diào)用single-spa的子應(yīng)用注冊函數(shù)，將用戶輸入的參數(shù)轉(zhuǎn)換為single-spa所需的參數(shù)
    registerApplication({
      name,
      // 這里提供了single-spa所需的子應(yīng)用加載方式函數(shù)
      app: async () => {
        loader(true);
        await frameworkStartedDefer.promise;
				// 調(diào)用轉(zhuǎn)換函數(shù)loadApp將用戶輸入的url等解析轉(zhuǎn)換運行，最終生成增強后的子應(yīng)用生命周期函數(shù)（包括mount,unmount,bootstrap）
        const { mount, ...otherMicroAppConfigs } = (
          await loadApp({ name, props, ...appConfig }, frameworkConfiguration, lifeCycles)
        )();
				// 返回值為loadApp生成的一系列生命周期函數(shù)，其中mount函數(shù)數(shù)組再次增強
        return {
          mount: [async () => loader(true), ...toArray(mount), async () => loader(false)],
          ...otherMicroAppConfigs,
        };
      },
      activeWhen: activeRule,
      customProps: props,
    });
  });
}

import { importEntry } from 'import-html-entry';
export async function loadApp<T extends ObjectType>(
  app: LoadableApp<T>,
  configuration: FrameworkConfiguration = {},
  lifeCycles?: FrameworkLifeCycles<T>,
): Promise<ParcelConfigObjectGetter> {
  const { entry, name: appName } = app;
  const {
    singular = false,
    sandbox = true,
    excludeAssetFilter,
    globalContext = window,
    ...importEntryOpts
  } = configuration;
  // 。。。。。。
  // 依賴了import-html-entry庫中的方法解析了用戶輸入的url(entry參數(shù)),得到了template（HTML模版）,execScripts(所依賴JS文件的執(zhí)行函數(shù)）以及assetPublicPath（公共資源路徑）
  const { template, execScripts, assetPublicPath } = await importEntry(entry, importEntryOpts);
  // 。。。。。。
  // 在window沙箱中（global參數(shù)）執(zhí)行entry依賴的js文件，得到相關(guān)生命周期（ bootstrap, mount, unmount, update）
  // 這里可以忽略getLifecyclesFromExports函數(shù)，其返回與scriptExports一致，只是為了檢查子應(yīng)用是否導(dǎo)出了必須的生命周期
  const scriptExports: any = await execScripts(global, sandbox && !useLooseSandbox, {
    scopedGlobalVariables: speedySandbox ? trustedGlobals : [],
  });
  const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(
    scriptExports,
    appName,
    global,
    sandboxContainer?.instance?.latestSetProp,
  );
  // 。。。。。
  // 導(dǎo)出single-spa所需配置的getter方法（因為配置項與子應(yīng)用掛在的container相關(guān)，默認(rèn)為用戶輸入的container，后續(xù)用戶可以手動加載子應(yīng)用并指定其渲染位置）
  const initialContainer = 'container' in app ? app.container : undefined;
  const parcelConfigGetter: ParcelConfigObjectGetter = (remountContainer = initialContainer) => {
    const parcelConfig: ParcelConfigObject = {
      name: appInstanceId,
      bootstrap,
      // mount數(shù)組在子應(yīng)用渲染時依次執(zhí)行
      mount: [
        // 。。。。。。
        // 執(zhí)行沙箱隔離
        mountSandbox,
        // 調(diào)用用戶自定義mount生命周期，并傳入setGlobalState/onGlobalStateChange的應(yīng)用間通信方法函數(shù)
        async (props) => mount({ ...props, container: appWrapperGetter(), setGlobalState, onGlobalStateChange }),
        // 。。。。。。
      ],
      // unmount數(shù)組在子應(yīng)用卸載時依次執(zhí)行
      unmount: [
        // 。。。。。。。
        // 調(diào)用用戶自定義unmount生命周期
        async (props) => unmount({ ...props, container: appWrapperGetter() }),
        // 卸載隔離沙箱
        unmountSandbox,
        // 清理工作
        async () => {
          render({ element: null, loading: false, container: remountContainer }, 'unmounted');
          // 清理子應(yīng)用對全局通信的訂閱
          offGlobalStateChange(appInstanceId);
          // for gc
          appWrapperElement = null;
          syncAppWrapperElement2Sandbox(appWrapperElement);
        },
        // 。。。。。。。
      ],
    };
    return parcelConfig;
  }
	return parcelConfigGetter
}