@umijs/plugins 4.0.0-beta.9 → 4.0.0-rc.1

package/libs/qiankun/master/MicroApp.tsx

@@ -0,0 +1,262 @@
+// @ts-nocheck
+/* eslint-disable */
+__USE_MODEL__;
+import concat from 'lodash/concat';
+import mergeWith from 'lodash/mergeWith';
+import noop from 'lodash/noop';
+import {
+  FrameworkConfiguration,
+  loadMicroApp,
+  MicroApp as MicroAppType,
+  prefetchApps,
+} from 'qiankun';
+import React, {
+  forwardRef,
+  Ref,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { ErrorBoundary } from './ErrorBoundary';
+import { getMasterOptions } from './masterOptions';
+import MicroAppLoader from './MicroAppLoader';
+import { MasterOptions } from './types';
+
+const qiankunStateForSlaveModelNamespace = '@@qiankunStateForSlave';
+
+type HashHistory = {
+  type?: 'hash';
+} & any;
+
+type BrowserHistory = {
+  type?: 'browser';
+} & any;
+
+type MemoryHistory = {
+  type?: 'memory';
+} & any;
+
+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) {
+  if (microApp) {
+    microApp.mountPromise.then(() => microApp.unmount());
+  }
+}
+
+let noneMounted = true;
+
+export const MicroApp = forwardRef(
+  (componentProps: Props, componentRef: Ref<MicroAppType>) => {
+    const {
+      masterHistoryType,
+      apps = [],
+      lifeCycles: globalLifeCycles,
+      prefetch = true,
+      ...globalSettings
+    } = getMasterOptions() as MasterOptions;
+
+    const {
+      name,
+      settings: settingsFromProps = {},
+      loader,
+      errorBoundary,
+      lifeCycles,
+      wrapperClassName,
+      className,
+      ...propsFromParams
+    } = componentProps;
+
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<any>(null);
+    // 未配置自定义 errorBoundary 且开启了 autoCaptureError 场景下，使用插件默认的 errorBoundary，否则使用自定义 errorBoundary
+    const microAppErrorBoundary =
+      errorBoundary ||
+      (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>();
+    const updatingPromise = useRef<Promise<any>>();
+    const updatingTimestamp = useRef(Date.now());
+
+    useImperativeHandle(componentRef, () => microAppRef.current);
+
+    const appConfig = apps.find((app: any) => app.name === name);
+    useEffect(() => {
+      if (!appConfig) {
+        setComponentError(
+          new Error(
+            `[@umijs/plugin-qiankun]: Can not find the configuration of ${name} app!`,
+          ),
+        );
+      }
+      return noop;
+    }, []);
+
+    // 约定使用 src/app.ts/useQiankunStateForSlave 中的数据作为主应用透传给微应用的 props，优先级高于 propsFromConfig
+    const stateForSlave = (useModel || noop)(
+      qiankunStateForSlaveModelNamespace,
+    );
+    const { entry, props: propsFromConfig = {} } = appConfig || {};
+
+    useEffect(() => {
+      setComponentError(null);
+      setLoading(true);
+      const configuration = {
+        globalContext: window,
+        ...globalSettings,
+        ...settingsFromProps,
+      };
+      microAppRef.current = loadMicroApp(
+        {
+          name,
+          entry,
+          container: containerRef.current!,
+          props: {
+            ...propsFromConfig,
+            ...stateForSlave,
+            ...propsFromParams,
+            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) => app.name !== name && prefetch.indexOf(app.name) !== -1,
+              );
+              prefetchApps(specialPrefetchApps, configuration);
+            } else {
+              const otherNotMountedApps = apps.filter(
+                (app) => app.name !== name,
+              );
+              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 () => unmountMicroApp(microAppRef.current);
+    }, [name]);
+
+    useEffect(() => {
+      const microApp = microAppRef.current;
+      if (microApp) {
+        if (!updatingPromise.current) {
+          // 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后
+          updatingPromise.current = microApp.mountPromise;
+        } else {
+          // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成
+          updatingPromise.current = updatingPromise.current.then(() => {
+            const canUpdate = (microApp?: MicroAppType) =>
+              microApp?.update && microApp.getStatus() === 'MOUNTED';
+            if (canUpdate(microApp)) {
+              const props = {
+                ...propsFromConfig,
+                ...stateForSlave,
+                ...propsFromParams,
+                setLoading,
+              };
+
+              if (process.env.NODE_ENV === 'development') {
+                if (Date.now() - updatingTimestamp.current < 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,
+                );
+                updatingTimestamp.current = Date.now();
+              }
+
+              // 返回 microApp.update 形成链式调用
+              // @ts-ignore
+              return microApp.update(props);
+            }
+
+            return void 0;
+          });
+        }
+      }
+
+      return noop;
+    }, Object.values({ ...stateForSlave, ...propsFromParams }));
+
+    // 未配置自定义 loader 且开启了 autoSetLoading 场景下，使用插件默认的 loader，否则使用自定义 loader
+    const microAppLoader =
+      loader ||
+      (propsFromParams.autoSetLoading
+        ? (loading) => <MicroAppLoader loading={loading} />
+        : null);
+
+    return Boolean(microAppLoader) || Boolean(microAppErrorBoundary) ? (
+      <div style={{ position: 'relative' }} className={wrapperClassName}>
+        {Boolean(microAppLoader) && microAppLoader(loading)}
+        {Boolean(microAppErrorBoundary) &&
+          Boolean(error) &&
+          microAppErrorBoundary(error)}
+        <div ref={containerRef} className={className} />
+      </div>
+    ) : (
+      <div ref={containerRef} className={className} />
+    );
+  },
+);

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,133 @@
+// @ts-nocheck
+/* eslint-disable */
+/**
+ * @author Kuitos
+ * @since 2019-06-20
+ */
+
+import { ReactComponentElement } from 'react';
+import type { IRouteProps } from 'umi';
+
+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: any,
+  getMicroAppRouteComponent: (opts: {
+    appName: string;
+    base: string;
+    masterHistoryType: string;
+    routeProps?: any;
+  }) => string | ReactComponentElement<any>,
+  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.routes?.length) {
+      const childrenRouteHasComponent = route.routes.some(
+        (r: any) => r.component,
+      );
+      if (childrenRouteHasComponent) {
+        throw new Error(
+          `[@umijs/plugin-qiankun]: You can not attach micro app ${microAppName} to route ${route.path} whose children has own component!`,
+        );
+      }
+    }
+
+    route.exact = false;
+
+    const { settings = {}, ...componentProps } = microAppProps;
+    const routeProps = {
+      // 兼容以前的 settings 配置
+      settings: route.settings || settings || {},
+      ...componentProps,
+    };
+    const opts = {
+      appName: microAppName,
+      base,
+      masterHistoryType,
+      routeProps,
+    };
+    route.component = getMicroAppRouteComponent(opts);
+  }
+}
+
+const recursiveSearch = (
+  routes: IRouteProps[],
+  path: string,
+): IRouteProps | null => {
+  for (let i = 0; i < routes.length; i++) {
+    if (routes[i].path === path) {
+      return routes[i];
+    }
+    if (routes[i].routes && routes[i].routes?.length) {
+      const found = recursiveSearch(routes[i].routes || [], path);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+export function insertRoute(routes: IRouteProps[], microAppRoute: IRouteProps) {
+  const found = recursiveSearch(routes, microAppRoute.insert);
+  if (found) {
+    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.routes = found.routes || [];
+    found.routes.push(microAppRoute);
+  } else {
+    throw new Error(
+      `[plugin-qiankun]: path "${microAppRoute.insert}" not found`,
+    );
+  }
+}

package/libs/qiankun/master/constants.ts

@@ -0,0 +1,7 @@
+// @ts-nocheck
+/* eslint-disable */
+
+export const defaultMasterRootId = 'root-master';
+export const defaultHistoryType = 'browser';
+export const qiankunStateForSlaveModelNamespace = '@@qiankunStateForSlave';
+export const qiankunStateFromMasterModelNamespace = '@@qiankunStateFromMaster';

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MicroApp } from './MicroApp';
+{{#runtimeHistory}}
+import { getCreateHistoryOptions } from 'umi';
+{{/runtimeHistory}}
+import { useLocation } from 'umi';
+
+export function getMicroAppRouteComponent(opts: {
+  appName: string;
+  base: string;
+  masterHistoryType: string;
+  routeProps?: any;
+}) {
+  const { base, masterHistoryType, appName, routeProps } = opts;
+  const RouteComponent = ({ match }: any) => {
+    const url = useLocation().pathname;
+
+    // 默认取静态配置的 base
+    let umiConfigBase = base === '/' ? '' : base;
+
+    {{#runtimeHistory}}
+    // 存在 getCreateHistoryOptions 说明当前应用开启了 runtimeHistory，此时取运行时的 history 配置的 basename
+    const { basename = '/' } = getCreateHistoryOptions();
+    umiConfigBase = basename === '/' ? '' : basename;
+    {{/runtimeHistory}}
+
+    let runtimeMatchedBase =
+      umiConfigBase + (url.endsWith('/') ? url.substr(0, url.length - 1) : url);
+
+    {{#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;
+}

package/libs/qiankun/master/masterRuntimePlugin.tsx

@@ -0,0 +1,130 @@
+// @ts-nocheck
+/* eslint-disable */
+
+import { getPluginManager } from '@@/core/plugin';
+import { prefetchApps } from 'qiankun';
+import { ApplyPluginsType } from 'umi';
+import { insertRoute, noop, patchMicroAppRoute } from './common';
+import { getMicroAppRouteComponent } from './getMicroAppRouteComponent';
+import { getMasterOptions, setMasterOptions } from './masterOptions';
+import { MasterOptions, MicroAppRoute } from './types';
+
+let microAppRuntimeRoutes: MicroAppRoute[];
+
+async function getMasterRuntime() {
+  const config = await getPluginManager().applyPlugins({
+    key: 'qiankun',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+    async: true,
+  });
+  const { master } = config;
+  return master || config;
+}
+
+// modify route with "microApp" attribute to use real component
+function patchMicroAppRouteComponent(routes: any[]) {
+  const insertRoutes = microAppRuntimeRoutes.filter((r) => r.insert);
+  // 先处理 insert 配置
+  insertRoutes.forEach((route) => {
+    insertRoute(routes, route);
+  });
+
+  const getRootRoutes = (routes: any[]) => {
+    const rootRoute = routes.find((route) => route.path === '/');
+    if (rootRoute) {
+      // 如果根路由是叶子节点，则直接返回其父节点
+      if (!rootRoute.routes) {
+        return routes;
+      }
+      return getRootRoutes(rootRoute.routes);
+    }
+    return routes;
+  };
+
+  const rootRoutes = getRootRoutes(routes);
+  if (rootRoutes) {
+    const { routeBindingAlias, base, masterHistoryType } =
+      getMasterOptions() as MasterOptions;
+    microAppRuntimeRoutes.reverse().forEach((microAppRoute) => {
+      const patchRoute = (route: any) => {
+        patchMicroAppRoute(route, getMicroAppRouteComponent, {
+          base,
+          masterHistoryType,
+          routeBindingAlias,
+        });
+        if (route.routes?.length) {
+          route.routes.forEach(patchRoute);
+        }
+      };
+
+      patchRoute(microAppRoute);
+      !microAppRoute.insert && rootRoutes.unshift(microAppRoute);
+    });
+  }
+}
+
+export async function render(oldRender: typeof noop) {
+  const runtimeOptions = await getMasterRuntime();
+  let masterOptions: MasterOptions = {
+    ...getMasterOptions(),
+    ...runtimeOptions,
+  };
+
+  const masterApps = masterOptions.apps || [];
+  const credentialsApps = masterApps.filter((app) => app.credentials);
+  if (credentialsApps.length) {
+    const defaultFetch = masterOptions.fetch || window.fetch;
+    const fetchWithCredentials = (url: string, init?: RequestInit) => {
+      // 如果当前 url 为 credentials 应用的 entry，则为其加上 cors 相关配置
+      if (credentialsApps.some((app) => app.entry === url)) {
+        return defaultFetch(url, {
+          ...init,
+          mode: 'cors',
+          credentials: 'include',
+        });
+      }
+      return defaultFetch(url, init);
+    };
+    // 设置新的 fetch
+    masterOptions = { ...masterOptions, fetch: fetchWithCredentials };
+  }
+
+  // 更新 master options
+  setMasterOptions(masterOptions);
+
+  const { apps = [], routes, ...options } = masterOptions;
+  microAppRuntimeRoutes = routes;
+
+  // 主应用相关的配置注册完毕后即可开启渲染
+  oldRender();
+
+  // 未使用 base 配置的可以认为是路由关联或者使用标签装载的应用
+  const loadableApps = apps.filter((app) => !app.base);
+  if (loadableApps.length) {
+    const { prefetch, ...importEntryOpts } = options;
+    if (prefetch === 'all') {
+      prefetchApps(loadableApps, importEntryOpts);
+    } else if (Array.isArray(prefetch)) {
+      const specialPrefetchApps = loadableApps.filter(
+        (app) => prefetch.indexOf(app.name) !== -1,
+      );
+      prefetchApps(specialPrefetchApps, importEntryOpts);
+    }
+  }
+
+  // 使用了 base 配置的应用为可注册应用
+  // 不再支持
+  const registrableApps = apps.filter((app) => app.base);
+  if (registrableApps.length) {
+    console.error(
+      '[plugins/qiankun] 检测到还在使用旧版配置，该配置已移除，请尽快升级到最新配置方式以获得更好的开发体验，详见 https://umijs.org/plugins/plugin-qiankun#%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97',
+    );
+  }
+}
+
+export function patchRoutes({ routes }: { routes: any[] }) {
+  if (microAppRuntimeRoutes) {
+    patchMicroAppRouteComponent(routes);
+  }
+}

package/libs/qiankun/master/types.ts

@@ -0,0 +1,44 @@
+// @ts-nocheck
+/* eslint-disable */
+import { FrameworkConfiguration, FrameworkLifeCycles } from 'qiankun';
+
+type BaseIConfig = any;
+
+export type HistoryType = 'browser' | 'hash';
+export type App = {
+  name: string;
+  entry: string | { scripts: string[]; styles: string[] };
+  base?: string | string[];
+  history?: HistoryType;
+  // 取 entry 时是否需要开启跨域 credentials
+  credentials?: boolean;
+  props?: any;
+} & Pick<BaseIConfig, 'mountElementId'>;
+
+export type MicroAppRoute = {
+  path: string;
+  microApp: string;
+} & Record<string, any>;
+
+export type MasterOptions = {
+  enable?: boolean;
+  apps?: App[];
+  routes?: MicroAppRoute[];
+  lifeCycles?: FrameworkLifeCycles<object>;
+  masterHistoryType?: HistoryType;
+  base?: string;
+  // 关联路由标记的别名，默认 microApp
+  routeBindingAlias?: string;
+  // 导出的组件别名，默认 MicroApp
+  exportComponentAlias?: string;
+} & FrameworkConfiguration;
+
+export type SlaveOptions = {
+  enable?: boolean;
+  devSourceMap?: boolean;
+  keepOriginalRoutes?: boolean | string;
+  shouldNotModifyRuntimePublicPath?: boolean;
+  shouldNotModifyDefaultBase?: boolean;
+  // library name 是否增加 -[name] 应对多 chunk 场景
+  shouldNotAddLibraryChunkName?: boolean;
+};

package/libs/qiankun/slave/connectMaster.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+/* eslint-disable */
+__USE_MODEL__;
+import React from 'react';
+
+const noop = () => {};
+
+const connectMaster = <T extends object>(Component: React.ComponentType<T>) => {
+  return (props: T, ...rest: any[]) => {
+    const masterProps = (useModel || noop)('@@qiankunStateFromMaster') || {};
+    return <Component {...props} {...rest} {...masterProps} />;
+  };
+};
+
+export { connectMaster };