feat: add command palette download tarball action

Author: serhalp

app/components/Package/DownloadButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SlimPackumentVersion } from '#shared/types'
+import { downloadPackageTarball } from '~/utils/package-download'
 
 const props = defineProps<{
   packageName: string
@@ -8,42 +9,15 @@ const props = defineProps<{
 
 const loading = shallowRef(false)
 
-async function getDownloadUrl(tarballUrl: string) {
-  try {
-    const response = await fetch(tarballUrl)
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tarball (${response.status})`)
-    }
-    const blob = await response.blob()
-    return URL.createObjectURL(blob)
-  } catch (error) {
-    // oxlint-disable-next-line no-console -- error logging
-    console.error('failed to fetch tarball', { cause: error })
-    return null
-  }
-}
-
 async function downloadPackage() {
-  const tarballUrl = props.version.dist.tarball
-  if (!tarballUrl) return
-
   if (loading.value) return
   loading.value = true
 
-  const downloadUrl = await getDownloadUrl(tarballUrl)
-
-  const link = document.createElement('a')
-  link.href = downloadUrl ?? tarballUrl
-  link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-
-  if (downloadUrl) {
-    URL.revokeObjectURL(downloadUrl)
+  try {
+    await downloadPackageTarball(props.packageName, props.version)
+  } finally {
+    loading.value = false
   }
-
-  loading.value = false
 }
 </script>
 

app/composables/useCommandPalettePackageCommands.ts

@@ -3,6 +3,7 @@ import type {
   CommandPaletteContextCommandInput,
   CommandPalettePackageContext,
 } from '~/types/command-palette'
+import { downloadPackageTarball } from '~/utils/package-download'
 
 function activeLabel(isCurrentRoute: boolean, label: string) {
   return isCurrentRoute ? label : null
@@ -104,6 +105,28 @@ export function useCommandPalettePackageCommands(
         },
       ]
 
+      if (resolvedContext.tarballUrl) {
+        commands.push({
+          id: 'package-download',
+          group: 'package',
+          label: t('command_palette.package.download'),
+          keywords: [
+            resolvedContext.packageName,
+            t('package.download.button'),
+            t('package.download.tarball'),
+          ],
+          iconClass: 'i-lucide:download',
+          action: () => {
+            void downloadPackageTarball(resolvedContext.packageName, {
+              version: resolvedContext.resolvedVersion!,
+              dist: {
+                tarball: resolvedContext.tarballUrl!,
+              },
+            })
+          },
+        })
+      }
+
       if (
         resolvedContext.latestVersion &&
         resolvedContext.latestVersion !== resolvedContext.resolvedVersion

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

@@ -212,6 +212,7 @@ const commandPalettePackageContext = computed(() => {
     resolvedVersion: resolvedVersion.value ?? packageData['dist-tags']?.latest ?? null,
     latestVersion: packageData['dist-tags']?.latest ?? null,
     versions: commandPaletteVersions.value ?? Object.keys(packageData.versions ?? {}),
+    tarballUrl: packageData.requestedVersion?.dist.tarball ?? null,
   }
 })
 

app/types/command-palette.ts

@@ -73,4 +73,5 @@ export interface CommandPalettePackageContext {
   resolvedVersion: string | null
   latestVersion: string | null
   versions: string[]
+  tarballUrl?: string | null
 }

app/utils/package-download.ts

@@ -0,0 +1,37 @@
+import type { SlimPackumentVersion } from '#shared/types'
+
+async function getDownloadUrl(tarballUrl: string) {
+  try {
+    const response = await fetch(tarballUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch tarball (${response.status})`)
+    }
+    const blob = await response.blob()
+    return URL.createObjectURL(blob)
+  } catch (error) {
+    // oxlint-disable-next-line no-console -- error logging
+    console.error('failed to fetch tarball', { cause: error })
+    return null
+  }
+}
+
+export async function downloadPackageTarball(
+  packageName: string,
+  version: Pick<SlimPackumentVersion, 'version' | 'dist'>,
+) {
+  const tarballUrl = version.dist.tarball
+  if (!tarballUrl) return
+
+  const downloadUrl = await getDownloadUrl(tarballUrl)
+
+  const link = document.createElement('a')
+  link.href = downloadUrl ?? tarballUrl
+  link.download = `${packageName.replace(/\//g, '__')}-${version.version}.tgz`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  if (downloadUrl) {
+    URL.revokeObjectURL(downloadUrl)
+  }
+}

i18n/locales/en.json

@@ -146,7 +146,8 @@
       "docs": "Docs",
       "code": "Code",
       "diff": "Diff",
-      "compare": "Compare this package"
+      "compare": "Compare this package",
+      "download": "Download tarball"
     },
     "package_actions": {
       "copy_run": "Copy run command"

i18n/locales/fr-FR.json

@@ -146,7 +146,8 @@
       "docs": "Doc",
       "code": "Code",
       "diff": "Diff",
-      "compare": "Comparer ce paquet"
+      "compare": "Comparer ce paquet",
+      "download": "Télécharger le tarball"
     },
     "package_actions": {
       "copy_run": "Copier la commande d'exécution"

test/nuxt/composables/use-command-palette-commands.spec.ts

@@ -150,6 +150,7 @@ describe('useCommandPaletteCommands', () => {
         resolvedVersion: '3.4.0',
         latestVersion: '3.5.0',
         versions: ['3.3.0', '3.5.0', '3.4.0'],
+        tarballUrl: 'https://registry.npmjs.org/vue/-/vue-3.4.0.tgz',
       },
     })
 
@@ -163,6 +164,7 @@ describe('useCommandPaletteCommands', () => {
       'versions',
     ])
     expect(flatCommands.value.find(command => command.id === 'package-diff')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'package-download')).toBeTruthy()
     expect(flatCommands.value.find(command => command.id === 'package-main')?.to).toBeTruthy()
     expect(groupedCommands.value.at(-1)?.id).toBe('versions')
     expect(groupedCommands.value.at(-1)?.items[0]?.id).toBe('version:3.4.0')