@esmx/router 3.0.0-rc.12 → 3.0.0-rc.122

package/dist/router-link.mjs

@@ -0,0 +1,142 @@
+const CSS_CLASSES = {
+  BASE: "router-link",
+  ACTIVE: "router-link-active",
+  EXACT_ACTIVE: "router-link-exact-active"
+};
+function normalizeNavigationType(props) {
+  if (props.replace) {
+    console.warn(
+      '[RouterLink] The `replace` property is deprecated and will be removed in a future version.\nPlease use `type="replace"` instead.\nBefore: <RouterLink replace={true} />\nAfter:  <RouterLink type="replace" />'
+    );
+    return "replace";
+  }
+  return props.type || "push";
+}
+function getEventTypeList(eventType) {
+  const events = Array.isArray(eventType) ? eventType : [eventType];
+  const validEvents = events.filter((type) => typeof type === "string").map((type) => type.trim()).filter(Boolean);
+  return validEvents.length ? validEvents : ["click"];
+}
+function shouldHandleNavigation(e) {
+  var _a;
+  if (e.defaultPrevented) return false;
+  if (e instanceof MouseEvent) {
+    if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+    if (e.button !== void 0 && e.button !== 0) return false;
+  }
+  (_a = e.preventDefault) == null ? void 0 : _a.call(e);
+  return true;
+}
+async function executeNavigation(router, props, linkType) {
+  const { to, layerOptions } = props;
+  switch (linkType) {
+    case "push":
+      await router.push(to);
+      break;
+    case "replace":
+      await router.replace(to);
+      break;
+    case "pushWindow":
+      await router.pushWindow(to);
+      break;
+    case "replaceWindow":
+      await router.replaceWindow(to);
+      break;
+    case "pushLayer":
+      await router.pushLayer(
+        layerOptions ? typeof to === "string" ? { path: to, layer: layerOptions } : { ...to, layer: layerOptions } : to
+      );
+      break;
+    default:
+      await router.push(to);
+  }
+}
+function createNavigateFunction(router, props, navigationType) {
+  return async (e) => {
+    if (shouldHandleNavigation(e)) {
+      await executeNavigation(router, props, navigationType);
+    }
+  };
+}
+function computeAttributes(href, navigationType, isExternal, isActive, isExactActive, activeClass) {
+  const isNewWindow = navigationType === "pushWindow";
+  const classes = [CSS_CLASSES.BASE];
+  if (isActive) {
+    classes.push(activeClass || CSS_CLASSES.ACTIVE);
+  }
+  if (isExactActive) {
+    classes.push(CSS_CLASSES.EXACT_ACTIVE);
+  }
+  const attributes = {
+    href,
+    class: classes.join(" ")
+  };
+  if (isNewWindow) {
+    attributes.target = "_blank";
+  }
+  const relParts = [];
+  if (isNewWindow) {
+    relParts.push("noopener", "noreferrer");
+  }
+  if (isExternal) {
+    relParts.push("external", "nofollow");
+  }
+  if (relParts.length > 0) {
+    attributes.rel = relParts.join(" ");
+  }
+  return attributes;
+}
+function createEventHandlersGenerator(router, props, navigationType, eventTypes) {
+  return (format) => {
+    const handlers = {};
+    const navigate = createNavigateFunction(router, props, navigationType);
+    eventTypes.forEach((eventType) => {
+      var _a;
+      const eventName = (_a = format == null ? void 0 : format(eventType)) != null ? _a : eventType.toLowerCase();
+      handlers[eventName] = (event) => {
+        var _a2;
+        (_a2 = props.beforeNavigate) == null ? void 0 : _a2.call(props, event, eventType);
+        return navigate(event);
+      };
+    });
+    return handlers;
+  };
+}
+export function createLinkResolver(router, props) {
+  const route = router.resolve(props.to);
+  const type = normalizeNavigationType(props);
+  const href = route.url.href;
+  const isActive = router.isRouteMatched(route, props.exact);
+  const isExactActive = router.isRouteMatched(route, "exact");
+  const isExternal = route.url.origin !== router.route.url.origin;
+  const attributes = computeAttributes(
+    href,
+    type,
+    isExternal,
+    isActive,
+    isExactActive,
+    props.activeClass
+  );
+  const eventTypes = getEventTypeList(props.event || "click");
+  const createEventHandlers = createEventHandlersGenerator(
+    router,
+    props,
+    type,
+    eventTypes
+  );
+  const navigate = createNavigateFunction(router, props, type);
+  return router.parsedOptions.resolveLink(
+    {
+      route,
+      type,
+      isActive,
+      isExactActive,
+      isExternal,
+      tag: props.tag || "a",
+      attributes,
+      navigate,
+      createEventHandlers
+    },
+    props
+  );
+}

