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

package/dist/router-link.d.ts

@@ -70,7 +70,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     };
     /**
      * @deprecated Use 'type="replace"' instead
-     * @example replace={true} → type="replace"
+     * @example :replace={true} → type="replace"
      */
     replace: {
         type: BooleanConstructor;
@@ -120,6 +120,33 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     layerOptions: {
         type: PropType<RouteLayerOptions>;
     };
+    /**
+     * Custom event handler to control navigation behavior.
+     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     * @default
+     *
+     * (event: Event & Partial<MouseEvent>): boolean => {
+     *   // don't redirect with control keys
+     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+     *   // don't redirect when preventDefault called
+     *   if (e.defaultPrevented) return false;
+     *   // don't redirect on right click
+     *   if (e.button !== undefined && e.button !== 0) return false;
+     *   // don't redirect if `target="_blank"`
+     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+     *   if (/\b_blank\b/i.test(target)) return false;
+     *   // 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();
+     *
+     *  return true;
+     * }
+     */
+    eventHandler: {
+        type: PropType<(event: Event) => boolean | undefined | void>;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -143,7 +170,7 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     };
     /**
      * @deprecated Use 'type="replace"' instead
-     * @example replace={true} → type="replace"
+     * @example :replace={true} → type="replace"
      */
     replace: {
         type: BooleanConstructor;
@@ -193,6 +220,33 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
     layerOptions: {
         type: PropType<RouteLayerOptions>;
     };
+    /**
+     * Custom event handler to control navigation behavior.
+     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     * @default
+     *
+     * (event: Event & Partial<MouseEvent>): boolean => {
+     *   // don't redirect with control keys
+     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+     *   // don't redirect when preventDefault called
+     *   if (e.defaultPrevented) return false;
+     *   // don't redirect on right click
+     *   if (e.button !== undefined && e.button !== 0) return false;
+     *   // don't redirect if `target="_blank"`
+     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+     *   if (/\b_blank\b/i.test(target)) return false;
+     *   // 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();
+     *
+     *  return true;
+     * }
+     */
+    eventHandler: {
+        type: PropType<(event: Event) => boolean | undefined | void>;
+    };
 }>> & Readonly<{}>, {
     type: RouterLinkType;
     replace: boolean;

package/dist/router-link.mjs

@@ -21,7 +21,7 @@ export const RouterLink = defineComponent({
     type: { type: String, default: "push" },
     /**
      * @deprecated Use 'type="replace"' instead
-     * @example replace={true} → type="replace"
+     * @example :replace={true} → type="replace"
      */
     replace: { type: Boolean, default: false },
     /**
@@ -57,28 +57,84 @@ export const RouterLink = defineComponent({
      * Only used when type='pushLayer'.
      * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
      */
-    layerOptions: { type: Object }
+    layerOptions: { type: Object },
+    /**
+     * Custom event handler to control navigation behavior.
+     * Should return `true` to allow router to navigate, otherwise to prevent it.
+     *
+     * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+     * @default
+     *
+     * (event: Event & Partial<MouseEvent>): boolean => {
+     *   // don't redirect with control keys
+     *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+     *   // don't redirect when preventDefault called
+     *   if (e.defaultPrevented) return false;
+     *   // don't redirect on right click
+     *   if (e.button !== undefined && e.button !== 0) return false;
+     *   // don't redirect if `target="_blank"`
+     *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+     *   if (/\b_blank\b/i.test(target)) return false;
+     *   // 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();
+     *
+     *  return true;
+     * }
+     */
+    eventHandler: {
+      type: Function
+    }
   },
-  setup(props, { slots }) {
+  setup(props, context) {
+    const { slots, attrs } = context;
     const link = useLink(props);
-    return () => {
+    const wrapHandler = (externalHandler, internalHandler) => !internalHandler ? externalHandler : async (e) => {
+      try {
+        await externalHandler(e);
+      } finally {
+        await internalHandler(e);
+      }
+    };
+    const vue3renderer = () => {
       var _a;
       const data = link.value;
-      const eventHandlers = data.getEventHandlers(
-        isVue3 ? (name) => `on${name.charAt(0).toUpperCase()}${name.slice(1)}` : void 0
+      const genEventName = (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1));
+      const eventHandlers = data.getEventHandlers(genEventName);
+      Object.entries(attrs).forEach(([key, listener]) => {
+        if (!key.startsWith("on") || typeof listener !== "function")
+          return;
+        eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+      });
+      return h(
+        data.tag,
+        {
+          ...data.attributes,
+          ...eventHandlers
+        },
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
       );
-      const props2 = {};
-      if (isVue3) {
-        Object.assign(props2, data.attributes, eventHandlers);
-      } else {
-        const { class: className, ...attrs } = data.attributes;
-        Object.assign(props2, {
-          attrs,
+    };
+    const vue2renderer = () => {
+      var _a;
+      const data = link.value;
+      const eventHandlers = data.getEventHandlers();
+      const $listeners = context.listeners || {};
+      Object.entries($listeners).forEach(([key, listener]) => {
+        if (typeof listener !== "function") return;
+        eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+      });
+      const { class: className, ...attrs2 } = data.attributes;
+      return h(
+        data.tag,
+        {
+          attrs: attrs2,
           class: className,
           on: eventHandlers
-        });
-      }
-      return h(data.tag, props2, (_a = slots.default) == null ? void 0 : _a.call(slots));
+        },
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
+      );
     };
+    return isVue3 ? vue3renderer : vue2renderer;
   }
 });

package/dist/use.mjs

@@ -10,7 +10,7 @@ import { createSymbolProperty } from "./util.mjs";
 const ROUTER_CONTEXT_KEY = Symbol("router-context");
 const ROUTER_INJECT_KEY = Symbol("router-inject");
 const ERROR_MESSAGES = {
-  SETUP_ONLY: (fnName) => `[@esmx/router-vue] ${fnName}() can only be called during setup()`,
+  SETUP_ONLY: (fnName) => "[@esmx/router-vue] ".concat(fnName, "() can only be called during setup()"),
   CONTEXT_NOT_FOUND: "[@esmx/router-vue] Router context not found. Please ensure useProvideRouter() is called in a parent component."
 };
 const routerContextProperty = createSymbolProperty(ROUTER_CONTEXT_KEY);

package/dist/use.test.mjs

@@ -75,7 +75,7 @@ describe("use.ts - Vue Router Integration", () => {
       }
     ];
     contextErrorTestCases.forEach(({ name, test }) => {
-      it(`should throw error when ${name}`, () => {
+      it("should throw error when ".concat(name), () => {
         expect(test()).toThrow(contextNotFoundError);
       });
     });
@@ -106,7 +106,7 @@ describe("use.ts - Vue Router Integration", () => {
       }
     ];
     compositionContextErrorTestCases.forEach(({ name, setupFn }) => {
-      it(`should throw error when ${name}`, () => {
+      it("should throw error when ".concat(name), () => {
         const TestComponent = defineComponent({
           setup() {
             setupFn();
@@ -147,7 +147,7 @@ describe("use.ts - Vue Router Integration", () => {
       }
     ];
     setupOnlyTestCases.forEach(({ name, fn, expectedError }) => {
-      it(`should throw error when ${name}`, () => {
+      it("should throw error when ".concat(name), () => {
         expect(fn).toThrow(expectedError);
       });
     });
@@ -385,7 +385,7 @@ describe("use.ts - Vue Router Integration", () => {
           useProvideRouter(router);
           const route = useRoute();
           routeRef = route;
-          return () => `<div>Current: ${route.path}</div>`;
+          return () => "<div>Current: ".concat(route.path, "</div>");
         }
       });
       const app = createApp(TestComponent);

package/dist/util.test.mjs

@@ -1,3 +1,6 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { beforeEach, describe, expect, it } from "vitest";
 import { version } from "vue";
 import {
@@ -202,7 +205,7 @@ describe("util.ts - Utility Functions", () => {
     describe("should return null for falsy inputs", () => {
       const falsyValues = [null, void 0, false, 0, "", Number.NaN];
       falsyValues.forEach((value) => {
-        it(`should return null for ${value}`, () => {
+        it("should return null for ".concat(value), () => {
           expect(resolveComponent(value)).toBeNull();
         });
       });
@@ -272,7 +275,9 @@ describe("util.ts - Utility Functions", () => {
       });
       it("should return class components directly", () => {
         class ClassComponent {
-          name = "ClassComponent";
+          constructor() {
+            __publicField(this, "name", "ClassComponent");
+          }
         }
         const result = resolveComponent(ClassComponent);
         expect(result).toBe(ClassComponent);

package/package.json

@@ -50,21 +50,21 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.24"
+        "@esmx/router": "3.0.0-rc.26"
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
-        "@esmx/lint": "3.0.0-rc.24",
-        "@types/node": "22.15.18",
-        "@vitest/coverage-v8": "3.1.3",
-        "stylelint": "16.19.1",
-        "typescript": "5.8.2",
+        "@esmx/lint": "3.0.0-rc.26",
+        "@types/node": "^24.0.10",
+        "@vitest/coverage-v8": "3.2.4",
+        "stylelint": "16.21.0",
+        "typescript": "5.8.3",
         "unbuild": "3.5.0",
-        "vitest": "3.1.3",
+        "vitest": "3.2.4",
         "vue": "3.5.13",
         "vue2": "npm:vue@2.7.16"
     },
-    "version": "3.0.0-rc.24",
+    "version": "3.0.0-rc.26",
     "type": "module",
     "private": false,
     "exports": {
@@ -83,5 +83,5 @@
         "template",
         "public"
     ],
-    "gitHead": "ef6208ea42a7105ca056ca9cd3c364d989c4d97d"
+    "gitHead": "2f52f94c8ac27aca32ef3148afd109d0f0470d52"
 }

package/src/router-link.ts

@@ -77,7 +77,7 @@ export const RouterLink = defineComponent({
         type: { type: String as PropType<RouterLinkType>, default: 'push' },
         /**
          * @deprecated Use 'type="replace"' instead
-         * @example replace={true} → type="replace"
+         * @example :replace={true} → type="replace"
          */
         replace: { type: Boolean, default: false },
         /**
@@ -113,36 +113,102 @@ export const RouterLink = defineComponent({
          * Only used when type='pushLayer'.
          * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
          */
-        layerOptions: { type: Object as PropType<RouteLayerOptions> }
+        layerOptions: { type: Object as PropType<RouteLayerOptions> },
+        /**
+         * Custom event handler to control navigation behavior.
+         * Should return `true` to allow router to navigate, otherwise to prevent it.
+         *
+         * @Note you need to call `e.preventDefault()` to prevent default browser navigation.
+         * @default
+         *
+         * (event: Event & Partial<MouseEvent>): boolean => {
+         *   // don't redirect with control keys
+         *   if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return false;
+         *   // don't redirect when preventDefault called
+         *   if (e.defaultPrevented) return false;
+         *   // don't redirect on right click
+         *   if (e.button !== undefined && e.button !== 0) return false;
+         *   // don't redirect if `target="_blank"`
+         *   const target = e.currentTarget?.getAttribute?.('target') ?? '';
+         *   if (/\b_blank\b/i.test(target)) return false;
+         *   // 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();
+         *
+         *  return true;
+         * }
+         */
+        eventHandler: {
+            type: Function as PropType<
+                (event: Event) => boolean | undefined | void
+            >
+        }
     },
 
-    setup(props, { slots }) {
+    setup(props, context) {
+        const { slots, attrs } = context;
         const link = useLink(props);
 
-        return () => {
+        const wrapHandler = (
+            externalHandler: Function,
+            internalHandler: Function | undefined
+        ) =>
+            !internalHandler
+                ? (externalHandler as (e: Event) => Promise<void>)
+                : async (e: Event) => {
+                      try {
+                          await externalHandler(e);
+                      } finally {
+                          await internalHandler(e);
+                      }
+                  };
+
+        const vue3renderer = () => {
             const data = link.value;
+            const genEventName = (name: string): string =>
+                `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
 
-            // Generate event handlers with proper type transformation for Vue 2/3 compatibility
-            const eventHandlers = data.getEventHandlers(
-                isVue3
-                    ? (name: string): string =>
-                          `on${name.charAt(0).toUpperCase()}${name.slice(1)}`
-                    : undefined
+            const eventHandlers = data.getEventHandlers(genEventName);
+            Object.entries(attrs).forEach(([key, listener]) => {
+                // In Vue 3, external event handlers are in attrs with 'on' prefix
+                if (!key.startsWith('on') || typeof listener !== 'function')
+                    return;
+                eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+            });
+
+            return h(
+                data.tag,
+                {
+                    ...data.attributes,
+                    ...eventHandlers
+                },
+                slots.default?.()
             );
+        };
 
-            const props = {};
-            if (isVue3) {
-                Object.assign(props, data.attributes, eventHandlers);
-            } else {
-                const { class: className, ...attrs } = data.attributes;
-                Object.assign(props, {
+        const vue2renderer = () => {
+            const data = link.value;
+
+            const eventHandlers = data.getEventHandlers();
+            // Vue 2: get external listeners from context
+            const $listeners = (context as any).listeners || {};
+            Object.entries($listeners).forEach(([key, listener]) => {
+                if (typeof listener !== 'function') return;
+                eventHandlers[key] = wrapHandler(listener, eventHandlers[key]);
+            });
+
+            const { class: className, ...attrs } = data.attributes;
+            return h(
+                data.tag,
+                {
                     attrs,
                     class: className,
                     on: eventHandlers
-                });
-            }
-
-            return h(data.tag, props, slots.default?.());
+                },
+                slots.default?.()
+            );
         };
+
+        return isVue3 ? vue3renderer : vue2renderer;
     }
 });