Trouble with Global Number Formatters

[valeryq]

Hi Community,

I'm trying to use Global Formatters to format default numbers, but for some reason, they don't seem to work as expected. Here's what I have so far:

// /messages/en.json
{
  "MILES_AWAY": "{distance, number} miles away",
}

// /i18n/request.ts
...
return {
    formats: {
      number: {
        decimal: {
          useGrouping: false,
        },
      },
    },
    locale,
    messages,
  };

Usage:

const t = useTranslations();

{t('COMMON.MILES_AWAY', {
  distance: Math.round(distanceFromUser),
})}

Output: 4,080
but should be 4080

According to the Intl.NumberFormat documentation, decimal is supposed to be the default for all plain number formatting. However, in my setup, the useGrouping: false option doesn’t seem to take effect - numbers are still being grouped.

Has anyone run into a similar issue or can point out what might be going wrong with the global number formatters setup? Any guidance would be greatly appreciated.

P.S. If I use { "MILES_AWAY": "{distance, number, decimal} miles away" } in the translation file - it works well, but I would rather not to add a default (decimal) style to all number variables.

[amannn]

According to the Intl.NumberFormat documentation, decimal is supposed to be the default for all plain number formatting.

Intl.NumberFormat doesn't work with any kind of named formatters, but it uses internal defaults.

The formats you supply to next-intl must be explicitly referenced, so your sample with "{distance, number, decimal} miles away" is correct!

[valeryq]

@amannn Thanks for your answer!

My assumption was that this message:

// en.json
{ "MILES_AWAY": "{distance, number} miles away" }

implies the variables would be:

locale = "en"
distance = 1000
mode = "number"
style = undefined

and under the hood it would use something like:

new Intl.NumberFormat(locale, { style, ...getFormatterOptions(mode, style) }).format(distance)

where style = undefined actually is "decimal" for Intl.NumberFormat

new Intl.NumberFormat("en", { style: undefined }).format(1000) // 1,000
new Intl.NumberFormat("en", { style: undefined, useGrouping: false }).format(1000) // 1000

I guess it would be very useful to have default formatters for all numbers - without needing to specify an additional style in the translation strings (e.g. decimal, currency, percent, unit).
I'm not sure if this is feasible implementation-wise, but it could make translations clearer and reduce boilerplate.

Thanks!

[amannn]

I see your point, yes! If you want, you can open a feature request for specifying default options for number and date formats. I need to look into this in more detail once time permits, but we can gauge interest from the community in the meantime!

[valeryq]

@amannn As I'm not deeply familiar with the package internals, this implementation demonstrates the desired functionality but may not represent the optimal approach. I welcome feedback on how to better integrate this feature with the existing architecture.
#2018

[amannn]

Hey @valeryq, I appreciate your work setting up the PR! The approach unfortunately doesn't fit so well with the roadmap of next-intl, related to #962. I'd still be curious if this could be implemented with another approach, but there's more work necessary regarding API design, research of implications, docs etc. I'm unfortuantely quite short on time currently and there are feature requests with higher priority, so I think an issue would be best to collect interest for now! Hope that's understandable!

[valeryq]

@amannn that makes sense. Thanks for looking into this issue. I'm gonna close the PR.