Skip to content

Commit 9f59489

Browse files
posvaposva
committed
feat(devtools): improve active + match in routes inspector
1 parent dc02850 commit 9f59489

File tree

2 files changed

+132
-28
lines changed

2 files changed

+132
-28
lines changed

‎src/devtools.ts

+127-28
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import {
33
CustomInspectorNode,
44
CustomInspectorNodeTag,
55
CustomInspectorState,
6+
HookPayloads,
67
setupDevtoolsPlugin,
78
TimelineEvent,
89
} from '@vue/devtools-api'
910
import { watch } from 'vue'
1011
import { decode } from './encoding'
12+
import { isSameRouteRecord } from './location'
1113
import { RouterMatcher } from './matcher'
1214
import { RouteRecordMatcher } from './matcher/pathMatcher'
1315
import { PathParser } from './matcher/pathParserRanker'
@@ -75,8 +77,11 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
7577
})
7678

7779
watch(router.currentRoute, () => {
80+
// refresh active state
81+
refreshRoutesView()
7882
// @ts-ignore
7983
api.notifyComponentUpdate()
84+
api.sendInspectorTree(routerInspectorId)
8085
})
8186

8287
const navigationsLayerId = 'router:navigations:' + id
@@ -165,6 +170,10 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
165170
})
166171
})
167172

173+
/**
174+
* Inspector of Existing routes
175+
*/
176+
168177
const routerInspectorId = 'router-inspector:' + id
169178

170179
api.addInspector({
@@ -174,32 +183,48 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
174183
treeFilterPlaceholder: 'Search routes',
175184
})
176185

186+
function refreshRoutesView() {
187+
// the routes view isn't active
188+
if (!activeRoutesPayload) return
189+
const payload = activeRoutesPayload
190+
191+
// children routes will appear as nested
192+
let routes = matcher.getRoutes().filter(route => !route.parent)
193+
194+
// reset match state to false
195+
routes.forEach(resetMatchStateOnRouteRecord)
196+
197+
// apply a match state if there is a payload
198+
if (payload.filter) {
199+
routes = routes.filter(route =>
200+
// save matches state based on the payload
201+
isRouteMatching(route, payload.filter.toLowerCase())
202+
)
203+
}
204+
205+
// mark active routes
206+
routes.forEach(route =>
207+
markRouteRecordActive(route, router.currentRoute.value)
208+
)
209+
payload.rootNodes = routes.map(formatRouteRecordForInspector)
210+
}
211+
212+
let activeRoutesPayload: HookPayloads['getInspectorTree'] | undefined
177213
api.on.getInspectorTree(payload => {
214+
activeRoutesPayload = payload
178215
if (payload.app === app && payload.inspectorId === routerInspectorId) {
179-
let routes = matcher.getRoutes()
180-
if (payload.filter) {
181-
routes = routes.filter(
182-
route =>
183-
!route.parent &&
184-
// save isActive state
185-
isRouteMatching(route, payload.filter.toLowerCase())
186-
)
187-
}
188-
// reset match state if no filter is provided
189-
if (!payload.filter) {
190-
routes.forEach(route => {
191-
;(route as any).__vd_match = false
192-
})
193-
}
194-
payload.rootNodes = routes.map(formatRouteRecordForInspector)
216+
refreshRoutesView()
195217
}
196218
})
197219

220+
/**
221+
* Display information about the currently selected route record
222+
*/
198223
api.on.getInspectorState(payload => {
199224
if (payload.app === app && payload.inspectorId === routerInspectorId) {
200225
const routes = matcher.getRoutes()
201226
const route = routes.find(
202-
route => route.record.path === payload.nodeId
227+
route => (route.record as any).__vd_id === payload.nodeId
203228
)
204229

205230
if (route) {
@@ -209,6 +234,9 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
209234
}
210235
}
211236
})
237+
238+
api.sendInspectorTree(routerInspectorId)
239+
api.sendInspectorState(routerInspectorId)
212240
}
213241
)
214242
}
@@ -229,16 +257,17 @@ function formatRouteRecordMatcherForStateInspector(
229257
{ editable: false, key: 'path', value: record.path },
230258
]
231259

232-
if (record.name != null)
260+
if (record.name != null) {
233261
fields.push({
234262
editable: false,
235263
key: 'name',
236264
value: record.name,
237265
})
266+
}
238267

239268
fields.push({ editable: false, key: 'regexp', value: route.re })
240269

241-
if (route.keys.length)
270+
if (route.keys.length) {
242271
fields.push({
243272
editable: false,
244273
key: 'keys',
@@ -254,20 +283,23 @@ function formatRouteRecordMatcherForStateInspector(
254283
},
255284
},
256285
})
286+
}
257287

258-
if (record.redirect != null)
288+
if (record.redirect != null) {
259289
fields.push({
260290
editable: false,
261291
key: 'redirect',
262292
value: record.redirect,
263293
})
294+
}
264295

265-
if (route.alias.length)
296+
if (route.alias.length) {
266297
fields.push({
267298
editable: false,
268299
key: 'aliases',
269300
value: route.alias.map(alias => alias.record.path),
270301
})
302+
}
271303

