@esmx/router-vue 3.0.0-rc.74 → 3.0.0-rc.76

package/dist/router-link.mjs

@@ -82,16 +82,16 @@ export const RouterLink = defineComponent({
     }
   },
   setup(props, context) {
-    const link = useLink(props).value;
+    const link = useLink(props);
     if (isVue3) {
       return () => {
         var _a, _b;
         return h(
-          link.tag,
+          link.value.tag,
           {
-            ...link.attributes,
+            ...link.value.attributes,
             ...context.attrs,
-            ...link.createEventHandlers(
+            ...link.value.createEventHandlers(
               (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1))
             )
           },
@@ -101,16 +101,16 @@ export const RouterLink = defineComponent({
     }
     return () => {
       var _a, _b;
-      const { class: className, ...attributes } = link.attributes;
+      const { class: className, ...attributes } = link.value.attributes;
       return h(
-        link.tag,
+        link.value.tag,
         {
           attrs: {
             ...attributes,
             ...context.attrs
           },
           class: className,
-          on: link.createEventHandlers()
+          on: link.value.createEventHandlers()
         },
         (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)
       );

package/dist/router-link.test.mjs

@@ -1,6 +1,6 @@
 import { Router, RouterMode } from "@esmx/router";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { createApp, defineComponent, h, nextTick } from "vue";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
 import { RouterLink } from "./router-link.mjs";
 import { useProvideRouter } from "./use.mjs";
 describe("router-link.ts - RouterLink Component", () => {
@@ -513,4 +513,151 @@ describe("router-link.ts - RouterLink Component", () => {
       );
     });
   });
+  describe("Reactivity", () => {
+    it("should update active class when route changes", async () => {
+      await router.replace("/");
+      await nextTick();
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              activeClass: "active-link"
+            },
+            () => "About"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("active-link")).toBe(false);
+      const toAbout = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      await router.push("/about");
+      await toAbout;
+      await nextTick();
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("active-link")).toBe(true);
+      const toContact = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      await router.push("/contact");
+      await toContact;
+      await nextTick();
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("active-link")).toBe(false);
+    });
+    it("should update rendering when props.to changes", async () => {
+      await router.replace("/about");
+      await nextTick();
+      const toProp = ref("/about");
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: toProp.value,
+              activeClass: "active-link"
+            },
+            () => "Dynamic To"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("active-link")).toBe(true);
+      toProp.value = "/contact";
+      await nextTick();
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("active-link")).toBe(false);
+      const toContact = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      await router.push("/contact");
+      await toContact;
+      await nextTick();
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("active-link")).toBe(true);
+    });
+    it("should update event handlers when props.event changes", async () => {
+      await router.replace("/");
+      await nextTick();
+      const eventProp = ref("click");
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              event: eventProp.value
+            },
+            () => "Event Link"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      const clickNav = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      linkElement == null ? void 0 : linkElement.click();
+      await clickNav;
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+      const backNav = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      await router.replace("/");
+      await backNav;
+      await nextTick();
+      eventProp.value = "mouseenter";
+      await nextTick();
+      linkElement == null ? void 0 : linkElement.click();
+      await nextTick();
+      expect(router.route.path).toBe("/");
+      const hoverNav = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      const event = new MouseEvent("mouseenter", { bubbles: true });
+      linkElement == null ? void 0 : linkElement.dispatchEvent(event);
+      await hoverNav;
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+    });
+    it("should re-render when tag prop changes", async () => {
+      const tagProp = ref("a");
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              tag: tagProp.value
+            },
+            () => "Tag Link"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const anchorElement = container.querySelector("a");
+      expect(anchorElement).toBeTruthy();
+      tagProp.value = "button";
+      await nextTick();
+      const buttonElement = container.querySelector("button");
+      const oldAnchor = container.querySelector("a");
+      expect(buttonElement).toBeTruthy();
+      expect(oldAnchor).toBeFalsy();
+    });
+  });
 });

package/package.json

@@ -50,7 +50,7 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.74"
+        "@esmx/router": "3.0.0-rc.76"
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -62,7 +62,7 @@
         "vue": "3.5.23",
         "vue2": "npm:vue@2.7.16"
     },
-    "version": "3.0.0-rc.74",
+    "version": "3.0.0-rc.76",
     "type": "module",
     "private": false,
     "exports": {
@@ -81,5 +81,5 @@
         "template",
         "public"
     ],
-    "gitHead": "ff1e3a98050526b261e1af45f9eb20bf6d9b05af"
+    "gitHead": "8377e5ae2c59cc2b334272d674deb7a01b7e8fa5"
 }

package/src/router-link.test.ts

@@ -4,7 +4,7 @@ import { Router, RouterMode } from '@esmx/router';
  * @vitest-environment happy-dom
  */
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { createApp, defineComponent, h, nextTick } from 'vue';
+import { createApp, defineComponent, h, nextTick, ref } from 'vue';
 import { RouterLink } from './router-link';
 import { useProvideRouter } from './use';
 
@@ -647,4 +647,184 @@ describe('router-link.ts - RouterLink Component', () => {
             );
         });
     });
