@umijs/plugins 4.0.0-rc.21 → 4.0.0-rc.24

package/dist/access.js

@@ -54,7 +54,7 @@ export function accessProvider(container) {
         api.writeTmpFile({
             path: 'index.tsx',
             content: `
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { AccessContext } from './context';
 import type { IRoute } from 'umi';
 
@@ -66,7 +66,7 @@ export interface AccessProps {
   accessible: boolean;
   fallback?: React.ReactNode;
 }
-export const Access: React.FC<AccessProps> = (props) => {
+export const Access: React.FC<PropsWithChildren<AccessProps>> = (props) => {
   if (process.env.NODE_ENV === 'development' && typeof props.accessible !== 'boolean') {
     throw new Error('[access] the \`accessible\` property on <Access /> should be a boolean');
   }
@@ -85,7 +85,7 @@ export const useAccessMarkedRoutes = (routes: IRoute[]) => {
 
       // check access code
       if (typeof accessCode === 'string') {
-        const detector = access[route.access];
+        const detector = access[accessCode];
 
         if (typeof detector === 'function') {
           route.unaccessible = !detector(route);
@@ -97,8 +97,8 @@ export const useAccessMarkedRoutes = (routes: IRoute[]) => {
       }
 
       // check children access code
-      if (route.routes) {
-        const isNoAccessibleChild = !route.routes.reduce((hasAccessibleChild, child) => {
+      if (route.children?.length) {
+        const isNoAccessibleChild = !route.children.reduce((hasAccessibleChild, child) => {
           process(child, accessCode);
 
           return hasAccessibleChild || !child.unaccessible;

package/dist/dva.js

@@ -112,7 +112,10 @@ export function RootContainer(props: any) {
     ${((_d = (_c = api.config.dva) === null || _c === void 0 ? void 0 : _c.immer) === null || _d === void 0 ? void 0 : _d.enableES5) ? `enableES5();` : ''}
     ${((_f = (_e = api.config.dva) === null || _e === void 0 ? void 0 : _e.immer) === null || _f === void 0 ? void 0 : _f.enableAllPlugins) ? `enableAllPlugins();` : ''}
     for (const id of Object.keys(models)) {
-      app.current.model(models[id].model);
+      app.current.model({
+        namespace: models[id].namespace,
+        ...models[id].model,
+      });
     }
     app.current.start();
   }

package/dist/initial-state.js

@@ -14,7 +14,12 @@ exports.default = (api) => {
     });
     api.register({
         key: 'addExtraModels',
-        fn: () => [(0, withTmpPath_1.withTmpPath)({ api, path: '@@initialState.ts' })],
+        fn: () => [
+            (0, withTmpPath_1.withTmpPath)({
+                api,
+                path: '@@initialState.ts#{"namespace":"@@initialState"}',
+            }),
+        ],
     });
     api.addRuntimePluginKey(() => ['getInitialState']);
     api.addRuntimePlugin(() => {
@@ -55,8 +60,10 @@ export default function InitialStateProvider(props: any) {
 import { useState, useEffect, useCallback } from 'react';
 import { getInitialState } from '@/app';
 
+export type InitialStateType = Awaited<ReturnType<typeof getInitialState>> | undefined;
+
 const initState = {
-  initialState: undefined,
+  initialState: undefined as InitialStateType,
   loading: true,
   error: undefined,
 };
@@ -71,8 +78,6 @@ export default () => {
     } catch (e) {
       setState((s) => ({ ...s, error: e, loading: false }));
     }
-    // [?]
-    // await sleep(10);
   }, []);
 
   const setInitialState = useCallback(async (initialState) => {
@@ -82,8 +87,6 @@ export default () => {
       }
       return { ...s, initialState, loading: false };
     });
-    // [?]
-    // await sleep(10)
   }, []);
 
   useEffect(() => {

package/dist/layout.js

@@ -52,7 +52,7 @@ exports.default = (api) => {
         return false;
     });
     const getPkgPath = () => {
-        // 如果  layout 和 techui至少有一个在，找到他们的地址
+        // 如果 layout 和 techui 至少有一个在，找到他们的地址
         if (pkgHasDep &&
             (0, fs_1.existsSync)((0, path_1.join)(api.cwd, 'node_modules', pkgHasDep, 'package.json'))) {
             return (0, path_1.join)(api.cwd, 'node_modules', pkgHasDep);
@@ -87,7 +87,7 @@ import { Link, useLocation, useNavigate, Outlet, useAppData, useRouteData, match
 import { useMemo } from 'react';
 import  {
   ProLayout,
-} from "${pkgHasDep || '@ant-design/pro-layout'}";
+} from "${pkgPath || '@ant-design/pro-layout'}";
 import './Layout.less';
 import Logo from './Logo';
 import Exception from './Exception';
@@ -202,6 +202,26 @@ const { formatMessage } = useIntl();
   );
 }
       `,
+        });
+        // 写入类型, RunTimeLayoutConfig 是 app.tsx 中 layout 配置的类型
+        // 对于动态 layout 配置很有用
+        api.writeTmpFile({
+            path: 'index.ts',
+            content: `
+    import type { ProLayoutProps } from "${pkgPath || '@ant-design/pro-layout'}";
+    ${hasInitialStatePlugin
+                ? `import { Models } from '@@/plugin-model/useModel';
+           type InitDataType = Models<'@@initialState'>;
+        `
+                : 'type InitDataType = any;'}
+    
+    export type RunTimeLayoutConfig = (
+      initData: InitDataType,
+    ) => BasicLayoutProps & {
+      childrenRender?: (dom: JSX.Element, props: ProLayoutProps) => React.ReactNode,
+      unAccessible?: JSX.Element,
+      noFound?: JSX.Element,
+    };`,
         });
         const iconsMap = Object.keys(api.appData.routes).reduce((memo, id) => {
             const { icon } = api.appData.routes[id];

package/dist/request.js

@@ -272,6 +272,8 @@ export type {
   AxiosInstance,
   AxiosRequestConfig,
   AxiosResponse,
+  IRequestOptions as RequestOptions,
+  IRequest as Request,
 };
 
 `;

package/dist/utils/modelUtils.d.ts

@@ -7,13 +7,14 @@ interface IOpts {
         content: string;
     }) => Boolean;
 }
+export declare function getNamespace(absFilePath: string, absSrcPath: string): string;
 export declare class Model {
     file: string;
     namespace: string;
     id: string;
     exportName: string;
     deps: string[];
-    constructor(file: string, sort: {} | undefined, id: number);
+    constructor(file: string, absSrcPath: string, sort: {} | undefined, id: number);
     findDeps(sort: object): string[];
 }
 export declare class ModelUtils {

package/dist/utils/modelUtils.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModelUtils = exports.Model = void 0;
+exports.ModelUtils = exports.Model = exports.getNamespace = void 0;
 const parser = __importStar(require("@umijs/bundler-utils/compiled/babel/parser"));
 const traverse_1 = __importDefault(require("@umijs/bundler-utils/compiled/babel/traverse"));
 const t = __importStar(require("@umijs/bundler-utils/compiled/babel/types"));
@@ -35,8 +35,24 @@ const fs_1 = require("fs");
 const path_1 = require("path");
 const plugin_utils_1 = require("umi/plugin-utils");
 const astUtils_1 = require("./astUtils");
+function getNamespace(absFilePath, absSrcPath) {
+    const relPath = (0, plugin_utils_1.winPath)((0, path_1.relative)((0, plugin_utils_1.winPath)(absSrcPath), (0, plugin_utils_1.winPath)(absFilePath)));
+    const parts = relPath.split('/');
+    const dirs = parts.slice(0, -1);
+    const file = parts[parts.length - 1];
+    // src/pages/foo/models/bar > foo/bar
+    const validDirs = dirs.filter((dir) => !['src', 'pages', 'models'].includes(dir));
+    let normalizedFile = file;
+    normalizedFile = (0, path_1.basename)(file, (0, path_1.extname)(file));
+    // foo.model > foo
+    if (normalizedFile.endsWith('.model')) {
+        normalizedFile = normalizedFile.split('.').slice(0, -1).join('.');
+    }
+    return [...validDirs, normalizedFile].join('.');
+}
+exports.getNamespace = getNamespace;
 class Model {
-    constructor(file, sort, id) {
+    constructor(file, absSrcPath, sort, id) {
         let namespace;
         let exportName;
         const [_file, meta] = file.split('#');
@@ -47,7 +63,7 @@ class Model {
         }
         this.file = _file;
         this.id = `model_${id}`;
-        this.namespace = namespace || (0, path_1.basename)(file, (0, path_1.extname)(file));
+        this.namespace = namespace || getNamespace(_file, absSrcPath);
         this.exportName = exportName || 'default';
         this.deps = sort ? this.findDeps(sort) : [];
     }
@@ -107,7 +123,7 @@ class ModelUtils {
             }),
             ...opts.extraModels,
         ].map((file) => {
-            return new Model(file, opts.sort, this.count++);
+            return new Model(file, this.api.paths.absSrcPath, opts.sort, this.count++);
         });
         // check duplicate
         const namespaces = models.map((model) => model.namespace);
@@ -212,10 +228,10 @@ class ModelUtils {
         const imports = [];
         const modelProps = [];
         models.forEach((model) => {
-            const fileWithoutExt = (0, path_1.format)({
+            const fileWithoutExt = (0, plugin_utils_1.winPath)((0, path_1.format)({
                 dir: (0, path_1.dirname)(model.file),
                 base: (0, path_1.basename)(model.file, (0, path_1.extname)(model.file)),
-            });
+            }));
             if (model.exportName !== 'default') {
                 imports.push(`import { ${model.exportName} as ${model.id} } from '${fileWithoutExt}';`);
             }

package/libs/qiankun/master/MicroApp.tsx

@@ -74,11 +74,11 @@ export const MicroApp = forwardRef(
       apps = [],
       lifeCycles: globalLifeCycles,
       prefetch = true,
+      appNameKeyAlias = 'name',
       ...globalSettings
     } = getMasterOptions() as MasterOptions;
 
     const {
-      name,
       settings: settingsFromProps = {},
       loader,
       errorBoundary,
@@ -88,6 +88,10 @@ export const MicroApp = forwardRef(
       ...propsFromParams
     } = componentProps;
 
+    // 优先使用 alias 名匹配，fallback 到 name 匹配
+    const name = componentProps[appNameKeyAlias] || componentProps.name;
+    const isCurrentApp = (app: any) => app[appNameKeyAlias] === name || app.name === name;
+
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<any>(null);
     // 未配置自定义 errorBoundary 且开启了 autoCaptureError 场景下，使用插件默认的 errorBoundary，否则使用自定义 errorBoundary
@@ -117,7 +121,7 @@ export const MicroApp = forwardRef(
 
     useImperativeHandle(componentRef, () => microAppRef.current);
 
-    const appConfig = apps.find((app: any) => app.name === name);
+    const appConfig = apps.find((app: any) => isCurrentApp(app));
     useEffect(() => {
       if (!appConfig) {
         setComponentError(
@@ -174,13 +178,11 @@ export const MicroApp = forwardRef(
           if (noneMounted) {
             if (Array.isArray(prefetch)) {
               const specialPrefetchApps = apps.filter(
-                (app) => app.name !== name && prefetch.indexOf(app.name) !== -1,
+                (app) => !isCurrentApp(app) && (prefetch.indexOf(app[appNameKeyAlias]) !== -1 || prefetch.indexOf(app.name) !== -1)
               );
               prefetchApps(specialPrefetchApps, configuration);
             } else {
-              const otherNotMountedApps = apps.filter(
-                (app) => app.name !== name,
-              );
+              const otherNotMountedApps = apps.filter((app) => !isCurrentApp(app));
               prefetchApps(otherNotMountedApps, configuration);
             }
             noneMounted = false;

package/libs/qiankun/master/masterRuntimePlugin.tsx

@@ -34,7 +34,7 @@ function patchMicroAppRouteComponent(routes: any[]) {
     const rootRoute = routes.find((route) => route.path === '/');
     if (rootRoute) {
       // 如果根路由是叶子节点，则直接返回其父节点
-      if (!rootRoute.children) {
+      if (!rootRoute.children?.length) {
         return routes;
       }
       return getRootRoutes(rootRoute.children);

package/libs/qiankun/master/types.ts

@@ -31,6 +31,8 @@ export type MasterOptions = {
   routeBindingAlias?: string;
   // 导出的组件别名，默认 MicroApp
   exportComponentAlias?: string;
+  // MicroApp 寻址时使用的应用名唯一键，默认是 name
+  appNameKeyAlias?: string;
 } & FrameworkConfiguration;
 
 export type SlaveOptions = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugins",
-  "version": "4.0.0-rc.21",
+  "version": "4.0.0-rc.24",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -25,7 +25,7 @@
     "@ahooksjs/use-request": "^2.0.0",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-layout": "^7.0.1-beta.17",
-    "@umijs/bundler-utils": "4.0.0-rc.21",
+    "@umijs/bundler-utils": "4.0.0-rc.24",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.5",
@@ -44,7 +44,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "umi": "4.0.0-rc.21"
+    "umi": "4.0.0-rc.24"
   },
   "publishConfig": {
     "access": "public"