From fcb73590b6e06ffd90c8b17d8a5a70189796381e Mon Sep 17 00:00:00 2001 From: wuxh Date: Thu, 27 Jul 2023 00:33:46 +0800 Subject: [PATCH] feat(antd-plugin): support for antd@5 token algorithm in configuration ref: https://github.com/umijs/umi/issues/11418#issuecomment-1635755725 --- examples/with-antd-5/.umirc.ts | 2 + examples/with-antd-5/pages/index.tsx | 31 +++++--- packages/plugins/src/antd.ts | 76 ++++++++++--------- .../plugins/templates/antd/runtime.ts.tpl | 26 ++++++- 4 files changed, 84 insertions(+), 51 deletions(-) diff --git a/examples/with-antd-5/.umirc.ts b/examples/with-antd-5/.umirc.ts index d4eb3d4e2153..e44d040dc177 100644 --- a/examples/with-antd-5/.umirc.ts +++ b/examples/with-antd-5/.umirc.ts @@ -11,6 +11,8 @@ export default { colorPrimary: '#1DA57A', }, }, + // dark: true, + compact: true, /** * antd@5.1.0 ~ 5.2.3 仅支持 appConfig: {}, 来启用 组件; * antd@5.3.0 及以上才支持 appConfig: { // ... } 来添加更多 App 配置项; diff --git a/examples/with-antd-5/pages/index.tsx b/examples/with-antd-5/pages/index.tsx index d710583b4e13..7534eeba7293 100644 --- a/examples/with-antd-5/pages/index.tsx +++ b/examples/with-antd-5/pages/index.tsx @@ -1,4 +1,4 @@ -import { App, Button, Space, version } from 'antd'; +import { App, Button, Space, theme, version } from 'antd'; import React, { useState } from 'react'; import { getLocale, setLocale, useIntl } from 'umi'; @@ -7,6 +7,8 @@ export default function Page() { // 若要使用 useApp hook，须先在 antd 插件中配置 appConfig const { message, modal } = App.useApp(); const locale = getLocale(); + const { token } = theme.useToken(); + const showModal = () => { modal.confirm({ title: 'Hai', @@ -25,23 +27,28 @@ export default function Page() { }; return ( - <> +

with antd@{version}

