perf: dedupe onKeyStroke (#490)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: OrbisK

app/components/AppHeader.vue

@@ -10,20 +10,22 @@ withDefaults(
 
 const { isConnected, npmUser } = useConnector()
 
-const router = useRouter()
-
 const showFullSearch = shallowRef(false)
 
-onKeyStroke(',', e => {
-  // Don't trigger if user is typing in an input
-  const target = e.target as HTMLElement
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-    return
-  }
+onKeyStroke(
+  ',',
+  e => {
+    // Don't trigger if user is typing in an input
+    const target = e.target as HTMLElement
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return
+    }
 
-  e.preventDefault()
-  router.push('/settings')
-})
+    e.preventDefault()
+    navigateTo('/settings')
+  },
+  { dedupe: true },
+)
 </script>
 
 <template>

app/pages/[...package].vue

@@ -2,7 +2,6 @@
 import type { NpmVersionDist, PackumentVersion, ReadmeResponse } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import { assertValidPackageName } from '#shared/utils/npm'
-import { onKeyStroke } from '@vueuse/core'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 
@@ -331,22 +330,32 @@ useSeoMeta({
   description: () => pkg.value?.description ?? '',
 })
 
-onKeyStroke('.', () => {
-  if (pkg.value && displayVersion.value) {
-    router.push({
-      name: 'code',
-      params: {
-        path: [pkg.value.name, 'v', displayVersion.value.version],
-      },
-    })
-  }
-})
+onKeyStroke(
+  '.',
+  e => {
+    if (pkg.value && displayVersion.value) {
+      e.preventDefault()
+      navigateTo({
+        name: 'code',
+        params: {
+          path: [pkg.value.name, 'v', displayVersion.value.version],
+        },
+      })
+    }
+  },
+  { dedupe: true },
+)
 
-onKeyStroke('d', () => {
-  if (docsLink.value) {
-    router.push(docsLink.value)
-  }
-})
+onKeyStroke(
+  'd',
+  e => {
+    if (docsLink.value) {
+      e.preventDefault()
+      navigateTo(docsLink.value)
+    }
+  },
+  { dedupe: true },
+)
 
 defineOgImageComponent('Package', {
   name: () => pkg.value?.name ?? 'Package',

app/pages/settings.vue

@@ -6,12 +6,17 @@ const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 
 // Escape to go back (but not when focused on form elements)
-onKeyStroke('Escape', e => {
-  const target = e.target as HTMLElement
-  if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.tagName)) {
-    router.back()
-  }
-})
+onKeyStroke(
+  'Escape',
+  e => {
+    const target = e.target as HTMLElement
+    if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.tagName)) {
+      e.preventDefault()
+      router.back()
+    }
+  },
+  { dedupe: true },
+)
 
 useSeoMeta({
   title: () => `${$t('settings.title')} - npmx`,