langsys-js-typescript 0.3.0 → 0.4.1

package/dist/index.mjs

@@ -263,6 +263,9 @@ function isICU(template) {
   return ICU_PATTERN.test(template);
 }
 var ICU_PATTERN = /\{[^{}]+,\s*(plural|select|selectordinal|number|date|time)\s*[,}]/;
+function normalizeMarkupPlaceholders(text) {
+  return text.replace(/%([A-Za-z_][A-Za-z0-9_]*)%/g, "{$1}");
+}
 function interpolate(template, params, locale) {
   if (isICU(template)) {
     try {
@@ -1139,7 +1142,7 @@ function tokenizeElement(element) {
   const tokens = [];
   const clone = element.cloneNode(true);
   _walkForTokens(element, Array.from(clone.childNodes), tokens, []);
-  return { tokens, content: clone.outerHTML };
+  return { tokens, content: normalizeMarkupPlaceholders(clone.outerHTML) };
 }
 function _writeKnownContentBlockToCache(category, customId) {
   const lookupCat = category || "__uncategorized__";
@@ -1169,7 +1172,7 @@ function _walkForTokens(liveRoot, cloneNodes, tokens, indices) {
     }
     const contentToken = node.nodeValue?.replace(/\s+/g, " ").trim();
     if (node.nodeType === Node.TEXT_NODE && contentToken) {
-      tokens.push(contentToken);
+      tokens.push(normalizeMarkupPlaceholders(contentToken));
       return;
     }
     if (!node.hasChildNodes()) return;
@@ -1184,24 +1187,24 @@ function _tokenizeAttributes(element, tokens) {
   }
   for (const attr of TRANSLATABLE_ATTRIBUTES) {
     const value = element.getAttribute(attr)?.trim();
-    if (value) tokens.push(value);
+    if (value) tokens.push(normalizeMarkupPlaceholders(value));
   }
   if (VALUE_TRANSLATABLE_ELEMENTS.includes(tagName)) {
     const value = element.getAttribute("value")?.trim();
-    if (value) tokens.push(value);
+    if (value) tokens.push(normalizeMarkupPlaceholders(value));
   }
   if (tagName === "input") {
     const inputType = element.getAttribute("type")?.toLowerCase();
     if (inputType && VALUE_TRANSLATABLE_INPUT_TYPES.includes(inputType)) {
       const value = element.getAttribute("value")?.trim();
-      if (value) tokens.push(value);
+      if (value) tokens.push(normalizeMarkupPlaceholders(value));
     }
   }
   if (tagName === "select") {
     const options = element.querySelectorAll("option");
     options.forEach((option) => {
       const optionText = option.textContent?.trim();
-      if (optionText) tokens.push(optionText);
+      if (optionText) tokens.push(normalizeMarkupPlaceholders(optionText));
     });
   }
 }
@@ -1251,6 +1254,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) {
@@ -1263,7 +1274,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;
@@ -1281,7 +1292,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: "",
@@ -1317,7 +1328,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) => {
@@ -1334,15 +1345,16 @@ var Translate = class {
       }
       if (isEmpty(node.nodeValue?.trim())) return;
       if (isEmpty(node.originalNodeValue)) {
-        node.originalNodeValue = node.nodeValue;
+        node.originalNodeValue = normalizeMarkupPlaceholders(node.nodeValue);
       }
       const contentToken = node.originalNodeValue?.replace(/\s+/g, " ").trim();
       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);
       }
     });
   }
@@ -1351,6 +1363,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 = {};
@@ -1372,12 +1394,12 @@ var Translate = class {
         const optionEl = option;
         if (!optionEl.originalAttributes) optionEl.originalAttributes = {};
         if (optionEl.originalAttributes["textContent"] === void 0) {
-          optionEl.originalAttributes["textContent"] = option.textContent || "";
+          optionEl.originalAttributes["textContent"] = normalizeMarkupPlaceholders(option.textContent || "");
         }
         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"]);
         }
       });
     }
@@ -1386,13 +1408,13 @@ var Translate = class {
     const currentValue = element.getAttribute(attr);
     if (!currentValue) return;
     if (element.originalAttributes[attr] === void 0) {
-      element.originalAttributes[attr] = currentValue;
+      element.originalAttributes[attr] = normalizeMarkupPlaceholders(currentValue);
     }
     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]));
   }
 };
 
@@ -1405,7 +1427,7 @@ var SENT_SCAN = /\uE000(\d+)\uE001|\uE002(\d+)\uE003/g;
 function encodeRichText(root) {
   const slots = [];
   const phrase = _encodeNodes(Array.from(root.childNodes), slots);
-  return { phrase: phrase.replace(/\s+/g, " ").trim(), slots };
+  return { phrase: normalizeMarkupPlaceholders(phrase.replace(/\s+/g, " ").trim()), slots };
 }
 function _encodeNodes(nodes, slots) {
   let out = "";
@@ -1524,6 +1546,6 @@ var t = ((phrase, ...rest) => {
 });
 var tSignal = LangsysApp.Translations.tSignal;
 
-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 };
+export { LangsysApp, LangsysAppAPI, Logger, PHRASE_MARKER_ATTR, Phrase, Translate, Translations, canonicalizeLocale, createSignal, currentlyLoadedLocale, encodeRichText, generateCustomId, getValue, interpolate, isContentBlockKnown, isEmpty, isICU, logger, markupTokenValues, md5, normalizeMarkupPlaceholders, persist, reconstitute, registerContentBlock, sTranslations, stripSentinels, t, tSignal, tokenizeElement };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map