package/dist/router.d.ts

@@ -1,111 +1,122 @@
-import { type HistoryState, type NavigationGuard, type NavigationGuardAfter, type RegisteredConfig, type RegisteredConfigMap, type Route, type RouteRecord, type RouterBase, type RouterHistory, type RouterInitOptions, type RouterInstance, type RouterMatcher, RouterMode, type RouterOptions, type RouterRawLocation, type RouterScrollBehavior } from './types';
-/**
- * 路由类
- */
-export declare class Router implements RouterInstance {
-    /**
-     * 当前路由对象的上级路由对象
-     */
-    parent: RouterInstance | null;
-    options: RouterOptions;
-    /**
-     * 路由固定前置路径
-     * 需要注意的是如果使用函数返回 base，需要尽量保证相同的路径返回相同base
-     */
-    base: RouterBase;
-    mode: RouterMode;
-    matcher: RouterMatcher;
-    history: RouterHistory;
-    scrollBehavior: RouterScrollBehavior;
-    route: Route;
+import { MicroApp } from './micro-app';
+import { Navigation } from './navigation';
+import { Route } from './route';
+import { RouteTransition } from './route-transition';
+import type { RouteConfirmHook, RouteLayerResult, RouteLocationInput, RouteMatchType, RouteNotifyHook, RouterLinkProps, RouterLinkResolved, RouterOptions, RouterParsedOptions } from './types';
+import { RouterMode, RouteType } from './types';
+export declare class Router {
+    readonly options: RouterOptions;
+    readonly parsedOptions: RouterParsedOptions;
+    readonly isLayer: boolean;
+    readonly navigation: Navigation;
+    readonly microApp: MicroApp;
+    readonly transition: RouteTransition;
+    get route(): Route;
+    get context(): Record<string | symbol, unknown>;
+    get data(): Record<string | symbol, unknown>;
+    get appId(): string;
+    get mode(): RouterMode;
+    get base(): URL;
+    get req(): import("http").IncomingMessage | null;
+    get res(): import("http").ServerResponse<import("http").IncomingMessage> | null;
     constructor(options: RouterOptions);
-    updateRoute(route: RouteRecord): void;
-    protected applyRoute(route: RouteRecord): void;
-    resolve(location: RouterRawLocation): RouteRecord;
+    push(toInput: RouteLocationInput): Promise<Route>;
+    replace(toInput: RouteLocationInput): Promise<Route>;
+    pushWindow(toInput: RouteLocationInput): Promise<Route>;
+    replaceWindow(toInput: RouteLocationInput): Promise<Route>;
+    restartApp(toInput?: RouteLocationInput): Promise<Route>;
+    back(): Promise<Route | null>;
+    go(index: number): Promise<Route | null>;
+    forward(): Promise<Route | null>;
     /**
-     * 新增单个路由匹配规则
+     * Parse route location without performing actual navigation
+     *
+     * This method is used to parse route configuration and return the corresponding route object,
+     * but does not trigger actual page navigation. It is mainly used for the following scenarios:
+     * - Generate link URLs without jumping
+     * - Pre-check route matching
+     * - Get route parameters, meta information, etc.
+     * - Test the validity of route configuration
+     *
+     * @param toInput Target route location, can be a string path or route configuration object
+     * @returns Parsed route object containing complete route information
+     *
+     * @example
+     * ```typescript
+     * // Parse string path
+     * const route = router.resolve('/user/123');
+     * const url = route.url.href; // Get complete URL
+     *
+     * // Parse named route
+     * const userRoute = router.resolve({
+     *   name: 'user',
+     *   params: { id: '123' }
+     * });
+     * console.log(userRoute.params.id); // '123'
+     *
+     * // Check route validity
+     * const testRoute = router.resolve('/some/path');
+     * if (testRoute.matched.length > 0) {
+     *   // Route matched successfully
+     * }
+     * ```
      */
+    resolve(toInput: RouteLocationInput, toType?: RouteType): Route;
     /**
-     * 新增多个路由匹配规则
+     * Check if the route matches the current route
+     *
+     * @param toRoute Target route object to compare
+     * @param matchType Match type
+     * - 'route': Route-level matching, compare if route configurations are the same
+     * - 'exact': Exact matching, compare if paths are completely the same
+     * - 'include': Include matching, check if current path contains target path
+     * @returns Whether it matches
      */
-    init(options?: RouterInitOptions): Promise<void>;
+    isRouteMatched(toRoute: Route, matchType?: RouteMatchType): boolean;
     /**
-     * 卸载方法
+     * Resolve router link configuration and return complete link data
+     *
+     * This method analyzes router link properties and returns a comprehensive
+     * link resolution result including route information, navigation functions,
+     * HTML attributes, and event handlers. It's primarily used for:
+     * - Framework-agnostic link component implementation
+     * - Generating link attributes and navigation handlers
+     * - Computing active states and CSS classes
+     * - Creating event handlers for different frameworks
+     *
+     * @param props Router link configuration properties
+     * @returns Complete link resolution result with all necessary data
+     *
+     * @example
+     * ```typescript
+     * // Basic link resolution
+     * const linkData = router.resolveLink({
+     *   to: '/user/123',
+     *   type: 'push'
+     * });
+     *
+     * // Access resolved data
+     * console.log(linkData.route.path); // '/user/123'
+     * console.log(linkData.attributes.href); // Full href URL
+     * console.log(linkData.isActive); // Active state
+     *
+     * // Use navigation function
+     * linkData.navigate(); // Programmatic navigation
+     *
+     * // Get event handlers for React
+     * const handlers = linkData.createEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
+     * // handlers.onClick for React
+     * ```
      */
-    destroy(): Promise<void>;
-    registeredConfigMap: RegisteredConfigMap;
-    register(name: string, config: (router: RouterInstance) => RegisteredConfig): void;
-    readonly guards: {
-        beforeEach: NavigationGuard[];
-        afterEach: NavigationGuardAfter[];
-    };
-    beforeEach(guard: NavigationGuard): void;
-    unBindBeforeEach(guard: NavigationGuard): void;
-    afterEach(guard: NavigationGuardAfter): void;
-    unBindAfterEach(guard: NavigationGuardAfter): void;
-    push(location: RouterRawLocation): Promise<void>;
-    replace(location: RouterRawLocation): Promise<void>;
-    /**
-     * 当前路由弹层id，用于区分不同的路由弹层
-     */
-    layerId: number;
-    /**
-     * 路由弹层配置
-     * key为路由弹层id
-     */
-    layerConfigList: Array<{
-        /**
-         * 路由弹层id
-         */
-        id: number;
-        /**
-         * 路由弹层深度
-         */
-        depth: number;
-    }>;
-    /**
-     * 路由弹层id与路由实例的map
-     */
-    layerMap: Record<number, {
-        router: RouterInstance;
-        config: RegisteredConfig;
-        destroyed: boolean;
+    resolveLink(props: RouterLinkProps): RouterLinkResolved;
+    createLayer(toInput: RouteLocationInput): Promise<{
+        promise: Promise<RouteLayerResult>;
+        router: Router;
     }>;
-    /**
-     * 路由是否冻结
-     */
-    isFrozen: boolean;
-    /**
-     * 路由冻结方法
-     */
-    freeze(): void;
-    /**
-     * 路由解冻方法
-     */
-    unfreeze(): void;
-    /**
-     * 打开路由弹层方法，会创建新的路由实例并调用注册的 register 方法
-     * 服务端会使用 push 作为替代
-     */
-    pushLayer(location: RouterRawLocation): Promise<void>;
-    /**
-     * 更新路由弹层方法
-     * @param state 参数为history.state
-     * @description 没有传入 state 时使用当前配置更新 history.state，传入了 state 时使用传入的 state 更新当前配置
-     */
-    checkLayerState(state: HistoryState): boolean;
-    updateLayerState(route: RouteRecord): void;
-    /**
-     * 新开浏览器窗口的方法，在服务端会调用 push 作为替代
-     */
-    pushWindow(location: RouterRawLocation): void;
-    /**
-     * 替换当前浏览器窗口的方法，在服务端会调用 replace 作为替代
-     */
-    replaceWindow(location: RouterRawLocation): void;
-    go(delta?: number): void;
-    forward(): void;
-    back(): void;
-    getRoutes(): any;
+    pushLayer(toInput: RouteLocationInput): Promise<RouteLayerResult>;
+    closeLayer(data?: any): void;
+    renderToString(throwError?: boolean): Promise<string | null>;
+    beforeEach(guard: RouteConfirmHook): () => void;
+    afterEach(guard: RouteNotifyHook): () => void;
+    destroy(): void;
 }
-export declare function createRouter(options: RouterOptions): RouterInstance;