fix: formatNumber is now automatically using the locale now (#497)

Author: jycouet

CONTRIBUTING.md

@@ -369,13 +369,17 @@ We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName
 
 The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
 
-### Formatting with locale
+### Formatting numbers and dates
 
-When formatting numbers or dates that should respect the user's locale, pass the locale:
+Use vue-i18n's built-in formatters for locale-aware formatting:
 
-```typescript
-const { locale } = useI18n()
-const formatted = formatNumber(12345, locale.value) // "12,345" in en-US
+```vue
+<template>
+  <p>{{ $n(12345) }}</p>
+  <!-- "12,345" in en-US, "12 345" in fr-FR -->
+  <p>{{ $d(new Date()) }}</p>
+  <!-- locale-aware date -->
+</template>
 ```
 
 ## Testing

app/components/PackageCard.vue

@@ -123,7 +123,7 @@ const emit = defineEmits<{
             <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
             <dd class="flex items-center gap-1.5">
               <span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
-              <span class="font-mono">{{ formatNumber(result.downloads.weekly) }}/w</span>
+              <span class="font-mono">{{ $n(result.downloads.weekly) }}/w</span>
             </dd>
           </div>
         </dl>
@@ -158,7 +158,7 @@ const emit = defineEmits<{
         >
           <span class="i-carbon:chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
           <span class="font-mono text-xs">
-            {{ formatNumber(result.downloads.weekly) }} {{ $t('common.per_week') }}
+            {{ $n(result.downloads.weekly) }} {{ $t('common.per_week') }}
           </span>
         </div>
       </div>

app/pages/@[org].vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { formatNumber } from '#imports'
 import type { FilterChip, SortOption } from '#shared/types/preferences'
 import { debounce } from 'perfect-debounce'
 
@@ -157,7 +156,7 @@ defineOgImageComponent('Default', {
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">@{{ orgName }}</h1>
           <p v-if="status === 'success'" class="text-fg-muted text-sm mt-1">
-            {{ $t('org.public_packages', { count: formatNumber(packageCount) }, packageCount) }}
+            {{ $t('org.public_packages', { count: $n(packageCount) }, packageCount) }}
           </p>
         </div>
 
@@ -181,7 +180,7 @@ defineOgImageComponent('Default', {
           >
             <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
             <span class="font-mono"
-              >{{ formatNumber(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
+              >{{ $n(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
             >
           </p>
         </div>

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

@@ -258,10 +258,6 @@ function formatBytes(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
-function formatNumber(num: number): string {
-  return new Intl.NumberFormat('en-US').format(num)
-}
-
 function getDependencyCount(version: PackumentVersion | null): number {
   if (!version?.dependencies) return 0
   return Object.keys(version.dependencies).length
@@ -360,7 +356,7 @@ onKeyStroke(
 defineOgImageComponent('Package', {
   name: () => pkg.value?.name ?? 'Package',
   version: () => displayVersion.value?.version ?? '',
-  downloads: () => (downloads.value ? formatNumber(downloads.value.downloads) : ''),
+  downloads: () => (downloads.value ? $n(downloads.value.downloads) : ''),
   license: () => pkg.value?.license ?? '',
   primaryColor: '#60a5fa',
 })

app/pages/search.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { formatNumber } from '#imports'
 import type { FilterChip, SortOption } from '#shared/types/preferences'
 import { onKeyDown } from '@vueuse/core'
 import { debounce } from 'perfect-debounce'
@@ -783,7 +782,7 @@ defineOgImageComponent('Default', {
               {{
                 $t(
                   'search.found_packages',
-                  { count: formatNumber(visibleResults.total) },
+                  { count: $n(visibleResults.total) },
                   visibleResults.total,
                 )
               }}

app/pages/~[username]/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { formatNumber } from '#imports'
 import { debounce } from 'perfect-debounce'
 
 const route = useRoute('~username')
@@ -192,7 +191,7 @@ defineOgImageComponent('Default', {
         <div>
           <h1 class="font-mono text-2xl sm:text-3xl font-medium">~{{ username }}</h1>
           <p v-if="results?.total" class="text-fg-muted text-sm mt-1">
-            {{ $t('org.public_packages', { count: formatNumber(results.total) }, results.total) }}
+            {{ $t('org.public_packages', { count: $n(results.total) }, results.total) }}
           </p>
         </div>
 
@@ -216,7 +215,7 @@ defineOgImageComponent('Default', {
           >
             <span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
             <span class="font-mono"
-              >{{ formatNumber(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
+              >{{ $n(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
             >
           </p>
         </div>

app/utils/formatters.ts

@@ -1,9 +1,3 @@
-/** @public */
-export function formatNumber(num: number, _locale?: string): string {
-  // TODO: Support different locales (needs care to ensure hydration works correctly)
-  return new Intl.NumberFormat('en-US').format(num)
-}
-
 /** @public */
 export function toIsoDateString(date: Date): string {
   const year = date.getUTCFullYear()

scripts/compare-translations.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import process from 'node:process'
 import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'