@umijs/plugins 4.0.88 → 4.0.89

package/dist/antd.js

@@ -158,6 +158,9 @@ var antd_default = (api) => {
         );
       }
     }
+    if (antd.dark || antd.compact) {
+      antd.configProvider ?? (antd.configProvider = {});
+    }
     return memo;
   });
   api.chainWebpack((memo) => {
@@ -189,6 +192,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 +225,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 +267,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/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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.88",
+  "version": "4.0.89",
   "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.89",
     "@umijs/valtio": "1.0.4"
   },
   "devDependencies": {
     "antd": "^4.24.1",
-    "umi": "4.0.88"
+    "umi": "4.0.89"
   },
   "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