feat(plugins): custom loading component for qiankun (#11498)

* feat: custom qiankun loading

* fix: add loading validation

* fix: rename loadingPath

* fix: use config

* feat: update readme

* feat: update readme

* feat: update readme

* feat: update readme

---------

Co-authored-by: yixi.gp <[email protected]>

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` |

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<object>;

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; }`,
     });
 
     [