langsys-js-typescript 0.2.3 → 0.4.0

package/dist/index.mjs

@@ -1,5 +1,30 @@
 import { IntlMessageFormat } from 'intl-messageformat';
 
+// src/locale.ts
+function canonicalizeLocale(locale) {
+  if (!locale || typeof locale !== "string") return locale;
+  const cleaned = locale.trim().replace(/_/g, "-");
+  try {
+    const [canonical] = Intl.getCanonicalLocales(cleaned);
+    return canonical ?? cleaned;
+  } catch {
+    return cleaned.split("-").map((part, i) => {
+      if (i === 0) return part.toLowerCase();
+      if (part.length === 4) return part[0].toUpperCase() + part.slice(1).toLowerCase();
+      if (part.length === 2 || /^\d{3}$/.test(part)) return part.toUpperCase();
+      return part.toLowerCase();
+    }).join("-");
+  }
+}
+function maximizedLangScript(locale) {
+  try {
+    const max = new Intl.Locale(canonicalizeLocale(locale)).maximize();
+    return `${max.language}-${max.script ?? ""}`;
+  } catch {
+    return null;
+  }
+}
+
 // src/signal.ts
 function createSignal(initial) {
   let value = initial;
@@ -91,7 +116,7 @@ var LangsysAppAPIClass = class {
     return await this.get("authorize-project/[projectid]");
   }
   async getTranslations(locale) {
-    return await this.get("translations", { project_id: this.config.projectid, locale });
+    return await this.get("translations", { project_id: this.config.projectid, locale: canonicalizeLocale(locale) });
   }
   /**
    * Register phrases and/or content blocks via the current unified endpoint.
@@ -237,24 +262,37 @@ var config = {
 function isICU(template) {
   return ICU_PATTERN.test(template);
 }
-var ICU_PATTERN = /\{[^{}]+,\s*(plural|select|selectordinal|number|date|time)\s*,/;
+var ICU_PATTERN = /\{[^{}]+,\s*(plural|select|selectordinal|number|date|time)\s*[,}]/;
 function interpolate(template, params, locale) {
   if (isICU(template)) {
     try {
-      return new IntlMessageFormat(template, locale ?? "en").format(params);
+      return new IntlMessageFormat(template, locale || "en").format(params);
     } catch {
-      return simpleInterpolate(template, params);
+      return simpleInterpolate(template, params, locale);
     }
   }
-  return simpleInterpolate(template, params);
+  return simpleInterpolate(template, params, locale);
 }
-function simpleInterpolate(template, params) {
+function simpleInterpolate(template, params, locale) {
   return template.replace(/\{([^{},]+)\}/g, (match, rawKey) => {
     const key = rawKey.trim();
     if (!(key in params)) return match;
     const value = params[key];
     if (value === void 0 || value === null) return match;
-    if (value instanceof Date) return value.toISOString();
+    if (value instanceof Date) {
+      try {
+        return new Intl.DateTimeFormat(locale || "en", { dateStyle: "medium" }).format(value);
+      } catch {
+        return value.toISOString();
+      }
+    }
+    if (typeof value === "number" || typeof value === "bigint") {
+      try {
+        return new Intl.NumberFormat(locale || "en").format(value);
+      } catch {
+        return String(value);
+      }
+    }
     return String(value);
   });
 }
@@ -280,7 +318,7 @@ var Translations = class {
     });
     this.config = config2;
     this.debug = new Logger(!!config2.debug);
-    this.locale = config2.baseLocale || "";
+    this.locale = canonicalizeLocale(config2.baseLocale || "");
     this.tSignal = createSignal(this.buildTFn());
     sTranslations.subscribe(() => this.tSignal.set(this.buildTFn()));
     currentlyLoadedLocale.subscribe(() => this.tSignal.set(this.buildTFn()));
@@ -421,7 +459,7 @@ var Translations = class {
     this.config = config2;
     if (!this.config.projectid || !this.config.key) return;
     if (this.config.debug) this.debug.debugEnabled = this.config.debug;
-    if (config2.baseLocale) this.locale = config2.baseLocale;
+    if (config2.baseLocale) this.locale = canonicalizeLocale(config2.baseLocale);
     this.debug.log("TRANSLATION SETUP INITIATED", this.config);
     if (typeof window !== "undefined") {
       if (this.isFirstClientRun && this.missingTokens.length > 0) {
@@ -449,6 +487,7 @@ var Translations = class {
    */
   markLoaded(locale) {
     if (!locale) return;
+    locale = canonicalizeLocale(locale);
     this.locale = locale;
     this.lastLoaded[locale] = (/* @__PURE__ */ new Date()).getTime() / 1e3;
     this.readyResolve();
@@ -460,6 +499,7 @@ var Translations = class {
   async change(locale, force = false, skipFetch = false) {
     if (!locale) return false;
     if (!this.config.projectid || !this.config.key) return false;
+    locale = canonicalizeLocale(locale);
     if (skipFetch) {
       this.debug.log("Using pre-fetched translations for locale", locale);
       this.locale = locale;
@@ -628,11 +668,11 @@ var LangsysAppClass = class {
     }
     if (!UserLocaleStore?.subscribe || typeof UserLocaleStore.get !== "function") {
       this.debug.error(
-        "LangsysApp.init missing UserLocaleStore \u2014 pass any object satisfying LocaleSource (get + subscribe). createSignal('en-us') works if you have nothing of your own."
+        "LangsysApp.init missing UserLocaleStore \u2014 pass any object satisfying LocaleSource (get + subscribe). createSignal('en-US') works if you have nothing of your own."
       );
       return { status: false, errors: ["Missing UserLocaleStore"] };
     }
-    baseLocale = baseLocale.toLowerCase();
+    baseLocale = canonicalizeLocale(baseLocale);
     if (!emulateFailureToLoad) {
       this.config = {
         projectid,
@@ -671,8 +711,9 @@ var LangsysAppClass = class {
     if (initialTranslations2 && initialTranslationsLocale) {
       this.Translations.markLoaded(initialTranslationsLocale);
     }
-    this.config.sUserLocale.subscribe((locale) => {
+    this.config.sUserLocale.subscribe((rawLocale) => {
       if (!validateResponse.status) return;
+      const locale = canonicalizeLocale(rawLocale);
       this.getLocalesData(locale);
       this.debug.log("SUBSCRIBING TO USER LOCALE STORE");
       this.translationsLoadingPromise = this.Translations.change(locale, false);
@@ -680,7 +721,7 @@ var LangsysAppClass = class {
     return validateResponse;
   }
   async getDialCodes(inLocale) {
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     if (this.dialCodes.length && this.dialCodesLocale === locale) return this.dialCodes;
     const route = `countries/dial-codes/${locale}`;
     const response = await LangsysAppAPI.get(route);
@@ -693,7 +734,7 @@ var LangsysAppClass = class {
     return this.dialCodes;
   }
   async getCurrencies(inLocale) {
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     if (this.currencies.length && this.currenciesLocale === locale) return this.currencies;
     const route = `currencies/${locale}`;
     const response = await LangsysAppAPI.get(route);
@@ -706,7 +747,7 @@ var LangsysAppClass = class {
     return this.currencies;
   }
   async getCountries(inLocale) {
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     if (this.countries.length && this.countriesLocale === locale) return this.countries;
     const route = `countries/${locale}`;
     const response = await LangsysAppAPI.get(route);
@@ -720,7 +761,7 @@ var LangsysAppClass = class {
   }
   async getCountryName(forCountryCode, inLocale) {
     if (!forCountryCode) return "";
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     if (!this.countries.length || this.countriesLocale !== locale) await this.getCountries(inLocale);
     const country = this.countries.find((c) => c.code.toLowerCase() === forCountryCode.toLowerCase())?.label;
     if (!country) this.debug.warn("getCountryName failed to match", forCountryCode);
@@ -728,14 +769,14 @@ var LangsysAppClass = class {
   }
   async getCurrencyName(forCurrencyCode, inLocale) {
     if (!forCurrencyCode) return "";
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     if (!this.currencies.length || this.currenciesLocale !== locale) await this.getCurrencies(inLocale);
     const currency = this.currencies.find((c) => c.code?.toLowerCase() === forCurrencyCode.toLowerCase())?.name;
     if (!currency) this.debug.warn("getCurrencyName failed to match", forCurrencyCode);
     return currency || forCurrencyCode;
   }
   async getLocalesFormat(format = "", inLocale) {
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     const route = `locales/${locale}` + (format ? `/${format}` : "");
     const response = await LangsysAppAPI.get(route);
     if (response.errors || !response.status) {
@@ -756,7 +797,7 @@ var LangsysAppClass = class {
     return await this.getLocalesFormat("flat", inLocale);
   }
   async getLocalesData(inLocale, forceRefresh = false) {
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     if (this.locales?.[locale]?.length && !forceRefresh) return this.locales[locale];
     this.locales[locale] = await this.getLocalesFormat("data", inLocale);
     return this.locales[locale];
@@ -766,15 +807,16 @@ var LangsysAppClass = class {
   }
   async getLocaleNameWithLookup(forLocale, shortName = false, inLocale) {
     if (!forLocale) return "";
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
     await this.getLocalesData(locale);
     return this.getLocaleName(forLocale, shortName, locale);
   }
   getLocaleName(forLocale, shortName = false, inLocale) {
-    const locale = inLocale || this.config.sUserLocale.get() || this.config.baseLocale;
+    const locale = this.resolveLocale(inLocale);
+    const target = canonicalizeLocale(forLocale).toLowerCase();
     let name = "";
     this.locales[locale]?.every((loc) => {
-      if (loc.code === forLocale) {
+      if (loc.code.toLowerCase() === target) {
         name = shortName ? loc.lang_name : loc.locale_name;
         return false;
       }
@@ -800,7 +842,7 @@ var LangsysAppClass = class {
       const bestMatch = this.findBestLocaleMatch(userLocales, supportedLocales);
       if (bestMatch) return bestMatch;
     }
-    return this.normalizeLocale(userLocales[0]);
+    return canonicalizeLocale(userLocales[0]);
   }
   getUserLanguagePreferences(acceptLanguageHeader) {
     if (acceptLanguageHeader) {
@@ -837,30 +879,26 @@ var LangsysAppClass = class {
   }
   findBestLocaleMatch(userLocales, supportedLocales) {
     if (!userLocales.length || !supportedLocales.length) return null;
-    const normalizedSupported = supportedLocales.map((l) => this.normalizeLocale(l));
+    const supported = supportedLocales.map((l) => canonicalizeLocale(l));
     for (const userLocale of userLocales) {
-      const normalizedUser = this.normalizeLocale(userLocale);
-      if (normalizedSupported.includes(normalizedUser)) return normalizedUser;
+      const user = canonicalizeLocale(userLocale);
+      if (supported.includes(user)) return user;
     }
     for (const userLocale of userLocales) {
-      const userLang = this.getLanguageCode(userLocale);
-      for (const supported of normalizedSupported) {
-        if (this.getLanguageCode(supported) === userLang) return supported;
-      }
+      const userKey = maximizedLangScript(userLocale);
+      if (!userKey) continue;
+      const match = supported.find((s) => maximizedLangScript(s) === userKey);
+      if (match) return match;
     }
     return null;
   }
-  normalizeLocale(locale) {
-    if (!locale || typeof locale !== "string") return locale;
-    const parts = locale.split(/[-_]/);
-    if (parts.length === 1) return parts[0].toLowerCase();
-    const language = parts[0].toLowerCase();
-    const region = parts[1].toUpperCase();
-    return `${language}-${region}`;
-  }
-  getLanguageCode(locale) {
-    if (!locale || typeof locale !== "string") return "";
-    return locale.split(/[-_]/)[0].toLowerCase();
+  /**
+   * Resolve the effective locale for a data-fetching helper: explicit
+   * argument, else the user's current locale, else the base locale —
+   * always in BCP 47 canonical form so cache keys and API routes agree.
+   */
+  resolveLocale(inLocale) {
+    return canonicalizeLocale(inLocale || this.config.sUserLocale.get() || this.config.baseLocale);
   }
 };
 var LangsysApp = new LangsysAppClass();
@@ -1213,6 +1251,14 @@ var Translate = class {
       if (locale && this.parseComplete) this.translateUpdate(locale);
     });
   }
+  /** Update interpolation params (e.g. a changed count) and re-render. Mirrors `Phrase.setParams`. */
+  setParams(params) {
+    this.options.params = params;
+    if (!this.parseComplete) return;
+    this.lastTranslatedLocale = "";
+    const locale = currentlyLoadedLocale.get();
+    if (locale) this.translateUpdate(locale);
+  }
   /** Stop reacting to locale changes. Safe to call multiple times. */
   destroy() {
     if (this.unsubscribeLocale) {
@@ -1225,7 +1271,7 @@ var Translate = class {
     if (this.lastTranslatedLocale === currentLocale) return;
     const { category = "" } = this.options;
     if (this.tokens.length === 1) {
-      this.element.innerText = LangsysApp.Translations.t(this.tokens[0], category);
+      this.element.innerText = this.applyParams(LangsysApp.Translations.t(this.tokens[0], category));
     } else {
       this.translate(Array.from(this.element.childNodes));
       this.lastTranslatedLocale = currentLocale;
@@ -1243,7 +1289,7 @@ var Translate = class {
     this.tokens = tokens;
     const { category = "" } = this.options;
     if (this.tokens.length === 1) {
-      this.element.innerText = LangsysApp.Translations.t(this.tokens[0], category);
+      this.element.innerText = this.applyParams(LangsysApp.Translations.t(this.tokens[0], category));
     } else {
       const contentBlock = {
         custom_id: "",
@@ -1279,7 +1325,7 @@ var Translate = class {
   }
   translate(nodes) {
     const currentLocale = currentlyLoadedLocale.get();
-    if (currentLocale === config.baseLocale && (this.lastTranslatedLocale === "" || this.lastTranslatedLocale === config.baseLocale)) {
+    if (currentLocale === config.baseLocale && (this.lastTranslatedLocale === "" || this.lastTranslatedLocale === config.baseLocale) && isEmpty(this.options.params)) {
       return;
     }
     nodes.forEach((node) => {
@@ -1302,9 +1348,10 @@ var Translate = class {
       if (!contentToken) return;
       const translation = this.getTranslation(contentToken);
       if (translation && contentToken && node.originalNodeValue) {
-        node.nodeValue = node.originalNodeValue.replace(contentToken, translation);
+        const resolved = this.applyParams(translation);
+        node.nodeValue = node.originalNodeValue.replace(contentToken, () => resolved);
       } else if (node.originalNodeValue) {
-        node.nodeValue = node.originalNodeValue;
+        node.nodeValue = this.applyParams(node.originalNodeValue);
       }
     });
   }
@@ -1313,6 +1360,16 @@ var Translate = class {
     const { category = "" } = this.options;
     return LangsysApp.Translations.lookupContent(category, this.custom_id, token);
   }
+  /**
+   * Interpolate `{name}`-style params into a resolved text, matching `t()`:
+   * unknown keys fall through untouched, and the untranslated fallback is
+   * interpolated too. No-op when no params were supplied.
+   */
+  applyParams(text) {
+    const { params } = this.options;
+    if (isEmpty(params)) return text;
+    return interpolate(text, params, currentlyLoadedLocale.get());
+  }
   translateAttributes(element) {
     const tagName = element.tagName.toLowerCase();
     if (!element.originalAttributes) element.originalAttributes = {};
@@ -1339,7 +1396,7 @@ var Translate = class {
         const originalText = optionEl.originalAttributes["textContent"].trim();
         if (originalText) {
           const translation = this.getTranslation(originalText);
-          option.textContent = translation || optionEl.originalAttributes["textContent"];
+          option.textContent = this.applyParams(translation || optionEl.originalAttributes["textContent"]);
         }
       });
     }
@@ -1353,8 +1410,8 @@ var Translate = class {
     const originalValue = element.originalAttributes[attr].trim();
     if (!originalValue) return;
     const translation = this.getTranslation(originalValue);
-    if (translation) element.setAttribute(attr, translation);
-    else element.setAttribute(attr, element.originalAttributes[attr]);
+    if (translation) element.setAttribute(attr, this.applyParams(translation));
+    else element.setAttribute(attr, this.applyParams(element.originalAttributes[attr]));
   }
 };
 
@@ -1486,6 +1543,6 @@ var t = ((phrase, ...rest) => {
 });
 var tSignal = LangsysApp.Translations.tSignal;
 
-export { LangsysApp, LangsysAppAPI, Logger, PHRASE_MARKER_ATTR, Phrase, Translate, Translations, createSignal, currentlyLoadedLocale, encodeRichText, generateCustomId, getValue, interpolate, isContentBlockKnown, isEmpty, isICU, logger, markupTokenValues, md5, persist, reconstitute, registerContentBlock, sTranslations, stripSentinels, t, tSignal, tokenizeElement };
+export { LangsysApp, LangsysAppAPI, Logger, PHRASE_MARKER_ATTR, Phrase, Translate, Translations, canonicalizeLocale, createSignal, currentlyLoadedLocale, encodeRichText, generateCustomId, getValue, interpolate, isContentBlockKnown, isEmpty, isICU, logger, markupTokenValues, md5, persist, reconstitute, registerContentBlock, sTranslations, stripSentinels, t, tSignal, tokenizeElement };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map