diff --git a/docs/docs/max/micro-frontend.md b/docs/docs/max/micro-frontend.md index 4354f3b55bce..d1bcf97289cb 100644 --- a/docs/docs/max/micro-frontend.md +++ b/docs/docs/max/micro-frontend.md @@ -513,13 +513,13 @@ export default function Page() { 如果您没有使用 antd 作为项目组件库,或希望覆盖默认的加载动画样式时,可以设置一个自定义的加载组件 `loader` 作为子应用的加载动画。 -如果通过路由的模式引入子应用,可以配置如下: +通过路由的模式引入的子应用,目前只支持在运行时配置,代码如下: ```tsx -// .umirc.ts +// .app.tsx import CustomLoader from 'src/components/CustomLoader'; -export default { +export const qiankun = () => ({ routes: [ { path: '/app1', @@ -529,7 +529,7 @@ export default { }, }, ], -}; +}); ``` 如果通过组件的模式引入子应用,直接将 `loader` 作为参数传入即可: @@ -550,6 +550,21 @@ export default function Page() { 其中,`loading` 为 `boolean` 类型参数,为 `true` 时表示仍在加载状态,为 `false` 时表示加载状态已结束。 +如果多个子应用同时存在自定义 loading 的诉求,每个都配置一遍是比较繁琐的,此时可以通过定义主应用的配置来解决,比如说: +```ts +// .umirc.ts +qiankun: { + master: { + loader: '@/CustomLoader', + }, +}, +``` +其中,`loader` 为文件路径,统一约定放在 [src 目录](../guides/directory-structure.md#src-目录) 下,在 umi 中 `@` 即代表 `src` 目录。 + +`CustomLoader` 跟上述实现一致,接收一个 `loading` 为 `boolean` 类型的参数。 + +注意:`master.loader` 不默认开启加载动画,开启动画需要将 `autoSetLoading` 设置为 `true`。 + ### 子应用错误捕获 启用此能力后,当子应用加载出现异常时,会自动显示错误信息。 @@ -665,6 +680,7 @@ export default { | 属性 | 必填 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | --- | | `enable` | 否 | 启用 Qiankun 微应用插件,设置为 `false` 时为不启用 | `boolean` | `undefined` | +| `loader` | 否 | 统一配置微应用加载动画的文件,设置文件路径即可 | `string` | - | | `apps` | 是 | 微应用配置 | [`App[]`](#app) | `undefined` | | `routes` | 否 | 微应用运行时的路由 | [`Route[]`](#route) | `undefined` | | `sandbox` | 否 | 是否开启沙箱模式 | `boolean \| { strictStyleIsolation: boolean, experimentalStyleIsolation: boolean }` | `true` | diff --git a/packages/plugins/libs/qiankun/master/types.ts b/packages/plugins/libs/qiankun/master/types.ts index d8f5363d987b..c7dde577d4a6 100644 --- a/packages/plugins/libs/qiankun/master/types.ts +++ b/packages/plugins/libs/qiankun/master/types.ts @@ -24,6 +24,7 @@ export type MicroAppRoute = { export type MasterOptions = { enable?: boolean; + loader?: string; apps?: App[]; routes?: MicroAppRoute[]; lifeCycles?: FrameworkLifeCycles; diff --git a/packages/plugins/src/qiankun/master.ts b/packages/plugins/src/qiankun/master.ts index d3bb213f019f..b7d6ce697533 100644 --- a/packages/plugins/src/qiankun/master.ts +++ b/packages/plugins/src/qiankun/master.ts @@ -1,3 +1,4 @@ +import assert from 'assert'; import { readFileSync } from 'fs'; import { dirname, join } from 'path'; import { IApi, RUNTIME_TYPE_FILE_NAME } from 'umi'; @@ -18,6 +19,15 @@ export function isMasterEnable(opts: { userConfig: any }) { return !!process.env.INITIAL_QIANKUN_MASTER_OPTIONS; } +function getCustomLoader(api: IApi) { + const loader = api.config.qiankun?.master?.loader; + assert( + !loader || loader.startsWith?.('@/'), + '[@umijs/plugin-qiankun]: loader only support root path, eg: @/loading', + ); + return loader; +} + export default (api: IApi) => { api.describe({ key: 'qiankun-master', @@ -113,10 +123,13 @@ export const setMasterOptions = (newOpts) => options = ({ ...options, ...newOpts api.writeTmpFile({ path: 'MicroAppLoader.tsx', - // 开启了 antd 插件的时候,使用 antd 的 loader 组件,否则提示用户必须设置一个自定义的 loader 组件 - content: api.isPluginEnable('antd') + content: getCustomLoader(api) + ? // 用户自定义的 loading 优先级最高 + `export { default } from '${getCustomLoader(api)}';` + : api.isPluginEnable('antd') ? getFileContent('AntdLoader.tsx') - : `export default function Loader() { console.warn(\`[plugins/qiankun]: Seems like you'r not using @umijs/plugin-antd, you need to provide a custom loader or set autoSetLoading false to shut down this warning!\`); return null; }`, + : // 开启了 antd 插件的时候,使用 antd 的 loader 组件,否则提示用户必须设置一个自定义的 loader 组件 + `export default function Loader() { console.warn(\`[plugins/qiankun]: Seems like you'r not using @umijs/plugin-antd, you need to provide a custom loader or set autoSetLoading false to shut down this warning!\`); return null; }`, }); [