@umijs/plugins 4.0.88 → 4.0.90

package/dist/antd.js

@@ -61,22 +61,61 @@ var antd_default = (api) => {
   api.describe({
     config: {
       schema({ zod }) {
-        return zod.object({
-          configProvider: zod.record(zod.any()),
-          // themes
+        const commonSchema = {
           dark: zod.boolean(),
           compact: zod.boolean(),
           // babel-plugin-import
           import: zod.boolean(),
           // less or css, default less
-          style: zod.enum(["less", "css"]).describe("less or css, default less"),
-          theme: zod.record(zod.any()),
-          // Only antd@5.1.0 is supported
-          appConfig: zod.record(zod.any()).describe("Only antd@5.1.0 is supported"),
-          // DatePicker & Calendar use moment version
-          momentPicker: zod.boolean().describe("Only antd@5.x is supported"),
-          styleProvider: zod.record(zod.any())
-        }).deepPartial();
+          style: zod.enum(["less", "css"]).describe("less or css, default less")
+        };
+        const createZodRecordWithSpecifiedPartial = (partial) => {
+          const keys = Object.keys(partial);
+          return zod.union([
+            zod.object(partial),
+            zod.record(zod.any()).refine((obj) => {
+              return !keys.some((key) => key in obj);
+            })
+          ]);
+        };
+        const createV5Schema = () => {
+          const componentNameSchema = zod.string().refine(
+            (value) => {
+              const firstLetter = value.slice(0, 1);
+              return firstLetter === firstLetter.toUpperCase();
+            },
+            {
+              message: "theme.components.[componentName] needs to be in PascalCase, e.g. theme.components.Button"
+            }
+          );
+          const themeSchema = createZodRecordWithSpecifiedPartial({
+            components: zod.record(componentNameSchema, zod.record(zod.any()))
+          });
+          const configProvider = createZodRecordWithSpecifiedPartial({
+            theme: themeSchema
+          });
+          return zod.object({
+            ...commonSchema,
+            theme: themeSchema.describe("Shortcut of `configProvider.theme`"),
+            appConfig: zod.record(zod.any()).describe("Only >= antd@5.1.0 is supported"),
+            momentPicker: zod.boolean().describe("DatePicker & Calendar use moment version"),
+            styleProvider: zod.record(zod.any()),
+            configProvider
+          }).deepPartial();
+        };
+        const createV4Schema = () => {
+          return zod.object({
+            ...commonSchema,
+            configProvider: zod.record(zod.any())
+          }).deepPartial();
+        };
+        if (isV5) {
+          return createV5Schema();
+        }
+        if (isV4) {
+          return createV4Schema();
+        }
+        return zod.object({});
       }
     },
     enableBy({ userConfig }) {
@@ -158,6 +197,9 @@ var antd_default = (api) => {
         );
       }
     }
+    if (antd.dark || antd.compact) {
+      antd.configProvider ?? (antd.configProvider = {});
+    }
     return memo;
   });
   api.chainWebpack((memo) => {
@@ -189,6 +231,10 @@ var antd_default = (api) => {
     }
     return [];
   });
+  const lodashPkg = (0, import_path.dirname)(require.resolve("lodash/package.json"));
+  const lodashPath = {
+    merge: (0, import_plugin_utils.winPath)((0, import_path.join)(lodashPkg, "merge"))
+  };
   api.onGenerateFiles(() => {
     var _a;
     const withConfigProvider = !!api.config.antd.configProvider;
@@ -218,14 +264,21 @@ var antd_default = (api) => {
         };
       }
     }