+ locale:{locale} + - locale:{locale} - - +
); } diff --git a/packages/plugins/src/antd.ts b/packages/plugins/src/antd.ts index 3db71676f579..a296131b4885 100644 --- a/packages/plugins/src/antd.ts +++ b/packages/plugins/src/antd.ts @@ -24,6 +24,7 @@ export default (api: IApi) => { } catch (e) {} const isV5 = antdVersion.startsWith('5'); + const isV4 = antdVersion.startsWith('4'); // App components exist only from 5.1.0 onwards const appComponentAvailable = semver.gte(antdVersion, '5.1.0'); const appConfigAvailable = semver.gte(antdVersion, '5.3.0'); @@ -97,7 +98,7 @@ export default (api: IApi) => { memo.alias.antd = pkgPath; // antd 5 里面没有变量了，less 跑不起来。注入一份变量至少能跑起来 - if (antdVersion.startsWith('5')) { + if (isV5) { const theme = require('@ant-design/antd-theme-variable'); memo.theme = { ...theme, @@ -114,27 +115,25 @@ export default (api: IApi) => { } } - // dark mode & compact mode - if (antd.dark || antd.compact) { - const { getThemeVariables } = require('antd/dist/theme'); + // 只有 antd@4 才需要将 compact 和 dark 传入 less 变量 + if (isV4) { + if (antd.dark || antd.compact) { + const { getThemeVariables } = require('antd/dist/theme'); + memo.theme = { + ...getThemeVariables(antd), + ...memo.theme, + }; + } + memo.theme = { - ...getThemeVariables(antd), + 'root-entry-name': 'default', ...memo.theme, }; } - // antd theme - memo.theme = { - 'root-entry-name': 'default', - ...memo.theme, - }; - // allow use `antd.theme` as the shortcut of `antd.configProvider.theme` if (antd.theme) { - assert( - antdVersion.startsWith('5'), - `antd.theme is only valid when antd is 5`, - ); + assert(isV5, `antd.theme is only valid when antd is 5`); antd.configProvider ??= {}; // priority: antd.theme > antd.configProvider.theme antd.configProvider.theme = deepmerge( @@ -178,26 +177,23 @@ export default (api: IApi) => { // babel-plugin-import api.addExtraBabelPlugins(() => { - // only enable style for non-antd@5 - const style = isV5 ? false : api.config.antd.style || 'less'; - - return api.config.antd.import && !api.appData.vite - ? [ - [ - require.resolve('babel-plugin-import'), - { - libraryName: 'antd', - libraryDirectory: 'es', - ...(style - ? { - style: style === 'less' || 'css', - } - : {}), - }, - 'antd', - ], - ] - : []; + const style = api.config.antd.style || 'less'; + + if (api.config.antd.import && !api.appData.vite) { + return [ + [ + require.resolve('babel-plugin-import'), + { + libraryName: 'antd', + libraryDirectory: 'es', + ...(isV5 ? {} : { style: style === 'less' || 'css' }), + }, + 'antd', + ], + ]; + } + + return []; }); // antd config provider & app component @@ -205,6 +201,8 @@ export default (api: IApi) => { const withConfigProvider = !!api.config.antd.configProvider; const withAppConfig = appConfigAvailable && !!api.config.antd.appConfig; const styleProvider = api.config.antd.styleProvider; + const userInputCompact = api.config.antd.compact; + const userInputDark = api.config.antd.dark; // Hack StyleProvider @@ -246,6 +244,11 @@ export default (api: IApi) => { appConfig: appComponentAvailable && JSON.stringify(api.config.antd.appConfig), styleProvider: styleProviderConfig, + // 是否启用了 v5 的 theme algorithm + enableV5ThemeAlgorithm: + isV5 && (userInputCompact || userInputDark) + ? { compact: userInputCompact, dark: userInputDark } + : false, }, tplPath: winPath(join(ANTD_TEMPLATES_DIR, 'runtime.ts.tpl')), }); @@ -301,13 +304,12 @@ export type IRuntimeConfig = { }); api.addEntryImportsAhead(() => { - const isAntd5 = antdVersion.startsWith('5'); const style = api.config.antd.style || 'less'; const imports: Awaited< ReturnType[0]['fn']> > = []; - if (isAntd5) { + if (isV5) { // import antd@5 reset style imports.push({ source: 'antd/dist/reset.css' }); } else if (!api.config.antd.import || api.appData.vite) { diff --git a/packages/plugins/templates/antd/runtime.ts.tpl b/packages/plugins/templates/antd/runtime.ts.tpl index 1c87202bf673..5fcfaf3006a8 100644 --- a/packages/plugins/templates/antd/runtime.ts.tpl +++ b/packages/plugins/templates/antd/runtime.ts.tpl @@ -1,14 +1,15 @@ import React from 'react'; import { Modal, -{{#configProvider}} ConfigProvider, -{{/configProvider}} {{#appConfig}} App, {{/appConfig}} message, notification, +{{#enableV5ThemeAlgorithm}} + theme, +{{/enableV5ThemeAlgorithm}} } from 'antd'; import { ApplyPluginsType } from 'umi'; {{#styleProvider}} @@ -47,6 +48,7 @@ export function rootContainer(rawContainer) { ...finalConfigProvider } = getAntdConfig(); let container = rawContainer; + {{#configProvider}} if (finalConfigProvider.prefixCls) { Modal.config({ @@ -77,6 +79,26 @@ export function rootContainer(rawContainer) { container = {container}; {{/configProvider}} +{{#enableV5ThemeAlgorithm}} + // Add token algorithm for antd5 only + container = ( + + {container} + + ); +{{/enableV5ThemeAlgorithm}} + {{#styleProvider}} container = (