@esmx/router-vue 3.0.0-rc.62 → 3.0.0-rc.64

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://www.esmnext.com/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
   <h1>@esmx/router-vue</h1>
   
   <div>
@@ -9,7 +9,7 @@
     <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
       <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
     </a>
-    <a href="https://www.esmnext.com/coverage/">
+    <a href="https://esmx.dev/coverage/">
       <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
     </a>
     <a href="https://nodejs.org/">

package/README.zh-CN.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://www.esmnext.com/logo.svg?t=2025" width="120" alt="Esmx Logo" />
+  <img src="https://esmx.dev/logo.svg?t=2025" width="120" alt="Esmx Logo" />
   <h1>@esmx/router-vue</h1>
   
   <div>
@@ -9,7 +9,7 @@
     <a href="https://github.com/esmnext/esmx/actions/workflows/build.yml">
       <img src="https://github.com/esmnext/esmx/actions/workflows/build.yml/badge.svg" alt="Build" />
     </a>
-    <a href="https://www.esmnext.com/coverage/">
+    <a href="https://esmx.dev/coverage/">
       <img src="https://img.shields.io/badge/coverage-live%20report-brightgreen" alt="Coverage Report" />
     </a>
     <a href="https://nodejs.org/">

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export type * from './vue2';
 export type * from './vue3';
 export { useRouter, useRoute, useProvideRouter, useLink, getRoute, getRouter } from './use';
 export { RouterLink } from './router-link';
-export { RouterView } from './router-view';
+export { RouterView, RouterViewDepth } from './router-view';
 export { RouterPlugin } from './plugin';

package/dist/index.mjs

@@ -7,5 +7,5 @@ export {
   getRouter
 } from "./use.mjs";
 export { RouterLink } from "./router-link.mjs";
-export { RouterView } from "./router-view.mjs";
+export { RouterView, RouterViewDepth } from "./router-view.mjs";
 export { RouterPlugin } from "./plugin.mjs";

package/dist/index.test.mjs

