@umijs/plugins 4.0.0-beta.8 → 4.0.0-canary-20240513.3

package/libs/qiankun/master/MicroApp.tsx

@@ -0,0 +1,327 @@
+// @ts-nocheck
+/* eslint-disable */
+__USE_MODEL__;
+import concat from 'lodash/concat';
+import isEqual from 'lodash/isEqual';
+import mergeWith from 'lodash/mergeWith';
+import noop from 'lodash/noop';
+import {
+  FrameworkConfiguration,
+  loadMicroApp,
+  MicroApp as MicroAppTypeDefinition,
+  prefetchApps,
+} from 'qiankun';
+import React, {
+  forwardRef,
+  Ref,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { qiankunStateForSlaveModelNamespace } from './constants';
+import defaultErrorBoundary from './defaultErrorBoundary';
+import defaultLoader from './defaultLoader';
+import { ErrorBoundary } from './ErrorBoundary';
+import { getMasterOptions } from './masterOptions';
+import MicroAppLoader from './MicroAppLoader';
+import { MasterOptions } from './types';
+
+type HashHistory = {
+  type?: 'hash';
+} & any;
+
+type BrowserHistory = {
+  type?: 'browser';
+} & any;
+
+type MemoryHistory = {
+  type?: 'memory';
+} & any;
+
+type MicroAppType = MicroAppTypeDefinition & {
+  _unmounting?: boolean;
+  _updatingPromise?: Promise<void>;
+  _updatingTimestamp?: number;
+};
+
+export type Props = {
+  name: string;
+  settings?: FrameworkConfiguration;
+  base?: string;
+  history?:
+    | 'hash'
+    | 'browser'
+    | 'memory'
+    | HashHistory
+    | BrowserHistory
+    | MemoryHistory;
+  getMatchedBase?: () => string;
+  loader?: (loading: boolean) => React.ReactNode;
+  errorBoundary?: (error: any) => React.ReactNode;
+  onHistoryInit?: (history: any) => void;
+  autoSetLoading?: boolean;
+  autoCaptureError?: boolean;
+  // 仅开启 loader 时需要
+  wrapperClassName?: string;
+  className?: string;
+} & Record<string, any>;
+
+function unmountMicroApp(microApp: MicroAppType) {
+  microApp.mountPromise.then(() => microApp.unmount());
+}
+
+function useDeepCompare<T>(value: T): T {
+  const ref = useRef<T>(value);
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
+let noneMounted = true;
+
+export const MicroApp = forwardRef(
+  (componentProps: Props, componentRef: Ref<MicroAppType>) => {
+    const {
+      masterHistoryType,
+      apps = [],
+      lifeCycles: globalLifeCycles,
+      prefetch = true,
+      appNameKeyAlias = 'name',
+      prefetchThreshold = 5,
+      ...globalSettings
+    } = getMasterOptions() as MasterOptions;
+
+    const {
+      settings: settingsFromProps = {},
+      loader,
+      errorBoundary,
+      lifeCycles,
+      wrapperClassName,
+      className,
+      ...propsFromParams
+    } = componentProps;
+
+    // name 跟 appNameKeyAlias 这两个 key 同时存在时，优先使用 name，避免对存量应用造成 breaking change。
+    // 比如 appNameKeyAlias 配置是 id，但之前 id 正好作为普通的 props 使用过，如 <MicroApp name="app" id="123" />
+    // 正常场景会优先匹配 appNameKeyAlias 对应的字段，fallback 到 name，避免对已经使用 <MicroApp name="app" /> 的应用造成影响
+    const name =
+      componentProps.name && componentProps[appNameKeyAlias]
+        ? componentProps.name
+        : componentProps[appNameKeyAlias] || componentProps.name;
+    const isCurrentApp = (app: any) =>
+      app[appNameKeyAlias] === name || app.name === name;
+
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<any>(null);
+    // 未配置自定义 errorBoundary 且开启了 autoCaptureError 场景下，使用插件默认的 errorBoundary，否则使用自定义 errorBoundary
+    const microAppErrorBoundary =
+      errorBoundary ||
+      defaultErrorBoundary ||
+      (propsFromParams.autoCaptureError
+        ? (e) => <ErrorBoundary error={e} />
+        : null);
+
+    // 配置了 errorBoundary 才改 error 状态，否则直接往上抛异常
+    const setComponentError = (error: any) => {
+      if (microAppErrorBoundary) {
+        setError(error);
+        // error log 出来，不要吞
+        if (error) {
+          console.error(error);
+        }
+      } else if (error) {
+        throw error;
+      }
+    };
+
+    const containerRef = useRef<HTMLDivElement>();
+    const microAppRef = useRef<MicroAppType>();
+
+    useImperativeHandle(componentRef, () => microAppRef.current);
+
+    const appConfig = apps.find((app: any) => isCurrentApp(app));
+    useEffect(() => {
+      if (!appConfig) {
+        setComponentError(
+          new Error(
+            `[@umijs/plugin-qiankun]: Can not find the configuration of ${name} app! Currently, only the following apps are configured:\n${JSON.stringify(
+              apps,
+              null,
+              2,
+            )}`,
+          ),
+        );
+      }
+      return noop;
+    }, []);
+
+    // 约定使用 src/app.ts/useQiankunStateForSlave 中的数据作为主应用透传给微应用的 props，优先级高于 propsFromConfig
+    const stateForSlave = (useModel || noop)(
+      qiankunStateForSlaveModelNamespace,
+    );
+    const {
+      entry,
+      props: { settings: settingsFromConfig = {}, ...propsFromConfig } = {},
+    } = appConfig || {};
+
+    useEffect(() => {
+      setComponentError(null);
+      setLoading(true);
+      const configuration = {
+        globalContext: window,
+        ...globalSettings,
+        ...settingsFromConfig,
+        ...settingsFromProps,
+      };
+      microAppRef.current = loadMicroApp(
+        {
+          name,
+          entry,
+          container: containerRef.current!,
+          props: {
+            ...propsFromConfig,
+            ...stateForSlave,
+            ...propsFromParams,
+            __globalRoutesInfo: {
+              appNameKeyAlias,
+              masterHistoryType,
+              base: globalSettings.base,
+              microAppRoutes: globalSettings.microAppRoutes,
+            },
+            setLoading,
+          },
+        },
+        configuration,
+        mergeWith({}, globalLifeCycles, lifeCycles, (v1, v2) =>
+          concat(v1 ?? [], v2 ?? []),
+        ),
+      );
+
+      // 当配置了 prefetch true 时，在第一个应用 mount 完成之后，再去预加载其他应用
+      if (prefetch && prefetch !== 'all' && noneMounted) {
+        microAppRef.current?.mountPromise.then(() => {
+          if (noneMounted) {
+            if (Array.isArray(prefetch)) {
+              const specialPrefetchApps = apps.filter(
+                (app) =>
+                  !isCurrentApp(app) &&
+                  (prefetch.indexOf(app[appNameKeyAlias]) !== -1 ||
+                    prefetch.indexOf(app.name) !== -1),
+              );
+              prefetchApps(specialPrefetchApps, configuration);
+            } else {
+              // 不能无脑全量 prefetch，需要有一个阈值
+              const otherNotMountedApps = apps
+                .filter((app) => !isCurrentApp(app))
+                .slice(0, prefetchThreshold);
+              prefetchApps(otherNotMountedApps, configuration);
+            }
+            noneMounted = false;
+          }
+        });
+      }
+
+      (['loadPromise', 'bootstrapPromise', 'mountPromise'] as const).forEach(
+        (key) => {
+          const promise = microAppRef.current?.[key];
+          promise.catch((e) => {
+            setComponentError(e);
+            setLoading(false);
+          });
+        },
+      );
+
+      return () => {
+        const microApp = microAppRef.current;
+        if (microApp) {
+          // 微应用 unmount 是异步的，中间的流转状态不能确定，所有需要一个标志位来确保 unmount 开始之后不会再触发 update
+          microApp._unmounting = true;
+          unmountMicroApp(microApp);
+        }
+      };
+    }, [name]);
+
+    useEffect(() => {
+      const microApp = microAppRef.current;
+      if (microApp) {
+        if (!microApp._updatingPromise) {
+          // 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后
+          microApp._updatingPromise = microApp.mountPromise;
+          microApp._updatingTimestamp = Date.now();
+        } else {
+          // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成
+          microApp._updatingPromise = microApp._updatingPromise.then(() => {
+            const canUpdate = (microApp?: MicroAppType) =>
+              microApp?.update &&
+              microApp.getStatus() === 'MOUNTED' &&
+              !microApp._unmounting;
+            if (canUpdate(microApp)) {
+              const props = {
+                ...propsFromConfig,
+                ...stateForSlave,
+                ...propsFromParams,
+                setLoading,
+              };
+
+              if (process.env.NODE_ENV === 'development') {
+                const updatingTimestamp = microApp._updatingTimestamp!;
+                if (Date.now() - updatingTimestamp < 200) {
+                  console.warn(
+                    `[@umijs/plugin-qiankun] It seems like microApp ${name} is updating too many times in a short time(200ms), you may need to do some optimization to avoid the unnecessary re-rendering.`,
+                  );
+                }
+
+                console.info(
+                  `[@umijs/plugin-qiankun] MicroApp ${name} is updating with props: `,
+                  props,
+                );
+                microApp._updatingTimestamp = Date.now();
+              }
+
+              // 返回 microApp.update 形成链式调用
+              // @ts-ignore
+              return microApp.update(props);
+            }
+
+            return void 0;
+          });
+        }
+      }
+
+      return noop;
+    }, [useDeepCompare({ ...stateForSlave, ...propsFromParams })]);
+
+    // 未配置自定义 loader 且开启了 autoSetLoading 场景下，使用插件默认的 loader，否则使用自定义 loader
+    const microAppLoader =
+      loader ||
+      defaultLoader ||
+      (propsFromParams.autoSetLoading
+        ? (loading) => <MicroAppLoader loading={loading} />
+        : null);
+
+    const microAppWrapperClassName = wrapperClassName
+      ? `${wrapperClassName} qiankun-micro-app-wrapper`
+      : 'qiankun-micro-app-wrapper';
+    const microAppClassName = className
+      ? `${className} qiankun-micro-app-container`
+      : 'qiankun-micro-app-container';
+
+    return Boolean(microAppLoader) || Boolean(microAppErrorBoundary) ? (
+      <div
+        style={{ position: 'relative' }}
+        className={microAppWrapperClassName}
+      >
+        {Boolean(microAppLoader) && microAppLoader(loading)}
+        {Boolean(microAppErrorBoundary) &&
+          Boolean(error) &&
+          microAppErrorBoundary(error)}
+        <div ref={containerRef} className={microAppClassName} />
+      </div>
+    ) : (
+      <div ref={containerRef} className={microAppClassName} />
+    );
+  },
+);

package/libs/qiankun/master/MicroAppWithMemoHistory.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/* eslint-disable */
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { MicroApp, Props as MicroAppProps } from './MicroApp';
+
+export interface Props extends MicroAppProps {
+  history?: never;
+}
+
+export function MicroAppWithMemoHistory(componentProps: Props) {
+  const { url, ...rest } = componentProps;
+  const history = useRef();
+  // url 的变更不会透传给下游，组件内自己会处理掉，所以这里直接用 ref 来存
+  const historyOpts = useRef({
+    type: 'memory',
+    initialEntries: [url],
+    initialIndex: 1,
+  });
+  const historyInitHandler = useCallback((h) => (history.current = h), []);
+
+  useEffect(() => {
+    // push history for slave app when url property changed
+    // the initial url will be ignored because the history has not been initialized
+    if (history.current && url) {
+      history.current.push(url);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    // reset the history when name changed
+    historyOpts.current.initialEntries = [url];
+    historyOpts.current.initialIndex = 1;
+  }, [componentProps.name]);
+
+  return (
+    <MicroApp
+      {...rest}
+      history={historyOpts.current}
+      onHistoryInit={historyInitHandler}
+    />
+  );
+}

package/libs/qiankun/master/common.ts

@@ -0,0 +1,172 @@
+// @ts-nocheck
+/* eslint-disable */
+/**
+ * @author Kuitos
+ * @since 2019-06-20
+ */
+
+import React from 'react';
+import { Navigate, type IRouteProps } from 'umi';
+import { defaultMicroAppRouteMode, MicroAppRouteMode } from './constants';
+import { getMicroAppRouteComponent } from './getMicroAppRouteComponent';
+import type { MicroAppRoute } from './types';
+
+export const defaultMountContainerId = 'root-subapp';
+
+// @formatter:off
+export const noop = () => {};
+// @formatter:on
+
+export function toArray<T>(source: T | T[]): T[] {
+  return Array.isArray(source) ? source : [source];
+}
+
+function testPathWithStaticPrefix(pathPrefix: string, realPath: string) {
+  if (pathPrefix.endsWith('/')) {
+    return realPath.startsWith(pathPrefix);
+  }
+
+  const pathRegex = new RegExp(`^${pathPrefix}([/?])+.*$`, 'g');
+  const normalizedPath = `${realPath}/`;
+  return pathRegex.test(normalizedPath);
+}
+
+// function testPathWithDynamicRoute(dynamicRoute: string, realPath: string) {
+//   // FIXME 这个是旧的使用方式才会调到的 api，先临时这么苟一下消除报错，引导用户去迁移吧
+//   const pathToRegexp = require('path-to-regexp');
+//   return pathToRegexp(dynamicRoute, { strict: true, end: false }).test(
+//     realPath,
+//   );
+// }
+//
+// export function testPathWithPrefix(pathPrefix: string, realPath: string) {
+//   return (
+//     testPathWithStaticPrefix(pathPrefix, realPath) ||
+//     testPathWithDynamicRoute(pathPrefix, realPath)
+//   );
+// }
+
+export function patchMicroAppRoute(
+  route: MicroAppRoute,
+  masterOptions: {
+    base: string;
+    masterHistoryType: string;
+    routeBindingAlias: string;
+  },
+) {
+  const { base, masterHistoryType, routeBindingAlias } = masterOptions;
+  // 当配置了 routeBindingAlias 时，优先从 routeBindingAlias 里取配置，但同时也兼容使用了默认的 microApp 方式
+  const microAppName = route[routeBindingAlias] || route.microApp;
+  const microAppProps =
+    route[`${routeBindingAlias}Props`] || route.microAppProps || {};
+  if (microAppName) {
+    if (route.children?.length) {
+      const childrenRouteHasComponent = route.children.some(
+        (r: any) => r.element,
+      );
+      if (childrenRouteHasComponent) {
+        throw new Error(
+          `[@umijs/plugin-qiankun]: You can not attach micro app ${microAppName} to route ${route.path} whose children has own component!`,
+        );
+      }
+    }
+
+    const { mode = defaultMicroAppRouteMode } = route;
+    // 在前缀模式下，自动追加通配符，匹配子应用的路由
+    if (mode === MicroAppRouteMode.PREPEND && !route.path.endsWith('/*')) {
+      route.path = route.path.replace(/\/?$/, '/*');
+    }
+
+    const { settings = {}, ...componentProps } = microAppProps;
+    const routeProps = {
+      // 兼容以前的 settings 配置
+      settings: route.settings || settings || {},
+      ...componentProps,
+    };
+    const opts = {
+      appName: microAppName,
+      base,
+      routePath: route.path,
+      routeMode: route.mode,
+      masterHistoryType,
+      routeProps,
+    };
+    route.element = React.createElement(getMicroAppRouteComponent(opts), null);
+  } else if (route.redirect) {
+    // patchClientRoutes 插入的 redirect 不会被转换，所以这里需要手动处理成重定向组件
+    route.element = React.createElement(Navigate, {
+      to: route.redirect,
+      replace: true,
+    });
+  }
+}
+
+const recursiveSearch = (
+  routes: IRouteProps[],
+  path: string,
+  parentPath: string,
+): [IRouteProps, IRouteProps[], number, string] | null => {
+  for (let i = 0; i < routes.length; i++) {
+    if (routes[i].path === path) {
+      return [routes[i], routes, i, parentPath];
+    }
+    if (routes[i].children && routes[i].children?.length) {
+      const found = recursiveSearch(
+        routes[i].children || [],
+        path,
+        routes[i].path,
+      );
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+export function insertRoute(routes: IRouteProps[], microAppRoute: IRouteProps) {
+  const mod =
+    microAppRoute.appendChildTo || microAppRoute.insert
+      ? 'appendChildTo'
+      : microAppRoute.insertBefore
+      ? 'insertBefore'
+      : undefined;
+  const target =
+    microAppRoute.appendChildTo ||
+    microAppRoute.insert ||
+    microAppRoute.insertBefore;
+  const [found, foundParentRoutes = [], index = 0, parentPath] =
+    recursiveSearch(routes, target, '/') || [];
+  if (found) {
+    switch (mod) {
+      case 'appendChildTo':
+        if (
+          !microAppRoute.path ||
+          !found.path ||
+          !microAppRoute.path.startsWith(found.path)
+        ) {
+          throw new Error(
+            `[plugin-qiankun]: path "${microAppRoute.path}" need to starts with "${found.path}"`,
+          );
+        }
+        found.exact = false;
+        found.children = found.children || [];
+        found.children.push(microAppRoute);
+        break;
+      case 'insertBefore':
+        if (
+          !microAppRoute.path ||
+          !found.path ||
+          !microAppRoute.path.startsWith(parentPath)
+        ) {
+          throw new Error(
+            `[plugin-qiankun]: path "${microAppRoute.path}" need to starts with "${parentPath}"`,
+          );
+        }
+        foundParentRoutes.splice(index, 0, microAppRoute);
+        break;
+    }
+  } else {
+    throw new Error(`[plugin-qiankun]: path "${target}" not found`);
+  }
+}

package/libs/qiankun/master/constants.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+/* eslint-disable */
+
+export const defaultMasterRootId = 'root-master';
+export const defaultHistoryType = 'browser';
+export const qiankunStateForSlaveModelNamespace = '@@qiankunStateForSlave';
+export const qiankunStateFromMasterModelNamespace = '@@qiankunStateFromMaster';
+export enum MicroAppRouteMode {
+  /**
+   * 既作为匹配规则，也作为子应用 router.basename
+   */
+  PREPEND = 'prepend',
+  /**
+   * 仅作为匹配规则
+   */
+  MATCH = 'match',
+}
+
+export const defaultMicroAppRouteMode = MicroAppRouteMode.PREPEND;

package/libs/qiankun/master/getMicroAppRouteComponent.tsx.tpl

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useMatch } from 'umi';
+import { MicroApp } from './MicroApp';
+import { defaultMicroAppRouteMode, MicroAppRouteMode } from './constants';
+
+export function getMicroAppRouteComponent(opts: {
+  appName: string;
+  base: string;
+  routePath: string;
+  routeMode: MicroAppRouteMode;
+  masterHistoryType: string;
+  routeProps?: any;
+}) {
+  const { base, masterHistoryType, appName, routeProps, routePath, routeMode = defaultMicroAppRouteMode } = opts;
+  const RouteComponent = () => {
+    const match = useMatch(routePath);
+    const url = match ? match.pathnameBase : '';
+    // 默认取静态配置的 base
+    let umiConfigBase = base === '/' ? '' : trimEndSlash(base);
+    // 匹配模式下，routePath 不会作为 prefix
+    const prefix = routeMode === MicroAppRouteMode.MATCH ? '' : trimEndSlash(url);
+
+    // 拼接子应用挂载路由
+    let runtimeMatchedBase = umiConfigBase + prefix;
+
+    {{#dynamicRoot}}
+    // @see https://github.com/umijs/umi/blob/master/packages/preset-built-in/src/plugins/commands/htmlUtils.ts#L102
+    runtimeMatchedBase = window.routerBase || location.pathname.split('/').slice(0, -(path.split('/').length - 1)).concat('').join('/');
+    {{/dynamicRoot}}
+
+    const componentProps = {
+      name: appName,
+      base: runtimeMatchedBase,
+      history: masterHistoryType,
+      ...routeProps,
+    };
+    return <MicroApp {...componentProps} />;
+  };
+
+  return RouteComponent;
+}
+
+function trimEndSlash(p: string) {
+  return p.endsWith('/') ? p.slice(0, -1) : p;
+}