@esmx/router-vue 3.0.0-rc.17 → 3.0.0-rc.20

package/dist/router-link.mjs

@@ -0,0 +1,84 @@
+import { defineComponent, h } from "vue";
+import { useLink } from "./use.mjs";
+import { isVue3 } from "./util.mjs";
+export const RouterLink = defineComponent({
+  name: "RouterLink",
+  props: {
+    /**
+     * Target route location to navigate to.
+     * Can be a string path or route location object.
+     * @example '/home' | { path: '/user', query: { id: '123' } }
+     */
+    to: {
+      type: [String, Object],
+      required: true
+    },
+    /**
+     * Navigation type for the link.
+     * @default 'push'
+     * @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
+     */
+    type: { type: String, default: "push" },
+    /**
+     * @deprecated Use 'type="replace"' instead
+     * @example replace={true} → type="replace"
+     */
+    replace: { type: Boolean, default: false },
+    /**
+     * How to match the active state.
+     * - 'include': Match if current route includes this path
+     * - 'exact': Match only if routes are exactly the same
+     * - 'route': Match based on route configuration
+     * @default 'include'
+     */
+    exact: { type: String, default: "include" },
+    /**
+     * CSS class to apply when link is active (route matches).
+     * @example 'nav-active' | 'selected'
+     */
+    activeClass: { type: String },
+    /**
+     * Event(s) that trigger navigation. Can be string or array of strings.
+     * @default 'click'
+     * @example 'click' | ['click', 'mouseenter']
+     */
+    event: {
+      type: [String, Array],
+      default: "click"
+    },
+    /**
+     * Custom tag to render instead of 'a'.
+     * @default 'a'
+     * @example 'button' | 'div' | 'span'
+     */
+    tag: { type: String, default: "a" },
+    /**
+     * Layer options for layer-based navigation.
+     * Only used when type='pushLayer'.
+     * @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
+     */
+    layerOptions: { type: Object }
+  },
+  setup(props, { slots }) {
+    const link = useLink(props);
+    return () => {
+      var _a;
+      const data = link.value;
+      const eventHandlers = data.getEventHandlers(
+        isVue3 ? (name) => `on${name.charAt(0).toUpperCase()}${name.slice(1)}` : void 0
+      );
+      const props2 = {};
+      if (isVue3) {
+        Object.assign(props2, data.attributes, eventHandlers);
+      } else {
+        const { class: className, ...attrs } = data.attributes;
+        Object.assign(props2, {
+          attrs,
+          class: className,
+          on: eventHandlers
+        });
+      }
+      return h(data.tag, props2, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});

package/dist/router-link.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/router-link.test.mjs

@@ -0,0 +1,456 @@
+import { Router, RouterMode } from "@esmx/router";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+import { RouterLink } from "./router-link.mjs";
+import { useProvideRouter } from "./use.mjs";
+describe("router-link.ts - RouterLink Component", () => {
+  let router;
+  let app;
+  let container;
+  beforeEach(async () => {
+    container = document.createElement("div");
+    container.id = "test-app";
+    document.body.appendChild(container);
+    const routes = [
+      {
+        path: "/",
+        component: defineComponent({
+          name: "Home",
+          template: "<div>Home Page</div>"
+        }),
+        meta: { title: "Home" }
+      },
+      {
+        path: "/about",
+        component: defineComponent({
+          name: "About",
+          template: "<div>About Page</div>"
+        }),
+        meta: { title: "About" }
+      },
+      {
+        path: "/contact",
+        component: defineComponent({
+          name: "Contact",
+          template: "<div>Contact Page</div>"
+        }),
+        meta: { title: "Contact" }
+      }
+    ];
+    router = new Router({
+      root: "#test-app",
+      routes,
+      mode: RouterMode.memory,
+      base: new URL("http://localhost:3000/")
+    });
+    await router.replace("/");
+    await nextTick();
+  });
+  afterEach(async () => {
+    if (app) {
+      app.unmount();
+    }
+    if (router) {
+      router.destroy();
+    }
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    await nextTick();
+  });
+  describe("Component Definition", () => {
+    it("should have correct component name", () => {
+      expect(RouterLink.name).toBe("RouterLink");
+    });
+    it("should have properly configured props", () => {
+      const props = RouterLink.props;
+      expect(props.to).toBeDefined();
+      expect(props.to.required).toBe(true);
+      expect(props.type).toBeDefined();
+      expect(props.type.default).toBe("push");
+      expect(props.exact).toBeDefined();
+      expect(props.exact.default).toBe("include");
+      expect(props.tag).toBeDefined();
+      expect(props.tag.default).toBe("a");
+      expect(props.event).toBeDefined();
+      expect(props.event.default).toBe("click");
+      expect(props.replace).toBeDefined();
+      expect(props.replace.default).toBe(false);
+    });
+    it("should have setup function defined", () => {
+      expect(RouterLink.setup).toBeDefined();
+      expect(typeof RouterLink.setup).toBe("function");
+    });
+  });
+  describe("Component Rendering", () => {
+    it("should render basic router link", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(RouterLink, { to: "/about" }, () => "About Link");
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      expect(linkElement == null ? void 0 : linkElement.textContent).toBe("About Link");
+    });
+    it("should render with custom tag", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/contact",
+              tag: "button"
+            },
+            () => "Contact Button"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const buttonElement = container.querySelector("button");
+      expect(buttonElement).toBeTruthy();
+      expect(buttonElement == null ? void 0 : buttonElement.textContent).toBe("Contact Button");
+    });
+    it("should render with active class when route matches", async () => {
+      await router.push("/about");
+      await nextTick();
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              activeClass: "active-link"
+            },
+            () => "Current Page"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("active-link")).toBe(true);
+    });
+    it("should handle different navigation types", async () => {
+      var _a, _b;
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h("div", [
+            h(
+              RouterLink,
+              {
+                to: "/about",
+                type: "push"
+              },
+              () => "Push Link"
+            ),
+            h(
+              RouterLink,
+              {
+                to: "/contact",
+                type: "replace"
+              },
+              () => "Replace Link"
+            )
+          ]);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const links = container.querySelectorAll("a");
+      expect(links).toHaveLength(2);
+      expect((_a = links[0]) == null ? void 0 : _a.textContent).toBe("Push Link");
+      expect((_b = links[1]) == null ? void 0 : _b.textContent).toBe("Replace Link");
+    });
+  });
+  describe("Navigation Functionality", () => {
+    it("should navigate when clicked", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            { to: "/about" },
+            () => "Navigate to About"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      const clickPromise = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      linkElement == null ? void 0 : linkElement.click();
+      await clickPromise;
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+    });
+    it("should handle custom events", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/contact",
+              event: "mouseenter"
+            },
+            () => "Hover to Navigate"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      const navigationPromise = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      const event = new MouseEvent("mouseenter", { bubbles: true });
+      linkElement == null ? void 0 : linkElement.dispatchEvent(event);
+      await navigationPromise;
+      await nextTick();
+      expect(router.route.path).toBe("/contact");
+    });
+    it("should handle object-based route navigation", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: { path: "/about", query: { tab: "info" } }
+            },
+            () => "About with Query"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      const navigationPromise = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      linkElement == null ? void 0 : linkElement.click();
+      await navigationPromise;
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+      expect(router.route.query.tab).toBe("info");
+    });
+  });
+  describe("Props Validation", () => {
+    it("should accept string as to prop", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(RouterLink, { to: "/about" }, () => "String Route");
+        }
+      });
+      expect(() => {
+        app = createApp(TestApp);
+        app.mount(container);
+      }).not.toThrow();
+    });
+    it("should accept object as to prop", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: { path: "/contact" }
+            },
+            () => "Object Route"
+          );
+        }
+      });
+      expect(() => {
+        app = createApp(TestApp);
+        app.mount(container);
+      }).not.toThrow();
+    });
+    it("should handle array of events", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              event: ["click", "keydown"]
+            },
+            () => "Multi Event Link"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement).toBeTruthy();
+      const clickPromise = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      linkElement == null ? void 0 : linkElement.click();
+      await clickPromise;
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+      await router.push("/");
+      await nextTick();
+      const keydownPromise = new Promise((resolve) => {
+        router.afterEach(() => resolve());
+      });
+      const keyEvent = new KeyboardEvent("keydown", { key: "Enter" });
+      linkElement == null ? void 0 : linkElement.dispatchEvent(keyEvent);
+      await keydownPromise;
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+    });
+  });
+  describe("Error Handling", () => {
+    it("should throw error when router context is missing", () => {
+      const TestApp = defineComponent({
+        setup() {
+          return () => h(RouterLink, { to: "/about" }, () => "No Router");
+        }
+      });
+      expect(() => {
+        app = createApp(TestApp);
+        app.mount(container);
+      }).toThrow();
+    });
+  });
+  describe("Slot Rendering", () => {
+    it("should render default slot content", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            { to: "/about" },
+            {
+              default: () => h(
+                "span",
+                { class: "link-text" },
+                "Custom Content"
+              )
+            }
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const spanElement = container.querySelector("span.link-text");
+      expect(spanElement).toBeTruthy();
+      expect(spanElement == null ? void 0 : spanElement.textContent).toBe("Custom Content");
+    });
+    it("should render complex slot content", async () => {
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            { to: "/contact" },
+            {
+              default: () => [
+                h("i", { class: "icon" }, "\u2192"),
+                h("span", "Contact Us")
+              ]
+            }
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const iconElement = container.querySelector("i.icon");
+      const spanElement = container.querySelector("span");
+      expect(iconElement).toBeTruthy();
+      expect(spanElement).toBeTruthy();
+      expect(iconElement == null ? void 0 : iconElement.textContent).toBe("\u2192");
+      expect(spanElement == null ? void 0 : spanElement.textContent).toBe("Contact Us");
+    });
+  });
+  describe("Active State Management", () => {
+    it("should apply active class with exact matching", async () => {
+      var _a, _b;
+      await router.push("/about");
+      await nextTick();
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h("div", [
+            h(
+              RouterLink,
+              {
+                to: "/about",
+                exact: "exact",
+                activeClass: "exact-active"
+              },
+              () => "Exact Match"
+            ),
+            h(
+              RouterLink,
+              {
+                to: "/about/sub",
+                exact: "exact",
+                activeClass: "exact-active"
+              },
+              () => "Not Exact"
+            )
+          ]);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const links = container.querySelectorAll("a");
+      expect((_a = links[0]) == null ? void 0 : _a.classList.contains("exact-active")).toBe(true);
+      expect((_b = links[1]) == null ? void 0 : _b.classList.contains("exact-active")).toBe(false);
+    });
+    it("should apply active class with include matching", async () => {
+      await router.push("/about");
+      await nextTick();
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(
+            RouterLink,
+            {
+              to: "/about",
+              exact: "include",
+              activeClass: "include-active"
+            },
+            () => "Include Match"
+          );
+        }
+      });
+      app = createApp(TestApp);
+      app.mount(container);
+      await nextTick();
+      const linkElement = container.querySelector("a");
+      expect(linkElement == null ? void 0 : linkElement.classList.contains("include-active")).toBe(
+        true
+      );
+    });
+  });
+});

