@vaadin/hilla-react-i18n 24.4.0-alpha14 → 24.4.0-alpha16

package/FormatCache.d.ts

@@ -0,0 +1,7 @@
+import { IntlMessageFormat } from 'intl-messageformat';
+export declare class FormatCache {
+    #private;
+    constructor(language: string);
+    getFormat(translation: string): IntlMessageFormat;
+}
+//# sourceMappingURL=FormatCache.d.ts.map

package/FormatCache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormatCache.d.ts","sourceRoot":"","sources":["src/FormatCache.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,qBAAa,WAAW;;gBAIV,QAAQ,EAAE,MAAM;IAU5B,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,iBAAiB;CAQlD"}

package/FormatCache.js

@@ -0,0 +1,25 @@
+import { IntlMessageFormat } from "intl-messageformat";
+class FormatCache {
+  #language;
+  #formats = /* @__PURE__ */ new Map();
+  constructor(language) {
+    let supportedLocales = [];
+    try {
+      supportedLocales = Intl.NumberFormat.supportedLocalesOf(language);
+    } catch (e) {
+    }
+    this.#language = supportedLocales.length > 0 ? supportedLocales[0] : navigator.language;
+  }
+  getFormat(translation) {
+    let format = this.#formats.get(translation);
+    if (!format) {
+      format = new IntlMessageFormat(translation, this.#language);
+      this.#formats.set(translation, format);
+    }
+    return format;
+  }
+}
+export {
+  FormatCache
+};
+//# sourceMappingURL=FormatCache.js.map

package/FormatCache.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/FormatCache.ts"],
+  "sourcesContent": ["import { IntlMessageFormat } from 'intl-messageformat';\n\nexport class FormatCache {\n  readonly #language: string;\n  readonly #formats = new Map<string, IntlMessageFormat>();\n\n  constructor(language: string) {\n    // Ensure that the language is supported by Intl.NumberFormat, which IntlMessageFormat uses internally\n    // Fall back to navigator.language if the given language is not supported\n    let supportedLocales: string[] = [];\n    try {\n      supportedLocales = Intl.NumberFormat.supportedLocalesOf(language);\n    } catch (e) {}\n    this.#language = supportedLocales.length > 0 ? supportedLocales[0] : navigator.language;\n  }\n\n  getFormat(translation: string): IntlMessageFormat {\n    let format = this.#formats.get(translation);\n    if (!format) {\n      format = new IntlMessageFormat(translation, this.#language);\n      this.#formats.set(translation, format);\n    }\n    return format;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,yBAAyB;AAE3B,MAAM,YAAY;AAAA,EACd;AAAA,EACA,WAAW,oBAAI,IAA+B;AAAA,EAEvD,YAAY,UAAkB;AAG5B,QAAI,mBAA6B,CAAC;AAClC,QAAI;AACF,yBAAmB,KAAK,aAAa,mBAAmB,QAAQ;AAAA,IAClE,SAAS,GAAG;AAAA,IAAC;AACb,SAAK,YAAY,iBAAiB,SAAS,IAAI,iBAAiB,CAAC,IAAI,UAAU;AAAA,EACjF;AAAA,EAEA,UAAU,aAAwC;AAChD,QAAI,SAAS,KAAK,SAAS,IAAI,WAAW;AAC1C,QAAI,CAAC,QAAQ;AACX,eAAS,IAAI,kBAAkB,aAAa,KAAK,SAAS;AAC1D,WAAK,SAAS,IAAI,aAAa,MAAM;AAAA,IACvC;AACA,WAAO;AAAA,EACT;AACF;",
+  "names": []
+}

package/index.d.ts

@@ -1,14 +1,16 @@
-import { type Signal } from '@vaadin/hilla-react-signals';
+import { type ReadonlySignal } from '@vaadin/hilla-react-signals';
 import type { I18nOptions } from './types.js';
 export declare class I18n {
     #private;
-    get language(): Signal<string | undefined>;
-    get resolvedLanguage(): Signal<string | undefined>;
+    constructor();
+    get initialized(): ReadonlySignal<boolean>;
+    get language(): ReadonlySignal<string | undefined>;
+    get resolvedLanguage(): ReadonlySignal<string | undefined>;
     configure(options?: I18nOptions): Promise<void>;
     setLanguage(newLanguage: string): Promise<void>;
     private updateLanguage;
-    translate(key: string): string;
+    translate(key: string, params?: Record<string, unknown>): string;
 }
 export declare const i18n: I18n;
-export declare function translate(key: string): string;
+export declare function translate(key: string, params?: Record<string, unknown>): string;
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAGzE,OAAO,KAAK,EAAE,WAAW,EAAoC,MAAM,YAAY,CAAC;AAgBhF,qBAAa,IAAI;;IAOf,IAAI,QAAQ,IAAI,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAEzC;IAED,IAAI,gBAAgB,IAAI,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAEjD;IAEK,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAK/C,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;YAIvC,cAAc;IA2B5B,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;CAG/B;AAED,eAAO,MAAM,IAAI,MAAa,CAAC;AAE/B,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE7C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,cAAc,EAAuB,MAAM,6BAA6B,CAAC;AAI9F,OAAO,KAAK,EAAE,WAAW,EAAoC,MAAM,YAAY,CAAC;AAgBhF,qBAAa,IAAI;;;IAmBf,IAAI,WAAW,IAAI,cAAc,CAAC,OAAO,CAAC,CAEzC;IAED,IAAI,QAAQ,IAAI,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAEjD;IAED,IAAI,gBAAgB,IAAI,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAEzD;IAEK,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAK/C,WAAW,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;YAIvC,cAAc;IA6B5B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM;CAQjE;AAED,eAAO,MAAM,IAAI,MAAa,CAAC;AAE/B,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAE/E"}

package/index.js

@@ -1,5 +1,6 @@
 import { batch, signal } from "@vaadin/hilla-react-signals";
 import { DefaultBackend } from "./backend.js";
+import { FormatCache } from "./FormatCache.js";
 import { getLanguageSettings, updateLanguageSettings } from "./settings.js";
 function determineInitialLanguage(options) {
   if (options?.language) {
@@ -13,9 +14,21 @@ function determineInitialLanguage(options) {
 }
 class I18n {
   #backend = new DefaultBackend();
+  #initialized = signal(false);
   #language = signal(void 0);
   #translations = signal({});
   #resolvedLanguage = signal(void 0);
+  #formatCache = new FormatCache(navigator.language);
+  constructor() {
+    if (!window.Vaadin?.featureFlags?.hillaI18n) {
+      throw new Error(
+        `The Hilla I18n API is currently considered experimental and may change in the future. To use it you need to explicitly enable it in Copilot or by adding com.vaadin.experimental.hillaI18n=true to vaadin-featureflags.properties`
+      );
+    }
+  }
+  get initialized() {
+    return this.#initialized;
+  }
   get language() {
     return this.#language;
   }
@@ -44,6 +57,8 @@ class I18n {
       this.#translations.value = translationsResult.translations;
       this.#language.value = newLanguage;
       this.#resolvedLanguage.value = translationsResult.resolvedLanguage;
+      this.#formatCache = new FormatCache(newLanguage);
+      this.#initialized.value = true;
       if (updateSettings) {
         updateLanguageSettings({
           language: newLanguage
@@ -51,13 +66,18 @@ class I18n {
       }
     });
   }
-  translate(key) {
-    return this.#translations.value[key] || key;
+  translate(key, params) {
+    const translation = this.#translations.value[key];
+    if (!translation) {
+      return key;
+    }
+    const format = this.#formatCache.getFormat(translation);
+    return format.format(params);
   }
 }
 const i18n = new I18n();
-function translate(key) {
-  return i18n.translate(key);
+function translate(key, params) {
+  return i18n.translate(key, params);
 }
 export {
   I18n,

package/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/index.ts"],
-  "sourcesContent": ["import { batch, signal, type Signal } from '@vaadin/hilla-react-signals';\nimport { DefaultBackend, type I18nBackend } from './backend.js';\nimport { getLanguageSettings, updateLanguageSettings } from './settings.js';\nimport type { I18nOptions, Translations, TranslationsResult } from './types.js';\n\nfunction determineInitialLanguage(options?: I18nOptions): string {\n  // Use explicitly configured language if defined\n  if (options?.language) {\n    return options.language;\n  }\n  // Use last used language as fallback\n  const settings = getLanguageSettings();\n  if (settings?.language) {\n    return settings.language;\n  }\n  // Otherwise use browser language\n  return navigator.language;\n}\n\nexport class I18n {\n  readonly #backend: I18nBackend = new DefaultBackend();\n\n  readonly #language: Signal<string | undefined> = signal(undefined);\n  readonly #translations: Signal<Translations> = signal({});\n  readonly #resolvedLanguage: Signal<string | undefined> = signal(undefined);\n\n  get language(): Signal<string | undefined> {\n    return this.#language;\n  }\n\n  get resolvedLanguage(): Signal<string | undefined> {\n    return this.#resolvedLanguage;\n  }\n\n  async configure(options?: I18nOptions): Promise<void> {\n    const initialLanguage = determineInitialLanguage(options);\n    await this.updateLanguage(initialLanguage);\n  }\n\n  async setLanguage(newLanguage: string): Promise<void> {\n    await this.updateLanguage(newLanguage, true);\n  }\n\n  private async updateLanguage(newLanguage: string, updateSettings = false) {\n    if (this.#language.value === newLanguage) {\n      return;\n    }\n\n    let translationsResult: TranslationsResult;\n    try {\n      translationsResult = await this.#backend.loadTranslations(newLanguage);\n    } catch (e) {\n      console.error(`Failed to load translations for language: ${newLanguage}`, e);\n      return;\n    }\n\n    // Update all signals together to avoid triggering side effects multiple times\n    batch(() => {\n      this.#translations.value = translationsResult.translations;\n      this.#language.value = newLanguage;\n      this.#resolvedLanguage.value = translationsResult.resolvedLanguage;\n\n      if (updateSettings) {\n        updateLanguageSettings({\n          language: newLanguage,\n        });\n      }\n    });\n  }\n\n  translate(key: string): string {\n    return this.#translations.value[key] || key;\n  }\n}\n\nexport const i18n = new I18n();\n\nexport function translate(key: string): string {\n  return i18n.translate(key);\n}\n"],
-  "mappings": "AAAA,SAAS,OAAO,cAA2B;AAC3C,SAAS,sBAAwC;AACjD,SAAS,qBAAqB,8BAA8B;AAG5D,SAAS,yBAAyB,SAA+B;AAE/D,MAAI,SAAS,UAAU;AACrB,WAAO,QAAQ;AAAA,EACjB;AAEA,QAAM,WAAW,oBAAoB;AACrC,MAAI,UAAU,UAAU;AACtB,WAAO,SAAS;AAAA,EAClB;AAEA,SAAO,UAAU;AACnB;AAEO,MAAM,KAAK;AAAA,EACP,WAAwB,IAAI,eAAe;AAAA,EAE3C,YAAwC,OAAO,MAAS;AAAA,EACxD,gBAAsC,OAAO,CAAC,CAAC;AAAA,EAC/C,oBAAgD,OAAO,MAAS;AAAA,EAEzE,IAAI,WAAuC;AACzC,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,mBAA+C;AACjD,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,UAAU,SAAsC;AACpD,UAAM,kBAAkB,yBAAyB,OAAO;AACxD,UAAM,KAAK,eAAe,eAAe;AAAA,EAC3C;AAAA,EAEA,MAAM,YAAY,aAAoC;AACpD,UAAM,KAAK,eAAe,aAAa,IAAI;AAAA,EAC7C;AAAA,EAEA,MAAc,eAAe,aAAqB,iBAAiB,OAAO;AACxE,QAAI,KAAK,UAAU,UAAU,aAAa;AACxC;AAAA,IACF;AAEA,QAAI;AACJ,QAAI;AACF,2BAAqB,MAAM,KAAK,SAAS,iBAAiB,WAAW;AAAA,IACvE,SAAS,GAAG;AACV,cAAQ,MAAM,6CAA6C,WAAW,IAAI,CAAC;AAC3E;AAAA,IACF;AAGA,UAAM,MAAM;AACV,WAAK,cAAc,QAAQ,mBAAmB;AAC9C,WAAK,UAAU,QAAQ;AACvB,WAAK,kBAAkB,QAAQ,mBAAmB;AAElD,UAAI,gBAAgB;AAClB,+BAAuB;AAAA,UACrB,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,UAAU,KAAqB;AAC7B,WAAO,KAAK,cAAc,MAAM,GAAG,KAAK;AAAA,EAC1C;AACF;AAEO,MAAM,OAAO,IAAI,KAAK;AAEtB,SAAS,UAAU,KAAqB;AAC7C,SAAO,KAAK,UAAU,GAAG;AAC3B;",
+  "sourcesContent": ["import { batch, type ReadonlySignal, signal, type Signal } from '@vaadin/hilla-react-signals';\nimport { DefaultBackend, type I18nBackend } from './backend.js';\nimport { FormatCache } from './FormatCache.js';\nimport { getLanguageSettings, updateLanguageSettings } from './settings.js';\nimport type { I18nOptions, Translations, TranslationsResult } from './types.js';\n\nfunction determineInitialLanguage(options?: I18nOptions): string {\n  // Use explicitly configured language if defined\n  if (options?.language) {\n    return options.language;\n  }\n  // Use last used language as fallback\n  const settings = getLanguageSettings();\n  if (settings?.language) {\n    return settings.language;\n  }\n  // Otherwise use browser language\n  return navigator.language;\n}\n\nexport class I18n {\n  readonly #backend: I18nBackend = new DefaultBackend();\n\n  readonly #initialized: Signal<boolean> = signal(false);\n  readonly #language: Signal<string | undefined> = signal(undefined);\n  readonly #translations: Signal<Translations> = signal({});\n  readonly #resolvedLanguage: Signal<string | undefined> = signal(undefined);\n  #formatCache: FormatCache = new FormatCache(navigator.language);\n\n  constructor() {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    if (!(window as any).Vaadin?.featureFlags?.hillaI18n) {\n      // Remove when removing feature flag\n      throw new Error(\n        `The Hilla I18n API is currently considered experimental and may change in the future. To use it you need to explicitly enable it in Copilot or by adding com.vaadin.experimental.hillaI18n=true to vaadin-featureflags.properties`,\n      );\n    }\n  }\n\n  get initialized(): ReadonlySignal<boolean> {\n    return this.#initialized;\n  }\n\n  get language(): ReadonlySignal<string | undefined> {\n    return this.#language;\n  }\n\n  get resolvedLanguage(): ReadonlySignal<string | undefined> {\n    return this.#resolvedLanguage;\n  }\n\n  async configure(options?: I18nOptions): Promise<void> {\n    const initialLanguage = determineInitialLanguage(options);\n    await this.updateLanguage(initialLanguage);\n  }\n\n  async setLanguage(newLanguage: string): Promise<void> {\n    await this.updateLanguage(newLanguage, true);\n  }\n\n  private async updateLanguage(newLanguage: string, updateSettings = false) {\n    if (this.#language.value === newLanguage) {\n      return;\n    }\n\n    let translationsResult: TranslationsResult;\n    try {\n      translationsResult = await this.#backend.loadTranslations(newLanguage);\n    } catch (e) {\n      console.error(`Failed to load translations for language: ${newLanguage}`, e);\n      return;\n    }\n\n    // Update all signals together to avoid triggering side effects multiple times\n    batch(() => {\n      this.#translations.value = translationsResult.translations;\n      this.#language.value = newLanguage;\n      this.#resolvedLanguage.value = translationsResult.resolvedLanguage;\n      this.#formatCache = new FormatCache(newLanguage);\n      this.#initialized.value = true;\n\n      if (updateSettings) {\n        updateLanguageSettings({\n          language: newLanguage,\n        });\n      }\n    });\n  }\n\n  translate(key: string, params?: Record<string, unknown>): string {\n    const translation = this.#translations.value[key];\n    if (!translation) {\n      return key;\n    }\n    const format = this.#formatCache.getFormat(translation);\n    return format.format(params) as string;\n  }\n}\n\nexport const i18n = new I18n();\n\nexport function translate(key: string, params?: Record<string, unknown>): string {\n  return i18n.translate(key, params);\n}\n"],
+  "mappings": "AAAA,SAAS,OAA4B,cAA2B;AAChE,SAAS,sBAAwC;AACjD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,8BAA8B;AAG5D,SAAS,yBAAyB,SAA+B;AAE/D,MAAI,SAAS,UAAU;AACrB,WAAO,QAAQ;AAAA,EACjB;AAEA,QAAM,WAAW,oBAAoB;AACrC,MAAI,UAAU,UAAU;AACtB,WAAO,SAAS;AAAA,EAClB;AAEA,SAAO,UAAU;AACnB;AAEO,MAAM,KAAK;AAAA,EACP,WAAwB,IAAI,eAAe;AAAA,EAE3C,eAAgC,OAAO,KAAK;AAAA,EAC5C,YAAwC,OAAO,MAAS;AAAA,EACxD,gBAAsC,OAAO,CAAC,CAAC;AAAA,EAC/C,oBAAgD,OAAO,MAAS;AAAA,EACzE,eAA4B,IAAI,YAAY,UAAU,QAAQ;AAAA,EAE9D,cAAc;AAEZ,QAAI,CAAE,OAAe,QAAQ,cAAc,WAAW;AAEpD,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,cAAuC;AACzC,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,WAA+C;AACjD,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,mBAAuD;AACzD,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,UAAU,SAAsC;AACpD,UAAM,kBAAkB,yBAAyB,OAAO;AACxD,UAAM,KAAK,eAAe,eAAe;AAAA,EAC3C;AAAA,EAEA,MAAM,YAAY,aAAoC;AACpD,UAAM,KAAK,eAAe,aAAa,IAAI;AAAA,EAC7C;AAAA,EAEA,MAAc,eAAe,aAAqB,iBAAiB,OAAO;AACxE,QAAI,KAAK,UAAU,UAAU,aAAa;AACxC;AAAA,IACF;AAEA,QAAI;AACJ,QAAI;AACF,2BAAqB,MAAM,KAAK,SAAS,iBAAiB,WAAW;AAAA,IACvE,SAAS,GAAG;AACV,cAAQ,MAAM,6CAA6C,WAAW,IAAI,CAAC;AAC3E;AAAA,IACF;AAGA,UAAM,MAAM;AACV,WAAK,cAAc,QAAQ,mBAAmB;AAC9C,WAAK,UAAU,QAAQ;AACvB,WAAK,kBAAkB,QAAQ,mBAAmB;AAClD,WAAK,eAAe,IAAI,YAAY,WAAW;AAC/C,WAAK,aAAa,QAAQ;AAE1B,UAAI,gBAAgB;AAClB,+BAAuB;AAAA,UACrB,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,UAAU,KAAa,QAA0C;AAC/D,UAAM,cAAc,KAAK,cAAc,MAAM,GAAG;AAChD,QAAI,CAAC,aAAa;AAChB,aAAO;AAAA,IACT;AACA,UAAM,SAAS,KAAK,aAAa,UAAU,WAAW;AACtD,WAAO,OAAO,OAAO,MAAM;AAAA,EAC7B;AACF;AAEO,MAAM,OAAO,IAAI,KAAK;AAEtB,SAAS,UAAU,KAAa,QAA0C;AAC/E,SAAO,KAAK,UAAU,KAAK,MAAM;AACnC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/hilla-react-i18n",
-  "version": "24.4.0-alpha14",
+  "version": "24.4.0-alpha16",
   "description": "Hilla I18n utils for React",
   "main": "index.js",
   "module": "index.js",
@@ -46,8 +46,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@vaadin/hilla-frontend": "24.4.0-alpha14",
-    "@vaadin/hilla-react-signals": "24.4.0-alpha14"
+    "@vaadin/hilla-frontend": "24.4.0-alpha16",
+    "@vaadin/hilla-react-signals": "24.4.0-alpha16",
+    "intl-messageformat": "^10.5.11"
   },
   "peerDependencies": {
     "react": "^18"