@esmx/router-vue 3.0.0-rc.27 → 3.0.0-rc.30

package/dist/plugin.test.mjs

@@ -178,7 +178,7 @@ describe("plugin.ts - RouterPlugin", () => {
       app.use(RouterPlugin);
       app.mount(container);
       await nextTick();
-      expect(routerResult).toBe(router);
+      expect(routerResult).toEqual(router);
       expect(routerResult).toBeInstanceOf(Router);
     });
     it("should actually call $route getter when accessed in component", async () => {

package/dist/router-link.d.ts

@@ -248,9 +248,9 @@ export declare const RouterLink: import("vue").DefineComponent<import("vue").Ext
         type: PropType<(event: Event) => boolean | undefined | void>;
     };
 }>> & Readonly<{}>, {
-    type: RouterLinkType;
     replace: boolean;
     exact: RouteMatchType;
+    type: RouterLinkType;
     event: string | string[];
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/use.mjs

@@ -6,7 +6,7 @@ import {
   provide,
   ref
 } from "vue";
-import { createSymbolProperty } from "./util.mjs";
+import { createDependentProxy, createSymbolProperty } from "./util.mjs";
 const ROUTER_CONTEXT_KEY = Symbol("router-context");
 const ROUTER_INJECT_KEY = Symbol("router-inject");
 const ERROR_MESSAGES = {
@@ -44,7 +44,7 @@ export function getRouter(instance) {
   return findRouterContext(instance).router;
 }
 export function getRoute(instance) {
-  return findRouterContext(instance).route.value;
+  return findRouterContext(instance).route;
 }
 function useRouterContext(functionName) {
   const injectedContext = inject(ROUTER_INJECT_KEY);
@@ -58,28 +58,30 @@ export function useRouter() {
   return useRouterContext("useRouter").router;
 }
 export function useRoute() {
-  return useRouterContext("useRoute").route.value;
+  return useRouterContext("useRoute").route;
 }
 export function useProvideRouter(router) {
   const proxy = getCurrentProxy("useProvideRouter");
+  const dep = ref(false);
+  const proxiedRouter = createDependentProxy(router, dep);
+  const proxiedRoute = createDependentProxy(router.route, dep);
   const context = {
-    router,
-    route: ref(router.route)
+    router: proxiedRouter,
+    route: proxiedRoute
   };
   provide(ROUTER_INJECT_KEY, context);
   routerContextProperty.set(proxy, context);
   const unwatch = router.afterEach((to) => {
     if (router.route === to) {
-      to.syncTo(context.route.value);
+      to.syncTo(proxiedRoute);
+      dep.value = !dep.value;
     }
   });
   onBeforeUnmount(unwatch);
 }
 export function useLink(props) {
   const router = useRouter();
-  const route = useRoute();
   return computed(() => {
-    route.fullPath;
     return router.resolveLink(props);
   });
 }

package/dist/use.test.mjs

@@ -1,461 +1,159 @@
 import { Router, RouterMode } from "@esmx/router";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import {
-  createApp,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  nextTick
-} from "vue";
-import {
-  getRoute,
-  getRouter,
-  useLink,
-  useProvideRouter,
-  useRoute,
-  useRouter
-} from "./use.mjs";
-describe("use.ts - Vue Router Integration", () => {
+import { nextTick } from "vue";
+import { createApp, h } from "vue";
+import { useProvideRouter, useRoute, useRouter } from "./use.mjs";
+describe("Router Vue Integration", () => {
+  let app;
   let router;
-  let testContainer;
+  let mountPoint;
   beforeEach(async () => {
-    testContainer = document.createElement("div");
-    testContainer.id = "test-app";
-    document.body.appendChild(testContainer);
-    const routes = [
-      {
-        path: "/",
-        component: defineComponent({ template: "<div>Home</div>" }),
-        meta: { title: "Home" }
-      },
-      {
-        path: "/about",
-        component: defineComponent({ template: "<div>About</div>" }),
-        meta: { title: "About" }
-      }
-    ];
     router = new Router({
-      root: "#test-app",
-      routes,
       mode: RouterMode.memory,
+      routes: [
+        { path: "/initial", component: {} },
+        { path: "/new-route", component: {} },
+        { path: "/user/:id", component: {} },
+        { path: "/new-path", component: {} }
+      ],
       base: new URL("http://localhost:3000/")
     });
-    await router.replace("/");
+    await router.replace("/initial");
+    mountPoint = document.createElement("div");
+    mountPoint.id = "app";
+    document.body.appendChild(mountPoint);
   });
   afterEach(() => {
-    if (testContainer.parentNode) {
-      testContainer.parentNode.removeChild(testContainer);
-    }
-    if (router) {
-      router.destroy();
-    }
-  });
-  describe("Error Handling - Context Not Found", () => {
-    const contextNotFoundError = "[@esmx/router-vue] Router context not found. Please ensure useProvideRouter() is called in a parent component.";
-    const contextErrorTestCases = [
-      {
-        name: "getRouter called without router context",
-        test: () => {
-          const app = createApp({ template: "<div>Test</div>" });
-          const vm = app.mount(testContainer);
-          const result = () => getRouter(vm);
-          app.unmount();
-          return result;
-        }
-      },
-      {
-        name: "getRoute called without router context",
-        test: () => {
-          const app = createApp({ template: "<div>Test</div>" });
-          const vm = app.mount(testContainer);
-          const result = () => getRoute(vm);
-          app.unmount();
-          return result;
-        }
-      }
-    ];
-    contextErrorTestCases.forEach(({ name, test }) => {
-      it("should throw error when ".concat(name), () => {
-        expect(test()).toThrow(contextNotFoundError);
-      });
-    });
-    const compositionContextErrorTestCases = [
-      {
-        name: "useRouter called without router context",
-        setupFn: () => {
-          expect(() => useRouter()).toThrow(contextNotFoundError);
-        }
-      },
-      {
-        name: "useRoute called without router context",
-        setupFn: () => {
-          expect(() => useRoute()).toThrow(contextNotFoundError);
-        }
-      },
-      {
-        name: "useLink called without router context",
-        setupFn: () => {
-          expect(
-            () => useLink({
-              to: "/about",
-              type: "push",
-              exact: "include"
-            })
-          ).toThrow(contextNotFoundError);
-        }
-      }
-    ];
-    compositionContextErrorTestCases.forEach(({ name, setupFn }) => {
-      it("should throw error when ".concat(name), () => {
-        const TestComponent = defineComponent({
-          setup() {
-            setupFn();
-            return () => "<div>Test</div>";
-          }
-        });
-        const app = createApp(TestComponent);
-        app.mount(testContainer);
-        app.unmount();
-      });
-    });
-  });
-  describe("Error Handling - Setup Only", () => {
-    const setupOnlyTestCases = [
-      {
-        name: "useRouter called outside setup()",
-        fn: () => useRouter(),
-        expectedError: "[@esmx/router-vue] useRouter() can only be called during setup()"
-      },
-      {
-        name: "useRoute called outside setup()",
-        fn: () => useRoute(),
-        expectedError: "[@esmx/router-vue] useRoute() can only be called during setup()"
-      },
-      {
-        name: "useLink called outside setup()",
-        fn: () => useLink({
-          to: "/about",
-          type: "push",
-          exact: "include"
-        }),
-        expectedError: "[@esmx/router-vue] useRouter() can only be called during setup()"
-      },
-      {
-        name: "useProvideRouter called outside setup()",
-        fn: () => useProvideRouter(router),
-        expectedError: "[@esmx/router-vue] useProvideRouter() can only be called during setup()"
-      }
-    ];
-    setupOnlyTestCases.forEach(({ name, fn, expectedError }) => {
-      it("should throw error when ".concat(name), () => {
-        expect(fn).toThrow(expectedError);
-      });
-    });
-  });
-  describe("Basic Functionality", () => {
-    it("should provide router context and return router instance from getRouter", async () => {
-      let routerInstance = null;
-      const app = createApp({
-        setup() {
-          useProvideRouter(router);
-          return () => "<div>App</div>";
-        }
-      });
-      const vm = app.mount(testContainer);
-      routerInstance = getRouter(vm);
-      expect(routerInstance).toBe(router);
-      expect(routerInstance).toBeInstanceOf(Router);
-      app.unmount();
-    });
-    it("should provide router context and return current route from getRoute", async () => {
-      let currentRoute = null;
-      const app = createApp({
-        setup() {
-          useProvideRouter(router);
-          return () => "<div>App</div>";
-        }
-      });
-      const vm = app.mount(testContainer);
-      currentRoute = getRoute(vm);
-      expect(currentRoute).toBeTruthy();
-      expect(currentRoute.path).toBe("/");
-      expect(currentRoute.meta.title).toBe("Home");
+    if (app) {
       app.unmount();
-    });
+    }
+    document.body.removeChild(mountPoint);
+    router.destroy();
   });
-  describe("Setup() Support - useRouter in setup()", () => {
-    it("should allow useRouter to work in setup() via provide/inject", async () => {
-      let routerInstance = null;
-      let childRoute = null;
-      const ChildComponent = defineComponent({
-        name: "ChildComponent",
-        setup() {
-          routerInstance = useRouter();
-          childRoute = useRoute();
-          expect(routerInstance).toBe(router);
-          expect(childRoute.path).toBe("/");
-          return () => h("div", "Child Component");
-        }
-      });
-      const ParentComponent = defineComponent({
-        name: "ParentComponent",
-        components: { ChildComponent },
+  describe("Router and Route Access", () => {
+    it("should provide router and route access", async () => {
+      let routerResult;
+      let routeResult;
+      const TestApp = {
         setup() {
           useProvideRouter(router);
-          return () => h(ChildComponent);
+          routerResult = useRouter();
+          routeResult = useRoute();
+          return () => h("div", "Test App");
         }
-      });
-      const app = createApp(ParentComponent);
-      app.mount(testContainer);
-      await nextTick();
-      expect(routerInstance).toBe(router);
-      expect(childRoute).toBeTruthy();
-      expect(childRoute.path).toBe("/");
-      app.unmount();
-    });
-    it("should work with nested components in setup()", async () => {
-      let deepChildRouter = null;
-      const DeepChildComponent = defineComponent({
-        name: "DeepChildComponent",
-        setup() {
-          deepChildRouter = useRouter();
-          expect(deepChildRouter).toBe(router);
-          return () => h("div", "Deep Child");
-        }
-      });
-      const MiddleComponent = defineComponent({
-        name: "MiddleComponent",
-        components: { DeepChildComponent },
-        setup() {
-          return () => h(DeepChildComponent);
-        }
-      });
-      const TopComponent = defineComponent({
-        name: "TopComponent",
-        components: { MiddleComponent },
-        setup() {
-          useProvideRouter(router);
-          return () => h(MiddleComponent);
-        }
-      });
-      const app = createApp(TopComponent);
-      app.mount(testContainer);
-      await nextTick();
-      expect(deepChildRouter).toBe(router);
-      app.unmount();
+      };
+      app = createApp(TestApp);
+      app.mount("#app");
+      expect(routerResult).toEqual(router);
+      expect(routeResult).toBeDefined();
+      expect(routeResult == null ? void 0 : routeResult.path).toBe("/initial");
     });
   });
-  describe("Component Hierarchy Context Finding - Investigation", () => {
-    it("should investigate component hierarchy traversal with logging", async () => {
-      let childRouterResult = null;
-      let parentVmInstance = null;
-      let childVmInstance = null;
-      const ChildComponent = defineComponent({
-        name: "ChildComponent",
-        setup(_, { expose }) {
-          const instance = getCurrentInstance();
-          childVmInstance = (instance == null ? void 0 : instance.proxy) || null;
-          try {
-            childRouterResult = useRouter();
-          } catch (error) {
-            expect(error.message).toContain(
-              "Router context not found"
-            );
-          }
-          expose({ childVmInstance });
-          return () => "<div>Child Component</div>";
-        }
-      });
-      const ParentComponent = defineComponent({
-        name: "ParentComponent",
-        components: { ChildComponent },
-        setup(_, { expose }) {
-          const instance = getCurrentInstance();
-          parentVmInstance = (instance == null ? void 0 : instance.proxy) || null;
-          useProvideRouter(router);
-          expose({ parentVmInstance });
-          return () => h(ChildComponent);
-        }
-      });
-      const app = createApp(ParentComponent);
-      const mountedApp = app.mount(testContainer);
-      await nextTick();
-      if (childVmInstance && parentVmInstance) {
-        const parentHasContext = !!parentVmInstance[Symbol.for("router-context")] || Object.getOwnPropertySymbols(parentVmInstance).some(
-          (sym) => sym.toString().includes("router-context")
-        );
-        expect(parentHasContext).toBe(true);
-      }
-      if (childRouterResult) {
-        expect(childRouterResult).toBe(router);
-      }
-      app.unmount();
-    });
-    it("should investigate direct getRouter call with component instances", async () => {
-      let parentInstance = null;
-      let childInstance = null;
-      const ChildComponent = defineComponent({
-        name: "ChildComponent",
+  describe("Route Reactivity", () => {
+    it("should update route properties when route changes", async () => {
+      let routeRef;
+      const TestApp = {
         setup() {
-          const instance = getCurrentInstance();
-          childInstance = (instance == null ? void 0 : instance.proxy) || null;
-          return () => "<div>Child</div>";
-        }
-      });
-      const ParentComponent = defineComponent({
-        name: "ParentComponent",
-        components: { ChildComponent },
-        setup() {
-          const instance = getCurrentInstance();
-          parentInstance = (instance == null ? void 0 : instance.proxy) || null;
           useProvideRouter(router);
-          return () => h(ChildComponent);
+          routeRef = useRoute();
+          return () => h("div", routeRef == null ? void 0 : routeRef.path);
         }
-      });
-      const app = createApp(ParentComponent);
-      app.mount(testContainer);
+      };
+      app = createApp(TestApp);
+      app.mount("#app");
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/initial");
+      const initialRouteRef = routeRef;
+      await router.replace("/new-route");
       await nextTick();
-      if (childInstance && parentInstance) {
-        try {
-          const routerFromChild = getRouter(childInstance);
-          expect(routerFromChild).toBe(router);
-        } catch (error) {
-          expect(error.message).toContain(
-            "Router context not found"
-          );
-        }
-      }
-      app.unmount();
+      expect(routeRef).toBe(initialRouteRef);
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-route");
     });
-  });
-  describe("Navigation", () => {
-    it("should handle router navigation correctly", async () => {
-      const app = createApp({
-        setup() {
-          useProvideRouter(router);
-          return () => "<div>App</div>";
-        }
-      });
-      app.mount(testContainer);
-      expect(router.route.path).toBe("/");
-      expect(router.route.meta.title).toBe("Home");
-      await router.push("/about");
-      expect(router.route.path).toBe("/about");
-      expect(router.route.meta.title).toBe("About");
-      app.unmount();
-    });
-  });
-  describe("Composition API Integration", () => {
-    it("should work with composition API functions in same component", async () => {
-      let compositionRouter = null;
-      let compositionRoute = null;
-      let linkResolver = null;
-      const TestComponent = defineComponent({
+    it("should update route params when route changes", async () => {
+      var _a;
+      let routeRef;
+      const TestApp = {
         setup() {
           useProvideRouter(router);
-          compositionRouter = useRouter();
-          compositionRoute = useRoute();
-          linkResolver = useLink({
-            to: "/about",
-            type: "push",
-            exact: "include"
-          });
-          return () => "<div>Test Component</div>";
+          routeRef = useRoute();
+          return () => {
+            var _a2;
+            return h("div", [
+              h("span", routeRef == null ? void 0 : routeRef.path),
+              h("span", ((_a2 = routeRef == null ? void 0 : routeRef.params) == null ? void 0 : _a2.id) || "no-id")
+            ]);
+          };
         }
-      });
-      const app = createApp(TestComponent);
-      app.mount(testContainer);
+      };
+      app = createApp(TestApp);
+      app.mount("#app");
+      await router.replace("/user/123");
       await nextTick();
-      expect(compositionRouter).toBe(router);
-      expect(compositionRoute).toBeTruthy();
-      expect(compositionRoute.path).toBe("/");
-      expect(compositionRoute.meta.title).toBe("Home");
-      expect(linkResolver).toBeTruthy();
-      expect(linkResolver.value).toBeTruthy();
-      const link = linkResolver.value;
-      expect(link).toHaveProperty("attributes");
-      expect(link).toHaveProperty("getEventHandlers");
-      expect(link).toHaveProperty("isActive");
-      app.unmount();
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/user/123");
+      expect((_a = routeRef == null ? void 0 : routeRef.params) == null ? void 0 : _a.id).toBe("123");
     });
-    it("should handle route updates reactively", async () => {
-      let routeRef = null;
-      const TestComponent = defineComponent({
+    it("should automatically update view when route changes", async () => {
+      const renderCount = { value: 0 };
+      let routeRef;
+      const TestApp = {
         setup() {
           useProvideRouter(router);
-          const route = useRoute();
-          routeRef = route;
-          return () => "<div>Current: ".concat(route.path, "</div>");
+          routeRef = useRoute();
+          return () => {
+            renderCount.value++;
+            return h("div", routeRef == null ? void 0 : routeRef.path);
+          };
         }
-      });
-      const app = createApp(TestComponent);
-      app.mount(testContainer);
+      };
+      app = createApp(TestApp);
+      app.mount("#app");
+      const initialRenderCount = renderCount.value;
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/initial");
+      await router.replace("/new-route");
       await nextTick();
-      expect(routeRef).toBeTruthy();
-      expect(routeRef.path).toBe("/");
-      await router.push("/about");
+      expect(renderCount.value).toBeGreaterThan(initialRenderCount);
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-route");
+      const previousRenderCount = renderCount.value;
+      await router.replace("/new-path");
       await nextTick();
-      expect(routeRef.path).toBe("/about");
-      app.unmount();
+      expect(renderCount.value).toBeGreaterThan(previousRenderCount);
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-path");
     });
   });
-  describe("Deep Component Hierarchy", () => {
-    it("should cover deep component hierarchy traversal (multi-level parent chain)", async () => {
-      let childRouterResult = null;
-      const ChildComponent = defineComponent({
-        name: "ChildComponent",
+  describe("Nested Components", () => {
+    it("should provide route context to child components", async () => {
+      let parentRoute;
+      let childRoute;
+      const ChildComponent = {
         setup() {
-          return () => h("div", "Deep Child");
-        }
-      });
-      const ParentComponent = defineComponent({
-        name: "ParentComponent",
-        setup() {
-          return () => h(ChildComponent);
+          childRoute = useRoute();
+          return () => h("div", "Child: " + (childRoute == null ? void 0 : childRoute.path));
         }
-      });
-      const GrandParentComponent = defineComponent({
-        name: "GrandParentComponent",
+      };
+      const ParentComponent = {
         setup() {
-          useProvideRouter(router);
-          return () => h(ParentComponent);
-        }
-      });
-      const app = createApp(GrandParentComponent);
-      const mountedApp = app.mount(testContainer);
-      await nextTick();
-      const deepChildInstance = mountedApp;
-      const mockDeepChild = {
-        $parent: {
-          // This is the middle parent (no router context)
-          $parent: mountedApp
-          // This is the grandparent (has router context)
+          parentRoute = useRoute();
+          return () => h("div", [
+            h("span", "Parent: " + (parentRoute == null ? void 0 : parentRoute.path)),
+            h(ChildComponent)
+          ]);
         }
       };
-      childRouterResult = getRouter(mockDeepChild);
-      expect(childRouterResult).toBe(router);
-      expect(childRouterResult).toBeInstanceOf(Router);
-      app.unmount();
-    });
-    it("should handle component hierarchy traversal with manual parent chain setup", () => {
-      const app = createApp({
+      const TestApp = {
         setup() {
           useProvideRouter(router);
-          return () => h("div", "Root");
-        }
-      });
-      const rootInstance = app.mount(testContainer);
-      const leafInstance = {
-        $parent: {
-          // Middle level - no router context
-          $parent: rootInstance
-          // Root level - has router context
+          return () => h(ParentComponent);
         }
       };
-      const foundRouter = getRouter(leafInstance);
-      expect(foundRouter).toBe(router);
-      expect(foundRouter).toBeInstanceOf(Router);
-      app.unmount();
+      app = createApp(TestApp);
+      app.mount("#app");
+      expect(parentRoute).toBeDefined();
+      expect(childRoute).toBeDefined();
+      expect(parentRoute == null ? void 0 : parentRoute.path).toBe("/initial");
+      expect(childRoute == null ? void 0 : childRoute.path).toBe("/initial");
+      await router.replace("/new-path");
+      await nextTick();
+      expect(parentRoute == null ? void 0 : parentRoute.path).toBe("/new-path");
+      expect(childRoute == null ? void 0 : childRoute.path).toBe("/new-path");
     });
   });
 });

package/dist/util.d.ts

@@ -1,7 +1,9 @@
+import type { Ref } from 'vue';
 export declare const isVue3: boolean;
 export declare function createSymbolProperty<T>(symbol: symbol): {
     readonly set: (instance: any, value: T) => void;
     readonly get: (instance: any) => T | undefined;
 };
+export declare function createDependentProxy<T extends object>(obj: T, dep: Ref<boolean>): T;
 export declare function isESModule(obj: unknown): obj is Record<string | symbol, any>;
 export declare function resolveComponent(component: unknown): unknown;

package/dist/util.mjs

@@ -10,6 +10,14 @@ export function createSymbolProperty(symbol) {
     }
   };
 }
+export function createDependentProxy(obj, dep) {
+  return new Proxy(obj, {
+    get(target, prop, receiver) {
+      dep.value;
+      return Reflect.get(target, prop, receiver);
+    }
+  });
+}
 export function isESModule(obj) {
   if (!obj || typeof obj !== "object") return false;
   const module = obj;