@umijs/plugins 4.0.0-canary.20230417.1 → 4.0.0-canary.20230424.1

package/dist/antd.js

@@ -36,8 +36,10 @@ var import_assert = __toESM(require("assert"));
 var import_path = require("path");
 var import_umi = require("umi");
 var import_plugin_utils = require("umi/plugin-utils");
+var import_constants = require("./constants");
 var import_resolveProjectDep = require("./utils/resolveProjectDep");
 var import_withTmpPath = require("./utils/withTmpPath");
+var ANTD_TEMPLATES_DIR = (0, import_path.join)(import_constants.TEMPLATES_DIR, "antd");
 var antd_default = (api) => {
   let pkgPath;
   let antdVersion = "4.0.0";
@@ -176,7 +178,7 @@ var antd_default = (api) => {
         configProvider: withConfigProvider && JSON.stringify(api.config.antd.configProvider),
         appConfig: appComponentAvailable && JSON.stringify(api.config.antd.appConfig)
       },
-      tplPath: (0, import_path.join)(__dirname, "../tpls/antd-runtime.ts.tpl")
+      tplPath: (0, import_plugin_utils.winPath)((0, import_path.join)(ANTD_TEMPLATES_DIR, "runtime.ts.tpl"))
     });
     api.writeTmpFile({
       path: "types.d.ts",
@@ -223,13 +225,17 @@ export type IRuntimeConfig = {
     return [];
   });
   api.addEntryImportsAhead(() => {
+    const isAntd5 = antdVersion.startsWith("5");
     const style = api.config.antd.style || "less";
-    const doNotImportLess = api.config.antd.import && !api.appData.vite || antdVersion.startsWith("5");
-    return doNotImportLess ? [] : [
-      {
+    const imports = [];
+    if (isAntd5) {
+      imports.push({ source: "antd/dist/reset.css" });
+    } else if (!api.config.antd.import || api.appData.vite) {
+      imports.push({
         source: style === "less" ? "antd/dist/antd.less" : "antd/dist/antd.css"
-      }
-    ];
+      });
+    }
+    return imports;
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const TEMPLATES_DIR: string;

package/dist/constants.js

@@ -0,0 +1,30 @@
+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/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  TEMPLATES_DIR: () => TEMPLATES_DIR
+});
+module.exports = __toCommonJS(constants_exports);
+var import_path = require("path");
+var TEMPLATES_DIR = (0, import_path.join)(__dirname, "../templates");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TEMPLATES_DIR
+});

package/dist/layout.js

@@ -52,6 +52,7 @@ var getAllIcons = () => {
     {}
   );
 };
