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

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/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.

package/dist/use.mjs

@@ -6,7 +6,12 @@ import {
   provide,
   ref
 } from "vue";
-import { createDependentProxy, createSymbolProperty } from "./util.mjs";
+import {
+  createDependentProxy,
+  createSymbolProperty,
+  defineRouterProperties,
+  isVue2
+} from "./util.mjs";
 const ROUTER_CONTEXT_KEY = Symbol("router-context");
 const ROUTER_INJECT_KEY = Symbol("router-inject");
 const ROUTER_VIEW_DEPTH_KEY = Symbol("router-view-depth");
@@ -24,9 +29,6 @@ function getCurrentProxy() {
   return instance.proxy;
 }
 function findRouterContext(vm) {
-  if (!vm) {
-    vm = getCurrentProxy();
-  }
   let context = routerContextProperty.get(vm);
   if (context) {
     return context;
@@ -75,6 +77,15 @@ export function useProvideRouter(router) {
   };
   provide(ROUTER_INJECT_KEY, context);
   routerContextProperty.set(proxy, context);
+  if (!isVue2) {
+    const app = getCurrentInstance().appContext.app;
+    defineRouterProperties(
+      app.config.globalProperties,
+      () => proxiedRouter,
+      () => proxiedRoute,
+      true
+    );
+  }
   const unwatch = router.afterEach((to) => {
     if (router.route === to) {
       to.syncTo(proxiedRoute);

package/dist/util.d.ts

@@ -1,5 +1,16 @@
+import type { Route, Router } from '@esmx/router';
 import type { Ref } from 'vue';
-export declare const isVue3: boolean;
+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;

package/dist/util.mjs

@@ -1,5 +1,19 @@
 import { version } from "vue";
-export const isVue3 = version.startsWith("3.");
+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) {

package/dist/util.test.d.ts

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