@esmx/router 3.0.0-rc.24 → 3.0.0-rc.26

package/src/router-link.ts

@@ -43,19 +43,24 @@ function getEventTypeList(eventType: unknown | unknown[]): string[] {
 /**
  * Event guard check - determines if the router should handle the navigation
  *
- * Returns false: Let browser handle default behavior (normal link navigation)
- * Returns true: Router takes over navigation, prevents default browser behavior
+ * Returns !0: Let browser handle default behavior (normal link navigation)
+ * Returns 0: 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: MouseEvent): boolean {
+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 false;
+    if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
     // don't redirect when preventDefault called
-    if (e.defaultPrevented) return false;
+    if (e.defaultPrevented) return;
     // don't redirect on right click
-    if (e.button !== undefined && e.button !== 0) return false;
+    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();
@@ -107,11 +112,10 @@ function createNavigateFunction(
     router: Router,
     props: RouterLinkProps,
     navigationType: RouterLinkType
-): (e?: MouseEvent) => Promise<void> {
-    return async (e?: MouseEvent): Promise<void> => {
-        if (e && !guardEvent(e)) {
-            return;
-        }
+): (e?: Event) => Promise<void> {
+    return async (e?: Event): Promise<void> => {
+        const eventHandler = props.eventHandler ?? guardEvent;
+        if (!eventHandler(e!)) return;
 
         await executeNavigation(router, props, navigationType);
     };
@@ -169,18 +173,17 @@ function computeAttributes(
  * Create event handlers generator function
  */
 function createEventHandlersGenerator(
-    navigate: (e?: MouseEvent) => Promise<void>,
+    navigate: (e: Event) => Promise<void>,
     eventTypes: string[]
 ): (
     nameTransform?: (eventType: string) => string
-) => Record<string, (e: MouseEvent) => Promise<void>> {
+) => Record<string, (e: Event) => Promise<void>> {
     return (nameTransform?: (eventType: string) => string) => {
-        const handlers: Record<string, (e: MouseEvent) => Promise<void>> = {};
+        const handlers: Record<string, (e: Event) => Promise<void>> = {};
 
         eventTypes.forEach((eventType) => {
-            const eventName = nameTransform
-                ? nameTransform(eventType)
-                : eventType.toLowerCase();
+            const eventName =
+                nameTransform?.(eventType) ?? eventType.toLowerCase();
             handlers[eventName] = navigate;
         });
 

package/src/router.ts

@@ -227,13 +227,13 @@ export class Router {
         toInput: RouteLocationInput
     ): Promise<{ promise: Promise<RouteLayerResult>; router: Router }> {
         const layerOptions: RouteLayerOptions =
-            (isPlainObject(toInput) ? toInput.layer : null) || {};
+            (isPlainObject(toInput) && toInput.layer) || {};
 
         const zIndex =
             layerOptions.zIndex ?? this.parsedOptions.zIndex + LAYER_ID.next();
 
         let promiseResolve: (result: RouteLayerResult) => void;
-        const promise = new Promise<RouteLayerResult>((resolve) => {
+        let promise = new Promise<RouteLayerResult>((resolve) => {
             promiseResolve = resolve;
         });
 
@@ -283,7 +283,7 @@ export class Router {
         router.afterEach((to, from) => {
             if (layerOptions.shouldClose) {
                 const result = layerOptions.shouldClose(to, from, router);
-                if (result === false) {
+                if (result === true) {
                     router.destroy();
                     promiseResolve({
                         type: 'push',
@@ -297,6 +297,18 @@ export class Router {
                 router.route.state,
                 router.route.url
             );
+            promise = promise.then(async (result) => {
+                await this.navigation.backHistoryState();
+                return result;
+            });
+        }
+        if (layerOptions.autoPush) {
+            promise = promise.then(async (result) => {
+                if (result.type === 'push') {
+                    await this.push(result.route.url.href);
+                }
+                return result;
+            });
         }
         return {
             promise,

package/src/types.ts

@@ -299,6 +299,10 @@ export interface RouterLinkAttributes {
     rel?: string;
 }
 
+export type RouterLinkEventHandler = <E extends Event = MouseEvent>(
+    event: E
+) => boolean | void;
+
 /**
  * Framework-agnostic link configuration interface
  */
@@ -314,6 +318,7 @@ export interface RouterLinkProps {
     event?: string | string[];
     tag?: string;
     layerOptions?: RouteLayerOptions;
+    eventHandler?: RouterLinkEventHandler;
 }
 
 /**
@@ -332,10 +337,10 @@ export interface RouterLinkResolved {
     attributes: RouterLinkAttributes;
 
     // Navigation function
-    navigate: (e?: MouseEvent) => Promise<void>;
+    navigate: (e?: Event) => Promise<void>;
 
     // Event handling
     getEventHandlers: (
         nameTransform?: (eventType: string) => string
-    ) => Record<string, (e: MouseEvent) => Promise<void>>;
+    ) => Record<string, (e: Event) => Promise<void> | undefined>;
 }