+var ANT_PRO_COMPONENT = "@ant-design/pro-components";
 var layout_default = (api) => {
   let antdVersion = "4.0.0";
   try {
@@ -75,7 +76,7 @@ var layout_default = (api) => {
   });
   const depList = [
     "@alipay/tech-ui",
-    "@ant-design/pro-components",
+    ANT_PRO_COMPONENT,
     "@ant-design/pro-layout"
   ];
   const pkgHasDep = depList.find((dep) => {
@@ -94,9 +95,10 @@ var layout_default = (api) => {
     if (pkgHasDep && api.cwd !== cwd && (0, import_fs.existsSync)((0, import_path.join)(cwd, "node_modules", pkgHasDep, "package.json"))) {
       return (0, import_path.join)(cwd, "node_modules", pkgHasDep);
     }
-    return (0, import_path.dirname)(require.resolve("@ant-design/pro-components/package.json"));
+    return (0, import_path.dirname)(require.resolve(`${ANT_PRO_COMPONENT}/package.json`));
   };
   const pkgPath = (0, import_plugin_utils.winPath)(getPkgPath());
+  const resolvedPkgPath = pkgPath || ANT_PRO_COMPONENT;
   api.modifyAppData((memo) => {
     const version = require(`${pkgPath}/package.json`).version;
     memo.pluginLayout = {
@@ -112,8 +114,11 @@ var layout_default = (api) => {
     }
     return memo;
   });
+  const isFlattedDepsDir = [import_plugin_utils.NpmClientEnum.npm, import_plugin_utils.NpmClientEnum.yarn].includes(
+    api.appData.npmClient
+  );
   api.onGenerateFiles(() => {
-    const PKG_TYPE_REFERENCE = `/// <reference types="${pkgPath || "@ant-design/pro-components"}" />`;
+    const PKG_TYPE_REFERENCE = `/// <reference types="${isFlattedDepsDir ? ANT_PRO_COMPONENT : resolvedPkgPath}" />`;
     const hasInitialStatePlugin = api.config.initialState;
     api.writeTmpFile({
       path: "Layout.tsx",
@@ -124,7 +129,7 @@ import type { IRoute } from 'umi';
 import React, { useMemo } from 'react';
 import {
   ProLayout,
-} from "${pkgPath || "@ant-design/pro-components"}";
+} from "${resolvedPkgPath}";
 import './Layout.less';
 import Logo from './Logo';
 import Exception from './Exception';
@@ -299,7 +304,7 @@ const { formatMessage } = useIntl();
       path: "types.d.ts",
       content: `
     ${PKG_TYPE_REFERENCE}
-    import type { ProLayoutProps, HeaderProps } from "${pkgPath || "@ant-design/pro-components"}";
+    import type { ProLayoutProps, HeaderProps } from "${resolvedPkgPath}";
     ${hasInitialStatePlugin ? `import type InitialStateType from '@@/plugin-initialState/@@initialState';
            type InitDataType = ReturnType<typeof InitialStateType>;
         ` : "type InitDataType = any;"}

package/dist/locale.js

@@ -37,8 +37,10 @@ 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_constants = require("./constants");
 var import_localeUtils = require("./utils/localeUtils");
 var import_withTmpPath = require("./utils/withTmpPath");
+var LOCALE_TEMPLATES_DIR = (0, import_path.join)(import_constants.TEMPLATES_DIR, "locale");
 var packageNormalize = (packageName) => packageName.replace(/[@\/\-.]/g, "_");
 var locale_default = (api) => {
   let hasAntd = false;
@@ -108,7 +110,7 @@ var locale_default = (api) => {
   api.onGenerateFiles(async () => {
     var _a, _b, _c, _d;
     const localeTpl = (0, import_fs.readFileSync)(
-      (0, import_path.join)(__dirname, "../libs/locale/locale.tpl"),
+      (0, import_path.join)(LOCALE_TEMPLATES_DIR, "locale.tpl"),
       "utf-8"
     );
     const resolveKey = api.config.moment2dayjs ? "dayjs" : "moment";
@@ -165,7 +167,7 @@ var locale_default = (api) => {
       path: "locale.tsx"
     });
     const localeExportsTpl = (0, import_fs.readFileSync)(
-      (0, import_path.join)(__dirname, "../libs/locale/localeExports.tpl"),
+      (0, import_path.join)(LOCALE_TEMPLATES_DIR, "localeExports.tpl"),
       "utf-8"
     );
     const localeDirName = "locales";
@@ -197,7 +199,7 @@ var locale_default = (api) => {
       })
     });
     const runtimeTpl = (0, import_fs.readFileSync)(
-      (0, import_path.join)(__dirname, "../libs/locale/runtime.tpl"),
+      (0, import_path.join)(LOCALE_TEMPLATES_DIR, "runtime.tpl"),
       "utf-8"
     );
     api.writeTmpFile({
@@ -207,7 +209,7 @@ var locale_default = (api) => {
       })
     });
     const selectLang = (0, import_fs.readFileSync)(
-      (0, import_path.join)(__dirname, "../libs/locale/SelectLang.tpl"),
+      (0, import_path.join)(LOCALE_TEMPLATES_DIR, "SelectLang.tpl"),
       "utf-8"
     );
     api.writeTmpFile({

package/dist/mf.js

@@ -25,10 +25,12 @@ 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_constants = require("./constants");
 var import_mfUtils = require("./utils/mfUtils");
 var { isEmpty } = import_plugin_utils.lodash;
 var mfSetupPathFileName = "_mf_setup-public-path.js";
 var mfAsyncEntryFileName = "asyncEntry.ts";
+var MF_TEMPLATES_DIR = (0, import_path.join)(import_constants.TEMPLATES_DIR, "mf");
 function mf(api) {
   api.describe({
     key: "mf",
@@ -121,7 +123,7 @@ function mf(api) {
       context: {
         remoteCodeString: (0, import_mfUtils.toRemotesCodeString)(remotes)
       },
-      tplPath: (0, import_path.join)(__dirname, "../tpls/mf-runtime.ts.tpl")
+      tplPath: (0, import_plugin_utils.winPath)((0, import_path.join)(MF_TEMPLATES_DIR, "runtime.ts.tpl"))
     });
     if (api.env === "development" && api.config.mfsu) {
       return;

package/dist/qiankun/slave.js

@@ -263,15 +263,24 @@ export { MicroAppLink } from './MicroAppLink';
           key: "onLocalProxyStart",
           type: api.ApplyPluginsType.event
         });
+        const modifyLocalProxyOpts = await api.applyPlugins({
+          key: "modifyLocalProxyOpts",
+          type: api.ApplyPluginsType.modify,
+          initialValue: {}
+        }) ?? {};
+        const localProxyOpts = {
+          target: masterEntry,
+          secure: false,
+          ignorePath: false,
+          followRedirects: false,
+          changeOrigin: true,
+          selfHandleResponse: true,
+          ...modifyLocalProxyOpts
+        };
         return (0, import_http_proxy_middleware.createProxyMiddleware)(
           (pathname) => pathname !== "/local-dev-server",
           {
-            target: masterEntry,
-            secure: false,
-            ignorePath: false,
-            followRedirects: false,
-            changeOrigin: true,
-            selfHandleResponse: true,
+            ...localProxyOpts,
             onProxyReq(proxyReq) {
               api.applyPlugins({
                 key: "onLocalProxyReq",
@@ -284,13 +293,18 @@ export { MicroAppLink } from './MicroAppLink';
               async (responseBuffer, proxyRes, req2, res2) => {
                 var _a2;
                 if (proxyRes.statusCode === 302) {
-                  const hostname = req2.hostname;
+                  const { ignorePath = false } = localProxyOpts;
+                  const { hostname, url, protocol } = req2;
                   const port = process.env.PORT || ((_a2 = api.appData) == null ? void 0 : _a2.port);
-                  const goto = `${hostname}:${port}`;
-                  const redirectUrl = proxyRes.headers.location.replace(
-                    encodeURIComponent(new URL(masterEntry).hostname),
-                    encodeURIComponent(goto)
-                  ) || masterEntry;
+                  const gotoBasePart = `${protocol}://${hostname}:${port}${ignorePath && url ? url : "/"}`;
+                  const fromBasePart = masterEntry;
+                  const locationUrl = proxyRes.headers.location || "";
+                  const [originAndPath, searchParams] = locationUrl.split("?");
+                  const searchHandled = searchParams ? `?${searchParams.replace(
+                    encodeURIComponent(fromBasePart),
+                    encodeURIComponent(gotoBasePart)
+                  )}` : "";
+                  const redirectUrl = `${originAndPath}${searchHandled}`;
                   const redirectMessage = `[@umijs/plugin-qiankun]: redirect to ${redirectUrl}`;
                   api.logger.info(redirectMessage);
                   res2.statusCode = 302;

package/libs/qiankun/master/MicroApp.tsx

@@ -8,7 +8,7 @@ import noop from 'lodash/noop';
 import {
   FrameworkConfiguration,
   loadMicroApp,
-  MicroApp as MicroAppType,
+  MicroApp as MicroAppTypeDefinition,
   prefetchApps,
 } from 'qiankun';
 import React, {
@@ -37,6 +37,12 @@ type MemoryHistory = {
   type?: 'memory';
 } & any;
 
+type MicroAppType = MicroAppTypeDefinition & {
+  _unmounting?: boolean;
+  _updatingPromise?: Promise<void>;
+  _updatingTimestamp?: number;
+};
+
 export type Props = {
   name: string;
   settings?: FrameworkConfiguration;
@@ -59,10 +65,8 @@ export type Props = {
   className?: string;
 } & Record<string, any>;
 
-function unmountMicroApp(microApp?: MicroAppType) {
-  if (microApp) {
-    microApp.mountPromise.then(() => microApp.unmount());
-  }
+function unmountMicroApp(microApp: MicroAppType) {
+  microApp.mountPromise.then(() => microApp.unmount());
 }
 
 function useDeepCompare<T>(value: T): T {
@@ -98,7 +102,6 @@ export const MicroApp = forwardRef(
       ...propsFromParams
     } = componentProps;
 
-    // ref: https://github.com/umijs/plugins/pull/866
     // name 跟 appNameKeyAlias 这两个 key 同时存在时，优先使用 name，避免对存量应用造成 breaking change。
     // 比如 appNameKeyAlias 配置是 id，但之前 id 正好作为普通的 props 使用过，如 <MicroApp name="app" id="123" />
     // 正常场景会优先匹配 appNameKeyAlias 对应的字段，fallback 到 name，避免对已经使用 <MicroApp name="app" /> 的应用造成影响
@@ -133,8 +136,6 @@ export const MicroApp = forwardRef(
 
     const containerRef = useRef<HTMLDivElement>();
     const microAppRef = useRef<MicroAppType>();
-    const updatingPromise = useRef<Promise<any>>();
-    const updatingTimestamp = useRef(Date.now());
 
     useImperativeHandle(componentRef, () => microAppRef.current);
 
@@ -143,8 +144,8 @@ export const MicroApp = forwardRef(
       if (!appConfig) {
         setComponentError(
           new Error(
-            `[@umijs/plugin-qiankun]: Can not find the configuration of ${name} app!`,
-          ),
+            `[@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;
@@ -223,36 +224,39 @@ export const MicroApp = forwardRef(
         },
       );
 
-      return () => unmountMicroApp(microAppRef.current, updatingPromise.current);
+      return () => {
+        const microApp = microAppRef.current;
+        if (microApp) {
+          // 微应用 unmount 是异步的，中间的流转状态不能确定，所有需要一个标志位来确保 unmount 开始之后不会再触发 update
+          microApp._unmounting = true;
+          unmountMicroApp(microApp);
+        }
+      };
     }, [name]);
 
     useEffect(() => {
       const microApp = microAppRef.current;
       if (microApp) {
-        if (!updatingPromise.current) {
+        if (!microApp._updatingPromise) {
           // 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后
-          updatingPromise.current = microApp.mountPromise;
+          microApp._updatingPromise = microApp.mountPromise;
+          microApp._updatingTimestamp = Date.now();
         } else {
           // 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成
-          updatingPromise.current = updatingPromise.current.then(() => {
+          microApp._updatingPromise = microApp._updatingPromise.then(() => {
             const canUpdate = (microApp?: MicroAppType) =>
-              microApp?.update && microApp.getStatus() === 'MOUNTED';
+              microApp?.update && microApp.getStatus() === 'MOUNTED' && !microApp._unmounting;
             if (canUpdate(microApp)) {
               const props = {
                 ...propsFromConfig,
                 ...stateForSlave,
                 ...propsFromParams,
-                __globalRoutesInfo: {
-                  appNameKeyAlias,
-                  masterHistoryType,
-                  base: globalSettings.base,
-                  microAppRoutes: globalSettings.microAppRoutes,
-                },
                 setLoading,
               };
 
               if (process.env.NODE_ENV === 'development') {
-                if (Date.now() - updatingTimestamp.current < 200) {
+                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.`,
                   );
@@ -262,7 +266,7 @@ export const MicroApp = forwardRef(
                   `[@umijs/plugin-qiankun] MicroApp ${name} is updating with props: `,
                   props,
                 );
-                updatingTimestamp.current = Date.now();
+                microApp._updatingTimestamp = Date.now();
               }
 
               // 返回 microApp.update 形成链式调用

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.0-canary.20230417.1",
+  "version": "4.0.0-canary.20230424.1",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -14,7 +14,7 @@
   "files": [
     "dist",
     "libs",
-    "tpls"
+    "templates"
   ],
   "dependencies": {
     "@ahooksjs/use-request": "^2.0.0",
@@ -42,12 +42,12 @@
     "styled-components": "6.0.0-beta.9",
     "tslib": "^2",
     "warning": "^4.0.3",
-    "@umijs/bundler-utils": "4.0.0-canary.20230417.1",
+    "@umijs/bundler-utils": "4.0.0-canary.20230424.1",
     "@umijs/valtio": "1.0.3"
   },
   "devDependencies": {
     "antd": "^4.24.1",
-    "umi": "4.0.0-canary.20230417.1"
+    "umi": "4.0.0-canary.20230424.1"
   },
   "publishConfig": {
     "access": "public"

package/{tpls/antd-runtime.ts.tpl → templates/antd/runtime.ts.tpl}

@@ -13,30 +13,32 @@ import {
 import { ApplyPluginsType } from 'umi';
 import { getPluginManager } from '../core/plugin';
 
+let cacheAntdConfig = null;
+
+const getAntdConfig = () => {
+  if(!cacheAntdConfig){
+    cacheAntdConfig = getPluginManager().applyPlugins({
+      key: 'antd',
+      type: ApplyPluginsType.modify,
+      initialValue: {
+  {{#configProvider}}
+        ...{{{configProvider}}},
+  {{/configProvider}}
+  {{#appConfig}}
+        appConfig: {{{appConfig}}},
+  {{/appConfig}}
+      },
+    });
+  }
+  return cacheAntdConfig;
+}
+
 export function rootContainer(rawContainer) {
   const {
-    appConfig: finalAppConfig = {},
+    appConfig,
     ...finalConfigProvider
-  } = getPluginManager().applyPlugins({
-    key: 'antd',
-    type: ApplyPluginsType.modify,
-    initialValue: {
-{{#configProvider}}
-      ...{{{configProvider}}},
-{{/configProvider}}
-{{#appConfig}}
-      appConfig: {{{appConfig}}},
-{{/appConfig}}
-    },
-  });
-
+  } = getAntdConfig();
   let container = rawContainer;
-
-{{#appConfig}}
-  // The App component should be under ConfigProvider
-  container = <App {...finalAppConfig}>{container}</App>;
-{{/appConfig}}
-
 {{#configProvider}}
   if (finalConfigProvider.prefixCls) {
     Modal.config({
@@ -61,3 +63,14 @@ export function rootContainer(rawContainer) {
 
   return container;
 }
+
+{{#appConfig}}
+// The App component should be under ConfigProvider
+// plugin-locale has other ConfigProvider
+export function innerProvider(container: any) {
+  const {
+    appConfig: finalAppConfig = {},
+  } = getAntdConfig();
+  return <App {...finalAppConfig}>{container}</App>;
+}
+{{/appConfig}}