forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
perf: dedupe `onKeyStroke` (#490)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Robin
Daniel Roe
and committed by
GitHub
4760859f
8274fa14
+49
-33
+13
-11
app/components/AppHeader.vue
+13
-11
app/components/AppHeader.vue
···
10
10
11
11
const { isConnected, npmUser } = useConnector()
12
12
13
-
const router = useRouter()
14
-
15
13
const showFullSearch = shallowRef(false)
16
14
17
-
onKeyStroke(',', e => {
18
-
// Don't trigger if user is typing in an input
19
-
const target = e.target as HTMLElement
20
-
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
21
-
return
22
-
}
15
+
onKeyStroke(
16
+
',',
17
+
e => {
18
+
// Don't trigger if user is typing in an input
19
+
const target = e.target as HTMLElement
20
+
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
21
+
return
22
+
}
23
23
24
-
e.preventDefault()
25
-
router.push('/settings')
26
-
})
24
+
e.preventDefault()
25
+
navigateTo('/settings')
26
+
},
27
+
{ dedupe: true },
28
+
)
27
29
</script>
28
30
29
31
<template>
+25
-16
app/pages/[...package].vue
+25
-16
app/pages/[...package].vue
···
2
2
import type { NpmVersionDist, PackumentVersion, ReadmeResponse } from '#shared/types'
3
3
import type { JsrPackageInfo } from '#shared/types/jsr'
4
4
import { assertValidPackageName } from '#shared/utils/npm'
5
-
import { onKeyStroke } from '@vueuse/core'
6
5
import { joinURL } from 'ufo'
7
6
import { areUrlsEquivalent } from '#shared/utils/url'
8
7
···
331
330
description: () => pkg.value?.description ?? '',
332
331
})
333
332
334
-
onKeyStroke('.', () => {
335
-
if (pkg.value && displayVersion.value) {
336
-
router.push({
337
-
name: 'code',
338
-
params: {
339
-
path: [pkg.value.name, 'v', displayVersion.value.version],
340
-
},
341
-
})
342
-
}
343
-
})
333
+
onKeyStroke(
334
+
'.',
335
+
e => {
336
+
if (pkg.value && displayVersion.value) {
337
+
e.preventDefault()
338
+
navigateTo({
339
+
name: 'code',
340
+
params: {
341
+
path: [pkg.value.name, 'v', displayVersion.value.version],
342
+
},
343
+
})
344
+
}
345
+
},
346
+
{ dedupe: true },
347
+
)
344
348
345
-
onKeyStroke('d', () => {
346
-
if (docsLink.value) {
347
-
router.push(docsLink.value)
348
-
}
349
-
})
349
+
onKeyStroke(
350
+
'd',
351
+
e => {
352
+
if (docsLink.value) {
353
+
e.preventDefault()
354
+
navigateTo(docsLink.value)
355
+
}
356
+
},
357
+
{ dedupe: true },
358
+
)
350
359
351
360
defineOgImageComponent('Package', {
352
361
name: () => pkg.value?.name ?? 'Package',
+11
-6
app/pages/settings.vue
+11
-6
app/pages/settings.vue
···
6
6
const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
7
7
8
8
// Escape to go back (but not when focused on form elements)
9
-
onKeyStroke('Escape', e => {
10
-
const target = e.target as HTMLElement
11
-
if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.tagName)) {
12
-
router.back()
13
-
}
14
-
})
9
+
onKeyStroke(
10
+
'Escape',
11
+
e => {
12
+
const target = e.target as HTMLElement
13
+
if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.tagName)) {
14
+
e.preventDefault()
15
+
router.back()
16
+
}
17
+
},
18
+
{ dedupe: true },
19
+
)
15
20
16
21
useSeoMeta({
17
22
title: () => `${$t('settings.title')} - npmx`,