feat: try extract shortcuts

Author: 43081j

app/app.vue

@@ -50,6 +50,8 @@ if (import.meta.server) {
 const keyboardShortcuts = useKeyboardShortcuts()
 const { settings } = useSettings()
 
+initKeyShortcuts()
+
 onKeyDown(
   '/',
   e => {

app/components/AppHeader.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { LinkBase } from '#components'
 import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
-import { isEditableElement } from '~/utils/input'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
-const keyboardShortcuts = useKeyboardShortcuts()
 const discord = useDiscordLink()
 
 withDefaults(
@@ -200,22 +198,10 @@ function handleSearchFocus() {
   showFullSearch.value = true
 }
 
-onKeyStroke(
-  e => {
-    if (!keyboardShortcuts.value || isEditableElement(e.target)) {
-      return
-    }
-
-    for (const link of desktopLinks.value) {
-      if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
-        e.preventDefault()
-        navigateTo(link.to)
-        break
-      }
-    }
-  },
-  { dedupe: true },
-)
+useShortcuts({
+  c: () => ({ name: 'compare' }),
+  ',': () => ({ name: 'settings' }),
+})
 </script>
 
 <template>

app/components/Package/Header.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
-import { isEditableElement } from '~/utils/input'
 
 const props = defineProps<{
   pkg?: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
@@ -119,28 +117,13 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
-const keyboardShortcuts = useKeyboardShortcuts()
-
-const shortcuts: [string, () => RouteLocationRaw | null | false | undefined][] = [
-  ['.', () => codeLink.value],
-  ['m', () => mainLink.value],
-  ['d', () => docsLink.value],
-  ['c', () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } }],
-  ['f', () => diffLink.value],
-]
-
-for (const [key, getTarget] of shortcuts) {
-  onKeyStroke(
-    e => keyboardShortcuts.value && isKeyWithoutModifiers(e, key) && !isEditableElement(e.target),
-    e => {
-      const target = getTarget()
-      if (!target) return
-      e.preventDefault()
-      navigateTo(target)
-    },
-    { dedupe: true },
-  )
-}
+useShortcuts({
+  '.': () => codeLink.value,
+  'm': () => mainLink.value,
+  'd': () => docsLink.value,
+  'c': () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } },
+  'f': () => diffLink.value,
+})
 
 const fundingUrl = computed(() => {
   let funding = props.displayVersion?.funding

app/composables/useShortcuts.ts

@@ -0,0 +1,47 @@
+import type { RouteLocationRaw } from 'vue-router'
+import { isEditableElement, isKeyWithoutModifiers } from '~/utils/input'
+
+type ShortcutTarget = RouteLocationRaw | null | false | undefined
+type ShortcutTargetFactory = () => ShortcutTarget
+
+const registry = new Map<string, ShortcutTargetFactory[]>()
+
+export function initKeyShortcuts() {
+  const keyboardShortcuts = useKeyboardShortcuts()
+
+  onKeyStroke(
+    e => !e.repeat && keyboardShortcuts.value && !isEditableElement(e.target),
+    e => {
+      for (const [key, stack] of registry) {
+        if (!isKeyWithoutModifiers(e, key)) continue
+        const getTarget = stack.at(-1)
+        if (!getTarget) continue
+        const target = getTarget()
+        if (!target) return
+        e.preventDefault()
+        navigateTo(target)
+        return
+      }
+    },
+  )
+}
+
+export function useShortcuts(map: Record<string, () => ShortcutTarget>) {
+  if (!import.meta.client) return
+
+  for (const [key, fn] of Object.entries(map)) {
+    const entry = registry.get(key) ?? []
+    if (entry.includes(fn)) continue
+    entry.push(fn)
+    registry.set(key, entry)
+  }
+
+  onScopeDispose(() => {
+    for (const [key, fn] of Object.entries(map)) {
+      const stack = registry.get(key)
+      if (!stack) continue
+      const idx = stack.lastIndexOf(fn)
+      if (idx !== -1) stack.splice(idx, 1)
+    }
+  })
+}