@umijs/plugins 4.0.13 → 4.0.16

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: {
@@ -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/qiankun/slave.js

@@ -42,6 +42,8 @@ __export(slave_exports, {
   default: () => slave_default
 });
 module.exports = __toCommonJS(slave_exports);
+var import_http_proxy_middleware = require("@umijs/bundler-webpack/compiled/http-proxy-middleware");
+var import_utils = require("@umijs/utils");
 var import_assert = __toESM(require("assert"));
 var import_fs = require("fs");
 var import_path = require("path");
@@ -49,6 +51,42 @@ var import_umi = require("umi");
 var import_plugin_utils = require("umi/plugin-utils");
 var import_withTmpPath = require("../utils/withTmpPath");
 var import_constants = require("./constants");
+function getCurrentLocalDevServerEntry(api, req) {
+  const port = api.appData.port;
+  const hostname = req.hostname;
+  const protocol = req.protocol;
+  return `${protocol}://${hostname}${port ? ":" : ""}${port}/local-dev-server`;
+}
+function handleOriginalHtml(api, microAppEntry, originalHtml) {
+  const appName = api.pkg.name;
+  (0, import_assert.default)(appName, "[@umijs/plugin-qiankun]: You should have name in package.json");
+  const $ = import_utils.cheerio.load(originalHtml);
+  $("head").prepend(`<script type="extra-qiankun-config">${JSON.stringify({
+    master: {
+      apps: [
+        {
+          name: appName,
+          entry: microAppEntry,
+          extraSource: microAppEntry
+        }
+      ],
+      routes: [
+        {
+          microApp: appName,
+          name: appName,
+          path: "/" + appName,
+          extraSource: microAppEntry
+        }
+      ],
+      prefetch: false
+    }
+  })}<\/script>`);
+  return api.applyPlugins({
+    key: "modifyMasterHTML",
+    type: api.ApplyPluginsType.modify,
+    initialValue: $.html()
+  });
+}
 function isSlaveEnable(opts) {
   var _a, _b;
   const slaveCfg = (_b = (_a = opts.userConfig) == null ? void 0 : _a.qiankun) == null ? void 0 : _b.slave;
@@ -194,6 +232,56 @@ export { connectMaster } from './connectMaster';
     },
     before: "model"
   });
+  api.addMiddlewares(async () => {
+    return async (req, res, next) => {
+      var _a;
+      const qiankunConfig = api.config.qiankun || {};
+      const masterEntry = (_a = qiankunConfig.slave) == null ? void 0 : _a.masterEntry;
+      const isMasterApp = qiankunConfig.master.enable;
+      const { proxyToMasterEnabled } = await api.applyPlugins({
+        key: "shouldProxyToMaster",
+        type: api.ApplyPluginsType.modify,
+        initialValue: { proxyToMasterEnabled: true, req }
+      }) ?? {};
+      if (masterEntry && proxyToMasterEnabled) {
+        if (isMasterApp) {
+          api.logger.warn("You should not set masterEntry in master app ");
+          return next();
+        }
+        return (0, import_http_proxy_middleware.createProxyMiddleware)((pathname) => pathname !== "/local-dev-server", {
+          target: masterEntry,
+          secure: false,
+          ignorePath: false,
+          followRedirects: false,
+          changeOrigin: true,
+          selfHandleResponse: true,
+          onProxyRes: (0, import_http_proxy_middleware.responseInterceptor)(async (responseBuffer, proxyRes, req2, res2) => {
+            if (proxyRes.statusCode === 302) {
+              const hostname = req2.hostname;
+              const port = process.env.PORT;
+              const goto = `${hostname}:${port}`;
+              const redirectUrl = proxyRes.headers.location.replace(encodeURIComponent(new URL(masterEntry).hostname), encodeURIComponent(goto)) || masterEntry;
+              const redirectMessage = `[@umijs/plugin-qiankun]: redirect to ${redirectUrl}`;
+              api.logger.info(redirectMessage);
+              res2.statusCode = 302;
+              res2.setHeader("location", redirectUrl);
+              return redirectMessage;
+            }
+            const microAppEntry = getCurrentLocalDevServerEntry(api, req2);
+            const originalHtml = responseBuffer.toString("utf8");
+            const html = handleOriginalHtml(api, microAppEntry, originalHtml);
+            return html;
+          }),
+          onError(err, _, res2) {
+            api.logger.error(err);
+            res2.set("content-type", "text/plain; charset=UTF-8");
+            res2.end(`[@umijs/plugin-qiankun] \u4EE3\u7406\u5230 ${masterEntry} \u65F6\u51FA\u9519\u4E86\uFF0C\u8BF7\u5C1D\u8BD5 ${masterEntry} \u662F\u5426\u662F\u53EF\u4EE5\u6B63\u5E38\u8BBF\u95EE\u7684\uFF0C\u7136\u540E\u91CD\u65B0\u542F\u52A8\u9879\u76EE\u8BD5\u8BD5\u3002(\u6CE8\u610F\u5982\u679C\u51FA\u73B0\u8DE8\u57DF\u95EE\u9898\uFF0C\u8BF7\u4FEE\u6539\u672C\u5730 host \uFF0C\u901A\u8FC7\u4E00\u4E2A\u548C\u4E3B\u5E94\u7528\u76F8\u540C\u7684\u4E00\u7EA7\u57DF\u540D\u7684\u57DF\u540D\u6765\u8BBF\u95EE 127.0.0.1)`);
+          }
+        })(req, res, next);
+      }
+      return next();
+    };
+  });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.13",
+  "version": "4.0.16",
   "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.13",
+    "@umijs/bundler-utils": "4.0.16",
     "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.13"
+    "umi": "4.0.16"
   },
   "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>)
+}