package/dist/router-view.d.ts

@@ -0,0 +1,31 @@
+/**
+ * RouterView component for rendering matched route components.
+ * Acts as a placeholder where route components are rendered based on the current route.
+ * Supports nested routing with proper depth tracking using Vue's provide/inject mechanism.
+ *
+ * @param props - Component properties (RouterView accepts no props)
+ * @param context - Vue setup context (not used)
+ * @param context.slots - Component slots (not used)
+ * @returns Vue render function that renders the matched route component at current depth
+ *
+ * @example
+ *
+ * ```vue
+ * <template>
+ *   <div id="app">
+ *     <!-- Navigation links -->
+ *     <nav>
+ *       <RouterLink to="/">Home</RouterLink>
+ *       <RouterLink to="/about">About</RouterLink>
+ *       <RouterLink to="/users">Users</RouterLink>
+ *     </nav>
+ *
+ *     <!-- Root level route components render here -->
+ *     <RouterView />
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const RouterView: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/router-view.mjs

@@ -0,0 +1,17 @@
+import { defineComponent, h, inject, provide } from "vue";
+import { useRoute } from "./use.mjs";
+import { resolveComponent } from "./util.mjs";
+const RouterViewDepthKey = Symbol("RouterViewDepth");
+export const RouterView = defineComponent({
+  name: "RouterView",
+  setup() {
+    const route = useRoute();
+    const depth = inject(RouterViewDepthKey, 0);
+    provide(RouterViewDepthKey, depth + 1);
+    return () => {
+      const matchedRoute = route.matched[depth];
+      const component = matchedRoute ? resolveComponent(matchedRoute.component) : null;
+      return component ? h(component) : null;
+    };
+  }
+});

package/dist/router-view.test.d.ts

@@ -0,0 +1 @@
+export {};