@esmx/router 3.0.0-rc.60 → 3.0.0-rc.62

package/dist/router-link.mjs

@@ -17,15 +17,14 @@ function getEventTypeList(eventType) {
   const validEvents = events.filter((type) => typeof type === "string").map((type) => type.trim()).filter(Boolean);
   return validEvents.length ? validEvents : ["click"];
 }
-function guardEvent(e) {
-  var _a, _b, _c;
-  if (!e) return;
-  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
-  if (e.defaultPrevented) return;
-  if (e.button !== void 0 && e.button !== 0) return;
-  const target = (_c = (_b = (_a = e.currentTarget) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "target")) != null ? _c : "";
-  if (/\b_blank\b/i.test(target)) return;
-  if (e.preventDefault) e.preventDefault();
+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) {
@@ -54,10 +53,9 @@ async function executeNavigation(router, props, linkType) {
 }
 function createNavigateFunction(router, props, navigationType) {
   return async (e) => {
-    var _a;
-    const eventHandler = (_a = props.eventHandler) != null ? _a : guardEvent;
-    if (!eventHandler(e)) return;
-    await executeNavigation(router, props, navigationType);
+    if (shouldHandleNavigation(e)) {
+      await executeNavigation(router, props, navigationType);
+    }
   };
 }
 function computeAttributes(href, navigationType, isExternal, isActive, isExactActive, activeClass) {
@@ -88,13 +86,18 @@ function computeAttributes(href, navigationType, isExternal, isActive, isExactAc
   }
   return attributes;
 }
-function createEventHandlersGenerator(navigate, eventTypes) {
-  return (nameTransform) => {
+function createEventHandlersGenerator(router, props, navigationType, eventTypes) {
+  return (format) => {
     const handlers = {};
+    const navigate = createNavigateFunction(router, props, navigationType);
     eventTypes.forEach((eventType) => {
       var _a;
-      const eventName = (_a = nameTransform == null ? void 0 : nameTransform(eventType)) != null ? _a : eventType.toLowerCase();
-      handlers[eventName] = navigate;
+      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;
   };
@@ -106,7 +109,6 @@ export function createLinkResolver(router, props) {
   const isActive = router.isRouteMatched(route, props.exact);
   const isExactActive = router.isRouteMatched(route, "exact");
   const isExternal = route.url.origin !== router.route.url.origin;
-  const navigate = createNavigateFunction(router, props, type);
   const attributes = computeAttributes(
     href,
     type,
@@ -116,7 +118,13 @@ export function createLinkResolver(router, props) {
     props.activeClass
   );
   const eventTypes = getEventTypeList(props.event || "click");
-  const getEventHandlers = createEventHandlersGenerator(navigate, eventTypes);
+  const createEventHandlers = createEventHandlersGenerator(
+    router,
+    props,
+    type,
+    eventTypes
+  );
+  const navigate = createNavigateFunction(router, props, type);
   return {
     route,
     type,
@@ -126,6 +134,6 @@ export function createLinkResolver(router, props) {
     tag: props.tag || "a",
     attributes,
     navigate,
-    getEventHandlers
+    createEventHandlers
   };
 }

package/dist/router.d.ts

@@ -103,7 +103,7 @@ export declare class Router {
      * linkData.navigate(); // Programmatic navigation
      *
      * // Get event handlers for React
-     * const handlers = linkData.getEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
+     * const handlers = linkData.createEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
      * // handlers.onClick for React
      * ```
      */

package/dist/router.mjs

@@ -200,7 +200,7 @@ export class Router {
    * linkData.navigate(); // Programmatic navigation
    *
    * // Get event handlers for React
-   * const handlers = linkData.getEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
+   * const handlers = linkData.createEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
    * // handlers.onClick for React
    * ```
    */

package/dist/types.d.ts

@@ -219,7 +219,6 @@ export interface RouterLinkAttributes {
     target?: '_blank';
     rel?: string;
 }
-export type RouterLinkEventHandler = <E extends Event = MouseEvent>(event: E) => boolean | void;
 /**
  * Framework-agnostic link configuration interface
  */
@@ -235,7 +234,15 @@ export interface RouterLinkProps {
     event?: string | string[];
     tag?: string;
     layerOptions?: RouteLayerOptions;
-    eventHandler?: RouterLinkEventHandler;
+    /**
+     * Hook function called before navigation occurs
+     * @param event - The DOM event that triggered the navigation
+     * @param eventName - The name of the event that triggered navigation
+     *
+     * Can prevent default event to block the default navigation handling logic.
+     * Call event.preventDefault() to stop the navigation from proceeding.
+     */
+    beforeNavigate?: (event: Event, eventName: string) => void;
 }
 /**
  * Framework-agnostic link resolution result
@@ -248,6 +255,6 @@ export interface RouterLinkResolved {
     isExternal: boolean;
     tag: string;
     attributes: RouterLinkAttributes;
-    navigate: (e?: Event) => Promise<void>;
-    getEventHandlers: (nameTransform?: (eventType: string) => string) => Record<string, (e: Event) => Promise<void> | undefined>;
+    navigate: (e: Event) => Promise<void>;
+    createEventHandlers: (format?: (eventType: string) => string) => Record<string, (e: Event) => Promise<void>>;
 }

package/package.json

@@ -39,7 +39,7 @@
         "unbuild": "3.6.0",
         "vitest": "3.2.4"
     },
-    "version": "3.0.0-rc.60",
+    "version": "3.0.0-rc.62",
     "type": "module",
     "private": false,
     "exports": {
@@ -58,5 +58,5 @@
         "template",
         "public"
     ],
-    "gitHead": "615e91c617e0a58796c591643c6a2e1d2a1f0a76"
+    "gitHead": "e5a1e811403bf1db4437dff88c3ea8bc6b576f64"
 }

package/src/router-link.ts

@@ -41,29 +41,22 @@ function getEventTypeList(eventType: unknown | unknown[]): string[] {
 }
 
 /**
- * Event guard check - determines if the router should handle the navigation
+ * Navigation event handler called before navigation - determines if the router should handle the navigation
  *
- * Returns !0: Let browser handle default behavior (normal link navigation)
- * Returns 0: Router takes over navigation, prevents default browser behavior
+ * Returns false: Let browser handle default behavior (normal link navigation)
+ * Returns true: Router takes over navigation, prevents default browser behavior
  *
  * This function intelligently decides when to let the browser handle clicks
  * (like Ctrl+click for new tabs) vs when to use SPA routing
  */
-function guardEvent(e?: Event & Partial<MouseEvent>): true | undefined {
-    if (!e) return;
-    // don't redirect with control keys
-    if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
-    // don't redirect when preventDefault called
-    if (e.defaultPrevented) return;
-    // don't redirect on right click
-    if (e.button !== undefined && e.button !== 0) return;
-    // don't redirect if `target="_blank"`
-    // @ts-expect-error getAttribute exists
-    const target = e.currentTarget?.getAttribute?.('target') ?? '';
-    if (/\b_blank\b/i.test(target)) return;
-    // Prevent default browser navigation to enable SPA routing
-    // Note: this may be a Weex event which doesn't have this method
-    if (e.preventDefault) e.preventDefault();
+function shouldHandleNavigation(e: Event): boolean {
+    if (e.defaultPrevented) return false;
+    if (e instanceof MouseEvent) {
+        if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+        if (e.button !== undefined && e.button !== 0) return false;
+    }
+
+    e.preventDefault?.();
 
     return true;
 }
@@ -112,12 +105,11 @@ function createNavigateFunction(
     router: Router,
     props: RouterLinkProps,
     navigationType: RouterLinkType
-): (e?: Event) => Promise<void> {
-    return async (e?: Event): Promise<void> => {
-        const eventHandler = props.eventHandler ?? guardEvent;
-        if (!eventHandler(e!)) return;
-
-        await executeNavigation(router, props, navigationType);
+): RouterLinkResolved['navigate'] {
+    return async (e: Event): Promise<void> => {
+        if (shouldHandleNavigation(e)) {
+            await executeNavigation(router, props, navigationType);
+        }
     };
 }
 
@@ -173,18 +165,21 @@ function computeAttributes(
  * Create event handlers generator function
  */
 function createEventHandlersGenerator(
-    navigate: (e: Event) => Promise<void>,
+    router: Router,
+    props: RouterLinkProps,
+    navigationType: RouterLinkType,
     eventTypes: string[]
-): (
-    nameTransform?: (eventType: string) => string
-) => Record<string, (e: Event) => Promise<void>> {
-    return (nameTransform?: (eventType: string) => string) => {
+): RouterLinkResolved['createEventHandlers'] {
+    return (format?: (eventType: string) => string) => {
         const handlers: Record<string, (e: Event) => Promise<void>> = {};
+        const navigate = createNavigateFunction(router, props, navigationType);
 
         eventTypes.forEach((eventType) => {
-            const eventName =
-                nameTransform?.(eventType) ?? eventType.toLowerCase();
-            handlers[eventName] = navigate;
+            const eventName = format?.(eventType) ?? eventType.toLowerCase();
+            handlers[eventName] = (event) => {
+                props.beforeNavigate?.(event, eventType);
+                return navigate(event);
+            };
         });
 
         return handlers;
@@ -210,8 +205,6 @@ export function createLinkResolver(
     const isExactActive = router.isRouteMatched(route, 'exact');
     const isExternal = route.url.origin !== router.route.url.origin;
 
-    const navigate = createNavigateFunction(router, props, type);
-
     const attributes = computeAttributes(
         href,
         type,
@@ -222,7 +215,14 @@ export function createLinkResolver(
     );
 
     const eventTypes = getEventTypeList(props.event || 'click');
-    const getEventHandlers = createEventHandlersGenerator(navigate, eventTypes);
+    const createEventHandlers = createEventHandlersGenerator(
+        router,
+        props,
+        type,
+        eventTypes
+    );
+
+    const navigate = createNavigateFunction(router, props, type);
 
     return {
         route,
@@ -233,6 +233,6 @@ export function createLinkResolver(
         tag: props.tag || 'a',
         attributes,
         navigate,
-        getEventHandlers
+        createEventHandlers
     };
 }

package/src/router.ts

@@ -225,7 +225,7 @@ export class Router {
      * linkData.navigate(); // Programmatic navigation
      *
      * // Get event handlers for React
-     * const handlers = linkData.getEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
+     * const handlers = linkData.createEventHandlers(name => `on${name.charAt(0).toUpperCase() + name.slice(1)}`);
      * // handlers.onClick for React
      * ```
      */

package/src/types.ts

@@ -308,10 +308,6 @@ export interface RouterLinkAttributes {
     rel?: string;
 }
 
-export type RouterLinkEventHandler = <E extends Event = MouseEvent>(
-    event: E
-) => boolean | void;
-
 /**
  * Framework-agnostic link configuration interface
  */
@@ -327,7 +323,15 @@ export interface RouterLinkProps {
     event?: string | string[];
     tag?: string;
     layerOptions?: RouteLayerOptions;
-    eventHandler?: RouterLinkEventHandler;
+    /**
+     * Hook function called before navigation occurs
+     * @param event - The DOM event that triggered the navigation
+     * @param eventName - The name of the event that triggered navigation
+     *
+     * Can prevent default event to block the default navigation handling logic.
+     * Call event.preventDefault() to stop the navigation from proceeding.
+     */
+    beforeNavigate?: (event: Event, eventName: string) => void;
 }
 
 /**
@@ -346,10 +350,10 @@ export interface RouterLinkResolved {
     attributes: RouterLinkAttributes;
 
     // Navigation function
-    navigate: (e?: Event) => Promise<void>;
+    navigate: (e: Event) => Promise<void>;
 
     // Event handling
-    getEventHandlers: (
-        nameTransform?: (eventType: string) => string
-    ) => Record<string, (e: Event) => Promise<void> | undefined>;
+    createEventHandlers: (
+        format?: (eventType: string) => string
+    ) => Record<string, (e: Event) => Promise<void>>;
 }