Skip to content

Commit aab8c04

Browse files
posvaposva
committed
feat(devtools): display components using useLink()
Close #1003
1 parent 57b1468 commit aab8c04

File tree

5 files changed

+137
-42
lines changed

5 files changed

+137
-42
lines changed

‎playground/App.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@
6666
<li>
6767
<router-link to="/">Home</router-link>
6868
</li>
69+
<li>
70+
<AppLink to="/">AppLink Home</AppLink>
71+
</li>
6972
<li>
7073
<router-link to="/always-redirect">/always-redirect</router-link>
7174
</li>
@@ -183,15 +186,21 @@
183186
<script>
184187
import { defineComponent, inject, computed, ref } from 'vue'
185188
import { scrollWaiter } from './scrollWaiter'
186-
import { useRoute } from '../src'
189+
import { useLink, useRoute } from '../src'
190+
import AppLink from './AppLink.vue'
187191
188192
export default defineComponent({
189193
name: 'App',
194+
components: { AppLink },
190195
setup() {
191196
const route = useRoute()
192197
const state = inject('state')
193198
const viewName = ref('default')
194199
200+
useLink({ to: '/' })
201+
useLink({ to: '/documents/hello' })
202+
useLink({ to: '/children' })
203+
195204
const currentLocation = computed(() => {
196205
const { matched, ...rest } = route
197206
return rest

‎playground/AppLink.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<a
3+
v-if="isExternalLink"
4+
v-bind="attrs"
5+
class="router-link"
6+
:class="classes"
7+
target="_blank"
8+
rel="noopener noreferrer"
9+
:href="to"
10+
:tabindex="disabled ? -1 : undefined"
11+
:aria-disabled="disabled"
12+
>
13+
<slot />
14+
</a>
15+
<a
16+
v-else
17+
v-bind="attrs"
18+
class="router-link"
19+
:class="classes"
20+
:href="href"
21+
:tabindex="disabled ? -1 : undefined"
22+
:aria-disabled="disabled"
23+
@click="navigate"
24+
>
25+
<slot />
26+
</a>
27+
</template>
28+
29+
<script>
30+
import { RouterLinkImpl } from '../src/RouterLink'
31+
import { computed, defineComponent, toRefs } from 'vue'
32+
import { START_LOCATION, useLink, useRoute } from '../src'
33+
34+
export default defineComponent({
35+
props: {
36+
...RouterLinkImpl.props,
37+
disabled: Boolean,
38+
},
39+
40+
setup(props, { attrs }) {
41+
const { replace, to, disabled } = toRefs(props)
42+
const isExternalLink = computed(
43+
() => typeof to.value === 'string' && to.value.startsWith('http')
44+
)
45+
46+
const currentRoute = useRoute()
47+
48+
const { route, href, isActive, isExactActive, navigate } = useLink({
49+
to: computed(() => (isExternalLink.value ? START_LOCATION : to.value)),
50+
replace,
51+
})
52+
53+
const classes = computed(() => ({
54+
// allow link to be active for unrelated routes
55+
'router-link-active':
56+
isActive.value || currentRoute.path.startsWith(route.value.path),
57+
'router-link-exact-active':
58+
isExactActive.value || currentRoute.path === route.value.path,
59+
}))
60+
61+
return { attrs, isExternalLink, href, navigate, classes, disabled }
62+
},
63+
})
64+
</script>

‎playground/index.html

+5
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@
1414
.router-link-exact-active {
1515
color: red;
1616
}
17+
.router-link {
18+
padding: 2px;
19+
display: block;
20+
border: 1px solid red;
21+
}
1722
.long {
1823
background-color: lightgray;
1924
height: 3000px;

‎src/RouterLink.ts

+36-21
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@ import {
1212
getCurrentInstance,
1313
watchEffect,
1414
} from 'vue'
15-
import { RouteLocationRaw, VueUseOptions, RouteLocation } from './types'
15+
import {
16+
RouteLocationRaw,
17+
VueUseOptions,
18+
RouteLocation,
19+
RouteLocationNormalized,
20+
} from './types'
1621
import { isSameRouteLocationParams, isSameRouteRecord } from './location'
1722
import { routerKey, routeLocationKey } from './injectionSymbols'
1823
import { RouteRecord } from './matcher/types'
@@ -58,6 +63,12 @@ export interface RouterLinkProps extends RouterLinkOptions {
5863
| 'false'
5964
}
6065

66+
export interface UseLinkDevtoolsContext {
67+
route: RouteLocationNormalized & { href: string }
68+
isActive: boolean
69+
isExactActive: boolean
70+
}
71+
6172
export type UseLinkOptions = VueUseOptions<RouterLinkOptions>
6273

6374
// TODO: we could allow currentRoute as a prop to expose `isActive` and
@@ -122,6 +133,30 @@ export function useLink(props: UseLinkOptions) {
122133
return Promise.resolve()
123134
}
124135

136+
// devtools only
137+
if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && isBrowser) {
138+
const instance = getCurrentInstance()
139+
if (!instance) return
140+
const linkContextDevtools: UseLinkDevtoolsContext = {
141+
route: route.value,
142+
isActive: isActive.value,
143+
isExactActive: isExactActive.value,
144+
}
145+
146+
// @ts-expect-error: this is internal
147+
instance.__vrl_devtools = instance.__vrl_devtools || []
148+
// @ts-expect-error: this is internal
149+
instance.__vrl_devtools.push(linkContextDevtools)
150+
watchEffect(
151+
() => {
152+
linkContextDevtools.route = route.value
153+
linkContextDevtools.isActive = isActive.value
154+
linkContextDevtools.isExactActive = isExactActive.value
155+
},
156+
{ flush: 'post' }
157+
)
158+
}
159+
125160
return {
126161
route,
127162
href: computed(() => route.value.href),
@@ -173,26 +208,6 @@ export const RouterLinkImpl = /*#__PURE__*/ defineComponent({
173208
)]: link.isExactActive,
174209
}))
175210

176-
// devtools only
177-
if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && isBrowser) {
178-
const instance = getCurrentInstance()
179-
watchEffect(
180-
() => {
181-
if (!instance) return
182-
;(instance as any).__vrl_route = link.route
183-
},
184-
{ flush: 'post' }
185-
)
186-
watchEffect(
187-
() => {
188-
if (!instance) return
189-
;(instance as any).__vrl_active = link.isActive
190-
;(instance as any).__vrl_exactActive = link.isExactActive
191-
},
192-
{ flush: 'post' }
193-
)
194-
}
195-
196211
return () => {
197212
const children = slots.default && slots.default(link)
198213
return props.custom

‎src/devtools.ts

+22-20
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { RouterMatcher } from './matcher'
1414
import { RouteRecordMatcher } from './matcher/pathMatcher'
1515
import { PathParser } from './matcher/pathParserRanker'
1616
import { Router } from './router'
17+
import { UseLinkDevtoolsContext } from './RouterLink'
1718
import { RouteLocation, RouteLocationNormalized } from './types'
1819
import { assign } from './utils'
1920

@@ -87,30 +88,30 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
8788

8889
// mark router-link as active
8990
api.on.visitComponentTree(({ treeNode: node, componentInstance }) => {
90-
if (node.name === 'RouterLink') {
91-
if (componentInstance.__vrl_route) {
92-
node.tags.push({
93-
label: (componentInstance.__vrl_route as RouteLocation).path,
94-
textColor: 0,
95-
backgroundColor: ORANGE_400,
96-
})
97-
}
98-
99-
if (componentInstance.__vrl_exactActive) {
100-
node.tags.push({
101-
label: 'exact',
102-
textColor: 0,
103-
backgroundColor: LIME_500,
104-
})
105-
}
91+
// if multiple useLink are used
92+
if (Array.isArray(componentInstance.__vrl_devtools)) {
93+
componentInstance.__devtoolsApi = api
94+
;(
95+
componentInstance.__vrl_devtools as UseLinkDevtoolsContext[]
96+
).forEach(devtoolsData => {
97+
let backgroundColor = ORANGE_400
98+
let tooltip: string = ''
99+
100+
if (devtoolsData.isExactActive) {
101+
backgroundColor = LIME_500
102+
tooltip = 'This is exactly active'
103+
} else if (devtoolsData.isActive) {
104+
backgroundColor = BLUE_600
105+
tooltip = 'This link is active'
106+
}
106107

107-
if (componentInstance.__vrl_active) {
108108
node.tags.push({
109-
label: 'active',
109+
label: devtoolsData.route.path,
110110
textColor: 0,
111-
backgroundColor: BLUE_600,
111+
tooltip,
112+
backgroundColor,
112113
})
113-
}
114+
})
114115
}
115116
})
116117

@@ -119,6 +120,7 @@ export function addDevtools(app: App, router: Router, matcher: RouterMatcher) {
119120
refreshRoutesView()
120121
api.notifyComponentUpdate()
121122
api.sendInspectorTree(routerInspectorId)
123+
api.sendInspectorState(routerInspectorId)
122124
})
123125

124126
const navigationsLayerId = 'router:navigations:' + id

0 commit comments

Comments
 (0)