@umijs/plugins 4.0.0-rc.20 → 4.0.0-rc.23

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/analytics.js

@@ -20,7 +20,7 @@ exports.default = (api) => {
         return `
     (function() {
       var hm = document.createElement('script');
-      hm.src = 'https://hm.baidu.com/hm.js?${code}';
+      hm.src = '//hm.baidu.com/hm.js?${code}';
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(hm, s);
     })();

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

@@ -250,7 +250,7 @@ const request: IRequest = (url: string, opts: any = { method: 'GET' }) => {
         });
         try {
           const handler =
-            config.errorConfig?.errorHandler;
+            config?.errorConfig?.errorHandler;
           if(handler)
             handler(error, opts, config);
         } catch (e) {
@@ -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,11 +228,15 @@ class ModelUtils {
         const imports = [];
         const modelProps = [];
         models.forEach((model) => {
+            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 '${model.file}';`);
+                imports.push(`import { ${model.exportName} as ${model.id} } from '${fileWithoutExt}';`);
             }
             else {
-                imports.push(`import ${model.id} from '${model.file}';`);
+                imports.push(`import ${model.id} from '${fileWithoutExt}';`);
             }
             modelProps.push(`${model.id}: { namespace: '${model.namespace}', model: ${model.id} },`);
         });
@@ -225,7 +245,7 @@ ${imports.join('\n')}
 
 export const models = {
 ${modelProps.join('\n')}
-}`;
+} as const`;
     }
 }
 exports.ModelUtils = ModelUtils;

package/libs/model.tsx

@@ -1,14 +1,25 @@
 // @ts-ignore
+import type { models as rawModels } from '@@/plugin-model/model';
 import isEqual from 'fast-deep-equal';
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 
+type Models = typeof rawModels;
+
+type GetNamespaces<M> = {
+  [K in keyof M]: M[K] extends { namespace: string }
+    ? M[K]['namespace']
+    : never;
+}[keyof M];
+
+type Namespaces = GetNamespaces<Models>;
+
 // @ts-ignore
 const Context = React.createContext<{ dispatcher: Dispatcher }>(null);
 
 class Dispatcher {
-  callbacks: Record<string, Set<Function>> = {};
-  data: Record<string, unknown> = {};
-  update = (namespace: string) => {
+  callbacks: Record<Namespaces, Set<Function>> = {};
+  data: Record<Namespaces, unknown> = {};
+  update = (namespace: Namespaces) => {
     if (this.callbacks[namespace]) {
       this.callbacks[namespace].forEach((cb) => {
         try {
@@ -87,7 +98,34 @@ export function Provider(props: {
   );
 }
 
-export function useModel(namespace: string, selector?: any) {
+type GetModelByNamespace<M, N> = {
+  [K in keyof M]: M[K] extends { namespace: string; model: unknown }
+    ? M[K]['namespace'] extends N
+      ? M[K]['model'] extends (...args: any) => any
+        ? ReturnType<M[K]['model']>
+        : never
+      : never
+    : never;
+}[keyof M];
+
+type Model<N> = GetModelByNamespace<Models, N>;
+type Selector<N, S> = (model: Model<N>) => S;
+
+type SelectedModel<N, T> = T extends (...args: any) => any
+  ? ReturnType<NonNullable<T>>
+  : Model<N>;
+
+export function useModel<N extends Namespaces>(namespace: N): Model<N>;
+
+export function useModel<N extends Namespaces, S>(
+  namespace: N,
+  selector: Selector<N, S>,
+): SelectedModel<N, typeof selector>;
+
+export function useModel<N extends Namespaces, S>(
+  namespace: N,
+  selector?: Selector<N, S>,
+): SelectedModel<N, typeof selector> {
   const { dispatcher } = useContext<{ dispatcher: Dispatcher }>(Context);
   const selectorRef = useRef(selector);
   selectorRef.current = selector;
@@ -127,7 +165,7 @@ export function useModel(namespace: string, selector?: any) {
       }
     };
 
-    dispatcher.callbacks[namespace] ||= new Set();
+    dispatcher.callbacks[namespace] ||= new Set() as any; // rawModels 是 umi 动态生成的文件，导致前面 callback[namespace] 的类型无法推导出来，所以用 as any 来忽略掉
     dispatcher.callbacks[namespace].add(handler);
     dispatcher.update(namespace);
 

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.20",
+  "version": "4.0.0-rc.23",
   "description": "@umijs/plugins",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugins#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@ahooksjs/use-request": "^2.0.0",
     "@ant-design/icons": "^4.7.0",
-    "@ant-design/pro-layout": "^6.38.0",
-    "@umijs/bundler-utils": "4.0.0-rc.20",
+    "@ant-design/pro-layout": "^7.0.1-beta.17",
+    "@umijs/bundler-utils": "4.0.0-rc.23",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "axios": "^0.27.2",
-    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-import": "^1.13.5",
     "dayjs": "^1.11.2",
     "dva-core": "^2.0.4",
     "dva-immer": "^1.0.0",
@@ -39,12 +39,12 @@
     "moment": "^2.29.3",
     "qiankun": "^2.7.0",
     "react-intl": "3.12.1",
-    "react-redux": "^8.0.1",
+    "react-redux": "^8.0.2",
     "redux": "^4.2.0",
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "umi": "4.0.0-rc.20"
+    "umi": "4.0.0-rc.23"
   },
   "publishConfig": {
     "access": "public"