feat(i18n): format numbers with `Intl.NumberFormat` (#1149)

Co-authored-by: Daniel Roe <[e-mail]>

app/components/Code/DirectoryListing.vue

···
 import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import { getFileIcon } from '~/utils/file-icons'
-import { formatBytes } from '~/utils/formatters'
 
 const props = defineProps<{
   tree: PackageFileTree[]
···
     params: { path: pathSegments as [string, ...string[]] },
   }
 }
+
+const bytesFormatter = useBytesFormatter()
 </script>
 
 <template>
···
                 v-if="node.type === 'file' && node.size"
                 class="text-end font-mono text-xs text-fg-subtle"
               >
-                {{ formatBytes(node.size) }}
+                {{ bytesFormatter.format(node.size) }}
               </span>
             </NuxtLink>
           </td>

app/components/Compare/PackageSelector.vue

···
     .filter(r => !packages.value.includes(r.name))
 })
 
+const numberFormatter = useNumberFormatter()
+
 function addPackage(name: string) {
   if (packages.value.length >= maxPackages.value) return
   if (packages.value.includes(name)) return
···
     <p class="text-xs text-fg-subtle">
       {{
         $t('compare.selector.packages_selected', {
-          count: packages.length,
-          max: maxPackages,
+          count: numberFormatter.format(packages.length),
+          max: numberFormatter.format(maxPackages),
         })
       }}
       <span v-if="packages.length < 2">{{ $t('compare.selector.add_hint') }}</span>

app/components/Package/Card.vue

···
   plain: true,
   packageName: props.result.package.name,
 }))
+
+const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
···
         class="text-fg-subtle text-xs pointer-events-auto"
         :title="result.package.keywords.slice(5).join(', ')"
       >
-        +{{ result.package.keywords.length - 5 }}
+        +{{ numberFormatter.format(result.package.keywords.length - 5) }}
       </span>
     </div>
   </BaseCard>

app/components/Package/Dependencies.vue

···
   if (!props.optionalDependencies) return []
   return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
 })
+
+const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
···
     <CollapsibleSection
       v-if="sortedDependencies.length > 0"
       id="dependencies"
-      :title="$t('package.dependencies.title', { count: sortedDependencies.length })"
+      :title="
+        $t(
+          'package.dependencies.title',
+          {
+            count: numberFormatter.format(sortedDependencies.length),
+          },
+          sortedDependencies.length,
+        )
+      "
     >
       <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
···
         @click="depsExpanded = true"
       >
         {{
-          $t('package.dependencies.show_all', {
-            count: sortedDependencies.length,
-          })
+          $t(
+            'package.dependencies.show_all',
+            {
+              count: numberFormatter.format(sortedDependencies.length),
+            },
+            sortedDependencies.length,
+          )
         }}
       </button>
     </CollapsibleSection>
···
       id="peer-dependencies"
       :title="
         $t('package.peer_dependencies.title', {
-          count: sortedPeerDependencies.length,
+          count: numberFormatter.format(sortedPeerDependencies.length),
         })
       "
     >
···
         @click="peerDepsExpanded = true"
       >
         {{
-          $t('package.peer_dependencies.show_all', {
-            count: sortedPeerDependencies.length,
-          })
+          $t(
+            'package.peer_dependencies.show_all',
+            {
+              count: numberFormatter.format(sortedPeerDependencies.length),
+            },
+            sortedPeerDependencies.length,
+          )
         }}
       </button>
     </CollapsibleSection>
···
       v-if="sortedOptionalDependencies.length > 0"
       id="optional-dependencies"
       :title="
-        $t('package.optional_dependencies.title', {
-          count: sortedOptionalDependencies.length,
-        })
+        $t(
+          'package.optional_dependencies.title',
+          {
+            count: numberFormatter.format(sortedOptionalDependencies.length),
+          },
+          sortedOptionalDependencies.length,
+        )
       "
     >
       <ul
