@esmx/router-vue 3.0.0-rc.63 → 3.0.0-rc.65

package/dist/index.d.ts

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

package/dist/index.mjs

@@ -3,9 +3,10 @@ export {
   useRoute,
   useProvideRouter,
   useLink,
+  useRouterViewDepth,
   getRoute,
   getRouter
 } from "./use.mjs";
 export { RouterLink } from "./router-link.mjs";
-export { RouterView, RouterViewDepth } from "./router-view.mjs";
+export { RouterView } from "./router-view.mjs";
 export { RouterPlugin } from "./plugin.mjs";

package/dist/index.test.mjs

@@ -60,13 +60,13 @@ describe("index.ts - Package Entry Point", () => {
         "useRoute",
         "useProvideRouter",
         "useLink",
+        "useRouterViewDepth",
         // Options API
         "getRouter",
         "getRoute",
         // Components
         "RouterLink",
         "RouterView",
-        "RouterViewDepth",
         // Plugin
         "RouterPlugin"
       ];
@@ -84,11 +84,11 @@ describe("index.ts - Package Entry Point", () => {
         "useRoute",
         "useProvideRouter",
         "useLink",
+        "useRouterViewDepth",
         "getRouter",
         "getRoute",
         "RouterLink",
         "RouterView",
-        "RouterViewDepth",
         "RouterPlugin"
       ];
       const unexpectedExports = actualExports.filter(

package/dist/router-view.d.ts

@@ -1,4 +1,3 @@
-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,11 @@
-import { defineComponent, h, inject, provide } from "vue";
-import { useRoute } from "./use.mjs";
+import { defineComponent, h } from "vue";
+import { _useRouterViewDepth, useRoute } from "./use.mjs";
 import { resolveComponent } from "./util.mjs";
-export const RouterViewDepth = Symbol("RouterViewDepth");
 export const RouterView = defineComponent({
   name: "RouterView",
   setup() {
     const route = useRoute();
-    const depth = inject(RouterViewDepth, 0);
-    provide(RouterViewDepth, depth + 1);
+    const depth = _useRouterViewDepth(true);
     return () => {
       const matchedRoute = route.matched[depth];
       const component = matchedRoute ? resolveComponent(matchedRoute.component) : null;

package/dist/use.d.ts

@@ -166,6 +166,64 @@ export declare function useRoute(): Route;
  * ```
  */
 export declare function useProvideRouter(router: Router): void;
+/**
+ * Get the current RouterView depth in nested routing scenarios.
+ * Returns the depth of the current RouterView component in the component tree.
+ * Useful for advanced routing scenarios where you need to know the nesting level.
+ *
+ * @param isRender - Whether this is used in a RouterView component that needs to provide depth for children (default: false)
+ * @returns Current RouterView depth (0 for root level, 1 for first nested level, etc.)
+ * @throws {Error} If called outside setup()
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div>
+ *     <p>Current RouterView depth: {{ depth }}</p>
+ *     <RouterView />
+ *   </div>
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { useRouterViewDepth } from '@esmx/router-vue';
+ *
+ * // Get current depth without providing for children
+ * const depth = useRouterViewDepth();
+ * console.log('Current RouterView depth:', depth); // 0, 1, 2, etc.
+ *
+ * // Get current depth and provide depth + 1 for children (used in RouterView component)
+ * const depth = useRouterViewDepth(true);
+ * </script>
+ * ```
+ */
+export declare function _useRouterViewDepth(isRender?: boolean): number;
+/**
+ * Get the current RouterView depth in nested routing scenarios.
+ * Returns the depth of the current RouterView component in the component tree.
+ * Useful for advanced routing scenarios where you need to know the nesting level.
+ *
+ * @returns Current RouterView depth (0 for root level, 1 for first nested level, etc.)
+ * @throws {Error} If called outside setup()
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div>
+ *     <p>Current RouterView depth: {{ depth }}</p>
+ *     <RouterView />
+ *   </div>
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { useRouterViewDepth } from '@esmx/router-vue';
+ *
+ * // Get current depth without providing for children
+ * const depth = useRouterViewDepth();
+ * console.log('Current RouterView depth:', depth); // 0, 1, 2, etc.
+ * </script>
+ * ```
+ */
+export declare function useRouterViewDepth(): number;
 /**
  * Create reactive link helpers for navigation elements.
  * Returns computed properties for link attributes, classes, and event handlers.

package/dist/use.mjs

@@ -9,6 +9,7 @@ import {
 import { createDependentProxy, createSymbolProperty } 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");
 const ERROR_MESSAGES = {
   SETUP_ONLY: (fnName) => "[@esmx/router-vue] ".concat(fnName, "() can only be called during setup()"),
   CONTEXT_NOT_FOUND: "[@esmx/router-vue] Router context not found. Please ensure useProvideRouter() is called in a parent component."
@@ -79,6 +80,16 @@ export function useProvideRouter(router) {
   });
   onBeforeUnmount(unwatch);
 }
+export function _useRouterViewDepth(isRender) {
+  const depth = inject(ROUTER_VIEW_DEPTH_KEY, 0);
+  if (isRender) {
+    provide(ROUTER_VIEW_DEPTH_KEY, depth + 1);
+  }
+  return depth;
+}
+export function useRouterViewDepth() {
+  return _useRouterViewDepth();
+}
 export function useLink(props) {
   const router = useRouter();
   return computed(() => {

package/package.json

@@ -50,7 +50,7 @@
         "vue": "^3.5.0 || ^2.7.0"
     },
     "dependencies": {
-        "@esmx/router": "3.0.0-rc.63"
+        "@esmx/router": "3.0.0-rc.65"
     },
     "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.63",
+    "version": "3.0.0-rc.65",
     "type": "module",
     "private": false,
     "exports": {
@@ -81,5 +81,5 @@
         "template",
         "public"
     ],
-    "gitHead": "18a524ff1b7f9c6ea60d8bb57ad314329febc58c"
+    "gitHead": "3061beefe4d43c54ce66b75c2d95f193601d1289"
 }

package/src/index.test.ts

@@ -73,13 +73,13 @@ describe('index.ts - Package Entry Point', () => {
                 'useRoute',
                 'useProvideRouter',
                 'useLink',
+                'useRouterViewDepth',
                 // Options API
                 'getRouter',
                 'getRoute',
                 // Components
                 'RouterLink',
                 'RouterView',
-                'RouterViewDepth',
                 // Plugin
                 'RouterPlugin'
             ];
@@ -99,11 +99,11 @@ describe('index.ts - Package Entry Point', () => {
                 'useRoute',
                 'useProvideRouter',
                 'useLink',
+                'useRouterViewDepth',
                 'getRouter',
                 'getRoute',
                 'RouterLink',
                 'RouterView',
-                'RouterViewDepth',
                 'RouterPlugin'
             ];
 

package/src/index.ts

@@ -6,11 +6,12 @@ export {
     useRoute,
     useProvideRouter,
     useLink,
+    useRouterViewDepth,
     getRoute,
     getRouter
 } from './use';
 
 export { RouterLink } from './router-link';
-export { RouterView, RouterViewDepth } from './router-view';
+export { RouterView } from './router-view';
 
 export { RouterPlugin } from './plugin';

package/src/router-view.ts

@@ -1,9 +1,7 @@
-import { defineComponent, h, inject, provide } from 'vue';
-import { useRoute } from './use';
+import { defineComponent, h } from 'vue';
+import { _useRouterViewDepth, useRoute } from './use';
 import { resolveComponent } from './util';
 
-export const RouterViewDepth = Symbol('RouterViewDepth');
-
 /**
  * RouterView component for rendering matched route components.
  * Acts as a placeholder where route components are rendered based on the current route.
@@ -37,13 +35,9 @@ export const RouterView = defineComponent({
     setup() {
         const route = useRoute();
 
-        // Get current RouterView depth from parent RouterView (if any)
+        // Get current RouterView depth and automatically provide depth + 1 for children
         // This enables proper nested routing by tracking how deep we are in the component tree
-        const depth = inject(RouterViewDepth, 0);
-
-        // Provide depth + 1 to child RouterView components
-        // This ensures each nested RouterView renders the correct route component
-        provide(RouterViewDepth, depth + 1);
+        const depth = _useRouterViewDepth(true);
 
         return () => {
             // Get the matched route configuration at current depth

package/src/use.ts

@@ -1,6 +1,5 @@
 import type { Route, Router, RouterLinkProps } from '@esmx/router';
 import {
-    type Ref,
     computed,
     getCurrentInstance,
     inject,
@@ -23,6 +22,7 @@ interface RouterContext {
 
 const ROUTER_CONTEXT_KEY = Symbol('router-context');
 const ROUTER_INJECT_KEY = Symbol('router-inject');
+const ROUTER_VIEW_DEPTH_KEY = Symbol('router-view-depth');
 
 const ERROR_MESSAGES = {
     SETUP_ONLY: (fnName: string) =>
@@ -282,6 +282,78 @@ export function useProvideRouter(router: Router): void {
     onBeforeUnmount(unwatch);
 }
 
+/**
+ * Get the current RouterView depth in nested routing scenarios.
+ * Returns the depth of the current RouterView component in the component tree.
+ * Useful for advanced routing scenarios where you need to know the nesting level.
+ *
+ * @param isRender - Whether this is used in a RouterView component that needs to provide depth for children (default: false)
+ * @returns Current RouterView depth (0 for root level, 1 for first nested level, etc.)
+ * @throws {Error} If called outside setup()
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div>
+ *     <p>Current RouterView depth: {{ depth }}</p>
+ *     <RouterView />
+ *   </div>
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { useRouterViewDepth } from '@esmx/router-vue';
+ *
+ * // Get current depth without providing for children
+ * const depth = useRouterViewDepth();
+ * console.log('Current RouterView depth:', depth); // 0, 1, 2, etc.
+ *
+ * // Get current depth and provide depth + 1 for children (used in RouterView component)
+ * const depth = useRouterViewDepth(true);
+ * </script>
+ * ```
+ */
+export function _useRouterViewDepth(isRender?: boolean): number {
+    // Get current RouterView depth from parent RouterView (if any)
+    // Default to 0 if no parent RouterView is found
+    const depth = inject(ROUTER_VIEW_DEPTH_KEY, 0);
+
+    if (isRender) {
+        // Provide depth + 1 to child RouterView components
+        provide(ROUTER_VIEW_DEPTH_KEY, depth + 1);
+    }
+
+    return depth;
+}
+/**
+ * Get the current RouterView depth in nested routing scenarios.
+ * Returns the depth of the current RouterView component in the component tree.
+ * Useful for advanced routing scenarios where you need to know the nesting level.
+ *
+ * @returns Current RouterView depth (0 for root level, 1 for first nested level, etc.)
+ * @throws {Error} If called outside setup()
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div>
+ *     <p>Current RouterView depth: {{ depth }}</p>
+ *     <RouterView />
+ *   </div>
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { useRouterViewDepth } from '@esmx/router-vue';
+ *
+ * // Get current depth without providing for children
+ * const depth = useRouterViewDepth();
+ * console.log('Current RouterView depth:', depth); // 0, 1, 2, etc.
+ * </script>
+ * ```
+ */
+export function useRouterViewDepth(): number {
+    return _useRouterViewDepth();
+}
+
 /**
  * Create reactive link helpers for navigation elements.
  * Returns computed properties for link attributes, classes, and event handlers.