@esmx/router-vue 3.0.0-rc.29 → 3.0.0-rc.31

package/src/use.ts

@@ -8,7 +8,7 @@ import {
     provide,
     ref
 } from 'vue';
-import { createSymbolProperty } from './util';
+import { createDependentProxy, createSymbolProperty } from './util';
 
 export interface VueInstance {
     $parent?: VueInstance | null;
@@ -18,7 +18,7 @@ export interface VueInstance {
 
 interface RouterContext {
     router: Router;
-    route: Ref<Route>;
+    route: Route;
 }
 
 const ROUTER_CONTEXT_KEY = Symbol('router-context');
@@ -136,7 +136,7 @@ export function getRouter(instance?: VueInstance): Router {
  * ```
  */
 export function getRoute(instance?: VueInstance): Route {
-    return findRouterContext(instance).route.value;
+    return findRouterContext(instance).route;
 }
 
 /**
@@ -224,7 +224,7 @@ export function useRouter(): Router {
  * ```
  */
 export function useRoute(): Route {
-    return useRouterContext('useRoute').route.value;
+    return useRouterContext('useRoute').route;
 }
 
 /**
@@ -259,20 +259,23 @@ export function useRoute(): Route {
 export function useProvideRouter(router: Router): void {
     const proxy = getCurrentProxy('useProvideRouter');
 
+    const dep = ref(false);
+
+    const proxiedRouter = createDependentProxy(router, dep);
+    const proxiedRoute = createDependentProxy(router.route, dep);
+
     const context: RouterContext = {
-        router,
-        route: ref(router.route) as Ref<Route>
+        router: proxiedRouter,
+        route: proxiedRoute
     };
 
-    // Provide context via Vue 3's provide/inject (works in setup)
     provide(ROUTER_INJECT_KEY, context);
-
-    // Also set on component instance for fallback (works after mount)
     routerContextProperty.set(proxy, context);
 
     const unwatch = router.afterEach((to: Route) => {
         if (router.route === to) {
-            to.syncTo(context.route.value);
+            to.syncTo(proxiedRoute);
+            dep.value = !dep.value;
         }
     });
 
@@ -311,11 +314,8 @@ export function useProvideRouter(router: Router): void {
  */
 export function useLink(props: RouterLinkProps) {
     const router = useRouter();
-    const route = useRoute();
 
     return computed(() => {
-        // vue will trigger a re-render when route.fullPath changes
-        route.fullPath;
         return router.resolveLink(props);
     });
 }

package/src/util.test.ts

@@ -1,9 +1,11 @@
 /**
  * @vitest-environment happy-dom
  */
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { computed, nextTick, ref } from 'vue';
 import { version } from 'vue';
 import {
+    createDependentProxy,
     createSymbolProperty,
     isESModule,
     isVue3,
@@ -251,168 +253,183 @@ describe('util.ts - Utility Functions', () => {
             });
 
             it('should return false for primitive values', () => {
-                const primitives = ['string', 42, true, false, Symbol('test')];
+                const primitives = [42, 'string', true, false, Symbol('test')];
 
                 primitives.forEach((primitive) => {
                     expect(isESModule(primitive)).toBe(false);
                 });
             });
-        });
-    });
 
