@opentf/web-i18n 1.1.0

package/T.jsx

@@ -0,0 +1,14 @@
+// <T id values /> — inline translation component (docs/I18N.md §5).
+//
+// Sugar over `t(id, values)`: renders the translated string into a <span>, wired
+// reactively to the active locale like any text binding. For messages that
+// interpolate a *signal* (e.g. a live `{count}`), prefer the bare `{t("key", { count })}`
+// form in markup so the compiler tracks the signal directly.
+//
+// Shipped as JSX source and compiled by the consuming app's pipeline (like <Link>).
+
+import { t } from "./i18n.js";
+
+export default function T({ id, values }) {
+  return <span>{t(id, values)}</span>;
+}

package/format.js

@@ -0,0 +1,47 @@
+//! Locale-aware formatters over the browser-native `Intl` APIs (docs/I18N.md §5).
+//
+// Each formatter reads the active locale from `getLocale()` (which tracks the
+// reactive `router.locale`), so `fmt.currency(...)` inside a binding re-renders on
+// a locale-changing navigation. `Intl.*` instances are memoized per
+// (kind, locale, options) — constructing them is comparatively expensive.
+
+import { getLocale } from "./i18n.js";
+
+const cache = new Map();
+
+function intl(kind, Ctor, options) {
+  const locale = getLocale();
+  const key = `${kind} ${locale} ${options ? JSON.stringify(options) : ""}`;
+  let inst = cache.get(key);
+  if (!inst) {
+    inst = new Ctor(locale, options);
+    cache.set(key, inst);
+  }
+  return inst;
+}
+
+export const fmt = {
+  /** Locale-grouped number: `fmt.number(1234.5)`. */
+  number: (value, options) => intl("n", Intl.NumberFormat, options).format(value),
+
+  /** Currency: `fmt.currency(189, "USD")` → "$189.00" / "189,00 $US". */
+  currency: (value, currency, options) =>
+    intl("c", Intl.NumberFormat, { style: "currency", currency, ...options }).format(value),
+
+  /** Percent: `fmt.percent(0.42)` → "42%". */
+  percent: (value, options) =>
+    intl("pc", Intl.NumberFormat, { style: "percent", ...options }).format(value),
+
+  /** Date/time: `fmt.date(new Date(), { dateStyle: "long" })`. */
+  date: (value, options) => intl("d", Intl.DateTimeFormat, options).format(value),
+
+  /** Relative time: `fmt.relativeTime(-3, "day")` → "3 days ago". */
+  relativeTime: (value, unit, options) =>
+    intl("r", Intl.RelativeTimeFormat, options).format(value, unit),
+
+  /** Plural category for the active locale: `fmt.plural(2)` → "other". */
+  plural: (value, options) => intl("p", Intl.PluralRules, options).select(value),
+
+  /** List: `fmt.list(["a","b","c"])` → "a, b, and c". */
+  list: (values, options) => intl("l", Intl.ListFormat, options).format(values),
+};

package/index.js

@@ -0,0 +1,15 @@
+// Public entry for @opentf/web-i18n — ICU messages + Intl formatters that pair
+// with the core router's URL-prefix locale routing (docs/I18N.md).
+//
+//   import { createI18n, t, fmt } from "@opentf/web-i18n";
+//   createI18n({ locales: ["en", "fr"], defaultLocale: "en", messages: { … } });
+//   t("greeting", { name });   // reactive on router.locale
+//   fmt.currency(189, "USD");
+
+export { createI18n, getLocale, loadLocale, locales, setCatalog, t } from "./i18n.js";
+export { fmt } from "./format.js";
+
+// `<T>` is a pure JSX component (compiled by the app's pipeline). The bare import
+// retains its Custom Element registration side effect; the re-export exposes it.
+import "./T.jsx";
+export { default as T } from "./T.jsx";

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@opentf/web-i18n",
+  "version": "1.1.0",
+  "description": "Internationalization for OTF Web — ICU messages, Intl formatters, and a reactive t() that pairs with the core's URL-prefix locale routing.",
+  "main": "index.js",
+  "module": "index.js",
+  "type": "module",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "i18n.js",
+    "format.js",
+    "T.jsx",
+    "!**/*.test.js"
+  ],
+  "keywords": [
+    "opentf",
+    "i18n",
+    "internationalization",
+    "icu",
+    "intl",
+    "localization"
+  ],
+  "dependencies": {
+    "intl-messageformat": "^10.7.0"
+  },
+  "peerDependencies": {
+    "@opentf/web": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "bun test --env=happy-dom"
+  },
+  "devDependencies": {
+    "@opentf/web": "0.6.0",
+    "@opentf/web-test": "1.1.0"
+  }
+}