@@ -66,6 +66,7 @@ describe("index.ts - Package Entry Point", () => {
         // Components
         "RouterLink",
         "RouterView",
+        "RouterViewDepth",
         // Plugin
         "RouterPlugin"
       ];
@@ -87,6 +88,7 @@ describe("index.ts - Package Entry Point", () => {
         "getRoute",
         "RouterLink",
         "RouterView",
+        "RouterViewDepth",
         "RouterPlugin"
       ];
       const unexpectedExports = actualExports.filter(

package/dist/router-view.d.ts

@@ -1,3 +1,4 @@
+export declare const RouterViewDepth: unique symbol;
 /**
  * RouterView component for rendering matched route components.
  * Acts as a placeholder where route components are rendered based on the current route.

package/dist/router-view.mjs

@@ -1,13 +1,13 @@
 import { defineComponent, h, inject, provide } from "vue";
 import { useRoute } from "./use.mjs";
 import { resolveComponent } from "./util.mjs";
-const RouterViewDepthKey = Symbol("RouterViewDepth");
+export const RouterViewDepth = Symbol("RouterViewDepth");
 export const RouterView = defineComponent({
   name: "RouterView",
   setup() {
     const route = useRoute();
-    const depth = inject(RouterViewDepthKey, 0);
-    provide(RouterViewDepthKey, depth + 1);
+    const depth = inject(RouterViewDepth, 0);
+    provide(RouterViewDepth, depth + 1);
     return () => {
       const matchedRoute = route.matched[depth];
       const component = matchedRoute ? resolveComponent(matchedRoute.component) : null;

package/dist/router-view.test.mjs

@@ -170,11 +170,11 @@ describe("router-view.ts - RouterView Component", () => {
   describe("Depth Tracking", () => {
     it("should inject depth 0 by default", async () => {
       let injectedDepth;
-      const RouterViewDepthKey = Symbol("RouterViewDepth");
+      const RouterViewDepth = Symbol("RouterViewDepth");
       const TestRouterView = defineComponent({
         name: "TestRouterView",
         setup() {
-          injectedDepth = inject(RouterViewDepthKey, -1);
+          injectedDepth = inject(RouterViewDepth, -1);
           return () => h(RouterView);
         }
       });
@@ -193,19 +193,19 @@ describe("router-view.ts - RouterView Component", () => {
     it("should provide correct depth in nested RouterViews", async () => {
       let parentDepth;
       let childDepth;
-      const RouterViewDepthKey = Symbol("RouterViewDepth");
+      const RouterViewDepth = Symbol("RouterViewDepth");
       const ParentTestComponent = defineComponent({
         name: "ParentTestComponent",
         setup() {
-          parentDepth = inject(RouterViewDepthKey, -1);
-          provide(RouterViewDepthKey, 0);
+          parentDepth = inject(RouterViewDepth, -1);
+          provide(RouterViewDepth, 0);
           return () => h("div", [h("span", "Parent"), h(ChildTestComponent)]);
         }
       });
       const ChildTestComponent = defineComponent({
         name: "ChildTestComponent",
         setup() {
-          childDepth = inject(RouterViewDepthKey, -1);
+          childDepth = inject(RouterViewDepth, -1);
           return () => h("div", "Child");
         }
       });
@@ -272,12 +272,12 @@ describe("router-view.ts - RouterView Component", () => {
   });
   describe("Edge Cases and Error Handling", () => {
     it("should render null when no route matches at current depth", async () => {
-      const RouterViewDepthKey = Symbol("RouterViewDepth");
+      const RouterViewDepth = Symbol("RouterViewDepth");
       const DeepRouterView = defineComponent({
         name: "DeepRouterView",
         setup() {
-          const currentDepth = inject(RouterViewDepthKey, 0);
-          provide(RouterViewDepthKey, currentDepth + 1);
+          const currentDepth = inject(RouterViewDepth, 0);
+          provide(RouterViewDepth, currentDepth + 1);
           return () => h(RouterView);
         }
       });

package/dist/use.mjs

@@ -62,7 +62,7 @@ export function useRoute() {
 }
 export function useProvideRouter(router) {
   const proxy = getCurrentProxy("useProvideRouter");
-  const dep = ref(false);
+  const dep = ref(0);
   const proxiedRouter = createDependentProxy(router, dep);
   const proxiedRoute = createDependentProxy(router.route, dep);
   const context = {
@@ -74,7 +74,7 @@ export function useProvideRouter(router) {
   const unwatch = router.afterEach((to) => {
     if (router.route === to) {
       to.syncTo(proxiedRoute);
-      dep.value = !dep.value;
+      dep.value++;
     }
   });
   onBeforeUnmount(unwatch);

package/dist/util.d.ts

@@ -4,6 +4,6 @@ export declare function createSymbolProperty<T>(symbol: symbol): {
     readonly set: (instance: any, value: T) => void;
     readonly get: (instance: any) => T | undefined;
 };
-export declare function createDependentProxy<T extends object>(obj: T, dep: Ref<boolean>): T;
+export declare function createDependentProxy<T extends object>(obj: T, dep: Ref<any>): T;
 export declare function isESModule(obj: unknown): obj is Record<string | symbol, any>;
 export declare function resolveComponent(component: unknown): unknown;

package/package.json

@@ -50,7 +50,7 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.62"
+        "@esmx/router": "3.0.0-rc.64"
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -62,7 +62,7 @@
         "vue": "3.5.13",
         "vue2": "npm:vue@2.7.16"
     },
-    "version": "3.0.0-rc.62",
+    "version": "3.0.0-rc.64",
     "type": "module",
     "private": false,
     "exports": {
@@ -81,5 +81,5 @@
         "template",
         "public"
     ],
-    "gitHead": "e5a1e811403bf1db4437dff88c3ea8bc6b576f64"
+    "gitHead": "8c103750d1e623fa4fa23b6ed9149f39e4a9bd58"
 }

package/src/index.test.ts

@@ -79,6 +79,7 @@ describe('index.ts - Package Entry Point', () => {
                 // Components
                 'RouterLink',
                 'RouterView',
+                'RouterViewDepth',
                 // Plugin
                 'RouterPlugin'
             ];
@@ -102,6 +103,7 @@ describe('index.ts - Package Entry Point', () => {
                 'getRoute',
                 'RouterLink',
                 'RouterView',
+                'RouterViewDepth',
                 'RouterPlugin'
             ];
 

package/src/index.ts

@@ -11,6 +11,6 @@ export {
 } from './use';
 
 export { RouterLink } from './router-link';
-export { RouterView } from './router-view';
+export { RouterView, RouterViewDepth } from './router-view';
 
 export { RouterPlugin } from './plugin';

package/src/router-view.test.ts

@@ -231,13 +231,13 @@ describe('router-view.ts - RouterView Component', () => {
             let injectedDepth: number | undefined;
 
             // Use the same symbol key that RouterView uses internally
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             // Create a custom RouterView component that can capture the injected depth
             const TestRouterView = defineComponent({
                 name: 'TestRouterView',
                 setup() {
-                    injectedDepth = inject(RouterViewDepthKey, -1);
+                    injectedDepth = inject(RouterViewDepth, -1);
                     return () => h(RouterView);
                 }
             });
@@ -263,13 +263,13 @@ describe('router-view.ts - RouterView Component', () => {
             let parentDepth: number | undefined;
             let childDepth: number | undefined;
 
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             const ParentTestComponent = defineComponent({
                 name: 'ParentTestComponent',
                 setup() {
-                    parentDepth = inject(RouterViewDepthKey, -1);
-                    provide(RouterViewDepthKey, 0); // Simulate parent RouterView
+                    parentDepth = inject(RouterViewDepth, -1);
+                    provide(RouterViewDepth, 0); // Simulate parent RouterView
                     return () =>
                         h('div', [h('span', 'Parent'), h(ChildTestComponent)]);
                 }
@@ -278,7 +278,7 @@ describe('router-view.ts - RouterView Component', () => {
             const ChildTestComponent = defineComponent({
                 name: 'ChildTestComponent',
                 setup() {
-                    childDepth = inject(RouterViewDepthKey, -1);
+                    childDepth = inject(RouterViewDepth, -1);
                     return () => h('div', 'Child');
                 }
             });
@@ -362,14 +362,14 @@ describe('router-view.ts - RouterView Component', () => {
 
     describe('Edge Cases and Error Handling', () => {
         it('should render null when no route matches at current depth', async () => {
-            const RouterViewDepthKey = Symbol('RouterViewDepth');
+            const RouterViewDepth = Symbol('RouterViewDepth');
 
             const DeepRouterView = defineComponent({
                 name: 'DeepRouterView',
                 setup() {
                     // Inject depth 0 from parent RouterView and provide depth 1
-                    const currentDepth = inject(RouterViewDepthKey, 0);
-                    provide(RouterViewDepthKey, currentDepth + 1);
+                    const currentDepth = inject(RouterViewDepth, 0);
+                    provide(RouterViewDepth, currentDepth + 1);
                     return () => h(RouterView);
                 }
             });

package/src/router-view.ts

@@ -2,7 +2,7 @@ import { defineComponent, h, inject, provide } from 'vue';
 import { useRoute } from './use';
 import { resolveComponent } from './util';
 
-const RouterViewDepthKey = Symbol('RouterViewDepth');
+export const RouterViewDepth = Symbol('RouterViewDepth');
 
 /**
  * RouterView component for rendering matched route components.
@@ -39,11 +39,11 @@ export const RouterView = defineComponent({
 
         // Get current RouterView depth from parent RouterView (if any)
         // This enables proper nested routing by tracking how deep we are in the component tree
-        const depth = inject(RouterViewDepthKey, 0);
+        const depth = inject(RouterViewDepth, 0);
 
         // Provide depth + 1 to child RouterView components
         // This ensures each nested RouterView renders the correct route component
-        provide(RouterViewDepthKey, depth + 1);
+        provide(RouterViewDepth, depth + 1);
 
         return () => {
             // Get the matched route configuration at current depth

package/src/use.ts

@@ -259,7 +259,7 @@ export function useRoute(): Route {
 export function useProvideRouter(router: Router): void {
     const proxy = getCurrentProxy('useProvideRouter');
 
-    const dep = ref(false);
+    const dep = ref(0);
 
     const proxiedRouter = createDependentProxy(router, dep);
     const proxiedRoute = createDependentProxy(router.route, dep);
@@ -275,7 +275,7 @@ export function useProvideRouter(router: Router): void {
     const unwatch = router.afterEach((to: Route) => {
         if (router.route === to) {
             to.syncTo(proxiedRoute);
-            dep.value = !dep.value;
+            dep.value++;
         }
     });
 

package/src/util.ts

@@ -16,7 +16,7 @@ export function createSymbolProperty<T>(symbol: symbol) {
 
 export function createDependentProxy<T extends object>(
     obj: T,
-    dep: Ref<boolean>
+    dep: Ref<any>
 ): T {
     return new Proxy(obj, {
         get(target, prop, receiver) {