diff --git a/examples/with-antd-5/.umirc.ts b/examples/with-antd-5/.umirc.ts index 1318336c5f25..d4eb3d4e2153 100644 --- a/examples/with-antd-5/.umirc.ts +++ b/examples/with-antd-5/.umirc.ts @@ -1,5 +1,9 @@ export default { - plugins: ['@umijs/plugins/dist/antd'], + plugins: ['@umijs/plugins/dist/antd', '@umijs/plugins/dist/locale'], + locale: { + title: true, + default: 'zh-CN', + }, antd: { // valid for antd5.0 only theme: { diff --git a/examples/with-antd-5/locales/en-US.js b/examples/with-antd-5/locales/en-US.js new file mode 100644 index 000000000000..243ce21ccd19 --- /dev/null +++ b/examples/with-antd-5/locales/en-US.js @@ -0,0 +1,3 @@ +export default { + HELLO: 'Hello', +}; diff --git a/examples/with-antd-5/locales/zh-CN.js b/examples/with-antd-5/locales/zh-CN.js new file mode 100644 index 000000000000..27ba09b02ac6 --- /dev/null +++ b/examples/with-antd-5/locales/zh-CN.js @@ -0,0 +1,3 @@ +export default { + HELLO: '你好', +}; diff --git a/examples/with-antd-5/pages/index.tsx b/examples/with-antd-5/pages/index.tsx index 94dc9ea510d9..d710583b4e13 100644 --- a/examples/with-antd-5/pages/index.tsx +++ b/examples/with-antd-5/pages/index.tsx @@ -1,10 +1,12 @@ import { App, Button, Space, version } from 'antd'; -import React from 'react'; +import React, { useState } from 'react'; +import { getLocale, setLocale, useIntl } from 'umi'; export default function Page() { + const [isZh, setIsZh] = useState(true); // 若要使用 useApp hook,须先在 antd 插件中配置 appConfig const { message, modal } = App.useApp(); - + const locale = getLocale(); const showModal = () => { modal.confirm({ title: 'Hai', @@ -12,7 +14,10 @@ export default function Page() { maskClosable: true, }); }; - + const intl = useIntl(); + const msg = intl.formatMessage({ + id: 'HELLO', + }); const sayHai = () => { // .umirc.ts 中配置了 appConfig.message.maxCount = 3 // app.txt 中配置了 appConfig.message.duration = 5 @@ -28,6 +33,15 @@ export default function Page() { Open Modal + locale:{locale} + ); } diff --git a/packages/plugins/package.json b/packages/plugins/package.json index 57202d060392..fdd84721c70d 100644 --- a/packages/plugins/package.json +++ b/packages/plugins/package.json @@ -14,7 +14,7 @@ "files": [ "dist", "libs", - "tpls" + "templates" ], "scripts": { "build": "umi-scripts father build", diff --git a/packages/plugins/src/antd.ts b/packages/plugins/src/antd.ts index bcd1ceb06438..30caa424d67c 100644 --- a/packages/plugins/src/antd.ts +++ b/packages/plugins/src/antd.ts @@ -1,10 +1,13 @@ import assert from 'assert'; import { dirname, join } from 'path'; import { IApi, RUNTIME_TYPE_FILE_NAME } from 'umi'; -import { deepmerge, Mustache, semver } from 'umi/plugin-utils'; +import { deepmerge, Mustache, semver, winPath } from 'umi/plugin-utils'; +import { TEMPLATES_DIR } from './constants'; import { resolveProjectDep } from './utils/resolveProjectDep'; import { withTmpPath } from './utils/withTmpPath'; +const ANTD_TEMPLATES_DIR = join(TEMPLATES_DIR, 'antd'); + export default (api: IApi) => { let pkgPath: string; let antdVersion = '4.0.0'; @@ -196,7 +199,7 @@ export default (api: IApi) => { appConfig: appComponentAvailable && JSON.stringify(api.config.antd.appConfig), }, - tplPath: join(__dirname, '../tpls/antd-runtime.ts.tpl'), + tplPath: winPath(join(ANTD_TEMPLATES_DIR, 'runtime.ts.tpl')), }); api.writeTmpFile({ diff --git a/packages/plugins/src/constants.ts b/packages/plugins/src/constants.ts new file mode 100644 index 000000000000..770487af37cb --- /dev/null +++ b/packages/plugins/src/constants.ts @@ -0,0 +1,3 @@ +import { join } from 'path'; + +export const TEMPLATES_DIR = join(__dirname, '../templates'); diff --git a/packages/plugins/src/locale.ts b/packages/plugins/src/locale.ts index 848acc045441..c288c2d62b9f 100644 --- a/packages/plugins/src/locale.ts +++ b/packages/plugins/src/locale.ts @@ -2,6 +2,7 @@ import { existsSync, readFileSync } from 'fs'; import { dirname, join } from 'path'; import { IApi, RUNTIME_TYPE_FILE_NAME } from 'umi'; import { lodash, Mustache, winPath } from 'umi/plugin-utils'; +import { TEMPLATES_DIR } from './constants'; import { exactLocalePaths, getAntdLocale, @@ -13,6 +14,7 @@ import { } from './utils/localeUtils'; import { withTmpPath } from './utils/withTmpPath'; +const LOCALE_TEMPLATES_DIR = join(TEMPLATES_DIR, 'locale'); interface ILocaleConfig { default?: string; baseNavigator?: boolean; @@ -106,7 +108,7 @@ export default (api: IApi) => { api.onGenerateFiles(async () => { const localeTpl = readFileSync( - join(__dirname, '../libs/locale/locale.tpl'), + join(LOCALE_TEMPLATES_DIR, 'locale.tpl'), 'utf-8', ); // moment2dayjs @@ -176,7 +178,7 @@ export default (api: IApi) => { }); const localeExportsTpl = readFileSync( - join(__dirname, '../libs/locale/localeExports.tpl'), + join(LOCALE_TEMPLATES_DIR, 'localeExports.tpl'), 'utf-8', ); const localeDirName = 'locales'; @@ -209,7 +211,7 @@ export default (api: IApi) => { }); // runtime.tsx const runtimeTpl = readFileSync( - join(__dirname, '../libs/locale/runtime.tpl'), + join(LOCALE_TEMPLATES_DIR, 'runtime.tpl'), 'utf-8', ); api.writeTmpFile({ @@ -221,7 +223,7 @@ export default (api: IApi) => { // SelectLang.tsx const selectLang = readFileSync( - join(__dirname, '../libs/locale/SelectLang.tpl'), + join(LOCALE_TEMPLATES_DIR, 'SelectLang.tpl'), 'utf-8', ); diff --git a/packages/plugins/src/mf.ts b/packages/plugins/src/mf.ts index 99f40b7b7ff6..f5d86a3d1b7d 100644 --- a/packages/plugins/src/mf.ts +++ b/packages/plugins/src/mf.ts @@ -2,12 +2,14 @@ import { existsSync, opendirSync } from 'fs'; import { join } from 'path'; import type { IApi } from 'umi'; import { lodash, winPath } from 'umi/plugin-utils'; +import { TEMPLATES_DIR } from './constants'; import { toRemotesCodeString } from './utils/mfUtils'; const { isEmpty } = lodash; const mfSetupPathFileName = '_mf_setup-public-path.js'; const mfAsyncEntryFileName = 'asyncEntry.ts'; +const MF_TEMPLATES_DIR = join(TEMPLATES_DIR, 'mf'); export default function mf(api: IApi) { api.describe({ @@ -122,7 +124,7 @@ export default function mf(api: IApi) { context: { remoteCodeString: toRemotesCodeString(remotes), }, - tplPath: join(__dirname, '../tpls/mf-runtime.ts.tpl'), + tplPath: winPath(join(MF_TEMPLATES_DIR, 'runtime.ts.tpl')), }); if (api.env === 'development' && api.config.mfsu) { diff --git a/packages/plugins/tpls/antd-runtime.ts.tpl b/packages/plugins/templates/antd/runtime.ts.tpl similarity index 62% rename from packages/plugins/tpls/antd-runtime.ts.tpl rename to packages/plugins/templates/antd/runtime.ts.tpl index a46fd4d3d375..47be61fb082a 100644 --- a/packages/plugins/tpls/antd-runtime.ts.tpl +++ b/packages/plugins/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 = {container}; -{{/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 {container}; +} +{{/appConfig}} diff --git a/packages/plugins/libs/locale/SelectLang.tpl b/packages/plugins/templates/locale/SelectLang.tpl similarity index 100% rename from packages/plugins/libs/locale/SelectLang.tpl rename to packages/plugins/templates/locale/SelectLang.tpl diff --git a/packages/plugins/libs/locale/locale.tpl b/packages/plugins/templates/locale/locale.tpl similarity index 100% rename from packages/plugins/libs/locale/locale.tpl rename to packages/plugins/templates/locale/locale.tpl diff --git a/packages/plugins/libs/locale/localeExports.tpl b/packages/plugins/templates/locale/localeExports.tpl similarity index 100% rename from packages/plugins/libs/locale/localeExports.tpl rename to packages/plugins/templates/locale/localeExports.tpl diff --git a/packages/plugins/libs/locale/runtime.tpl b/packages/plugins/templates/locale/runtime.tpl similarity index 100% rename from packages/plugins/libs/locale/runtime.tpl rename to packages/plugins/templates/locale/runtime.tpl diff --git a/packages/plugins/tpls/mf-runtime.ts.tpl b/packages/plugins/templates/mf/runtime.ts.tpl similarity index 100% rename from packages/plugins/tpls/mf-runtime.ts.tpl rename to packages/plugins/templates/mf/runtime.ts.tpl