@umijs/plugins 4.0.11 → 4.0.14

package/dist/antd.js

@@ -45,12 +45,14 @@ var import_resolveProjectDep = require("./utils/resolveProjectDep");
 var import_withTmpPath = require("./utils/withTmpPath");
 var antd_default = (api) => {
   let pkgPath;
+  let antdVersion = "4.0.0";
   try {
     pkgPath = (0, import_resolveProjectDep.resolveProjectDep)({
       pkg: api.pkg,
       cwd: api.cwd,
       dep: "antd"
     }) || (0, import_path.dirname)(require.resolve("antd/package.json"));
+    antdVersion = require(`${pkgPath}/package.json`).version;
   } catch (e) {
   }
   api.describe({
@@ -94,6 +96,10 @@ var antd_default = (api) => {
     if (antd.dayjs) {
       memo.alias.moment = (0, import_path.dirname)(require.resolve("dayjs/package.json"));
     }
+    if (antdVersion.startsWith("5")) {
+      const theme = require("@ant-design/antd-theme-variable");
+      memo.theme = __spreadValues(__spreadValues({}, theme), memo.theme);
+    }
     if (antd.dark || antd.compact) {
       const { getThemeVariables } = require("antd/dist/theme");
       memo.theme = __spreadValues(__spreadValues({}, getThemeVariables(antd)), memo.theme);
@@ -105,6 +111,9 @@ var antd_default = (api) => {
   });
   api.addExtraBabelPlugins(() => {
     const style = api.config.antd.style || "less";
+    if (antdVersion.startsWith("5")) {
+      return [];
+    }
     return api.config.antd.import && !api.appData.vite ? [
       [
         require.resolve("babel-plugin-import"),
@@ -151,7 +160,8 @@ export function rootContainer(container) {
   });
   api.addEntryImportsAhead(() => {
     const style = api.config.antd.style || "less";
-    return api.config.antd.import && !api.appData.vite ? [] : [
+    const doNotImportLess = api.config.antd.import && !api.appData.vite || antdVersion.startsWith("5");
+    return doNotImportLess ? [] : [
       {
         source: style === "less" ? "antd/dist/antd.less" : "antd/dist/antd.css"
       }

package/dist/layout.js

@@ -30,8 +30,19 @@ var import_fs = require("fs");
 var import_path = require("path");
 var import_umi = require("umi");
 var import_plugin_utils = require("umi/plugin-utils");
+var import_resolveProjectDep = require("./utils/resolveProjectDep");
 var import_withTmpPath = require("./utils/withTmpPath");
 var layout_default = (api) => {
+  let antdVersion = "4.0.0";
+  try {
+    const pkgPath2 = (0, import_resolveProjectDep.resolveProjectDep)({
+      pkg: api.pkg,
+      cwd: api.cwd,
+      dep: "antd"
+    }) || (0, import_path.dirname)(require.resolve("antd/package.json"));
+    antdVersion = require(`${pkgPath2}/package.json`).version;
+  } catch (e) {
+  }
   api.describe({
     key: "layout",
     config: {
@@ -253,7 +264,7 @@ const { formatMessage } = useIntl();
            type InitDataType = ReturnType<typeof InitialStateType>;
         ` : "type InitDataType = any;"}
 
-    import { IConfigFromPlugins } from '@@/core/pluginConfig';
+    import type { IConfigFromPlugins } from '@@/core/pluginConfig';
 
     export type RunTimeLayoutConfig = (initData: InitDataType) => Omit<
       ProLayoutProps,
@@ -427,7 +438,7 @@ export function getRightRenderContent (opts: {
     api.writeTmpFile({
       path: "Layout.less",
       content: `
-@import '~antd/es/style/themes/default.less';
+${antdVersion.startsWith("5") ? "" : "@import '~antd/es/style/themes/default.less';"}
 @pro-header-hover-bg: rgba(0, 0, 0, 0.025);
 @media screen and (max-width: @screen-xs) {
   // \u5728\u5C0F\u5C4F\u5E55\u7684\u65F6\u5019\u53EF\u4EE5\u6709\u66F4\u597D\u7684\u4F53\u9A8C
@@ -480,7 +491,7 @@ export function getRightRenderContent (opts: {
 .umi-plugin-layout-name {
   margin-left: 8px;
 }
-      `
+`
     });
     api.writeTmpFile({
       path: "Logo.tsx",

package/dist/mf.js

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(mf_exports);
 var import_fs = require("fs");
 var import_path = require("path");
 var import_plugin_utils = require("umi/plugin-utils");
+var import_mfUtils = require("./utils/mfUtils");
 var { isEmpty } = import_plugin_utils.lodash;
 var mfSetupPathFileName = "_mf_setup-public-path.js";
 var mfAsyncEntryFileName = "asyncEntry.ts";
@@ -86,6 +87,14 @@ function mf(api) {
       __webpack_public_path__ = document.currentScript.src + '/../';`,
       path: mfSetupPathFileName
     });
+    const { remotes = [] } = api.config.mf;
+    api.writeTmpFile({
+      path: "index.tsx",
+      context: {
+        remoteCodeString: (0, import_mfUtils.toRemotesCodeString)(remotes)
+      },
+      tplPath: (0, import_path.join)(__dirname, "../tpls/mf-runtime.ts.tpl")
+    });
     if (api.env === "development" && api.config.mfsu) {
       return;
     }

package/dist/request.js

@@ -342,6 +342,7 @@ export {
   useRequest,
   UseRequestProvider,
   request,
+  getRequestInstance,
 } from './request';
 `
     });

package/dist/utils/mfUtils.d.ts

@@ -0,0 +1,14 @@
+declare type SimpleRemote = {
+    entry: string;
+    name: string;
+    aliasName?: string;
+};
+declare type RemoteEntries = {
+    name: string;
+    entries: object;
+    keyResolver: string;
+    aliasName?: string;
+};
+declare type Remote = SimpleRemote | RemoteEntries;
+export declare function toRemotesCodeString(remotes: Remote[]): string;
+export {};

package/dist/utils/mfUtils.js

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/mfUtils.ts
+var mfUtils_exports = {};
+__export(mfUtils_exports, {
+  toRemotesCodeString: () => toRemotesCodeString
+});
+module.exports = __toCommonJS(mfUtils_exports);
+function isSimpleRemote(r) {
+  return r.entry;
+}
+function isRemoteEntries(r) {
+  return r.entries && r.keyResolver;
+}
+function toRemotesCodeString(remotes) {
+  const res = [];
+  for (const r of remotes) {
+    const aliasName = r.aliasName || r.name;
+    const remoteName = r.name;
+    if (isSimpleRemote(r)) {
+      res.push(`${aliasName}: {
+  aliasName: "${aliasName}",
+  remoteName: "${remoteName}",        
+  entry: "${r.entry}"
+}`);
+    }
+    if (isRemoteEntries(r)) {
+      res.push(`${aliasName}: {
+  aliasName: "${aliasName}",
+  remoteName: "${remoteName}",        
+  entry: (${JSON.stringify(r.entries)})[${r.keyResolver}]
+}`);
+    }
+  }
+  return res.join(",\n");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  toRemotesCodeString
+});

package/libs/qiankun/master/MicroApp.tsx

@@ -18,13 +18,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { qiankunStateForSlaveModelNamespace } from './constants';
 import { ErrorBoundary } from './ErrorBoundary';
 import { getMasterOptions } from './masterOptions';
 import MicroAppLoader from './MicroAppLoader';
 import { MasterOptions } from './types';
 
-const qiankunStateForSlaveModelNamespace = '@@qiankunStateForSlave';
-
 type HashHistory = {
   type?: 'hash';
 } & any;

package/libs/qiankun/master/common.ts

@@ -6,7 +6,7 @@
  */
 
 import React, { ReactComponentElement } from 'react';
-import type { IRouteProps } from 'umi';
+import { Navigate, type IRouteProps } from 'umi';
 
 export const defaultMountContainerId = 'root-subapp';
 
@@ -94,19 +94,30 @@ export function patchMicroAppRoute(
       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,
-): IRouteProps | null => {
+  parentPath: string,
+): [IRouteProps, IRouteProps[], number, string] | null => {
   for (let i = 0; i < routes.length; i++) {
     if (routes[i].path === path) {
-      return routes[i];
+      return [routes[i], routes, i, parentPath];
     }
     if (routes[i].children && routes[i].children?.length) {
-      const found = recursiveSearch(routes[i].children || [], path);
+      const found = recursiveSearch(
+        routes[i].children || [],
+        path,
+        routes[i].path,
+      );
       if (found) {
         return found;
       }
@@ -116,23 +127,48 @@ const recursiveSearch = (
 };
 
 export function insertRoute(routes: IRouteProps[], microAppRoute: IRouteProps) {
-  const found = recursiveSearch(routes, microAppRoute.insert);
+  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) {
-    if (
-      !microAppRoute.path ||
-      !found.path ||
-      !microAppRoute.path.startsWith(found.path)
-    ) {
-      throw new Error(
-        `[plugin-qiankun]: path "${microAppRoute.path}" need to starts with "${found.path}"`,
-      );
+    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;
     }
-    found.exact = false;
-    found.children = found.children || [];
-    found.children.push(microAppRoute);
   } else {
-    throw new Error(
-      `[plugin-qiankun]: path "${microAppRoute.insert}" not found`,
-    );
+    throw new Error(`[plugin-qiankun]: path "${target}" not found`);
   }
 }

package/libs/qiankun/master/masterRuntimePlugin.tsx

@@ -24,7 +24,9 @@ async function getMasterRuntime() {
 
 // modify route with "microApp" attribute to use real component
 function patchMicroAppRouteComponent(routes: any[]) {
-  const insertRoutes = microAppRuntimeRoutes.filter((r) => r.insert);
+  const insertRoutes = microAppRuntimeRoutes.filter(
+    (r) => r.insert || r.insertBefore || r.appendChildTo,
+  );
   // 先处理 insert 配置
   insertRoutes.forEach((route) => {
     insertRoute(routes, route);
@@ -60,7 +62,13 @@ function patchMicroAppRouteComponent(routes: any[]) {
       };
 
       patchRoute(microAppRoute);
-      !microAppRoute.insert && rootRoutes.unshift(microAppRoute);
+      if (
+        !microAppRoute.insert &&
+        !microAppRoute.insertBefore &&
+        !microAppRoute.appendChildTo
+      ) {
+        rootRoutes.unshift(microAppRoute);
+      }
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.11",
+  "version": "4.0.14",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -13,7 +13,8 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "libs"
+    "libs",
+    "tpls"
   ],
   "scripts": {
     "build": "umi-scripts father build",
@@ -23,9 +24,10 @@
   },
   "dependencies": {
     "@ahooksjs/use-request": "^2.0.0",
+    "@ant-design/antd-theme-variable": "^1.0.0",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-layout": "^7.0.1-beta.28",
-    "@umijs/bundler-utils": "4.0.11",
+    "@umijs/bundler-utils": "4.0.14",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.5",
@@ -44,7 +46,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "umi": "4.0.11"
+    "umi": "4.0.14"
   },
   "publishConfig": {
     "access": "public"

package/tpls/mf-runtime.ts.tpl

@@ -0,0 +1,149 @@
+import { lazy, Suspense } from 'react'
+import type { Component, ReactNode } from 'react'
+const remotes = {
+{{{ remoteCodeString }}}
+};
+const scriptLoadedMap: Record<string, Promise<void> | 0 | undefined> = {};
+
+type MFModuleImportRequest = { entry: string; remoteName: string; moduleName: string; }
+type MFModuleRegisterRequest = { entry: string; remoteName: string; aliasName?:string; }
+
+export async function rawMfImport(opts: MFModuleImportRequest) {
+  await loadRemoteScriptWithCache(opts.remoteName, opts.entry);
+  return getRemoteModule(opts.remoteName, opts.moduleName);
+}
+
+export function registerMfRemote (opts: MFModuleRegisterRequest) {
+  const aliasName = opts.aliasName || opts.remoteName;
+  if( remotes[aliasName] ){
+    return console.warn(`registerMfRemote: ${aliasName} is already registered as`, remotes[aliasName]);
+  }
+  remotes[aliasName] ={
+    ...opts,
+    aliasName,
+  }
+}
+
+export async function safeMfImport(moduleSpecifier: any, fallback: any) {
+  try {
+    const i = moduleSpecifier.indexOf('/');
+    if (i < 0) {
+      console.error(
+        `safeMfImport: bad Module Name ${moduleSpecifier}, should match pattern 'remote/moduleName'`,
+        moduleSpecifier,
+      );
+
+      return fallback;
+    }
+
+    const aliasName = moduleSpecifier.slice(0, i);
+    const module = moduleSpecifier.slice(i + 1);
+    const entry = remotes[aliasName]?.entry;
+    const remoteName = remotes[aliasName]?.remoteName;
+
+    if(!entry){
+      console.error(
+        `safeMfImport: bad Module Name ${moduleSpecifier}, no remote for "aliasName"`,
+        moduleSpecifier,
+      );
+      return fallback;
+    }
+
+    await loadRemoteScriptWithCache(remoteName, entry);
+
+    return getRemoteModule(remoteName, module);
+  } catch (e) {
+    console.error('safeMfImport: Module', moduleSpecifier, 'failed', e);
+    return fallback;
+  }
+}
+
+async function loadScript(url): Promise<void> {
+  const element = document.createElement('script');
+  element.src = url;
+  element.type = 'text/javascript';
+  element.async = true;
+
+  const loadScriptQ = new Promise<void>((resolve, reject) => {
+    element.onload = () => {
+      document.head.removeChild(element);
+      resolve();
+    };
+    element.onerror = (e) => {
+      document.head.removeChild(element);
+      reject(e);
+    };
+  });
+  document.head.appendChild(element);
+
+  return loadScriptQ;
+}
+
+async function getRemoteModule(remoteName:string, moduleName: string): any {
+  // @ts-ignore
+  await __webpack_init_sharing__('default');
+  const container = window[remoteName]; // or get the container somewhere else
+  // Initialize the container, it may provide shared modules
+  // @ts-ignore
+  await container.init(__webpack_share_scopes__.default);
+  // @ts-ignore
+  const factory = await window[remoteName].get(`./${moduleName}`);
+  return factory();
+}
+
+async function loadRemoteScriptWithCache(remoteName:string, url: string): Promise<void> {
+
+  const loadCache = scriptLoadedMap[remoteName];
+  let scriptLoadQ: Promise<void> | null = null;
+
+  if(loadCache === 0){
+    // script Already loaded
+    return;
+  } else if(loadCache) {
+    await loadCache
+  }else{
+    let p = loadScript(url).then(()=>{
+      scriptLoadedMap[remoteName] = 0;
+    },(e)=>{
+      scriptLoadedMap[remoteName] = undefined;
+      throw e;
+    });
+    scriptLoadedMap[remoteName] = p;
+    await p;
+  }
+}
+
+type SafeRemoteComponentOpts ={
+  moduleSpecifier:string;
+  fallbackComponent: ComponentType<any>;
+  loadingElement: ReactNode
+}
+
+export function safeRemoteComponent<T extends ComponentType<any>>(opts: SafeRemoteComponentOpts): T {
+  const Lazy = lazy<T>(()=>safeMfImport(opts.moduleSpecifier, { default: opts.fallbackComponent }));
+  return (props)=> (<Suspense fallback={opts.loadingElement}>
+     <Lazy {...props} />
+  </Suspense>)
+}
+
+type RawRemoteComponentOpts ={
+  mfConfig:{
+    entry:string;
+    remoteName: string;
+    moduleName: string;
+  };
+  fallbackComponent: ComponentType<any>;
+  loadingElement: ReactNode;
+}
+
+export function safeRemoteComponentWithMfConfig<T extends ComponentType<any>>(opts: RawRemoteComponentOpts): T {
+  const Lazy = lazy<T>(()=>{
+    return rawMfImport(opts.mfConfig)
+      .catch(()=>{
+        return { default: opts.fallbackComponent };
+      })
+  })
+  return (props)=> (<Suspense fallback={opts.loadingElement}>
+     <Lazy {...props} />
+  </Suspense>)
+}