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

package/dist/util.test.mjs

@@ -6,19 +6,20 @@ import { computed, nextTick, ref, version } from "vue";
 import {
   createDependentProxy,
   createSymbolProperty,
+  defineRouterProperties,
   isESModule,
-  isVue3,
+  isVue2,
   resolveComponent
 } from "./util.mjs";
 describe("util.ts - Utility Functions", () => {
-  describe("isVue3", () => {
-    it("should correctly identify Vue 3", () => {
-      expect(isVue3).toBe(version.startsWith("3."));
-      expect(typeof isVue3).toBe("boolean");
+  describe("isVue2", () => {
+    it("should correctly identify Vue 2", () => {
+      expect(isVue2).toBe(version.startsWith("2."));
+      expect(typeof isVue2).toBe("boolean");
     });
     it("should be consistent with Vue version check", () => {
-      const expectedResult = version.startsWith("3.");
-      expect(isVue3).toBe(expectedResult);
+      const expectedResult = version.startsWith("2.");
+      expect(isVue2).toBe(expectedResult);
     });
   });
   describe("createSymbolProperty", () => {
@@ -380,4 +381,224 @@ describe("util.ts - Utility Functions", () => {
       expect(spy).toHaveBeenCalled();
     });
   });
+  describe("defineRouterProperties", () => {
+    it("should define $router and $route properties on target object", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      expect(target).toHaveProperty("$router");
+      expect(target).toHaveProperty("$route");
+    });
+    it("should call getter functions when accessing properties", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      const router = target.$router;
+      const route = target.$route;
+      expect(routerGetter).toHaveBeenCalled();
+      expect(routeGetter).toHaveBeenCalled();
+      expect(router).toBe(mockRouter);
+      expect(route).toBe(mockRoute);
+    });
+    it("should use correct this context in getter functions", () => {
+      const target = { customProp: "test" };
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return this.customProp ? mockRouter : {};
+      });
+      const routeGetter = vi.fn(function() {
+        return this.customProp ? mockRoute : {};
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      const router = target.$router;
+      const route = target.$route;
+      expect(router).toBe(mockRouter);
+      expect(route).toBe(mockRoute);
+    });
+    it("should make properties non-enumerable by default", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      const descriptors = Object.getOwnPropertyDescriptors(target);
+      expect(descriptors.$router.enumerable).toBe(false);
+      expect(descriptors.$route.enumerable).toBe(false);
+    });
+    it("should make properties non-configurable by default", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      const descriptors = Object.getOwnPropertyDescriptors(target);
+      expect(descriptors.$router.configurable).toBe(false);
+      expect(descriptors.$route.configurable).toBe(false);
+    });
+    it("should make properties configurable when configurable option is true", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter, true);
+      const descriptors = Object.getOwnPropertyDescriptors(target);
+      expect(descriptors.$router.configurable).toBe(true);
+      expect(descriptors.$route.configurable).toBe(true);
+    });
+    it("should define properties as getters", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      const descriptors = Object.getOwnPropertyDescriptors(target);
+      expect(typeof descriptors.$router.get).toBe("function");
+      expect(typeof descriptors.$route.get).toBe("function");
+      expect(descriptors.$router.set).toBeUndefined();
+      expect(descriptors.$route.set).toBeUndefined();
+    });
+    it("should call getter each time property is accessed", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return { path: "/test" };
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      target.$router;
+      target.$router;
+      target.$router;
+      expect(routerGetter).toHaveBeenCalledTimes(3);
+    });
+    it("should work with different target objects", () => {
+      const targets = [
+        {},
+        { existingProp: "value" },
+        /* @__PURE__ */ Object.create(null),
+        new class Test {
+        }()
+      ];
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      targets.forEach((target) => {
+        defineRouterProperties(target, routerGetter, routeGetter);
+        expect(target).toHaveProperty("$router");
+        expect(target).toHaveProperty("$route");
+        const router = target.$router;
+        const route = target.$route;
+        expect(router).toBe(mockRouter);
+        expect(route).toBe(mockRoute);
+      });
+    });
+    it("should preserve existing properties on target object", () => {
+      const target = {
+        existingProp: "value",
+        $existingRouter: "should not be affected"
+      };
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const routerGetter = vi.fn(function() {
+        return mockRouter;
+      });
+      const routeGetter = vi.fn(function() {
+        return mockRoute;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      expect(target.existingProp).toBe("value");
+      expect(target.$existingRouter).toBe("should not be affected");
+      expect(target).toHaveProperty("$router");
+      expect(target).toHaveProperty("$route");
+    });
+    it("should handle getter functions that return undefined", () => {
+      const target = {};
+      const routerGetter = vi.fn(function() {
+        return void 0;
+      });
+      const routeGetter = vi.fn(function() {
+        return void 0;
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      const router = target.$router;
+      const route = target.$route;
+      expect(router).toBeUndefined();
+      expect(route).toBeUndefined();
+      expect(routerGetter).toHaveBeenCalled();
+      expect(routeGetter).toHaveBeenCalled();
+    });
+    it("should handle getter functions that throw errors", () => {
+      const target = {};
+      const routerGetter = vi.fn(function() {
+        throw new Error("Router error");
+      });
+      const routeGetter = vi.fn(function() {
+        throw new Error("Route error");
+      });
+      defineRouterProperties(target, routerGetter, routeGetter);
+      expect(() => target.$router).toThrow("Router error");
+      expect(() => target.$route).toThrow("Route error");
+    });
+    it("should work with arrow functions as getters", () => {
+      const target = {};
+      const mockRouter = { push: vi.fn() };
+      const mockRoute = { path: "/test" };
+      const context = { customContext: "test" };
+      const routerGetter = vi.fn(() => mockRouter);
+      const routeGetter = vi.fn(() => mockRoute);
+      defineRouterProperties.call(
+        context,
+        target,
+        routerGetter,
+        routeGetter
+      );
+      const router = target.$router;
+      const route = target.$route;
+      expect(router).toBe(mockRouter);
+      expect(route).toBe(mockRoute);
+      expect(routerGetter).toHaveBeenCalled();
+      expect(routeGetter).toHaveBeenCalled();
+    });
+  });
 });

