chore: release v0.24.0

app/assets/logos/sponsors/index.ts

@@ -1,3 +1,4 @@
+import type { FOOTER_SPONSOR_NAMES } from './names'
 import LogoVercel from './vercel.svg'
 import LogoVercelLight from './vercel-light.svg'
 import LogoVoidZero from './void-zero.svg'
@@ -99,4 +100,14 @@ export const SPONSORS = {
       url: 'https://badrap.io/',
     },
   ],
-}
+} as const
+
+type Names<T extends readonly { name: string }[]> = { [K in keyof T]: T[K]['name'] }
+type IsEqual<A, B> =
+  (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2 ? true : false
+
+// Update FOOTER_SPONSOR_NAMES in ./names.ts when changing the sponsors above.
+true satisfies IsEqual<
+  readonly [...Names<typeof SPONSORS.gold>, ...Names<typeof SPONSORS.silver>],
+  typeof FOOTER_SPONSOR_NAMES
+>

app/assets/logos/sponsors/names.ts

@@ -0,0 +1,10 @@
+export const FOOTER_SPONSOR_NAMES = [
+  'Vercel',
+  'CodeRabbit',
+  'VoidZero',
+  'vlt',
+  'Netlify',
+  'Bluesky',
+  'Chromatic',
+  'Badrap',
+] as const

app/components/About/LogoList.vue

@@ -17,7 +17,7 @@ type GroupItem = {
 }
 
 const props = defineProps<{
-  list: (BaseItem | GroupItem)[]
+  list: readonly (BaseItem | GroupItem)[]
 }>()
 </script>
 

app/components/AppFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
-import { SPONSORS } from '~/assets/logos/sponsors'
+import { FOOTER_SPONSOR_NAMES } from '~/assets/logos/sponsors/names'
 
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
@@ -38,8 +38,9 @@ const socialLinks = computed(() => [
 ])
 
 const sponsorList = computed(() => {
-  const names = [...SPONSORS.gold, ...SPONSORS.silver].map(s => s.name)
-  return new Intl.ListFormat(locale.value, { style: 'long', type: 'conjunction' }).format(names)
+  return new Intl.ListFormat(locale.value, { style: 'long', type: 'conjunction' }).format(
+    FOOTER_SPONSOR_NAMES,
+  )
 })
 
 const footerSections = computed<Array<{ label: string; links: FooterLink[] }>>(() => [

app/components/Compare/FacetBarChart.vue

@@ -142,6 +142,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
     a11y: {
+      includeTable: true,
       translations: {
         keyboardNavigation: $t('package.trends.chart_assistive_text.keyboard_navigation_vertical'),
         tableAvailable: $t('package.trends.chart_assistive_text.table_available'),

app/components/Compare/FacetScatterChart.vue

@@ -136,6 +136,9 @@ function buildExportFilename(extension: string): string {
 
 const config = computed<VueUiScatterConfig>(() => {
   return {
+    a11y: {
+      includeTable: true,
+    },
     theme: isDarkMode.value ? 'dark' : '',
     userOptions: {
       buttons: {

app/components/DependencyPathPopup.vue

@@ -99,6 +99,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
                   parsePackageString(pathItem).version,
                 )
               "
+              prefetch-on="interaction"
               class="hover:underline"
               :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
               @click="closePopup"

app/components/DepsStats/DependencyStatsPanel.vue

@@ -84,6 +84,7 @@ function formatFacetValue(value: FacetValue): string {
       <h2 class="font-mono text-lg font-medium truncate">
         <NuxtLink
           :to="packageRoute(packageName, resolvedVersion)"
+          prefetch-on="interaction"
           class="text-fg hover:text-accent transition-colors"
         >
           {{ packageName }}

app/components/Diff/SidebarPanel.vue

@@ -153,6 +153,7 @@ function handleFileSelect(file: FileChange) {
 
               <NuxtLink
                 :to="packageRoute(dep.name)"
+                prefetch-on="interaction"
                 class="font-mono hover:text-fg transition-colors truncate min-w-0"
               >
                 {{ dep.name }}

app/components/Header/PackagesDropdown.vue

@@ -95,6 +95,7 @@ function handleKeydown(event: KeyboardEvent) {
             <li v-for="pkg in packages" :key="pkg">
               <NuxtLink
                 :to="packageRoute(pkg)"
+                prefetch-on="interaction"
                 class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
               >
                 {{ pkg }}

app/components/Link/Base.vue

@@ -61,6 +61,13 @@ const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 
+const router = useRouter()
+const prefetchOn = computed(() => {
+  if (!props.to || isLinkExternal.value || isLinkAnchor.value) return undefined
+  const { path } = router.resolve(props.to)
+  return getRouteRules({ path }).payload ? 'interaction' : undefined
+})
+
 /** size is only applicable for button like links */
 const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
@@ -122,6 +129,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
         variant === 'button-primary',
     }"
     :to="to"
+    :prefetch-on="prefetchOn"
     :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"
     :target="isLinkExternal ? '_blank' : undefined"
   >

app/components/Package/ClaimPackageModal.vue

@@ -176,6 +176,7 @@ const previewPackageJson = computed(() => {
       <div class="flex gap-3">
         <NuxtLink
           :to="packageRoute(packageName)"
+          prefetch-on="interaction"
           class="flex-1 px-4 py-2 font-mono text-sm text-center text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
           @click="close"
         >