+
+    describe('Reactivity', () => {
+        it('should update active class when route changes', async () => {
+            await router.replace('/');
+            await nextTick();
+
+            const TestApp = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+                    return () =>
+                        h(
+                            RouterLink,
+                            {
+                                to: '/about',
+                                activeClass: 'active-link'
+                            },
+                            () => 'About'
+                        );
+                }
+            });
+
+            app = createApp(TestApp);
+            app.mount(container);
+            await nextTick();
+
+            const linkElement = container.querySelector('a');
+            expect(linkElement?.classList.contains('active-link')).toBe(false);
+
+            const toAbout = new Promise<void>((resolve) => {
+                router.afterEach(() => resolve());
+            });
+            await router.push('/about');
+            await toAbout;
+            await nextTick();
+            expect(linkElement?.classList.contains('active-link')).toBe(true);
+
+            const toContact = new Promise<void>((resolve) => {
+                router.afterEach(() => resolve());
+            });
+            await router.push('/contact');
+            await toContact;
+            await nextTick();
+            expect(linkElement?.classList.contains('active-link')).toBe(false);
+        });
+
+        it('should update rendering when props.to changes', async () => {
+            await router.replace('/about');
+            await nextTick();
+
+            const toProp = ref('/about');
+
+            const TestApp = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+                    return () =>
+                        h(
+                            RouterLink,
+                            {
+                                to: toProp.value,
+                                activeClass: 'active-link'
+                            },
+                            () => 'Dynamic To'
+                        );
+                }
+            });
+
+            app = createApp(TestApp);
+            app.mount(container);
+            await nextTick();
+
+            const linkElement = container.querySelector('a');
+            expect(linkElement?.classList.contains('active-link')).toBe(true);
+
+            toProp.value = '/contact';
+            await nextTick();
+            expect(linkElement?.classList.contains('active-link')).toBe(false);
+
+            const toContact = new Promise<void>((resolve) => {
+                router.afterEach(() => resolve());
+            });
+            await router.push('/contact');
+            await toContact;
+            await nextTick();
+            expect(linkElement?.classList.contains('active-link')).toBe(true);
+        });
+
+        it('should update event handlers when props.event changes', async () => {
+            await router.replace('/');
+            await nextTick();
+
+            const eventProp = ref<'click' | 'mouseenter'>('click');
+
+            const TestApp = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+                    return () =>
+                        h(
+                            RouterLink,
+                            {
+                                to: '/about',
+                                event: eventProp.value
+                            },
+                            () => 'Event Link'
+                        );
+                }
+            });
+
+            app = createApp(TestApp);
+            app.mount(container);
+            await nextTick();
+
+            const linkElement = container.querySelector('a');
+            expect(linkElement).toBeTruthy();
+
+            const clickNav = new Promise<void>((resolve) => {
+                router.afterEach(() => resolve());
+            });
+            linkElement?.click();
+            await clickNav;
+            await nextTick();
+            expect(router.route.path).toBe('/about');
+
+            const backNav = new Promise<void>((resolve) => {
+                router.afterEach(() => resolve());
+            });
+            await router.replace('/');
+            await backNav;
+            await nextTick();
+
+            eventProp.value = 'mouseenter';
+            await nextTick();
+
+            linkElement?.click();
+            await nextTick();
+            expect(router.route.path).toBe('/');
+
+            const hoverNav = new Promise<void>((resolve) => {
+                router.afterEach(() => resolve());
+            });
+            const event = new MouseEvent('mouseenter', { bubbles: true });
+            linkElement?.dispatchEvent(event);
+            await hoverNav;
+            await nextTick();
+            expect(router.route.path).toBe('/about');
+        });
+
+        it('should re-render when tag prop changes', async () => {
+            const tagProp = ref<'a' | 'button'>('a');
+
+            const TestApp = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+                    return () =>
+                        h(
+                            RouterLink,
+                            {
+                                to: '/about',
+                                tag: tagProp.value
+                            },
+                            () => 'Tag Link'
+                        );
+                }
+            });
+
+            app = createApp(TestApp);
+            app.mount(container);
+            await nextTick();
+
+            const anchorElement = container.querySelector('a');
+            expect(anchorElement).toBeTruthy();
+
+            tagProp.value = 'button';
+            await nextTick();
+
+            const buttonElement = container.querySelector('button');
+            const oldAnchor = container.querySelector('a');
+            expect(buttonElement).toBeTruthy();
+            expect(oldAnchor).toBeFalsy();
+        });
+    });
 });

package/src/router-link.ts

@@ -134,16 +134,16 @@ export const RouterLink = defineComponent({
     },
 
     setup(props, context) {
-        const link = useLink(props).value;
+        const link = useLink(props);
 
         if (isVue3) {
             return () => {
                 return h(
-                    link.tag,
+                    link.value.tag,
                     {
-                        ...link.attributes,
+                        ...link.value.attributes,
                         ...context.attrs,
-                        ...link.createEventHandlers(
+                        ...link.value.createEventHandlers(
                             (name) =>
                                 `on${name.charAt(0).toUpperCase()}${name.slice(1)}`
                         )
@@ -153,16 +153,16 @@ export const RouterLink = defineComponent({
             };
         }
         return () => {
-            const { class: className, ...attributes } = link.attributes;
+            const { class: className, ...attributes } = link.value.attributes;
             return h(
-                link.tag,
+                link.value.tag,
                 {
                     attrs: {
                         ...attributes,
                         ...context.attrs
                     },
                     class: className,
-                    on: link.createEventHandlers()
+                    on: link.value.createEventHandlers()
                 },
                 context.slots.default?.()
             );