zova-module-a-router 5.0.50 → 5.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-router",
-  "version": "5.0.50",
+  "version": "5.0.52",
   "title": "a-router",
   "zovaModule": {
     "capabilities": {
@@ -40,5 +40,5 @@
   "dependencies": {
     "vue-router": "^4.3.2"
   },
-  "gitHead": "66d4ffd9d942d46cfa9ee486742ca44a91bd7814"
+  "gitHead": "20d5666c9835e208eb0ab4c4f09f658d314795f4"
 }

package/src/bean/bean.router.ts

@@ -2,6 +2,7 @@ import { Bean, BeanBase, Cast, IModule, IPageNameRecord, IPagePathRecord, TypeEv
 import { Router } from 'vue-router';
 import * as ModuleInfo from '@cabloy/module-info';
 import { IModuleRoute, IModuleRouteComponent } from '../types.js';
+import { getRealRouteName } from '../utils.js';
 
 const SymbolRouter = Symbol('SymbolRouter');
 
@@ -21,21 +22,26 @@ export class BeanRouter extends BeanBase {
   }
 
   protected async __init__(router?: Router) {
-    if (!router) {
+    if (router) {
+      this[SymbolRouter] = router;
+    } else {
       // app router
       router = this.bean.inject('a-router:appRouter');
       if (!router) {
         throw new Error('Should provide router');
       }
+      this[SymbolRouter] = router;
+      // provide
       this.app.vue.provide('a-router:router', this);
       this.bean.provide('a-router:router', this);
+      // config.routes
+      this._loadConfigRoutes();
       // event
       this.eventRouterGuards = this.app.meta.event.on('a-router:routerGuards', async (context, next) => {
         this._routerGuards(context.data);
         await next();
       });
     }
-    this[SymbolRouter] = router;
   }
 
   protected __dispose__() {
@@ -102,24 +108,42 @@ export class BeanRouter extends BeanBase {
 
   private _routerGuards(router: BeanRouter) {
     router.beforeEach(async to => {
-      // fullPath
-      const fullPath = to.fullPath;
-      // module info
-      const moduleInfo = ModuleInfo.parseInfo(fullPath);
-      if (!moduleInfo) {
-        // donothing
-        return;
+      // match path
+      let match = to.matched.find(item => item.aliasOf);
+      if (match) {
+        match = match.aliasOf;
+      } else {
+        match = to.matched[to.matched.length - 1];
+        // alias
+        const configRoute = this._findConfigRoute(match?.name, match?.path);
+        const alias = configRoute?.alias;
+        if (alias) {
+          // force load module
+          const resLoadModule = await this._forceLoadModule(match?.name, match?.path);
+          if (resLoadModule && resLoadModule !== true) return resLoadModule;
+          if (resLoadModule === false) return to.fullPath;
+          if (this.getRealRouteName(match?.name)) {
+            // @ts-ignore ignore
+            const routeAlias = this.resolveName(`$alias:${match?.name}`, {
+              params: to.params,
+              query: to.query,
+            });
+            return routeAlias.startsWith('/__alias__') ? routeAlias.substring('/__alias__'.length) : routeAlias;
+          } else {
+            return {
+              path: Array.isArray(alias) ? alias[0] : alias,
+              params: to.params,
+              query: to.query,
+            };
+          }
+        }
       }
-      const moduleName = moduleInfo.relativeName;
-      // check if exists
-      if (!this.app.meta.module.exists(moduleName)) return '/404';
-      // check if loaded
-      const module = this.app.meta.module.get(moduleName, false);
-      if (module) return;
-      // use module
-      await this.app.meta.module.use(moduleName);
+      // force load module
+      const resLoadModule = await this._forceLoadModule(match?.name, match?.path);
+      if (resLoadModule === true) return;
+      if (resLoadModule) return resLoadModule;
       // redirect again
-      return fullPath;
+      return to.fullPath;
     });
   }
 
@@ -132,31 +156,46 @@ export class BeanRouter extends BeanBase {
   }
 
   private _registerRoute(module: IModule, route: IModuleRoute) {
-    // meta
-    const meta = route.meta;
+    // path
+    let path: string | undefined;
+    if (route.path) {
+      if (route.meta?.absolute === true) {
+        path = route.path;
+      } else {
+        path = `/${module.info.pid}/${module.info.name}/${route.path}`;
+      }
+    }
     // name
     let name: string | undefined;
     if (route.name) {
-      if (meta?.absolute === true) {
+      if (route.meta?.absolute === true) {
         name = String(route.name);
       } else {
         name = `${module.info.relativeName}:${String(route.name)}`;
       }
     }
-    // path
-    let path: string | undefined;
-    if (route.path) {
-      if (meta?.absolute === true) {
-        path = route.path;
-      } else {
-        path = `/${module.info.pid}/${module.info.name}/${route.path}`;
-      }
+    // config route
+    const configRoute = name ? this.app.config.routes.name[name] : this.app.config.routes.path[path!];
+    if (configRoute) {
+      route = this.app.meta.util.extend({}, route, configRoute);
     }
+    // name alias
+    if (name && configRoute?.alias) {
+      // add extra route
+      this.router.addRoute({ name: `$alias:${name}`, path: `/__alias__${configRoute?.alias}`, redirect: '' });
+    }
+    // name
+    if (!name) {
+      name = `$:${path}`;
+    }
+    // meta
+    const meta = route.meta;
     // component
     const component = route.component;
     // layout / routeData
     let layout = meta?.layout;
     let routeData;
+    let routeNameParent;
     if (layout === false) {
       routeData = { ...route, name, path, component, meta };
     } else {
@@ -165,13 +204,74 @@ export class BeanRouter extends BeanBase {
       } else if (layout === 'empty') {
         layout = this.app.config.layout.component.empty;
       }
+      routeNameParent = `$:${name}`;
       routeData = {
+        name: routeNameParent,
         path,
         component: this.createAsyncComponent(layout as any),
         children: [{ ...route, name, path: '', component, meta }],
       };
     }
+    // force delete
+    if (this.router.hasRoute(routeNameParent)) {
+      this.router.removeRoute(routeNameParent);
+    }
+    if (this.router.hasRoute(name)) {
+      this.router.removeRoute(name);
+    }
     // add
     this.router.addRoute(routeData);
   }
+
+  private _loadConfigRoutes() {
+    const routesPath = this.app.config.routes.path;
+    for (const key in routesPath) {
+      const route = routesPath[key];
+      this._loadConfigRoute({ ...route, path: key, name: `$:${key}` });
+    }
+    const routesName = this.app.config.routes.name;
+    for (const key in routesName) {
+      const route = routesName[key];
+      this._loadConfigRoute({ ...route, path: route.path || route.alias, name: key });
+    }
+  }
+
+  private _loadConfigRoute(route: IModuleRoute) {
+    this.router.addRoute(route);
+  }
+
+  private _findConfigRoute(
+    name: string | symbol | null | undefined,
+    path: string | undefined,
+  ): IModuleRoute | undefined {
+    name = this.getRealRouteName(name);
+    return name ? this.app.config.routes.name[name] : this.app.config.routes.path[path!];
+  }
+
+  getRealRouteName(name?: string | symbol | null): string | undefined {
+    return getRealRouteName(name);
+  }
+
+  private async _forceLoadModule(
+    name: string | symbol | null | undefined,
+    path: string | undefined,
+  ): Promise<string | boolean | undefined> {
+    const nameOrPath = this.getRealRouteName(name) || path;
+    // module info
+    const moduleInfo = ModuleInfo.parseInfo(ModuleInfo.parseName(nameOrPath));
+    if (!moduleInfo) {
+      // donothing
+      return true;
+    }
+    const moduleName = moduleInfo.relativeName;
+    // check if exists
+    if (!this.app.meta.module.exists(moduleName)) return '/404';
+    // check if loaded
+    const module = this.app.meta.module.get(moduleName, false);
+    if (module) return true;
+    // use module
+    await this.app.meta.module.use(moduleName);
+    // means need load
+    return false;
+  }
 }

package/src/monkey.ts

@@ -16,6 +16,7 @@ import { useRoute } from 'vue-router';
 import { BeanRouter } from './bean/bean.router.js';
 import { ScopeModule, __ThisModule__ } from './resource/this.js';
 import { markRaw } from 'vue';
+import { getRealRouteName } from './utils.js';
 
 export class Monkey extends BeanSimple implements IMonkeySystem, IMonkeyModule, IMonkeyController {
   private _moduleSelf: IModule;
@@ -78,15 +79,20 @@ export class Monkey extends BeanSimple implements IMonkeySystem, IMonkeyModule,
     if (!(controller instanceof BeanControllerPageBase)) return;
     const route = controllerData.context.route;
     if (!route) return;
-    const schemaKey = String(route.name || route.path);
+    const routeName = getRealRouteName(route.name);
+    const schemaKey = routeName || String(route.path);
     let schemas: TypePageSchema | undefined;
     const moduleInfo = ModuleInfo.parseInfo(ModuleInfo.parseName(schemaKey));
     if (!moduleInfo) {
       // do nothing
       return;
     }
+    if (!this.app.meta.module.exists(moduleInfo.relativeName)) {
+      // do nothing
+      return;
+    }
     const module = this.app.meta.module.get(moduleInfo.relativeName)!;
-    if (route.name) {
+    if (routeName) {
       schemas = module.resource.pageNameSchemas?.[schemaKey];
     } else {
       schemas = module.resource.pagePathSchemas?.[schemaKey];

package/src/types.ts

@@ -1,4 +1,5 @@
-import { IComponentLayoutRecord, TypePageSchemas } from 'zova';
+// @ts-ignore ignore
+import { IComponentLayoutRecord, IPageNameRecord, IPagePathRecord, TypePageSchemas } from 'zova';
 import { RouteComponent, RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router';
 import { BeanRouter } from './bean/bean.router.js';
 
@@ -36,4 +37,9 @@ declare module 'zova' {
     pagePathSchemas?: TypePageSchemas;
     pageNameSchemas?: TypePageSchemas;
   }
+
+  export interface ZovaConfigRoutes {
+    path: Record<keyof IPagePathRecord, IModuleRoute>;
+    name: Record<keyof IPageNameRecord, IModuleRoute>;
+  }
 }

package/src/utils.ts

@@ -0,0 +1,6 @@
+export function getRealRouteName(name?: string | symbol | null): string | undefined {
+  if (!name) return undefined;
+  name = String(name);
+  if (name.startsWith('$:')) return undefined;
+  return name;
+}