272304
fields.push({
273305
key: 'score',
@@ -286,6 +318,17 @@ function formatRouteRecordMatcherForStateInspector(
286318
return fields
287319
}
288320

321+
/**
322+
* Extracted from tailwind palette
323+
*/
324+
const PINK_500 = 0xec4899
325+
const BLUE_600 = 0x2563eb
326+
const LIME_500 = 0x84cc16
327+
const CYAN_400 = 0x22d3ee
328+
const ORANGE_400 = 0xfb923c
329+
// const GRAY_100 = 0xf4f4f5
330+
const DARK = 0x666666
331+
289332
function formatRouteRecordForInspector(
290333
route: RouteRecordMatcher
291334
): CustomInspectorNode {
@@ -297,23 +340,39 @@ function formatRouteRecordForInspector(
297340
tags.push({
298341
label: String(record.name),
299342
textColor: 0,
300-
backgroundColor: 0x00bcd4,
343+
backgroundColor: CYAN_400,
301344
})
302345
}
303346

304347
if (record.aliasOf) {
305348
tags.push({
306349
label: 'alias',
307350
textColor: 0,
308-
backgroundColor: 0xff984f,
351+
backgroundColor: ORANGE_400,
309352
})
310353
}
311354

312355
if ((route as any).__vd_match) {
313356
tags.push({
314357
label: 'matches',
315358
textColor: 0,
316-
backgroundColor: 0xf4f4f4,
359+
backgroundColor: PINK_500,
360+
})
361+
}
362+
363+
if ((route as any).__vd_exactActive) {
364+
tags.push({
365+
label: 'exact',
366+
textColor: 0,
367+
backgroundColor: LIME_500,
368+
})
369+
}
370+
371+
if ((route as any).__vd_active) {
372+
tags.push({
373+
label: 'active',
374+
textColor: 0,
375+
backgroundColor: BLUE_600,
317376
})
318377
}
319378

@@ -323,32 +382,72 @@ function formatRouteRecordForInspector(
323382
'redirect: ' +
324383
(typeof record.redirect === 'string' ? record.redirect : 'Object'),
325384
textColor: 0xffffff,
326-
backgroundColor: 0x666666,
385+
backgroundColor: DARK,
327386
})
328387
}
329388

389+
// add an id to be able to select it. Using the `path` is not possible because
390+
// empty path children would collide with their parents
391+
let id = String(routeRecordId++)
392+
;(record as any).__vd_id = id
393+
330394
return {
331-
id: record.path,
395+
id,
332396
label: record.path,
333397
tags,
334398
// @ts-ignore
335399
children: route.children.map(formatRouteRecordForInspector),
336400
}
337401
}
338402

403+
// incremental id for route records and inspector state
404+
let routeRecordId = 0
405+
339406
const EXTRACT_REGEXP_RE = /^\/(.*)\/([a-z]*)$/
340407

408+
function markRouteRecordActive(
409+
route: RouteRecordMatcher,
410+
currentRoute: RouteLocationNormalized
411+
) {
412+
// no route will be active if matched is empty
413+
// reset the matching state
414+
const isExactActive =
415+
currentRoute.matched.length &&
416+
isSameRouteRecord(
417+
currentRoute.matched[currentRoute.matched.length - 1],
418+
route.record
419+
)
420+
;(route as any).__vd_exactActive = (route as any).__vd_active = isExactActive
421+
422+
if (!isExactActive) {
423+
;(route as any).__vd_active = currentRoute.matched.some(match =>
424+
isSameRouteRecord(match, route.record)
425+
)
426+
}
427+
428+
route.children.forEach(childRoute =>
429+
markRouteRecordActive(childRoute, currentRoute)
430+
)
431+
}
432+
433+
function resetMatchStateOnRouteRecord(route: RouteRecordMatcher) {
434+
;(route as any).__vd_match = false
435+
route.children.forEach(resetMatchStateOnRouteRecord)
436+
}
437+
341438
function isRouteMatching(route: RouteRecordMatcher, filter: string): boolean {
342439
const found = String(route.re).match(EXTRACT_REGEXP_RE)
343440
// reset the matching state
344441
;(route as any).__vd_match = false
345-
if (!found || found.length < 3) return false
442+
if (!found || found.length < 3) {
443+
return false
444+
}
346445

347446
// use a regexp without $ at the end to match nested routes better
348447
const nonEndingRE = new RegExp(found[1].replace(/\$$/, ''), found[2])
349448
if (nonEndingRE.test(filter)) {
350449
// mark children as matches
351-
route.children.some(child => isRouteMatching(child, filter))
450+
route.children.forEach(child => isRouteMatching(child, filter))
352451
// exception case: `/`
353452
if (route.record.path !== '/' || filter === '/') {
354453
;(route as any).__vd_match = route.re.test(filter)

‎src/matcher/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,11 @@ export function createRouterMatcher(
162162
// other alias (if any) need to reference this record when adding children
163163
originalRecord = originalRecord || matcher
164164

165+
if (parent && isAliasRecord(originalRecord)) {
166+
// TODO: remove them too
167+
parent.children.push(originalRecord)
168+
}
169+
165170
insertMatcher(matcher)
166171
}
167172

0 commit comments

Comments
 (0)