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

package/dist/use.mjs

@@ -1,15 +1,81 @@
-import { getCurrentInstance, inject } from "vue";
-import { routerKey, routerViewLocationKey } from "./symbols.mjs";
-export function throwNoCurrentInstance(method) {
-  if (!getCurrentInstance()) {
-    throw new Error(
-      `[router-vue]: Missing current instance. ${method}() must be called inside <script setup> or setup().`
-    );
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onBeforeUnmount,
+  provide,
+  ref
+} from "vue";
+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()`,
+  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);
+function getCurrentProxy(functionName) {
+  const instance = getCurrentInstance();
+  if (!instance || !instance.proxy) {
+    throw new Error(ERROR_MESSAGES.SETUP_ONLY(functionName));
   }
+  return instance.proxy;
+}
+function findRouterContext(vm) {
+  if (!vm) {
+    vm = getCurrentProxy("findRouterContext");
+  }
+  let context = routerContextProperty.get(vm);
+  if (context) {
+    return context;
+  }
+  let current = vm.$parent;
+  while (current) {
+    context = routerContextProperty.get(current);
+    if (context) {
+      routerContextProperty.set(vm, context);
+      return context;
+    }
+    current = current.$parent;
+  }
+  throw new Error(ERROR_MESSAGES.CONTEXT_NOT_FOUND);
+}
+export function getRouter(instance) {
+  return findRouterContext(instance).router;
+}
+export function getRoute(instance) {
+  return findRouterContext(instance).route.value;
+}
+function useRouterContext(functionName) {
+  const injectedContext = inject(ROUTER_INJECT_KEY);
+  if (injectedContext) {
+    return injectedContext;
+  }
+  const proxy = getCurrentProxy(functionName);
+  return findRouterContext(proxy);
 }
 export function useRouter() {
-  return inject(routerKey);
+  return useRouterContext("useRouter").router;
 }
 export function useRoute() {
-  return inject(routerViewLocationKey);
+  return useRouterContext("useRoute").route.value;
+}
+export function useProvideRouter(router) {
+  const proxy = getCurrentProxy("useProvideRouter");
+  const context = {
+    router,
+    route: ref(router.route)
+  };
+  provide(ROUTER_INJECT_KEY, context);
+  routerContextProperty.set(proxy, context);
+  const unwatch = router.afterEach((to) => {
+    if (router.route === to) {
+      to.syncTo(context.route.value);
+    }
+  });
+  onBeforeUnmount(unwatch);
+}
+export function useLink(props) {
+  const router = useRouter();
+  return computed(() => router.resolveLink(props));
 }

package/dist/use.test.d.ts

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

package/dist/use.test.mjs

@@ -0,0 +1,461 @@
+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", () => {
+  let router;
+  let testContainer;
+  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,
+      base: new URL("http://localhost:3000/")
+    });
+    await router.replace("/");
+  });
+  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 ${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 ${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 ${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");
+      app.unmount();
+    });
+  });
+  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 },
+        setup() {
+          useProvideRouter(router);
+          return () => h(ChildComponent);
+        }
+      });
+      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();
+    });
+  });
+  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",
+        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);
+        }
+      });
+      const app = createApp(ParentComponent);
+      app.mount(testContainer);
+      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();
+    });
+  });
+  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({
+        setup() {
+          useProvideRouter(router);
+          compositionRouter = useRouter();
+          compositionRoute = useRoute();
+          linkResolver = useLink({
+            to: "/about",
+            type: "push",
+            exact: "include"
+          });
+          return () => "<div>Test Component</div>";
+        }
+      });
+      const app = createApp(TestComponent);
+      app.mount(testContainer);
+      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();
+    });
+    it("should handle route updates reactively", async () => {
+      let routeRef = null;
+      const TestComponent = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          const route = useRoute();
+          routeRef = route;
+          return () => `<div>Current: ${route.path}</div>`;
+        }
+      });
+      const app = createApp(TestComponent);
+      app.mount(testContainer);
+      await nextTick();
+      expect(routeRef).toBeTruthy();
+      expect(routeRef.path).toBe("/");
+      await router.push("/about");
+      await nextTick();
+      expect(routeRef.path).toBe("/about");
+      app.unmount();
+    });
+  });
+  describe("Deep Component Hierarchy", () => {
+    it("should cover deep component hierarchy traversal (multi-level parent chain)", async () => {
+      let childRouterResult = null;
+      const ChildComponent = defineComponent({
+        name: "ChildComponent",
+        setup() {
+          return () => h("div", "Deep Child");
+        }
+      });
+      const ParentComponent = defineComponent({
+        name: "ParentComponent",
+        setup() {
+          return () => h(ChildComponent);
+        }
+      });
+      const GrandParentComponent = defineComponent({
+        name: "GrandParentComponent",
+        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)
+        }
+      };
+      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({
+        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
+        }
+      };
+      const foundRouter = getRouter(leafInstance);
+      expect(foundRouter).toBe(router);
+      expect(foundRouter).toBeInstanceOf(Router);
+      app.unmount();
+    });
+  });
+});

package/dist/util.d.ts

@@ -0,0 +1,7 @@
+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 isESModule(obj: unknown): obj is Record<string | symbol, any>;
+export declare function resolveComponent(component: unknown): unknown;

package/dist/util.mjs

@@ -0,0 +1,24 @@
+import { version } from "vue";
+export const isVue3 = version.startsWith("3.");
+export function createSymbolProperty(symbol) {
+  return {
+    set(instance, value) {
+      instance[symbol] = value;
+    },
+    get(instance) {
+      return symbol in instance ? instance[symbol] : void 0;
+    }
+  };
+}
+export function isESModule(obj) {
+  if (!obj || typeof obj !== "object") return false;
+  const module = obj;
+  return Boolean(module.__esModule) || module[Symbol.toStringTag] === "Module";
+}
+export function resolveComponent(component) {
+  if (!component) return null;
+  if (isESModule(component)) {
+    return component.default || component;
+  }
+  return component;
+}

package/dist/util.test.d.ts

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