@esmx/router-vue 3.0.0-rc.84 → 3.0.0-rc.92

package/dist/plugin.mjs

@@ -1,7 +1,7 @@
 import { RouterLink } from "./router-link.mjs";
 import { RouterView } from "./router-view.mjs";
 import { getRoute, getRouter } from "./use.mjs";
-import { isVue3 } from "./util.mjs";
+import { defineRouterProperties, isVue2 } from "./util.mjs";
 export const RouterPlugin = {
   /**
    * Install the router plugin.
@@ -17,18 +17,24 @@ export const RouterPlugin = {
     if (!target) {
       throw new Error("[@esmx/router-vue] Invalid Vue app instance");
     }
-    Object.defineProperties(target, {
-      $router: {
-        get() {
-          return getRouter(isVue3 ? null : this);
+    if (isVue2) {
+      defineRouterProperties(
+        target,
+        function() {
+          return getRouter(this);
+        },
+        function() {
+          return getRoute(this);
         }
-      },
-      $route: {
-        get() {
-          return getRoute(isVue3 ? null : this);
-        }
-      }
-    });
+      );
+    } else {
+      const throwError = () => {
+        throw new Error(
+          "[@esmx/router-vue] Router not provided. Please call useProvideRouter() in your root component setup."
+        );
+      };
+      defineRouterProperties(target, throwError, throwError, true);
+    }
     vueApp.component("RouterLink", RouterLink);
     vueApp.component("RouterView", RouterView);
   }

package/dist/plugin.test.mjs

@@ -126,7 +126,7 @@ describe("plugin.ts - RouterPlugin", () => {
       expect(routeDescriptor == null ? void 0 : routeDescriptor.get).toBeDefined();
       expect(typeof (routeDescriptor == null ? void 0 : routeDescriptor.get)).toBe("function");
       expect(routeDescriptor == null ? void 0 : routeDescriptor.enumerable).toBe(false);
-      expect(routeDescriptor == null ? void 0 : routeDescriptor.configurable).toBe(false);
+      expect(routeDescriptor == null ? void 0 : routeDescriptor.configurable).toBe(true);
     });
     it("should provide consistent $router instance across components", async () => {
       const ChildComponent = defineComponent({
@@ -374,6 +374,208 @@ describe("plugin.ts - RouterPlugin", () => {
       expect(typeof routerViewComponent.setup).toBe("function");
     });
   });
+  describe("$router and $route Access", () => {
+    it("should throw error when accessing $router without useProvideRouter", () => {
+      app = createApp({
+        render: () => h("div", "Test App")
+      });
+      app.use(RouterPlugin);
+      const globalProperties = app.config.globalProperties;
+      expect(() => {
+        globalProperties.$router;
+      }).toThrow(
+        "[@esmx/router-vue] Router not provided. Please call useProvideRouter() in your root component setup."
+      );
+    });
+    it("should throw error when accessing $route without useProvideRouter", () => {
+      app = createApp({
+        render: () => h("div", "Test App")
+      });
+      app.use(RouterPlugin);
+      const globalProperties = app.config.globalProperties;
+      expect(() => {
+        globalProperties.$route;
+      }).toThrow(
+        "[@esmx/router-vue] Router not provided. Please call useProvideRouter() in your root component setup."
+      );
+    });
+    it("should override default getters after useProvideRouter is called", async () => {
+      app = createApp({
+        setup() {
+          useProvideRouter(router);
+          return () => h("div", "Test App");
+        }
+      });
+      app.use(RouterPlugin);
+      app.mount(container);
+      await nextTick();
+      const globalProperties = app.config.globalProperties;
+      expect(() => {
+        globalProperties.$router;
+      }).not.toThrow();
+      expect(() => {
+        globalProperties.$route;
+      }).not.toThrow();
+    });
+    it("should return correct router instance via $router", async () => {
+      let capturedRouter = null;
+      const TestComponent = defineComponent({
+        mounted() {
+          capturedRouter = this.$router;
+        },
+        render() {
+          return h("div", "Test");
+        }
+      });
+      app = createApp({
+        setup() {
+          useProvideRouter(router);
+          return () => h(TestComponent);
+        }
+      });
+      app.use(RouterPlugin);
+      app.mount(container);
+      await nextTick();
+      expect(capturedRouter).toBeDefined();
+      expect(capturedRouter).toBeInstanceOf(Router);
+      expect(capturedRouter.route.path).toBe("/");
+    });
+    it("should return correct route via $route", async () => {
+      var _a;
+      let capturedRoute = null;
+      const TestComponent = defineComponent({
+        mounted() {
+          capturedRoute = this.$route;
+        },
+        render() {
+          return h("div", "Test");
+        }
+      });
+      app = createApp({
+        setup() {
+          useProvideRouter(router);
+          return () => h(TestComponent);
+        }
+      });
+      app.use(RouterPlugin);
+      app.mount(container);
+      await nextTick();
+      expect(capturedRoute).toBeDefined();
+      expect(capturedRoute.path).toBe("/");
+      expect((_a = capturedRoute.meta) == null ? void 0 : _a.title).toBe(
+        "Home"
+      );
+    });
+    it("should update $route when navigation occurs", async () => {
+      const routes = [];
+      const TestComponent = defineComponent({
+        mounted() {
+          routes.push(this.$route.path);
+        },
+        updated() {
+          routes.push(this.$route.path);
+        },
+        render() {
+          return h("div", this.$route.path);
+        }
+      });
+      app = createApp({
+        setup() {
+          useProvideRouter(router);
+          return () => h(TestComponent);
+        }
+      });
+      app.use(RouterPlugin);
+      app.mount(container);
+      await nextTick();
+      expect(routes).toContain("/");
+      await router.push("/about");
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+    });
+    it("should provide same $router instance in nested components", async () => {
+      const routerInstances = [];
+      const ChildComponent = defineComponent({
+        mounted() {
+          routerInstances.push(this.$router);
+        },
+        render() {
+          return h("div", "Child");
+        }
+      });
+      const ParentComponent = defineComponent({
+        mounted() {
+          routerInstances.push(this.$router);
+        },
+        render() {
+          return h("div", [h("span", "Parent"), h(ChildComponent)]);
+        }
+      });
+      app = createApp({
+        setup() {
+          useProvideRouter(router);
+          return () => h(ParentComponent);
+        }
+      });
+      app.use(RouterPlugin);
+      app.mount(container);
+      await nextTick();
+      expect(routerInstances.length).toBe(2);
+      expect(routerInstances[0]).toBe(routerInstances[1]);
+    });
+    it("should allow navigation via $router.push", async () => {
+      let capturedRouter = null;
+      const TestComponent = defineComponent({
+        mounted() {
+          capturedRouter = this.$router;
+        },
+        render() {
+          return h("div", "Test");
+        }
+      });
+      app = createApp({
+        setup() {
+          useProvideRouter(router);
+          return () => h(TestComponent);
+        }
+      });
+      app.use(RouterPlugin);
+      app.mount(container);
+      await nextTick();
+      expect(capturedRouter).toBeDefined();
+      const routerInstance = capturedRouter;
+      expect(typeof routerInstance.push).toBe("function");
+      await routerInstance.push("/about");
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+    });
+    it("should allow navigation via $router.replace", async () => {
+      let capturedRouter = null;
+      const TestComponent = defineComponent({
+        mounted() {
+          capturedRouter = this.$router;
+        },
+        render() {
+          return h("div", "Test");
+        }
+      });
+      app = createApp({
+        setup() {
+          useProvideRouter(router);
+          return () => h(TestComponent);
+        }
+      });
+      app.use(RouterPlugin);
+      app.mount(container);
+      await nextTick();
+      expect(capturedRouter).toBeDefined();
+      const routerInstance = capturedRouter;
+      expect(typeof routerInstance.replace).toBe("function");
+      await routerInstance.replace("/about");
+      await nextTick();
+      expect(router.route.path).toBe("/about");
+    });
+  });
   describe("Advanced Plugin Features", () => {
     it("should support property descriptor configuration", () => {
       const testApp = {
@@ -394,10 +596,10 @@ describe("plugin.ts - RouterPlugin", () => {
       );
       expect(routerDescriptor == null ? void 0 : routerDescriptor.get).toBeDefined();
       expect(routerDescriptor == null ? void 0 : routerDescriptor.enumerable).toBe(false);
-      expect(routerDescriptor == null ? void 0 : routerDescriptor.configurable).toBe(false);
+      expect(routerDescriptor == null ? void 0 : routerDescriptor.configurable).toBe(true);
       expect(routeDescriptor == null ? void 0 : routeDescriptor.get).toBeDefined();
       expect(routeDescriptor == null ? void 0 : routeDescriptor.enumerable).toBe(false);
-      expect(routeDescriptor == null ? void 0 : routeDescriptor.configurable).toBe(false);
+      expect(routeDescriptor == null ? void 0 : routeDescriptor.configurable).toBe(true);
     });
     it("should handle different app instance structures", () => {
       const minimalApp = {

package/dist/router-link.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, h } from "vue";
 import { useLink } from "./use.mjs";
-import { isVue3 } from "./util.mjs";
+import { isVue2 } from "./util.mjs";
 export const RouterLink = defineComponent({
   name: "RouterLink",
   props: {
@@ -83,17 +83,19 @@ export const RouterLink = defineComponent({
   },
   setup(props, context) {
     const link = useLink(props);
-    if (isVue3) {
+    if (isVue2) {
       return () => {
         var _a, _b;
+        const { class: className, ...attributes } = link.value.attributes;
         return h(
           link.value.tag,
           {
-            ...link.value.attributes,
-            ...context.attrs,
-            ...link.value.createEventHandlers(
-              (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1))
-            )
+            attrs: {
+              ...attributes,
+              ...context.attrs
+            },
+            class: className,
+            on: link.value.createEventHandlers()
           },
           (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)
         );
@@ -101,16 +103,14 @@ export const RouterLink = defineComponent({
     }
     return () => {
       var _a, _b;
-      const { class: className, ...attributes } = link.value.attributes;
       return h(
         link.value.tag,
         {
-          attrs: {
-            ...attributes,
-            ...context.attrs
-          },
-          class: className,
-          on: link.value.createEventHandlers()
+          ...link.value.attributes,
+          ...context.attrs,
+          ...link.value.createEventHandlers(
+            (name) => "on".concat(name.charAt(0).toUpperCase()).concat(name.slice(1))
+          )
         },
         (_b = (_a = context.slots).default) == null ? void 0 : _b.call(_a)
       );

package/dist/router-view.mjs

@@ -9,7 +9,7 @@ export const RouterView = defineComponent({
     return () => {
       const matchedRoute = route.matched[depth];
       const component = matchedRoute ? resolveComponent(matchedRoute.component) : null;
-      return component ? h(component) : null;
+      return component ? h(component, { key: matchedRoute.compilePath }) : null;
     };
   }
 });

package/dist/router-view.test.mjs

@@ -287,9 +287,7 @@ describe("router-view.ts - RouterView Component", () => {
           return () => h("div", [
             h("span", "App"),
             h(RouterView),
-            // This renders Home component at depth 0
             h(DeepRouterView)
-            // This tries to render at depth 1, but no match
           ]);
         }
       });
@@ -342,7 +340,6 @@ describe("router-view.ts - RouterView Component", () => {
           {
             path: "/",
             component: null
-            // Initial route with null component
           }
         ],
         mode: RouterMode.memory,
@@ -456,4 +453,224 @@ describe("router-view.ts - RouterView Component", () => {
       app.unmount();
     });
   });
+  describe("compilePath as Key", () => {
+    it("should use compilePath as key for component rendering", async () => {
+      let mountCount = 0;
+      const TrackedComponent = defineComponent({
+        name: "TrackedComponent",
+        setup() {
+          mountCount++;
+          return () => h(
+            "div",
+            { class: "tracked" },
+            "Mounted ".concat(mountCount, " times")
+          );
+        }
+      });
+      const routes = [
+        {
+          path: "/route1",
+          component: TrackedComponent
+        },
+        {
+          path: "/route2",
+          component: TrackedComponent
+        }
+      ];
+      const testRouter = new Router({
+        root: "#test-app",
+        routes,
+        mode: RouterMode.memory,
+        base: new URL("http://localhost:8000/")
+      });
+      await testRouter.replace("/route1");
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(testRouter);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const app = createApp(TestApp);
+      app.mount(testContainer);
+      await nextTick();
+      expect(mountCount).toBe(1);
+      expect(testContainer.textContent).toContain("Mounted 1 times");
+      await testRouter.push("/route2");
+      await nextTick();
+      expect(mountCount).toBe(2);
+      expect(testContainer.textContent).toContain("Mounted 2 times");
+      await testRouter.push("/route1");
+      await nextTick();
+      expect(mountCount).toBe(3);
+      expect(testContainer.textContent).toContain("Mounted 3 times");
+      app.unmount();
+      testRouter.destroy();
+    });
+    it("should force re-render when compilePath changes for same route", async () => {
+      let mountCount = 0;
+      const TrackedComponent = defineComponent({
+        name: "TrackedComponent",
+        setup() {
+          mountCount++;
+          return () => h("div", { class: "tracked" }, "Mount #".concat(mountCount));
+        }
+      });
+      const routes = [
+        {
+          path: "/test",
+          component: TrackedComponent
+        }
+      ];
+      const testRouter = new Router({
+        root: "#test-app",
+        routes,
+        mode: RouterMode.memory,
+        base: new URL("http://localhost:8000/")
+      });
+      await testRouter.replace("/test");
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(testRouter);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const app = createApp(TestApp);
+      app.mount(testContainer);
+      await nextTick();
+      expect(mountCount).toBe(1);
+      expect(testContainer.textContent).toContain("Mount #1");
+      const newRoutes = [
+        {
+          path: "/test",
+          component: TrackedComponent,
+          meta: { updated: true }
+        }
+      ];
+      const newRouter = new Router({
+        root: "#test-app",
+        routes: newRoutes,
+        mode: RouterMode.memory,
+        base: new URL("http://localhost:8000/")
+      });
+      await newRouter.replace("/test");
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      app.unmount();
+      const NewTestApp = defineComponent({
+        setup() {
+          useProvideRouter(newRouter);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const newApp = createApp(NewTestApp);
+      newApp.mount(testContainer);
+      await nextTick();
+      expect(mountCount).toBe(2);
+      expect(testContainer.textContent).toContain("Mount #2");
+      newApp.unmount();
+      newRouter.destroy();
+    });
+    it("should handle same component with same compilePath without unnecessary re-renders", async () => {
+      let mountCount = 0;
+      const TrackedComponent = defineComponent({
+        name: "TrackedComponent",
+        setup() {
+          mountCount++;
+          return () => h("div", { class: "tracked" }, "Component");
+        }
+      });
+      const routes = [
+        {
+          path: "/test",
+          component: TrackedComponent
+        }
+      ];
+      const testRouter = new Router({
+        root: "#test-app",
+        routes,
+        mode: RouterMode.memory,
+        base: new URL("http://localhost:8000/")
+      });
+      await testRouter.replace("/test");
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(testRouter);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const app = createApp(TestApp);
+      app.mount(testContainer);
+      await nextTick();
+      expect(mountCount).toBe(1);
+      await testRouter.push("/");
+      await nextTick();
+      await testRouter.push("/test");
+      await nextTick();
+      expect(mountCount).toBe(1);
+      app.unmount();
+      testRouter.destroy();
+    });
+    it("should work with nested routes and compilePath keys", async () => {
+      let parentMountCount = 0;
+      let childMountCount = 0;
+      const ParentComponent = defineComponent({
+        name: "ParentComponent",
+        setup() {
+          parentMountCount++;
+          return () => h("div", [
+            h("h1", "Parent Mount #".concat(parentMountCount)),
+            h(RouterView)
+          ]);
+        }
+      });
+      const ChildComponent = defineComponent({
+        name: "ChildComponent",
+        setup() {
+          childMountCount++;
+          return () => h(
+            "div",
+            { class: "child" },
+            "Child Mount #".concat(childMountCount)
+          );
+        }
+      });
+      const nestedRoutes = [
+        {
+          path: "/parent",
+          component: ParentComponent,
+          children: [
+            {
+              path: "child",
+              component: ChildComponent
+            }
+          ]
+        }
+      ];
+      const nestedRouter = new Router({
+        root: "#test-app",
+        routes: nestedRoutes,
+        mode: RouterMode.memory,
+        base: new URL("http://localhost:8000/")
+      });
+      await nestedRouter.replace("/parent/child");
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      const TestApp = defineComponent({
+        setup() {
+          useProvideRouter(nestedRouter);
+          return () => h("div", [h(RouterView)]);
+        }
+      });
+      const app = createApp(TestApp);
+      app.mount(testContainer);
+      await nextTick();
+      expect(parentMountCount).toBe(1);
+      expect(childMountCount).toBe(1);
+      expect(testContainer.textContent).toContain("Parent Mount #1");
+      expect(testContainer.textContent).toContain("Child Mount #1");
+      app.unmount();
+      nestedRouter.destroy();
+    });
+  });
 });

package/dist/run-with-context.test.d.ts

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

package/dist/run-with-context.test.mjs

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import {
+  createApp,
+  getCurrentInstance,
+  h,
+  inject,
+  nextTick,
+  provide
+} from "vue";
+describe("app.runWithContext()", () => {
+  it("should exist on Vue app", () => {
+    const app = createApp({ render: () => h("div") });
+    expect(typeof app.runWithContext).toBe("function");
+  });
+  it("should enable inject to read provided value within context", () => {
+    const KEY = Symbol("ctx-key");
+    const app = createApp({ render: () => h("div") });
+    app.provide(KEY, 42);
+    const value = app.runWithContext(() => inject(KEY));
+    expect(value).toBe(42);
+  });
+  it("should not read value provided in root setup via runWithContext", async () => {
+    const KEY = Symbol("ctx-key-setup");
+    const app = createApp({
+      setup() {
+        provide(KEY, 7);
+        return () => h("div");
+      }
+    });
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    app.mount(container);
+    await nextTick();
+    const value = app.runWithContext(() => inject(KEY));
+    expect(value).toBeUndefined();
+    app.unmount();
+    container.remove();
+  });
+  it("should read app-level provide set inside setup via appContext", async () => {
+    const KEY = Symbol("ctx-key-setup-app");
+    const app = createApp({
+      setup() {
+        const appInst = getCurrentInstance().appContext.app;
+        appInst.provide(KEY, 9);
+        return () => h("div");
+      }
+    });
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    app.mount(container);
+    await nextTick();
+    const value = app.runWithContext(() => inject(KEY));
+    expect(value).toBe(9);
+    app.unmount();
+    container.remove();
+  });
+});

package/dist/use.d.ts

@@ -9,7 +9,7 @@ export interface VueInstance {
  * This is a lower-level function used internally by useRouter().
  * Use this in Options API, use useRouter() in Composition API.
  *
- * @param instance - Vue component instance (optional, will use getCurrentInstance if not provided)
+ * @param instance - Vue component instance
  * @returns Router instance
  * @throws {Error} If router context is not found
  *
@@ -31,18 +31,15 @@ export interface VueInstance {
  *     }
  *   }
  * });
- *
- * // Can also be called without instance (uses getCurrentInstance internally)
- * const router = getRouter(); // Works in globalProperties getters
  * ```
  */
-export declare function getRouter(instance?: VueInstance): Router;
+export declare function getRouter(instance: VueInstance): Router;
 /**
  * Get current route from a Vue component instance.
  * This is a lower-level function used internally by useRoute().
  * Use this in Options API, use useRoute() in Composition API.
  *
- * @param instance - Vue component instance (optional, will use getCurrentInstance if not provided)
+ * @param instance - Vue component instance
  * @returns Current route object
  * @throws {Error} If router context is not found
  *
@@ -64,12 +61,9 @@ export declare function getRouter(instance?: VueInstance): Router;
  *     }
  *   }
  * });
- *
- * // Can also be called without instance (uses getCurrentInstance internally)
- * const route = getRoute(); // Works in globalProperties getters
  * ```
  */
-export declare function getRoute(instance?: VueInstance): Route;
+export declare function getRoute(instance: VueInstance): Route;
 /**
  * Get the router instance in a Vue component.
  * Must be called within setup() or other composition functions.