package/package.json

@@ -50,7 +50,7 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.84"
+        "@esmx/router": "3.0.0-rc.87"
     },
     "devDependencies": {
         "@biomejs/biome": "2.3.7",
@@ -62,7 +62,7 @@
         "vue": "3.5.23",
         "vue2": "npm:vue@2.7.16"
     },
-    "version": "3.0.0-rc.84",
+    "version": "3.0.0-rc.87",
     "type": "module",
     "private": false,
     "exports": {
@@ -81,5 +81,5 @@
         "template",
         "public"
     ],
-    "gitHead": "21f81d3d3083f4008b491d7d906d772ffb537007"
+    "gitHead": "1f79a73438c2193fd06ebaa3dc6a4ec420e6b026"
 }

package/src/plugin.test.ts

@@ -155,9 +155,8 @@ describe('plugin.ts - RouterPlugin', () => {
             expect(routeDescriptor?.get).toBeDefined();
             expect(typeof routeDescriptor?.get).toBe('function');
 
-            // Verify the descriptor is properly configured for reactivity
             expect(routeDescriptor?.enumerable).toBe(false);
-            expect(routeDescriptor?.configurable).toBe(false);
+            expect(routeDescriptor?.configurable).toBe(true);
         });
 
         it('should provide consistent $router instance across components', async () => {
@@ -481,6 +480,253 @@ describe('plugin.ts - RouterPlugin', () => {
         });
     });
 
+    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 as any).$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 as any).$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 as any).$router;
+            }).not.toThrow();
+            expect(() => {
+                (globalProperties as any).$route;
+            }).not.toThrow();
+        });
+
+        it('should return correct router instance via $router', async () => {
+            let capturedRouter: Router | null = 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 as unknown as Router).route.path).toBe('/');
+        });
+
+        it('should return correct route via $route', async () => {
+            let capturedRoute: Route | null = 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 as unknown as Route).path).toBe('/');
+            expect((capturedRoute as unknown as Route).meta?.title).toBe(
+                'Home'
+            );
+        });
+
+        it('should update $route when navigation occurs', async () => {
+            const routes: string[] = [];
+
+            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: Router[] = [];
+
+            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: Router | null = 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 as unknown as Router;
+            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: Router | null = 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 as unknown as Router;
+            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', () => {
             interface TestApp {
@@ -516,14 +762,13 @@ describe('plugin.ts - RouterPlugin', () => {
                 '$route'
             );
 
-            // Check descriptor properties - Object.defineProperties sets these to false by default
             expect(routerDescriptor?.get).toBeDefined();
-            expect(routerDescriptor?.enumerable).toBe(false); // Default value from Object.defineProperty
-            expect(routerDescriptor?.configurable).toBe(false); // Default value from Object.defineProperty
+            expect(routerDescriptor?.enumerable).toBe(false);
+            expect(routerDescriptor?.configurable).toBe(true);
 
             expect(routeDescriptor?.get).toBeDefined();
-            expect(routeDescriptor?.enumerable).toBe(false); // Default value from Object.defineProperty
-            expect(routeDescriptor?.configurable).toBe(false); // Default value from Object.defineProperty
+            expect(routeDescriptor?.enumerable).toBe(false);
+            expect(routeDescriptor?.configurable).toBe(true);
         });
 
         it('should handle different app instance structures', () => {

package/src/plugin.ts

@@ -1,7 +1,7 @@
 import { RouterLink } from './router-link';
 import { RouterView } from './router-view';
 import { getRoute, getRouter } from './use';
-import { isVue3 } from './util';
+import { defineRouterProperties, isVue2 } from './util';
 
 interface VueApp {
     config?: {
@@ -81,18 +81,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 (this: any) {
+                    return getRouter(this);
+                },
+                function (this: any) {
+                    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);
+        }
 
         // Register global components
         vueApp.component('RouterLink', RouterLink);

package/src/router-link.ts

@@ -1,7 +1,7 @@
 import type { RouterLinkProps } from '@esmx/router';
 import { defineComponent, h, type PropType } from 'vue';
 import { useLink } from './use';
-import { isVue3 } from './util';
+import { isVue2 } from './util';
 
 /**
  * RouterLink component for navigation.
@@ -136,33 +136,34 @@ export const RouterLink = defineComponent({
     setup(props, context) {
         const link = useLink(props);
 
-        if (isVue3) {
+        if (isVue2) {
             return () => {
+                const { class: className, ...attributes } =
+                    link.value.attributes;
                 return h(
                     link.value.tag,
                     {
-                        ...link.value.attributes,
-                        ...context.attrs,
-                        ...link.value.createEventHandlers(
-                            (name) =>
-                                `on${name.charAt(0).toUpperCase()}${name.slice(1)}`
-                        )
+                        attrs: {
+                            ...attributes,
+                            ...context.attrs
+                        },
+                        class: className,
+                        on: link.value.createEventHandlers()
                     },
                     context.slots.default?.()
                 );
             };
         }
         return () => {
-            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${name.charAt(0).toUpperCase()}${name.slice(1)}`
+                    )
                 },
                 context.slots.default?.()
             );