-    describe('resolveComponent', () => {
-        describe('should return null for falsy inputs', () => {
-            const falsyValues = [null, undefined, false, 0, '', Number.NaN];
+            it('should return false for functions and arrays', () => {
+                const nonObjects = [
+                    () => {},
+                    () => {},
+                    [],
+                    [1, 2, 3],
+                    new Date()
+                ];
 
-            falsyValues.forEach((value) => {
-                it(`should return null for ${value}`, () => {
-                    expect(resolveComponent(value)).toBeNull();
+                nonObjects.forEach((nonObj) => {
+                    expect(isESModule(nonObj)).toBe(false);
                 });
             });
         });
+    });
 
-        describe('should handle ES modules', () => {
-            it('should return default export when available', () => {
-                const defaultComponent = { name: 'DefaultComponent' };
-                const esModule = {
-                    __esModule: true,
-                    default: defaultComponent,
-                    namedExport: { name: 'NamedComponent' }
-                };
-
-                const result = resolveComponent(esModule);
-
-                expect(result).toBe(defaultComponent);
+    describe('resolveComponent', () => {
+        describe('should return default export or module itself', () => {
+            it('should return null for falsy values', () => {
+                expect(resolveComponent(null)).toBeNull();
+                expect(resolveComponent(undefined)).toBeNull();
+                expect(resolveComponent(false)).toBeNull();
+                expect(resolveComponent(0)).toBeNull();
+                expect(resolveComponent('')).toBeNull();
             });
 
-            it('should return the module itself when no default export', () => {
-                const esModule = {
+            it('should return default export if available', () => {
+                const defaultExport = { name: 'DefaultComponent' };
+                const module = {
                     __esModule: true,
-                    namedExport: { name: 'NamedComponent' }
+                    default: defaultExport,
+                    other: 'value'
                 };
 
-                const result = resolveComponent(esModule);
-
-                expect(result).toBe(esModule);
+                expect(resolveComponent(module)).toBe(defaultExport);
             });
 
-            it('should prefer default export over module when both exist', () => {
-                const defaultComponent = { name: 'DefaultComponent' };
-                const esModule = {
+            it('should return the module itself if no default export', () => {
+                const module = {
                     __esModule: true,
-                    default: defaultComponent,
-                    name: 'ModuleComponent'
+                    someExport: 'value',
+                    otherExport: 42
                 };
 
-                const result = resolveComponent(esModule);
-
-                expect(result).toBe(defaultComponent);
-                expect(result).not.toBe(esModule);
+                expect(resolveComponent(module)).toBe(module);
             });
 
             it('should handle modules with Symbol.toStringTag', () => {
-                const defaultComponent = { name: 'SymbolTagComponent' };
-                const esModule = {
+                const defaultExport = { name: 'SymbolDefaultComponent' };
+                const module = {
                     [Symbol.toStringTag]: 'Module',
-                    default: defaultComponent
+                    default: defaultExport
                 };
 
-                const result = resolveComponent(esModule);
-
-                expect(result).toBe(defaultComponent);
+                expect(resolveComponent(module)).toBe(defaultExport);
             });
 
-            it('should handle falsy default export', () => {
-                const falsyDefaults = [null, undefined, false, 0, ''];
-
-                falsyDefaults.forEach((falsyDefault) => {
-                    const esModule = {
-                        __esModule: true,
-                        default: falsyDefault,
-                        fallback: { name: 'FallbackComponent' }
-                    };
+            it('should return non-module objects as is', () => {
+                const nonModule = { prop: 'value' };
+                expect(resolveComponent(nonModule)).toBe(nonModule);
+            });
 
-                    const result = resolveComponent(esModule);
+            it('should handle various component types', () => {
+                const functionComponent = () => ({ name: 'FunctionComponent' });
+                expect(resolveComponent(functionComponent)).toBe(
+                    functionComponent
+                );
 
-                    // Should return the module itself when default is falsy
-                    expect(result).toBe(esModule);
-                });
+                class ClassComponent {
+                    name = 'ClassComponent';
+                }
+                const classInstance = new ClassComponent();
+                expect(resolveComponent(classInstance)).toBe(classInstance);
             });
         });
+    });
 
-        describe('should handle non-ES modules', () => {
-            it('should return component directly for non-ES modules', () => {
-                const component = { name: 'RegularComponent' };
-
-                const result = resolveComponent(component);
+    describe('createDependentProxy', () => {
+        it('should return original property values', () => {
+            const original = { foo: 'bar', count: 42 };
+            const dep = ref(false);
+            const proxy = createDependentProxy(original, dep);
 
-                expect(result).toBe(component);
-            });
-
-            it('should return function components directly', () => {
-                const functionComponent = () => ({ name: 'FunctionComponent' });
+            expect(proxy.foo).toBe('bar');
+            expect(proxy.count).toBe(42);
+        });
 
-                const result = resolveComponent(functionComponent);
+        it('should handle method calls correctly', () => {
+            const original = {
+                items: [1, 2, 3],
+                getItems() {
+                    return this.items;
+                }
+            };
+            const dep = ref(false);
+            const proxy = createDependentProxy(original, dep);
 
-                expect(result).toBe(functionComponent);
-            });
+            expect(proxy.getItems()).toEqual([1, 2, 3]);
+            expect(proxy.getItems()).toBe(original.items);
+        });
 
-            it('should return class components directly', () => {
-                class ClassComponent {
-                    name = 'ClassComponent';
+        it('should handle nested property access', () => {
+            const original = {
+                nested: {
+                    value: 'nested-value'
                 }
+            };
+            const dep = ref(false);
+            const proxy = createDependentProxy(original, dep);
 
-                const result = resolveComponent(ClassComponent);
-
-                expect(result).toBe(ClassComponent);
-            });
+            expect(proxy.nested.value).toBe('nested-value');
         });
 
-        describe('edge cases', () => {
-            it('should handle circular references in modules', () => {
-                const esModule: Record<string, unknown> = {
-                    __esModule: true
-                };
-                esModule.default = esModule; // Circular reference
+        it('should allow property modification', () => {
+            const original = { value: 'original' };
+            const dep = ref(false);
+            const proxy = createDependentProxy(original, dep);
 
-                const result = resolveComponent(esModule);
+            proxy.value = 'modified';
+            expect(proxy.value).toBe('modified');
+            expect(original.value).toBe('modified');
+        });
+
+        it('should trigger computed updates when dependency changes', async () => {
+            const original = { value: 'test' };
+            const dep = ref(false);
+            const proxy = createDependentProxy(original, dep);
 
-                expect(result).toBe(esModule);
+            const computedValue = computed(() => {
+                return proxy.value + '-' + String(dep.value);
             });
 
-            it('should handle deeply nested default exports', () => {
-                const actualComponent = { name: 'DeepComponent' };
-                const esModule = {
-                    __esModule: true,
-                    default: {
-                        default: {
-                            default: actualComponent
-                        }
-                    }
-                };
+            expect(computedValue.value).toBe('test-false');
 
-                const result = resolveComponent(esModule);
+            dep.value = true;
+            await nextTick();
+            expect(computedValue.value).toBe('test-true');
 
-                // Should only resolve one level of default
-                expect(result).toEqual({
-                    default: {
-                        default: actualComponent
-                    }
-                });
-            });
+            proxy.value = 'updated';
+            dep.value = false;
+            await nextTick();
+            expect(computedValue.value).toBe('updated-false');
+        });
 
-            it('should handle modules with both __esModule and Symbol.toStringTag', () => {
-                const defaultComponent = { name: 'BothPropertiesComponent' };
-                const esModule = {
-                    __esModule: true,
-                    [Symbol.toStringTag]: 'Module',
-                    default: defaultComponent
-                };
+        it('should handle special properties', () => {
+            const symbol = Symbol('test');
+            const original = {
+                [symbol]: 'symbol-value'
+            };
+            const dep = ref(false);
+            const proxy = createDependentProxy(original, dep);
+
+            expect(proxy[symbol]).toBe('symbol-value');
+        });
 
-                const result = resolveComponent(esModule);
+        it('should read the dependency on property access', () => {
+            const original = { value: 'test' };
+            const dep = ref(false);
 
-                expect(result).toBe(defaultComponent);
+            const spy = vi.fn();
+            const depValue = dep.value; // 预先读取一次值
+            vi.spyOn(dep, 'value', 'get').mockImplementation(() => {
+                spy();
+                return depValue;
             });
+
+            const proxy = createDependentProxy(original, dep);
+
+            proxy.value;
+            expect(spy).toHaveBeenCalled();
         });
     });
 });

package/src/util.ts

@@ -1,4 +1,5 @@
 import { version } from 'vue';
+import type { Ref } from 'vue';
 
 export const isVue3 = version.startsWith('3.');
 
@@ -13,6 +14,18 @@ export function createSymbolProperty<T>(symbol: symbol) {
     } as const;
 }
 
+export function createDependentProxy<T extends object>(
+    obj: T,
+    dep: Ref<boolean>
+): T {
+    return new Proxy(obj, {
+        get(target, prop, receiver) {
+            dep.value;
+            return Reflect.get(target, prop, receiver);
+        }
+    });
+}
+
 export function isESModule(obj: unknown): obj is Record<string | symbol, any> {
     if (!obj || typeof obj !== 'object') return false;
     const module = obj as Record<string | symbol, any>;