feat: update

Author: btea

app/pages/package/[[org]]/[name]/versions.vue

@@ -71,6 +71,7 @@ const { data: npmWebsiteVersions } = useLazyFetch<NpmWebsiteVersionsResponse>(
 )
 
 const numberFormatter = useNumberFormatter()
+const { t } = useI18n()
 const versionDownloadsMap = computed(
   () =>
     new Map(
@@ -99,6 +100,10 @@ function getGroupDownloads(versions: string[]): number | undefined {
   return hasValue ? total : undefined
 }
 
+function getDownloadsAriaLabel(downloads: number): string {
+  return `${numberFormatter.value.format(downloads)} ${t('package.downloads.title')}`
+}
+
 // ─── Phase 2: full metadata (loaded on first group expand) ────────────────────
 // Fetches deprecated status, provenance, and exact times needed for version rows.
 
@@ -294,7 +299,7 @@ const flatItems = computed<FlatItem[]>(() => {
           <div
             v-if="getVersionDownloads(latestTagRow!.version) !== undefined"
             class="text-sm font-medium text-fg tabular-nums shrink-0"
-            :aria-label="$t('package.downloads.title')"
+            :aria-label="getDownloadsAriaLabel(getVersionDownloads(latestTagRow!.version)!)"
             dir="ltr"
           >
             {{ numberFormatter.format(getVersionDownloads(latestTagRow!.version)!) }}
@@ -351,7 +356,7 @@ const flatItems = computed<FlatItem[]>(() => {
             <span
               v-if="getVersionDownloads(row.version) !== undefined"
               class="text-xs text-fg-muted shrink-0 tabular-nums w-24 text-end"
-              :aria-label="$t('package.downloads.title')"
+              :aria-label="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
               dir="ltr"
             >
               {{ numberFormatter.format(getVersionDownloads(row.version)!) }}
@@ -445,7 +450,7 @@ const flatItems = computed<FlatItem[]>(() => {
                     <span
                       v-if="getGroupDownloads(item.versions) !== undefined"
                       class="ms-auto text-xs text-fg-muted tabular-nums w-24 text-end"
-                      :aria-label="$t('package.downloads.title')"
+                      :aria-label="getDownloadsAriaLabel(getGroupDownloads(item.versions)!)"
                       dir="ltr"
                     >
                       {{ numberFormatter.format(getGroupDownloads(item.versions)!) }}
@@ -518,7 +523,7 @@ const flatItems = computed<FlatItem[]>(() => {
                         <span
                           v-if="getVersionDownloads(item.version) !== undefined"
                           class="text-xs text-fg-muted tabular-nums w-24 text-end shrink-0"
-                          :aria-label="$t('package.downloads.title')"
+                          :aria-label="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
                           dir="ltr"
                         >
                           {{ numberFormatter.format(getVersionDownloads(item.version)!) }}
@@ -564,7 +569,7 @@ const flatItems = computed<FlatItem[]>(() => {
                   <span
                     v-if="getGroupDownloads(item.versions) !== undefined"
                     class="ms-auto text-xs text-fg-muted tabular-nums w-24 text-end"
-                    :aria-label="$t('package.downloads.title')"
+                    :aria-label="getDownloadsAriaLabel(getGroupDownloads(item.versions)!)"
                     dir="ltr"
                   >
                     {{ numberFormatter.format(getGroupDownloads(item.versions)!) }}

test/unit/server/utils/npm-website-versions.spec.ts

@@ -0,0 +1,51 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createError } from 'h3'
+
+vi.stubGlobal('encodePackageName', (name: string) => {
+  if (name.startsWith('@')) return `@${encodeURIComponent(name.slice(1))}`
+  return encodeURIComponent(name)
+})
+vi.stubGlobal('createError', createError)
+
+const { fetchNpmVersionDownloadsFromApi } = await import('#server/utils/npm-website-versions')
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('fetchNpmVersionDownloadsFromApi', () => {
+  it('encodes scoped package names in npm API request URL', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        downloads: {
+          '1.0.0': 123,
+        },
+      }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const result = await fetchNpmVersionDownloadsFromApi('@nuxt/kit')
+
+    expect(fetchMock).toHaveBeenCalledWith('https://api.npmjs.org/versions/@nuxt%2Fkit/last-week')
+    expect(result).toEqual([
+      {
+        version: '1.0.0',
+        downloads: 123,
+      },
+    ])
+  })
+
+  it('throws a not-found error when npm API returns 404', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(fetchNpmVersionDownloadsFromApi('missing-package')).rejects.toMatchObject({
+      statusCode: 404,
+      message: 'Package not found',
+    })
+  })
+})