langsys-js-typescript 0.3.0 → 0.4.0

package/dist/index.d.mts

@@ -375,6 +375,8 @@ interface TranslateOptions {
     custom_id?: string;
     /** Optional human-readable label shown in the Translation Manager. */
     label?: string;
+    /** Interpolation params — `{name}`, `{count}`, etc. Same single-brace syntax as `t()`. */
+    params?: Record<string, ParamPrimitive>;
 }
 /**
  * Wrap a DOM element and manage translation for its contents.
@@ -399,6 +401,8 @@ declare class Translate {
     private custom_id;
     private unsubscribeLocale;
     constructor(element: HTMLElement, options?: TranslateOptions);
+    /** Update interpolation params (e.g. a changed count) and re-render. Mirrors `Phrase.setParams`. */
+    setParams(params: Record<string, ParamPrimitive> | undefined): void;
     /** Stop reacting to locale changes. Safe to call multiple times. */
     destroy(): void;
     private translateUpdate;
@@ -406,6 +410,12 @@ declare class Translate {
     private handleContentBlock;
     private translate;
     private getTranslation;
+    /**
+     * 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.
+     */
+    private applyParams;
     private translateAttributes;
     private translateAttribute;
 }

package/dist/index.d.ts

@@ -375,6 +375,8 @@ interface TranslateOptions {
     custom_id?: string;
     /** Optional human-readable label shown in the Translation Manager. */
     label?: string;
+    /** Interpolation params — `{name}`, `{count}`, etc. Same single-brace syntax as `t()`. */
+    params?: Record<string, ParamPrimitive>;
 }
 /**
  * Wrap a DOM element and manage translation for its contents.
@@ -399,6 +401,8 @@ declare class Translate {
     private custom_id;
     private unsubscribeLocale;
     constructor(element: HTMLElement, options?: TranslateOptions);
+    /** Update interpolation params (e.g. a changed count) and re-render. Mirrors `Phrase.setParams`. */
+    setParams(params: Record<string, ParamPrimitive> | undefined): void;
     /** Stop reacting to locale changes. Safe to call multiple times. */
     destroy(): void;
     private translateUpdate;
@@ -406,6 +410,12 @@ declare class Translate {
     private handleContentBlock;
     private translate;
     private getTranslation;
+    /**
+     * 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.
+     */
+    private applyParams;
     private translateAttributes;
     private translateAttribute;
 }

package/dist/index.js

@@ -1253,6 +1253,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) {
@@ -1265,7 +1273,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;
@@ -1283,7 +1291,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: "",
@@ -1319,7 +1327,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) => {
@@ -1342,9 +1350,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);
       }
     });
   }
@@ -1353,6 +1362,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 = {};
@@ -1379,7 +1398,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"]);
         }
       });
     }
@@ -1393,8 +1412,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]));
   }
 };