@esmx/router-vue 3.0.0-rc.103

package/dist/use.test.mjs

@@ -0,0 +1,381 @@
+import { Router, RouterMode } from "@esmx/router";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  createApp,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  nextTick
+} from "vue";
+import { RouterView } from "./router-view.mjs";
+import {
+  getRouterViewDepth,
+  useProvideRouter,
+  useRoute,
+  useRouter,
+  useRouterViewDepth
+} from "./use.mjs";
+describe("Router Vue Integration", () => {
+  let app;
+  let router;
+  let mountPoint;
+  beforeEach(async () => {
+    router = new Router({
+      mode: RouterMode.memory,
+      routes: [
+        { path: "/initial", component: {} },
+        { path: "/new-route", component: {} },
+        { path: "/user/:id", component: {} },
+        { path: "/new-path", component: {} }
+      ],
+      base: new URL("http://localhost:8000/")
+    });
+    await router.replace("/initial");
+    mountPoint = document.createElement("div");
+    mountPoint.id = "app";
+    document.body.appendChild(mountPoint);
+  });
+  afterEach(() => {
+    if (app) {
+      app.unmount();
+    }
+    document.body.removeChild(mountPoint);
+    router.destroy();
+  });
+  describe("Router and Route Access", () => {
+    it("should provide router and route access", async () => {
+      let routerResult;
+      let routeResult;
+      const TestApp = {
+        setup() {
+          useProvideRouter(router);
+          routerResult = useRouter();
+          routeResult = useRoute();
+          return () => h("div", "Test App");
+        }
+      };
+      app = createApp(TestApp);
+      app.mount("#app");
+      expect(routerResult).toEqual(router);
+      expect(routeResult).toBeDefined();
+      expect(routeResult == null ? void 0 : routeResult.path).toBe("/initial");
+    });
+  });
+  describe("Route Reactivity", () => {
+    it("should update route properties when route changes", async () => {
+      let routeRef;
+      const TestApp = {
+        setup() {
+          useProvideRouter(router);
+          routeRef = useRoute();
+          return () => h("div", routeRef == null ? void 0 : routeRef.path);
+        }
+      };
+      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();
+      expect(routeRef).toBe(initialRouteRef);
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-route");
+    });
+    it("should update route params when route changes", async () => {
+      var _a;
+      let routeRef;
+      const TestApp = {
+        setup() {
+          useProvideRouter(router);
+          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")
+            ]);
+          };
+        }
+      };
+      app = createApp(TestApp);
+      app.mount("#app");
+      await router.replace("/user/123");
+      await nextTick();
+      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 automatically update view when route changes", async () => {
+      const renderCount = { value: 0 };
+      let routeRef;
+      const TestApp = {
+        setup() {
+          useProvideRouter(router);
+          routeRef = useRoute();
+          return () => {
+            renderCount.value++;
+            return h("div", routeRef == null ? void 0 : routeRef.path);
+          };
+        }
+      };
+      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(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(renderCount.value).toBeGreaterThan(previousRenderCount);
+      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-path");
+    });
+  });
+  describe("Nested Components", () => {
+    it("should provide route context to child components", async () => {
+      let parentRoute;
+      let childRoute;
+      const ChildComponent = {
+        setup() {
+          childRoute = useRoute();
+          return () => h("div", "Child: " + (childRoute == null ? void 0 : childRoute.path));
+        }
+      };
+      const ParentComponent = {
+        setup() {
+          parentRoute = useRoute();
+          return () => h("div", [
+            h("span", "Parent: " + (parentRoute == null ? void 0 : parentRoute.path)),
+            h(ChildComponent)
+          ]);
+        }
+      };
+      const TestApp = {
+        setup() {
+          useProvideRouter(router);
+          return () => h(ParentComponent);
+        }
+      };
+      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");
+    });
+  });
+  describe("RouterView Depth", () => {
+    it("should get depth in single RouterView", async () => {
+      let observedDepth;
+      const LeafProbe = defineComponent({
+        setup() {
+          const p = getCurrentInstance().proxy;
+          observedDepth = getRouterViewDepth(p);
+          return () => h("div");
+        }
+      });
+      const Level1 = defineComponent({
+        setup() {
+          return () => h("div", [h(LeafProbe)]);
+        }
+      });
+      router = new Router({
+        mode: RouterMode.memory,
+        routes: [{ path: "/level1", component: Level1 }],
+        base: new URL("http://localhost:8000/")
+      });
+      await router.replace("/level1");
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount("#app");
+      await nextTick();
+      expect(observedDepth).toBe(1);
+    });
+    it("should get depth in nested RouterView", async () => {
+      let observedDepth;
+      const LeafProbe = defineComponent({
+        setup() {
+          const p = getCurrentInstance().proxy;
+          observedDepth = getRouterViewDepth(p);
+          return () => h("div");
+        }
+      });
+      const Level1 = defineComponent({
+        setup() {
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const Leaf = defineComponent({
+        setup() {
+          return () => h("div", [h(LeafProbe)]);
+        }
+      });
+      router = new Router({
+        mode: RouterMode.memory,
+        routes: [
+          {
+            path: "/level1",
+            component: Level1,
+            children: [{ path: "leaf", component: Leaf }]
+          }
+        ],
+        base: new URL("http://localhost:8000/")
+      });
+      await router.replace("/level1/leaf");
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount("#app");
+      await nextTick();
+      expect(observedDepth).toBe(2);
+    });
+    it("should get depth in double-nested RouterViews", async () => {
+      let observedDepth;
+      const LeafProbe = defineComponent({
+        setup() {
+          const p = getCurrentInstance().proxy;
+          observedDepth = getRouterViewDepth(p);
+          return () => h("div");
+        }
+      });
+      const Level1 = defineComponent({
+        setup() {
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const Level2 = defineComponent({
+        setup() {
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const Leaf = defineComponent({
+        setup() {
+          return () => h("div", [h(LeafProbe)]);
+        }
+      });
+      router = new Router({
+        mode: RouterMode.memory,
+        routes: [
+          {
+            path: "/level1",
+            component: Level1,
+            children: [
+              {
+                path: "level2",
+                component: Level2,
+                children: [{ path: "leaf", component: Leaf }]
+              }
+            ]
+          }
+        ],
+        base: new URL("http://localhost:8000/")
+      });
+      await router.replace("/level1/level2/leaf");
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount("#app");
+      await nextTick();
+      expect(observedDepth).toBe(3);
+    });
+    it("should throw when no RouterView ancestor exists", async () => {
+      let callDepth;
+      const Probe = defineComponent({
+        setup() {
+          const p = getCurrentInstance().proxy;
+          callDepth = () => getRouterViewDepth(p);
+          return () => h("div");
+        }
+      });
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(Probe);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount("#app");
+      await nextTick();
+      expect(() => callDepth()).toThrow(
+        new Error(
+          "[@esmx/router-vue] RouterView depth not found. Please ensure a RouterView exists in ancestor components."
+        )
+      );
+    });
+    it("should return 0 for useRouterViewDepth without RouterView", async () => {
+      let observed = -1;
+      const Probe = defineComponent({
+        setup() {
+          observed = useRouterViewDepth();
+          return () => h("div");
+        }
+      });
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h(Probe);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount("#app");
+      await nextTick();
+      expect(observed).toBe(0);
+    });
+    it("should reflect depth via useRouterViewDepth at each level", async () => {
+      let level1Depth = -1;
+      let level2Depth = -1;
+      const Level2 = defineComponent({
+        setup() {
+          level2Depth = useRouterViewDepth();
+          return () => h("div");
+        }
+      });
+      const Level1 = defineComponent({
+        setup() {
+          level1Depth = useRouterViewDepth();
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      router = new Router({
+        mode: RouterMode.memory,
+        routes: [
+          {
+            path: "/level1",
+            component: Level1,
+            children: [{ path: "level2", component: Level2 }]
+          }
+        ],
+        base: new URL("http://localhost:8000/")
+      });
+      await router.replace("/level1/level2");
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(router);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      app = createApp(TestApp);
+      app.mount("#app");
+      await nextTick();
+      expect(level1Depth).toBe(1);
+      expect(level2Depth).toBe(2);
+    });
+  });
+});

package/dist/util.d.ts

@@ -0,0 +1,20 @@
+import type { Route, Router } from '@esmx/router';
+import type { Ref } from 'vue';
+export declare const isVue2: boolean;
+/**
+ * Define $router and $route properties on a target object.
+ * Used to set up global properties for Vue components.
+ *
+ * @param target - The target object to define properties on (e.g., globalProperties or prototype)
+ * @param routerGetter - Getter function for $router (can use `this` in Vue 2)
+ * @param routeGetter - Getter function for $route (can use `this` in Vue 2)
+ * @param configurable - Whether the properties should be configurable (default: false)
+ */
+export declare function defineRouterProperties(target: Record<string, unknown>, routerGetter: (this: unknown) => Router, routeGetter: (this: unknown) => Route, configurable?: boolean): void;
+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<any>): T;
+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,49 @@
+import { version } from "vue";
+export const isVue2 = version.startsWith("2.");
+export function defineRouterProperties(target, routerGetter, routeGetter, configurable = false) {
+  Object.defineProperties(target, {
+    $router: {
+      configurable,
+      enumerable: false,
+      get: routerGetter
+    },
+    $route: {
+      configurable,
+      enumerable: false,
+      get: routeGetter
+    }
+  });
+}
+export function createSymbolProperty(symbol) {
+  return {
+    set(instance, value) {
+      instance[symbol] = value;
+    },
+    get(instance) {
+      return symbol in instance ? instance[symbol] : void 0;
+    }
+  };
+}
+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;
+  return Boolean(module.__esModule) || module[Symbol.toStringTag] === "Module";
+}
+export function resolveComponent(component) {
+  if (!component) return null;
+  if (isESModule(component)) {
+    return component.default || component;
+  }
+  if (component && typeof component === "object" && !Array.isArray(component) && "default" in component && Object.keys(component).length === 1) {
+    return component.default;
+  }
+  return component;
+}

package/dist/util.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @vitest-environment happy-dom
+ */
+export {};