diff --git a/src/RouterView.ts b/src/RouterView.ts index 4220d2e8c..f891d3cbb 100644 --- a/src/RouterView.ts +++ b/src/RouterView.ts @@ -24,7 +24,7 @@ import { viewDepthKey, routerViewLocationKey, } from './injectionSymbols' -import { assign } from './utils' +import { assign, isBrowser } from './utils' import { warn } from './warning' import { isSameRouteRecord } from './location' @@ -34,6 +34,11 @@ export interface RouterViewProps { route?: RouteLocationNormalized } +export interface RouterViewDevtoolsContext + extends Pick { + depth: number +} + export const RouterViewImpl = /*#__PURE__*/ defineComponent({ name: 'RouterView', // #674 we manually inherit them @@ -141,6 +146,29 @@ export const RouterViewImpl = /*#__PURE__*/ defineComponent({ }) ) + if ( + (__DEV__ || __FEATURE_PROD_DEVTOOLS__) && + isBrowser && + component.ref + ) { + // TODO: can display if it's an alias, its props + const info: RouterViewDevtoolsContext = { + depth, + name: matchedRoute.name, + path: matchedRoute.path, + meta: matchedRoute.meta, + } + + const internalInstances = Array.isArray(component.ref) + ? component.ref.map(r => r.i) + : [component.ref.i] + + internalInstances.forEach(instance => { + // @ts-expect-error + instance.__vrv_devtools = info + }) + } + return ( // pass the vnode to the slot as a prop. // h and both accept vnodes diff --git a/src/devtools.ts b/src/devtools.ts index 002a99133..8ba1cac11 100644 --- a/src/devtools.ts +++ b/src/devtools.ts @@ -15,6 +15,7 @@ import { RouteRecordMatcher } from './matcher/pathMatcher' import { PathParser } from './matcher/pathParserRanker' import { Router } from './router' import { UseLinkDevtoolsContext } from './RouterLink' +import { RouterViewDevtoolsContext } from './RouterView' import { RouteLocationNormalized } from './types' import { assign } from './utils' @@ -86,8 +87,19 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) { } }) - // mark router-link as active + // mark router-link as active and display tags on router views api.on.visitComponentTree(({ treeNode: node, componentInstance }) => { + if (componentInstance.__vrv_devtools) { + const info = + componentInstance.__vrv_devtools as RouterViewDevtoolsContext + + node.tags.push({ + label: (info.name ? `${info.name.toString()}: ` : '') + info.path, + textColor: 0, + tooltip: 'This component is rendered by <router-view>', + backgroundColor: PINK_500, + }) + } // if multiple useLink are used if (Array.isArray(componentInstance.__vrl_devtools)) { componentInstance.__devtoolsApi = api