@umijs/plugins 4.0.0-beta.13 → 4.0.0-beta.17

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 };

package/libs/qiankun/slave/lifecycles.ts

@@ -0,0 +1,149 @@
+// @ts-nocheck
+/* eslint-disable */
+import { getPluginManager } from '@@/core/plugin';
+import ReactDOM from 'react-dom';
+import { ApplyPluginsType } from 'umi';
+import { setModelState } from './qiankunModel';
+
+const noop = () => {};
+
+type Defer = {
+  promise: Promise<any>;
+  resolve(value?: any): void;
+};
+
+// @ts-ignore
+const defer: Defer = {};
+defer.promise = new Promise((resolve) => {
+  defer.resolve = resolve;
+});
+
+let render = noop;
+let hasMountedAtLeastOnce = false;
+
+export default () => defer.promise;
+export const clientRenderOptsStack: any[] = [];
+
+// function normalizeHistory(
+//   history?: 'string' | Record<string, any>,
+//   base?: string,
+// ) {
+//   let normalizedHistory: Record<string, any> = {};
+//   if (base) normalizedHistory.basename = base;
+//   if (history) {
+//     if (typeof history === 'string') {
+//       normalizedHistory.type = history;
+//     } else {
+//       normalizedHistory = history;
+//     }
+//   }
+//
+//   return normalizedHistory;
+// }
+
+async function getSlaveRuntime() {
+  const config = await getPluginManager().applyPlugins({
+    key: 'qiankun',
+    type: ApplyPluginsType.modify,
+    initialValue: {},
+    async: true,
+  });
+  // 应用既是 master 又是 slave 的场景，运行时 slave 配置方式为 export const qiankun = { slave: {} }
+  const { slave } = config;
+  return slave || config;
+}
+
+export function genBootstrap(oldRender: typeof noop) {
+  return async (props: any) => {
+    const slaveRuntime = await getSlaveRuntime();
+    if (slaveRuntime.bootstrap) {
+      await slaveRuntime.bootstrap(props);
+    }
+    render = oldRender;
+  };
+}
+
+export function genMount(mountElementId: string) {
+  return async (props?: any) => {
+    // props 有值时说明应用是通过 lifecycle 被主应用唤醒的，而不是独立运行时自己 mount
+    if (typeof props !== 'undefined') {
+      setModelState(props);
+
+      const slaveRuntime = await getSlaveRuntime();
+      if (slaveRuntime.mount) {
+        await slaveRuntime.mount(props);
+      }
+
+      // 更新 clientRender 配置
+      const clientRenderOpts = {
+        // 默认开启
+        // 如果需要手动控制 loading，通过主应用配置 props.autoSetLoading false 可以关闭
+        callback: () => {
+          if (
+            props?.autoSetLoading &&
+            typeof props?.setLoading === 'function'
+          ) {
+            props.setLoading(false);
+          }
+
+          // // 支持将子应用的 history 回传给父应用
+          // if (typeof props?.onHistoryInit === 'function') {
+          //   props.onHistoryInit(history);
+          // }
+        },
+        // 支持通过 props 注入 container 来限定子应用 mountElementId 的查找范围
+        // 避免多个子应用出现在同一主应用时出现 mount 冲突
+        rootElement:
+          props?.container?.querySelector(`#${mountElementId}`) ||
+          mountElementId,
+
+        // 当存在同一个 umi 子应用在同一个页面被多实例渲染的场景时（比如一个页面里，同时展示了这个子应用的多个路由页面）
+        // mount 钩子会被调用多次，但是具体什么时候对应的实例开始 render 则是不定的，即它调用 applyPlugins('modifyClientRenderOpts') 的时机是不确定的
+        // 为了保证每次 applyPlugins('modifyClientRenderOpts') 调用是生成正确的 history，我们需要这里通过闭包上下文维持 mount 调用时的一些配置信息
+        // FIXME 由于 umi history 是全局的，通过 import { history } from 'umi' 调用的永远都是最后一个调用 createHistory 产生的对象，所以这种场景下会存在子应用内部获取 history 时，获取到的是同一个 history 的问题。这种场景下就不能直接从 umi import history，而应该从组件的 props 中取
+        // getHistory() {
+        //   // 动态改变 history
+        //   const historyOptions = normalizeHistory(props.history, props.base);
+        //   setCreateHistoryOptions(historyOptions);
+        //
+        //   // FIXME 子应用嵌入模式下不支持热更
+        //   return createHistory();
+        // },
+      };
+
+      clientRenderOptsStack.push(clientRenderOpts);
+    }
+
+    // 第一次 mount defer 被 resolve 后umi 会自动触发 render，非第一次 mount 则需手动触发
+    if (hasMountedAtLeastOnce) {
+      render();
+    } else {
+      defer.resolve();
+    }
+
+    hasMountedAtLeastOnce = true;
+  };
+}
+
+export function genUpdate() {
+  return async (props: any) => {
+    setModelState(props);
+    const slaveRuntime = await getSlaveRuntime();
+    if (slaveRuntime.update) {
+      await slaveRuntime.update(props);
+    }
+  };
+}
+
+export function genUnmount(mountElementId: string) {
+  return async (props: any) => {
+    const container = props?.container
+      ? props.container.querySelector(`#${mountElementId}`)
+      : document.getElementById(mountElementId);
+    if (container) {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+    const slaveRuntime = await getSlaveRuntime();
+    if (slaveRuntime.unmount) await slaveRuntime.unmount(props);
+  };
+}

package/libs/qiankun/slave/qiankunModel.ts

@@ -0,0 +1,19 @@
+// @ts-nocheck
+/* eslint-disable */
+import { useState } from 'react';
+
+let initState: any;
+let setModelState = (val: any) => {
+  initState = val;
+};
+
+export default () => {
+  const [state, setState] = useState(initState);
+  setModelState = (val: any) => {
+    initState = val;
+    setState(val);
+  };
+  return state;
+};
+
+export { setModelState };

package/libs/qiankun/slave/slaveRuntimePlugin.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+/* eslint-disable */
+import qiankunRender from './lifecycles';
+
+export function render(oldRender: any) {
+  return qiankunRender().then(oldRender);
+}
+
+// export function modifyClientRenderOpts(memo: any) {
+//   // 每次应用 render 的时候会调 modifyClientRenderOpts，这时尝试从队列中取 render 的配置
+//   const clientRenderOpts = clientRenderOptsStack.shift();
+//   if (clientRenderOpts) {
+//     const history = clientRenderOpts.getHistory();
+//     delete clientRenderOpts.getHistory;
+//     clientRenderOpts.history = history;
+//   }
+//   return {
+//     ...memo,
+//     ...clientRenderOpts,
+//   };
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.17",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -21,20 +21,28 @@
     "dev": "pnpm build -- --watch"
   },
   "dependencies": {
+    "@ahooksjs/use-request": "^2.0.0",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-layout": "^6.31.7",
-    "@umijs/bundler-utils": "4.0.0-beta.13",
+    "@umijs/bundler-utils": "4.0.0-beta.17",
     "antd": "^4.17.3",
     "antd-dayjs-webpack-plugin": "^1.0.6",
+    "axios": "^0.24.0",
     "babel-plugin-import": "^1.13.3",
     "dayjs": "^1.10.7",
     "dva-core": "^2.0.4",
+    "event-emitter": "~0.3.5",
     "fast-deep-equal": "3.1.3",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.1",
+    "qiankun": "^2.6.3",
+    "react-intl": "3.12.1",
     "react-redux": "^7.2.6",
-    "redux": "^4.1.2"
+    "redux": "^4.1.2",
+    "warning": "^4.0.3"
   },
   "devDependencies": {
-    "umi": "4.0.0-beta.13"
+    "umi": "4.0.0-beta.17"
   },
   "publishConfig": {
     "access": "public"