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

package/src/run-with-context.test.ts

@@ -0,0 +1,64 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, expect, it } from 'vitest';
+import type { InjectionKey } from 'vue';
+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: InjectionKey<number> = 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: InjectionKey<number> = 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: InjectionKey<number> = 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/src/use.ts

@@ -7,7 +7,12 @@ import {
     provide,
     ref
 } from 'vue';
-import { createDependentProxy, createSymbolProperty } from './util';
+import {
+    createDependentProxy,
+    createSymbolProperty,
+    defineRouterProperties,
+    isVue2
+} from './util';
 
 export interface VueInstance {
     $parent?: VueInstance | null;
@@ -41,12 +46,7 @@ function getCurrentProxy(): VueInstance {
     return instance.proxy;
 }
 
-function findRouterContext(vm?: VueInstance): RouterContext {
-    // If no vm provided, try to get current instance
-    if (!vm) {
-        vm = getCurrentProxy();
-    }
-
+function findRouterContext(vm: VueInstance): RouterContext {
     let context = routerContextProperty.get(vm);
     if (context) {
         return context;
@@ -72,7 +72,7 @@ function findRouterContext(vm?: VueInstance): RouterContext {
  * 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
  *
@@ -94,12 +94,9 @@ function findRouterContext(vm?: VueInstance): RouterContext {
  *     }
  *   }
  * });
- *
- * // Can also be called without instance (uses getCurrentInstance internally)
- * const router = getRouter(); // Works in globalProperties getters
  * ```
  */
-export function getRouter(instance?: VueInstance): Router {
+export function getRouter(instance: VueInstance): Router {
     return findRouterContext(instance).router;
 }
 
@@ -108,7 +105,7 @@ export function getRouter(instance?: VueInstance): Router {
  * 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
  *
@@ -130,12 +127,9 @@ export function getRouter(instance?: VueInstance): Router {
  *     }
  *   }
  * });
- *
- * // Can also be called without instance (uses getCurrentInstance internally)
- * const route = getRoute(); // Works in globalProperties getters
  * ```
  */
-export function getRoute(instance?: VueInstance): Route {
+export function getRoute(instance: VueInstance): Route {
     return findRouterContext(instance).route;
 }
 
@@ -272,6 +266,16 @@ export function useProvideRouter(router: Router): void {
     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: Route) => {
         if (router.route === to) {
             to.syncTo(proxiedRoute);

package/src/util.test.ts

@@ -1,28 +1,29 @@
 /**
  * @vitest-environment happy-dom
  */
+
+import type { Route, Router } from '@esmx/router';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { computed, nextTick, ref, version } from 'vue';
 import {
     createDependentProxy,
     createSymbolProperty,
+    defineRouterProperties,
     isESModule,
-    isVue3,
+    isVue2,
     resolveComponent
 } from './util';
 
 describe('util.ts - Utility Functions', () => {
-    describe('isVue3', () => {
-        it('should correctly identify Vue 3', () => {
-            // Since we're testing in a Vue 3 environment, isVue3 should be true
-            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', () => {
-            // Verify the logic is correct
-            const expectedResult = version.startsWith('3.');
-            expect(isVue3).toBe(expectedResult);
+            const expectedResult = version.startsWith('2.');
+            expect(isVue2).toBe(expectedResult);
         });
     });
 
@@ -472,4 +473,288 @@ 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() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                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() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                return mockRoute;
+            });
+
+            defineRouterProperties(target, routerGetter, routeGetter);
+
+            const router = (target as any).$router;
+            const route = (target as any).$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() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return this.customProp ? mockRouter : ({} as Router);
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                return this.customProp ? mockRoute : ({} as Route);
+            });
+
+            defineRouterProperties(target, routerGetter, routeGetter);
+
+            const router = (target as any).$router;
+            const route = (target as any).$route;
+
+            expect(router).toBe(mockRouter);
+            expect(route).toBe(mockRoute);
+        });
+
+        it('should make properties non-enumerable by default', () => {
+            const target = {};
+            const mockRouter = { push: vi.fn() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                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() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                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() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                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() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                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() } as unknown as Router;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                return { path: '/test' } as Route;
+            });
+
+            defineRouterProperties(target, routerGetter, routeGetter);
+
+            (target as any).$router;
+            (target as any).$router;
+            (target as any).$router;
+
+            expect(routerGetter).toHaveBeenCalledTimes(3);
+        });
+
+        it('should work with different target objects', () => {
+            const targets = [
+                {},
+                { existingProp: 'value' },
+                Object.create(null),
+                new (class Test {})()
+            ];
+
+            const mockRouter = { push: vi.fn() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                return mockRoute;
+            });
+
+            targets.forEach((target) => {
+                defineRouterProperties(target, routerGetter, routeGetter);
+
+                expect(target).toHaveProperty('$router');
+                expect(target).toHaveProperty('$route');
+
+                const router = (target as any).$router;
+                const route = (target as any).$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() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+
+            const routerGetter = vi.fn(function (this: any) {
+                return mockRouter;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                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 (this: any) {
+                return undefined as any;
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                return undefined as any;
+            });
+
+            defineRouterProperties(target, routerGetter, routeGetter);
+
+            const router = (target as any).$router;
+            const route = (target as any).$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 (this: any) {
+                throw new Error('Router error');
+            });
+            const routeGetter = vi.fn(function (this: any) {
+                throw new Error('Route error');
+            });
+
+            defineRouterProperties(target, routerGetter, routeGetter);
+
+            expect(() => (target as any).$router).toThrow('Router error');
+            expect(() => (target as any).$route).toThrow('Route error');
+        });
+
+        it('should work with arrow functions as getters', () => {
+            const target = {};
+            const mockRouter = { push: vi.fn() } as unknown as Router;
+            const mockRoute = { path: '/test' } as unknown as Route;
+            const context = { customContext: 'test' };
+
+            const routerGetter = vi.fn(() => mockRouter);
+            const routeGetter = vi.fn(() => mockRoute);
+
+            defineRouterProperties.call(
+                context,
+                target,
+                routerGetter,
+                routeGetter
+            );
+
+            const router = (target as any).$router;
+            const route = (target as any).$route;
+
+            expect(router).toBe(mockRouter);
+            expect(route).toBe(mockRoute);
+            expect(routerGetter).toHaveBeenCalled();
+            expect(routeGetter).toHaveBeenCalled();
+        });
+    });
 });

package/src/util.ts

@@ -1,7 +1,37 @@
+import type { Route, Router } from '@esmx/router';
 import type { Ref } from 'vue';
 import { version } from 'vue';
 
-export const isVue3 = version.startsWith('3.');
+export const isVue2 = version.startsWith('2.');
+
+/**
+ * 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 function defineRouterProperties(
+    target: Record<string, unknown>,
+    routerGetter: (this: unknown) => Router,
+    routeGetter: (this: unknown) => Route,
+    configurable = false
+): void {
+    Object.defineProperties(target, {
+        $router: {
+            configurable,
+            enumerable: false,
+            get: routerGetter
+        },
+        $route: {
+            configurable,
+            enumerable: false,
+            get: routeGetter
+        }
+    });
+}
 
 export function createSymbolProperty<T>(symbol: symbol) {
     return {