refactor: create downloadFile and downloadFileLink utils

I've seen this code used all over the place and so this is a good chance
to make a util for it proper - I'll leave the chart stuff though for
this PR as it needs more involved testing that I don't have time for
tonight

Author: ghostdevv

app/components/Brand/Customize.vue

@@ -2,7 +2,6 @@
 import { ACCENT_COLORS, type AccentColorId } from '#shared/utils/constants'
 
 const { selectedAccentColor } = useAccentColor()
-const { download: downloadBlob } = useSvgToPng()
 const { t } = useI18n()
 
 const customAccent = ref<string | null>(null)
@@ -58,13 +57,9 @@ function getCustomSvgString(): string {
 function downloadCustomSvg() {
   const svg = getCustomSvgString()
   if (!svg) return
+
   const blob = new Blob([svg], { type: 'image/svg+xml' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `npmx-logo-${activeAccentId.value}.svg`
-  a.click()
-  URL.revokeObjectURL(url)
+  downloadFile(blob, `npmx-logo-${activeAccentId.value}.svg`)
 }
 
 const pngLoading = ref(false)
@@ -73,10 +68,12 @@ async function downloadCustomPng() {
   const svg = getCustomSvgString()
   if (!svg) return
   pngLoading.value = true
+
+  const blob = new Blob([svg], { type: 'image/svg+xml' })
+  const url = URL.createObjectURL(blob)
+
   try {
     await document.fonts.ready
-    const blob = new Blob([svg], { type: 'image/svg+xml' })
-    const url = URL.createObjectURL(blob)
 
     const img = new Image()
     const loaded = new Promise<void>((resolve, reject) => {
@@ -100,12 +97,12 @@ async function downloadCustomPng() {
 
     await new Promise<void>(resolve => {
       canvas.toBlob(pngBlob => {
-        if (pngBlob) downloadBlob(pngBlob, `npmx-logo-${activeAccentId.value}.png`)
-        URL.revokeObjectURL(url)
+        if (pngBlob) downloadFile(pngBlob, `npmx-logo-${activeAccentId.value}.png`)
         resolve()
       }, 'image/png')
     })
   } finally {
+    URL.revokeObjectURL(url)
     pngLoading.value = false
   }
 }

app/components/Package/DownloadButton.vue

@@ -32,14 +32,14 @@ async function downloadPackage() {
 
   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)
+  downloadFileLink(
+    downloadUrl ?? tarballUrl,
+    `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`,
+  )
 
   if (downloadUrl) {
+    // We're creating the object url in getDownloadUrl,
+    // but need to clean it up here
     URL.revokeObjectURL(downloadUrl)
   }
 

app/composables/useSvgToPng.ts

@@ -31,14 +31,5 @@ export function useSvgToPng() {
     })
   }
 
-  function download(blob: Blob, filename: string) {
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = filename
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  return { convert, download }
+  return { convert }
 }

app/pages/brand.vue

@@ -14,7 +14,7 @@ defineOgImageComponent('Default', {
   description: $t('brand.meta_description'),
 })
 
-const { convert, download: downloadPng } = useSvgToPng()
+const { convert } = useSvgToPng()
 
 const logos = [
   {
@@ -47,7 +47,7 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
   try {
     const blob = await convert(logo.src, logo.width, logo.height)
     const filename = logo.src.replace(/^\//, '').replace('.svg', '.png')
-    downloadPng(blob, filename)
+    downloadFile(blob, filename)
   } finally {
     pngLoading.value.delete(logo.src)
   }

app/utils/charts.ts

@@ -637,6 +637,7 @@ export async function copyAltTextForCompareFacetBarChart({
 }
 
 // Used in chart context menu callbacks
+// @todo replace with downloadFileLink
 export function loadFile(link: string, filename: string) {
   const a = document.createElement('a')
   a.href = link

app/utils/download.ts

@@ -0,0 +1,30 @@
+/**
+ * Prompts the user to download the file that is at the given link, using
+ * the given default filename.
+ *
+ * Note: some browsers may ignore the `download` attribute for cross-origin URLs.
+ *
+ * @param link - The URL of the resource to download. This can be a normal URL,
+ *               a data URL (e.g. "data:..."), or an object URL created via
+ *               `URL.createObjectURL`.
+ * @param filename - Suggested filename for the downloaded file. The browser may
+ *                   override this value depending on user settings or the URL.
+ */
+export function downloadFileLink(link: string, filename: string) {
+  const a = document.createElement('a')
+  a.href = link
+  a.download = filename
+  a.click()
+}
+
+/**
+ * Prompt the user to download the provided Blob as a file with the given filename.
+ *
+ * @param blob - The Blob to download.
+ * @param filename - The filename that will be suggested to the user when saving.
+ */
+export function downloadFile(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  downloadFileLink(url, filename)
+  URL.revokeObjectURL(url)
+}