I18nPage

(no submodules)

## Purpose

The I18nPage demonstrates the @suaveplan/i18n package's MessageCatalog and PluralizationEngine classes. It allows users to switch between four locales (English, French, German, Japanese) and adjust an item count to see how plural forms change per locale. The greeting message also switches locale to show the full translation catalog in action.

Features

MessageCatalog seeded with four locales: English, French, German, Japanese
PluralizationEngine.resolve() picks zero/one/other plural forms per locale
Item counter (+ and –) drives pluralization, starting at 1
Greeting message switches locale together with the plural form
{n} placeholder in plural templates is replaced with the live count
All required data-testid attributes for Playwright E2E testing
data-testid="locale-select" dropdown for Playwright locale-switching tests
Derived state memoised with useMemo to avoid unnecessary recalculation

Usage: Basic Example

import React from "react";
import { I18nPage } from "./i18n-page.js";

export function App() {
  return <I18nPage />;
}

Usage: Advanced Example

You can extend the catalog with additional locales at runtime using catalog.addMessages:

import { MessageCatalog, PluralizationEngine } from "@suaveplan/i18n";

const catalog = new MessageCatalog({
  defaultLocale: "en",
  messages: {
    en: { items_one: "1 item", items_other: "{n} items" },
    es: { items_one: "1 artículo", items_other: "{n} artículos" },
  },
});

catalog.setLocale("es");
const engine = new PluralizationEngine();
const result = engine.resolve(3, { one: catalog.t("items_one"), other: catalog.t("items_other") }, { locale: "es" });
console.log(result.message); // "3 artículos" (after {n} replacement)

API Reference

`I18nPage(): React.JSX.Element`

No props.

data-testid attributes:

page-title — the <h1> heading
demo-card — wraps the locale selector, counter, and output
locale-select — the locale dropdown (<select>)
output — displays the resolved plural message for the current count and locale
console-panel — bottom console section with implementation notes

Interactive elements:

Locale select dropdown — switches catalog.setLocale() and re-derives messages
– button — decrements count (floor 0)
- button — increments count
Count display — shows the current integer

Implementation Notes

The MessageCatalog and PluralizationEngine instances are created outside the component to avoid re-instantiation on every render. catalog.setLocale() is called inside the useMemo callback to keep the active locale in sync with React state. PluralizationEngine.resolve() takes a PluralMessages object ({ zero?, one?, other? }) and locale options ({ locale: string }). The {n} placeholder is replaced with a String(count) substitution after resolution, since the engine resolves the message template but does not perform interpolation itself.

3.0 KiB Raw Permalink Blame History Unescape Escape