Using formatters in plural syntax

[scaltunsoy]

I have a translation that uses zero, one, other plural syntax.

const en: BaseTranslation = {
  products: "You have {{0:no|one|??}} product{{0:s}}"
}

LL.products(10000) returns You have 10000 products, but I want to get You have 10,000 products.

I thought that I can use number formatter to achieve this.

import type { FormattersInitializer } from "typesafe-i18n";
import { number } from "typesafe-i18n/formatters";

import type { Locales, Formatters } from "./i18n-types";

export const initFormatters: FormattersInitializer<Locales, Formatters> = (
  locale: Locales
) => {
  const formatters: Formatters = {
    number: number(locale),
  };

  return formatters;
};

However, I don't know how to use number formatter in the products translation. The following ones did not work:

• products: "You have {{0:no|one|??|number}} product{{0:s}}"
  • LL.products(10000) returns You have products.
• products: "You have {{0:no|one|{??|number}}}"
  • LL.products(10000) returns You have {10000} products.

How can I use formatters in that kind of plural syntax? If not possible, is there a workaround?

[ivanhofer]

Nice use case. Unfortunately this does not work at the moment.

As a workaround you coud use a formatter to handle this plural rule like this:

export const initFormatters: FormattersInitializer<Locales, Formatters> = (
  locale: Locales
) => {
  const pluralRule = new Intl.PluralRule(locale)
  const numberFormatter = number(locale)
  const formatters: Formatters = {
    customNumber: (value: number) => {
		switch (pluralRule.select(value)) {
			case 'one': return 'one'
			case 'zero': return 'zero'
			default: return numberFormatter.format(value)
		}
  	},
  };

  return formatters;
};

products: "You have {0:customNumber} product{{0:s}}"

I haven't tested it, so there might be minor bugs in this code, but the general idea should work. Let me know if you still need help :)

[scaltunsoy]

Thank you for your answer.

pluralRule.select(0) returns "other" for en-US. However, I found the following workaround. I formatted the number before passing it to the translation function:

LL.products(productCount.toLocaleString(locale))

This produces outputs that I want for the languages that I am dealing with.