+    const configProvider = withConfigProvider && JSON.stringify(api.config.antd.configProvider);
+    const appConfig = appComponentAvailable && JSON.stringify(api.config.antd.appConfig);
+    const enableV5ThemeAlgorithm = isV5 && (userInputCompact || userInputDark) ? { compact: userInputCompact, dark: userInputDark } : false;
+    const hasConfigProvider = configProvider || enableV5ThemeAlgorithm;
+    const antdConfigSetter = isV5 && hasConfigProvider;
     api.writeTmpFile({
       path: `runtime.tsx`,
       context: {
-        configProvider: withConfigProvider && JSON.stringify(api.config.antd.configProvider),
-        appConfig: appComponentAvailable && JSON.stringify(api.config.antd.appConfig),
+        configProvider,
+        appConfig,
         styleProvider: styleProviderConfig,
         // 是否启用了 v5 的 theme algorithm
-        enableV5ThemeAlgorithm: isV5 && (userInputCompact || userInputDark) ? { compact: userInputCompact, dark: userInputDark } : false,
+        enableV5ThemeAlgorithm,
+        antdConfigSetter,
+        lodashPath,
         /**
          * 是否重构了全局静态配置。 重构后需要在运行时将全局静态配置传入到 ConfigProvider 中。
          * 实际上 4.13.0 重构后有一个 bug，真正的 warn 出现在 4.13.1，并且 4.13.1 修复了这个 bug。
@@ -253,6 +306,34 @@ export type IRuntimeConfig = {
 };
       `
     });
+    if (antdConfigSetter) {
+      api.writeTmpFile({
+        path: "index.tsx",
+        content: `import React from 'react';
+import { AntdConfigContext, AntdConfigContextSetter } from './context';
+
+export function useAntdConfig() {
+  return React.useContext(AntdConfigContext);
+}
+
+export function useAntdConfigSetter() {
+  return React.useContext(AntdConfigContextSetter);
+}`
+      });
+      api.writeTmpFile({
+        path: "context.tsx",
+        content: `import React from 'react';
+import type { ConfigProviderProps } from 'antd/es/config-provider';
+
+export const AntdConfigContext = React.createContext<ConfigProviderProps>(null!);
+export const AntdConfigContextSetter = React.createContext<React.Dispatch<React.SetStateAction<ConfigProviderProps>>>(
+  () => {
+    console.error(\`The 'useAntdConfigSetter()' method depends on the antd 'ConfigProvider', requires one of 'antd.configProvider' / 'antd.dark' / 'antd.compact' to be enabled.\`);
+  }
+);
+`
+      });
+    }
   });
   api.addRuntimePlugin(() => {
     if (api.config.antd.styleProvider || api.config.antd.configProvider || appComponentAvailable && api.config.antd.appConfig) {

package/dist/react-query.js

@@ -87,6 +87,7 @@ var react_query_default = (api) => {
     api.writeTmpFile({
       path: "runtime.tsx",
       content: enableQueryClient ? `
+import React from 'react';
 import { defaultContext, QueryClient, QueryClientProvider } from '${pkgPath}';
 import { ReactQueryDevtools } from '${devtoolPkgPath}';
 ${reactQueryRuntimeCode}

package/dist/styled-components.js

@@ -34,6 +34,7 @@ __export(styled_components_exports, {
 module.exports = __toCommonJS(styled_components_exports);
 var import_utils = require("@umijs/utils");
 var import_path = require("path");
+var import_resolveProjectDep = require("./utils/resolveProjectDep");
 var import_withTmpPath = require("./utils/withTmpPath");
 var styled_components_default = (api) => {
   api.describe({
@@ -49,6 +50,9 @@ var styled_components_default = (api) => {
   });
   api.modifyConfig((memo) => {
     var _a, _b;
+    if (api.userConfig.mako || process.env.OKAM) {
+      return memo;
+    }
     const isProd = api.env === "production";
     const pluginConfig = {
       // https://github.com/styled-components/babel-plugin-styled-components/blob/f8e9fb480d1645be8be797d73e49686bdf98975b/src/utils/options.js#L11
@@ -77,7 +81,20 @@ var styled_components_default = (api) => {
   api.addRuntimePluginKey(() => {
     return ["styledComponents"];
   });
-  const libPath = (0, import_path.dirname)(require.resolve("styled-components/package"));
+  const SC_NAME = `styled-components`;
+  let libPath;
+  try {
+    libPath = (0, import_resolveProjectDep.resolveProjectDep)({
+      pkg: api.pkg,
+      cwd: api.cwd,
+      dep: SC_NAME
+    }) || (0, import_path.dirname)(require.resolve(`${SC_NAME}/package.json`));
+  } catch (e) {
+  }
+  api.modifyConfig((memo) => {
+    memo.alias[SC_NAME] = libPath;
+    return memo;
+  });
   api.onGenerateFiles(() => {
     var _a, _b, _c;
     api.writeTmpFile({
@@ -103,6 +120,7 @@ export { styled, ThemeProvider, createGlobalStyle, css, keyframes, StyleSheetMan
     api.writeTmpFile({
       path: "runtime.tsx",
       content: `
+import React from 'react';
 ${hasProvider ? `import { StyleSheetManager } from '${(0, import_utils.winPath)(libPath)}';` : ``}
 
 ${styledComponentsRuntimeCode}

package/libs/qiankun/master/masterRuntimePlugin.tsx

@@ -109,7 +109,7 @@ export async function render(oldRender: typeof noop) {
   microAppRuntimeRoutes = routes;
 
   // 主应用相关的配置注册完毕后即可开启渲染
-  oldRender();
+  const renderData = oldRender();
 
   // 未使用 base 配置的可以认为是路由关联或者使用标签装载的应用
   const loadableApps = apps.filter((app) => !app.base);
@@ -133,6 +133,8 @@ export async function render(oldRender: typeof noop) {
       '[plugins/qiankun] 检测到还在使用旧版配置，该配置已移除，请尽快升级到最新配置方式以获得更好的开发体验，详见 https://umijs.org/plugins/plugin-qiankun#%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97',
     );
   }
+
+  return renderData;
 }
 
 export function patchClientRoutes({ routes }: { routes: any[] }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.88",
+  "version": "4.0.90",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -42,15 +42,15 @@
     "react-intl": "3.12.1",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
-    "styled-components": "6.1.0",
+    "styled-components": "6.1.1",
     "tslib": "^2",
     "warning": "^4.0.3",
-    "@umijs/bundler-utils": "4.0.88",
+    "@umijs/bundler-utils": "4.0.90",
     "@umijs/valtio": "1.0.4"
   },
   "devDependencies": {
     "antd": "^4.24.1",
-    "umi": "4.0.88"
+    "umi": "4.0.90"
   },
   "publishConfig": {
     "access": "public"

package/templates/antd/runtime.ts.tpl

@@ -23,6 +23,10 @@ import {
 } from '{{{styleProvider.cssinjs}}}';
 {{/styleProvider}}
 import { getPluginManager } from '../core/plugin';
+{{#antdConfigSetter}}
+import { AntdConfigContext, AntdConfigContextSetter } from './context';
+import merge from '{{{lodashPath.merge}}}'
+{{/antdConfigSetter}}
 
 let cacheAntdConfig = null;
 
@@ -44,73 +48,80 @@ const getAntdConfig = () => {
   return cacheAntdConfig;
 }
 
-export function rootContainer(rawContainer) {
-  const {
-    appConfig,
-    ...finalConfigProvider
-  } = getAntdConfig();
-  let container = rawContainer;
+function AntdProvider({ children }) {
+  let container = children;
+
+  const [antdConfig, _setAntdConfig] = React.useState(() => {
+    const {
+      appConfig: _,
+      ...finalConfigProvider
+    } = getAntdConfig();
+    {{#enableV5ThemeAlgorithm}}
+      finalConfigProvider.theme ??= {};
+      finalConfigProvider.theme.algorithm ??= [];
+      if (!Array.isArray(finalConfigProvider.theme.algorithm)) {
+        finalConfigProvider.theme.algorithm = [finalConfigProvider.theme.algorithm];
+      }
+      const algorithm = finalConfigProvider.theme.algorithm;
+      {{#enableV5ThemeAlgorithm.compact}}
+      if (!algorithm.includes(theme.compactAlgorithm)) {
+        algorithm.push(theme.compactAlgorithm);
+      }
+      {{/enableV5ThemeAlgorithm.compact}}
+      {{#enableV5ThemeAlgorithm.dark}}
+      if (!algorithm.includes(theme.darkAlgorithm)) {
+        algorithm.push(theme.darkAlgorithm);
+      }
+      {{/enableV5ThemeAlgorithm.dark}}
+    {{/enableV5ThemeAlgorithm}}
+    return finalConfigProvider
+  });
+  const setAntdConfig: typeof _setAntdConfig = (newConfig) => {
+    _setAntdConfig(prev => {
+      return merge({}, prev, typeof newConfig === 'function' ? newConfig(prev) : newConfig)
+    })
+  }
 
 {{#configProvider}}
   {{^disableInternalStatic}}
-  if (finalConfigProvider.prefixCls) {
+  if (antdConfig.prefixCls) {
     Modal.config({
-      rootPrefixCls: finalConfigProvider.prefixCls
+      rootPrefixCls: antdConfig.prefixCls
     });
     message.config({
-      prefixCls: `${finalConfigProvider.prefixCls}-message`
+      prefixCls: `${antdConfig.prefixCls}-message`
     });
     notification.config({
-      prefixCls: `${finalConfigProvider.prefixCls}-notification`
+      prefixCls: `${antdConfig.prefixCls}-notification`
     });
   }
   {{/disableInternalStatic}}
 
   {{#disableInternalStatic}}
-  if (finalConfigProvider.prefixCls) {
+  if (antdConfig.prefixCls) {
     ConfigProvider.config({
-      prefixCls: finalConfigProvider.prefixCls,
+      prefixCls: antdConfig.prefixCls,
     });
   };
   {{/disableInternalStatic}}
 
-  if (finalConfigProvider.iconPrefixCls) {
+  if (antdConfig.iconPrefixCls) {
     // Icons in message need to set iconPrefixCls via ConfigProvider.config()
     ConfigProvider.config({
-      iconPrefixCls: finalConfigProvider.iconPrefixCls,
+      iconPrefixCls: antdConfig.iconPrefixCls,
     });
   };
 
-  if (finalConfigProvider.theme) {
+  if (antdConfig.theme) {
     // Pass config theme to static method
     ConfigProvider.config({
-      theme: finalConfigProvider.theme,
+      theme: antdConfig.theme,
     });
   }
 
-  container = <ConfigProvider {...finalConfigProvider}>{container}</ConfigProvider>;
+  container = <ConfigProvider {...antdConfig}>{container}</ConfigProvider>;
 {{/configProvider}}
 
-{{#enableV5ThemeAlgorithm}}
-  // Add token algorithm for antd5 only
-  container = (
-    <ConfigProvider
-      theme={({
-        algorithm: [
-          {{#enableV5ThemeAlgorithm.compact}}
-          theme.compactAlgorithm,
-          {{/enableV5ThemeAlgorithm.compact}}
-          {{#enableV5ThemeAlgorithm.dark}}
-          theme.darkAlgorithm,
-          {{/enableV5ThemeAlgorithm.dark}}
-        ],
-      })}
-    >
-      {container}
-    </ConfigProvider>
-  );
-{{/enableV5ThemeAlgorithm}}
-
 {{#styleProvider}}
   container = (
     <StyleProvider
@@ -126,9 +137,27 @@ export function rootContainer(rawContainer) {
   );
 {{/styleProvider}}
 
+{{#antdConfigSetter}}
+  container = (
+    <AntdConfigContextSetter.Provider value={setAntdConfig}>
+      <AntdConfigContext.Provider value={antdConfig}>
+        {container}
+      </AntdConfigContext.Provider>
+    </AntdConfigContextSetter.Provider>
+  )
+{{/antdConfigSetter}}
+
   return container;
 }
 
+export function rootContainer(children) {
+  return (
+    <AntdProvider>
+      {children}
+    </AntdProvider>
+  );
+}
+
 {{#appConfig}}
 // The App component should be under ConfigProvider
 // plugin-locale has other ConfigProvider