feat(devtools): display router view path

Close #1119

diff --git a/src/RouterView.ts b/src/RouterView.ts
index 4220d2e8cb7cad8d08c700452220e7a41261df45..f891d3cbb7ea4e18ae023edff836db9bb89ba1f0 100644 (file)
--- 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<RouteLocationMatched, 'path' | 'name' | 'meta'> {
+  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 <component :is="..."> both accept vnodes

diff --git a/src/devtools.ts b/src/devtools.ts
index 002a99133ceac5277e40f1bd9128bb2c7ccce8fc..8ba1cac119d535d148ca444e465a2d4524cc2a20 100644 (file)
--- 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