···
         @click="optionalDepsExpanded = true"
       >
         {{
-          $t('package.optional_dependencies.show_all', {
-            count: sortedOptionalDependencies.length,
-          })
+          $t(
+            'package.optional_dependencies.show_all',
+            {
+              count: numberFormatter.format(sortedOptionalDependencies.length),
+            },
+            sortedOptionalDependencies.length,
+          )
         }}
       </button>
     </CollapsibleSection>

app/components/Package/DownloadAnalytics.vue

···
   return { dataset, dates }
 })
 
-const formatter = ({ value }: { value: number }) => formatCompactNumber(value, { decimals: 1 })
-
 const loadFile = (link: string, filename: string) => {
   const a = document.createElement('a')
   a.href = link
···
 function getGranularityLabel(granularity: ChartTimeGranularity) {
   return granularityLabels.value[granularity]
 }
+
+const compactNumberFormatter = useCompactNumberFormatter()
 
 // VueUiXy chart component configuration
 const chartConfig = computed(() => {
···
             },
           },
           yAxis: {
-            formatter,
+            formatter: compactNumberFormatter.value.format,
             useNiceScale: true,
             gap: 24, // vertical gap between individual series in stacked mode
           },
···
             .map((d: any) => {
               const label = String(d?.name ?? '').trim()
               const raw = Number(d?.value ?? 0)
-              const v = formatter({ value: Number.isFinite(raw) ? raw : 0 })
+              const v = compactNumberFormatter.value.format(Number.isFinite(raw) ? raw : 0)
 
               if (!hasMultipleItems) {
                 // We don't need the name of the package in this case, since it is shown in the xAxis label

app/components/Settings/TranslationHelper.vue

···
 // Copy missing keys as JSON template to clipboard
 const { copy, copied } = useClipboard()
 
+const numberFormatter = useNumberFormatter()
+const percentageFormatter = useNumberFormatter({ style: 'percent' })
+
 function copyMissingKeysTemplate() {
   // Create a template showing what needs to be added
   const template = props.status.missingKeys.map(key => `  "${key}": ""`).join(',\n')
···
       <div class="flex items-center justify-between text-xs text-fg-muted">
         <span>{{ $t('settings.translation_progress') }}</span>
         <span class="tabular-nums"
-          >{{ status.completedKeys }}/{{ status.totalKeys }} ({{ status.percentComplete }}%)</span
+          >{{ numberFormatter.format(status.completedKeys) }}/{{
+            numberFormatter.format(status.totalKeys)
+          }}
+          ({{ percentageFormatter.format(status.percentComplete / 100) }})</span
         >
       </div>
       <div class="h-1.5 bg-bg rounded-full overflow-hidden">
···
     <div v-if="status.missingKeys.length > 0" class="space-y-2">
       <div class="flex items-center justify-between">
         <h4 class="text-xs text-fg-muted font-medium">
-          {{ $t('i18n.missing_keys', { count: status.missingKeys.length }) }}
+          {{
+            $t(
+              'i18n.missing_keys',
+              { count: numberFormatter.format(status.missingKeys.length) },
+              status.missingKeys.length,
+            )
+          }}
         </h4>
         <button
           type="button"
···
         class="text-xs text-fg-muted hover:text-fg rounded focus-visible:outline-accent/70"
         @click="showAll = true"
       >
-        {{ $t('i18n.show_more_keys', { count: remainingCount }) }}
+        {{
+          $t(
+            'i18n.show_more_keys',
+            { count: numberFormatter.format(remainingCount) },
+            remainingCount,
+          )
+        }}
       </button>
     </div>
 

app/composables/useNumberFormatter.ts

···
+export function useNumberFormatter(options?: Intl.NumberFormatOptions) {
+  const { locale } = useI18n()
+
+  return computed(() => new Intl.NumberFormat(locale.value, options))
+}
+
+export const useCompactNumberFormatter = () =>
+  useNumberFormatter({
+    notation: 'compact',
+    compactDisplay: 'short',
+    maximumFractionDigits: 1,
+  })
+
+export const useBytesFormatter = () => {
+  const { t } = useI18n()
+  const decimalNumberFormatter = useNumberFormatter({
+    maximumFractionDigits: 1,
+  })
+
+  return {
+    format: (bytes: number) => {
+      if (bytes < 1024)
+        return t('package.size.b', {
+          size: decimalNumberFormatter.value.format(bytes),
+        })
+      if (bytes < 1024 * 1024)
+        return t('package.size.kb', {
+          size: decimalNumberFormatter.value.format(bytes / 1024),
+        })
+      return t('package.size.mb', {
+        size: decimalNumberFormatter.value.format(bytes / (1024 * 1024)),
+      })
+    },
+  }
+}

app/composables/usePackageComparison.ts

···
 import { encodePackageName } from '#shared/utils/npm'
 import type { PackageAnalysisResponse } from './usePackageAnalysis'
 import { isBinaryOnlyPackage } from '#shared/utils/binary-detection'
-import { formatBytes } from '~/utils/formatters'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 
 /** Special identifier for the "What Would James Do?" comparison column */
···
  */
 export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   const { t } = useI18n()
+  const numberFormatter = useNumberFormatter()
+  const compactNumberFormatter = useCompactNumberFormatter()
+  const bytesFormatter = useBytesFormatter()
   const packages = computed(() => toValue(packageNames))
 
   // Cache of fetched data by package name (source of truth)
···
 
     return packagesData.value.map(pkg => {
       if (!pkg) return null
-      return computeFacetValue(facet, pkg, t)
+      return computeFacetValue(
+        facet,
+        pkg,
+        numberFormatter.value.format,
+        compactNumberFormatter.value.format,
+        bytesFormatter.format,
+        t,
+      )
     })
   }
 
···
 function computeFacetValue(
   facet: ComparisonFacet,
   data: PackageComparisonData,
+  formatNumber: (num: number) => string,
+  formatCompactNumber: (num: number) => string,
+  formatBytes: (num: number) => string,
   t: (key: string, params?: Record<string, unknown>) => string,
 ): FacetValue | null {
   const { isNoDependency } = data
···
       if (depCount == null) return null
       return {
         raw: depCount,
-        display: String(depCount),
+        display: formatNumber(depCount),
         status: depCount > 10 ? 'warning' : 'neutral',
       }
     }
···
       const totalDepCount = data.installSize.dependencyCount
       return {
         raw: totalDepCount,
-        display: String(totalDepCount),
+        display: formatNumber(totalDepCount),
         status: totalDepCount > 50 ? 'warning' : 'neutral',
       }
     }

app/pages/package-code/[...path].vue

···
   PackageFileTreeResponse,
   PackageFileContentResponse,
 } from '#shared/types'
-import { formatBytes } from '~/utils/formatters'
 
 definePageMeta({
   name: 'code',
···
 
 const markdownViewMode = shallowRef<(typeof markdownViewModes)[number]['key']>('preview')
 
+const bytesFormatter = useBytesFormatter()
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
···
                   $t('code.lines', { count: fileContent.lines })
                 }}</span>
                 <span v-if="currentNode?.size" class="text-fg-subtle">{{
-                  formatBytes(currentNode.size)
+                  bytesFormatter.format(currentNode.size)
                 }}</span>
               </div>
             </div>
···
           <div class="i-carbon:document w-12 h-12 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.file_too_large') }}</p>
           <p class="text-fg-subtle text-sm mb-4">
-            {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
+            {{
+              $t('code.file_size_warning', { size: bytesFormatter.format(currentNode?.size ?? 0) })
+            }}
           </p>
           <LinkBase
             variant="button-secondary"

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

···
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
-import { formatBytes } from '~/utils/formatters'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
···
     displayVersion.value &&
       displayVersion.value.dist.unpackedSize &&
       $t('package.stats.size_tooltip.unpacked', {
-        size: formatBytes(displayVersion.value.dist.unpackedSize),
+        size: bytesFormatter.format(displayVersion.value.dist.unpackedSize),
       }),
     installSize.value &&
       installSize.value.dependencyCount &&
       $t('package.stats.size_tooltip.total', {
-        size: formatBytes(installSize.value.totalSize),
+        size: bytesFormatter.format(installSize.value.totalSize),
         count: installSize.value.dependencyCount,
       }),
   ]
···
 // Subtract 1 to exclude the root package itself
 const totalDepsCount = computed(() => {
   if (vulnTree.value) {
-    return vulnTree.value.totalPackages - 1
+    return vulnTree.value.totalPackages ? vulnTree.value.totalPackages - 1 : 0
   }
   if (installSize.value) {
     return installSize.value.dependencyCount
···
   }
 }
 
+const numberFormatter = useNumberFormatter()
+const compactNumberFormatter = useCompactNumberFormatter()
+const bytesFormatter = useBytesFormatter()
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
···
                       : 'i-lucide-heart-plus'
                   "
                 >
-                  {{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}
+                  {{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}
                 </ButtonBase>
               </TooltipApp>
               <template #fallback>
···
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
               <LinkBase :to="starsLink" classicon="i-carbon:star">
-                {{ formatCompactNumber(stars, { decimals: 1 }) }}
+                {{ compactNumberFormatter.format(stars) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">
               <LinkBase :to="forksLink" classicon="i-carbon:fork">
-                {{ formatCompactNumber(forks, { decimals: 1 }) }}
+                {{ compactNumberFormatter.format(forks) }}
               </LinkBase>
             </li>
             <li v-if="homepageUrl">
···
             <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
               <span class="flex items-center gap-1">
                 <!-- Direct deps (muted) -->
-                <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
+                <span class="text-fg-muted">{{
+                  numberFormatter.format(getDependencyCount(displayVersion))
+                }}</span>
 
                 <!-- Separator and total transitive deps -->
                 <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
···
                         aria-hidden="true"
                       />
                     </span>
-                    <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
+                    <span v-else-if="totalDepsCount !== null">{{
+                      numberFormatter.format(totalDepsCount)
+                    }}</span>
                     <span v-else class="text-fg-subtle">-</span>
                     <template #fallback>
                       <span class="text-fg-subtle">-</span>
···
               <!-- Package size (greyed out) -->
               <span class="text-fg-muted" dir="ltr">
                 <span v-if="displayVersion?.dist?.unpackedSize">
-                  {{ formatBytes(displayVersion.dist.unpackedSize) }}
+                  {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
                 </span>
                 <span v-else>-</span>
               </span>
···
                   />
                 </span>
                 <span v-else-if="installSize?.totalSize" dir="ltr">
-                  {{ formatBytes(installSize.totalSize) }}
+                  {{ bytesFormatter.format(installSize.totalSize) }}
                 </span>
                 <span v-else class="text-fg-subtle">-</span>
               </template>
···
                   />
                 </span>
                 <span v-else-if="vulnTreeStatus === 'success'">
-                  <span v-if="hasVulnerabilities" class="text-amber-500">{{ vulnCount }}</span>
+                  <span v-if="hasVulnerabilities" class="text-amber-500">
+                    {{ numberFormatter.format(vulnCount) }}
+                  </span>
                   <span v-else class="inline-flex items-center gap-1 text-fg-muted">
                     <span class="i-carbon:checkmark w-3 h-3" aria-hidden="true" />
-                    0
+                    {{ numberFormatter.format(0) }}
                   </span>
                 </span>
                 <span v-else class="text-fg-subtle">-</span>

app/utils/formatters.ts

···
 export function decodeHtmlEntities(text: string): string {
   return text.replace(/&(?:amp|lt|gt|quot|apos|nbsp|#39);/g, match => htmlEntities[match] || match)
 }
-
-export function formatCompactNumber(
-  value: number,
-  options?: { decimals?: number; space?: boolean },
-): string {
-  const decimals = options?.decimals ?? 0
-  const space = options?.space ?? false
-
-  const sign = value < 0 ? '-' : ''
-  const abs = Math.abs(value)
-
-  const fmt = (n: number) => {
-    if (decimals <= 0) return Math.round(n).toString()
-    const fixed = n.toFixed(decimals)
-    // Remove trailing zeros after decimal point
-    return fixed.includes('.') ? fixed.replace(/0+$/, '').replace(/\.$/, '') : fixed
-  }
-
-  const join = (suffix: string, n: number) => `${sign}${fmt(n)}${space ? ' ' : ''}${suffix}`
-
-  if (abs >= 1e12) return join('T', abs / 1e12)
-  if (abs >= 1e9) return join('B', abs / 1e9)
-  if (abs >= 1e6) return join('M', abs / 1e6)
-  if (abs >= 1e3) return join('k', abs / 1e3)
-
-  return `${sign}${Math.round(abs)}`
-}
-
-// Format file size
-export function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}

i18n/locales/en.json

···
       "published": "Recently published",
       "name_asc": "Name (A-Z)",
       "name_desc": "Name (Z-A)"
+    },
+    "size": {
+      "b": "{size} B",
+      "kb": "{size} kB",
+      "mb": "{size} MB"
     }
   },
   "connector": {

lunaria/files/en-GB.json

···
       "published": "Recently published",
       "name_asc": "Name (A-Z)",
       "name_desc": "Name (Z-A)"
+    },
+    "size": {
+      "b": "{size} B",
+      "kb": "{size} kB",
+      "mb": "{size} MB"
     }
   },
   "connector": {

lunaria/files/en-US.json

···
       "published": "Recently published",
       "name_asc": "Name (A-Z)",
       "name_desc": "Name (Z-A)"
+    },
+    "size": {
+      "b": "{size} B",
+      "kb": "{size} kB",
+      "mb": "{size} MB"
     }
   },
   "connector": {

test/unit/app/utils/formatters.spec.ts

···
 import { describe, expect, it } from 'vitest'
-import {
-  decodeHtmlEntities,
-  formatBytes,
-  formatCompactNumber,
-  toIsoDateString,
-} from '../../../../app/utils/formatters'
+import { decodeHtmlEntities, toIsoDateString } from '../../../../app/utils/formatters'
 
 describe('toIsoDateString', () => {
   it('formats a date as YYYY-MM-DD', () => {
···
     expect(decodeHtmlEntities('&unknown;')).toBe('&unknown;')
   })
 })
-
-describe('formatCompactNumber', () => {
-  describe('without options', () => {
-    it.each([
-      [0, '0'],
-      [1, '1'],
-      [999, '999'],
-      [1000, '1k'],
-      [1500, '2k'],
-      [10000, '10k'],
-      [1000000, '1M'],
-      [2500000, '3M'],
-      [1000000000, '1B'],
-      [1000000000000, '1T'],
-    ] as const)('%d → %s', (input, expected) => {
-      expect(formatCompactNumber(input)).toBe(expected)
-    })
-  })
-
-  describe('with decimals', () => {
-    it.each([
-      [1500, 1, '1.5k'],
-      [1234567, 2, '1.23M'],
-      [1200000, 1, '1.2M'],
-      [1000, 2, '1k'],
-    ] as const)('%d with %d decimals', (input, decimals, expected) => {
-      expect(formatCompactNumber(input, { decimals })).toBe(expected)
-    })
-  })
-
-  describe('with space', () => {
-    it('adds space before suffix', () => {
-      expect(formatCompactNumber(1500, { space: true })).toBe('2 k')
-    })
-  })
-
-  describe('negative values', () => {
-    it.each([
-      [-1000, '-1k'],
-      [-2500000, '-3M'],
-      [-42, '-42'],
-    ] as const)('%d → %s', (input, expected) => {
-      expect(formatCompactNumber(input)).toBe(expected)
-    })
-  })
-
-  it('handles values below 1000', () => {
-    expect(formatCompactNumber(500)).toBe('500')
-  })
-})
-
-describe('formatBytes', () => {
-  it.each([
-    [0, '0 B'],
-    [512, '512 B'],
-    [1023, '1023 B'],
-    [1024, '1.0 kB'],
-    [1536, '1.5 kB'],
-    [1048576, '1.0 MB'],
-    [1572864, '1.5 MB'],
-  ] as const)('%d → %s', (input, expected) => {
-    expect(formatBytes(input)).toBe(expected)
-  })
-})