@yuneta/gobj-ui 7.26.34 → 7.26.36

package/src/form_label_i18n.wiring.test.js

@@ -0,0 +1,169 @@
+/***********************************************************************
+ *          form_label_i18n.wiring.test.js
+ *
+ *      The label of a field of a C_YUI_FORM is translated by a
+ *      CASCADE -- '<topic>.<col>', then '<col>', then the header -- and
+ *      re-translated on a language change by the key its node carries
+ *      (data-i18n on the <label>, data-i18n-aria-label / -title on the
+ *      control). Up to 7.26.34 that key was chosen by asking only the
+ *      bare '<col>':
+ *
+ *        (a) a label translated by '<topic>.<col>' alone carried its own
+ *            TRANSLATED text as the key, and never changed language;
+ *        (b) one translated by both switched to the bare '<col>' text at
+ *            the first language change.
+ *
+ *      Driven through the real gclass on a document double, switching
+ *      the language with i18next and refresh_language(), as an app does.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, afterEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    };
+}
+
+/*  No json field here, but the module imports the editor.  */
+vi.mock("vanilla-jsoneditor", () => ({
+    createJSONEditor: () => ({
+        get() {
+            return {text: ""};
+        },
+        set() {},
+        destroy() {},
+    }),
+}));
+
+const {
+    SDATA_END, gclass_create,
+    gobj_start_up, gobj_create_yuno, gobj_create_pure_child,
+    gobj_start, gobj_read_attr, refresh_language,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_form} = await import("./c_yui_form.js");
+
+let i18next = null;
+let yuno = null;
+let seq = 0;
+
+beforeAll(async () => {
+    i18next = (await import("i18next")).default;
+    await i18next.init({
+        lng: "en",
+        resources: {
+            en: {translation: {
+                "devices.alias": "Device alias",
+                "groups.title":  "Group title",
+                "title":         "Title"
+            }},
+            es: {translation: {
+                "devices.alias": "Alias del equipo",
+                "groups.title":  "Título del grupo",
+                "title":         "Título"
+            }}
+        }
+    });
+    gobj_start_up(null, null, null, null, null, null, null);
+    gclass_create("C_TEST_LABEL_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    gclass_create(
+        "C_TEST_LABEL_APP",
+        [["EV_RECORD_CHANGED", 0]],
+        [["ST_IDLE", [["EV_RECORD_CHANGED", () => 0, null]]]],
+        {}, 0, [SDATA_END()], {}, 0, 0, 0, 0
+    );
+    register_c_yui_form();
+    yuno = gobj_create_yuno("form_label_yuno", "C_TEST_LABEL_HOST", {});
+    gobj_start(yuno);
+});
+
+afterEach(async () => {
+    await i18next.changeLanguage("en");
+});
+
+/*  A form of `topic` with one writable column `col`, built in English.  */
+function build(topic, col)
+{
+    const app = gobj_create_pure_child(`lapp${++seq}`, "C_TEST_LABEL_APP", {}, yuno);
+    gobj_start(app);
+    const form = gobj_create_pure_child(`lform${seq}`, "C_YUI_FORM", {
+        template: [
+            {id: "id", header: "id", type: "string", flag: ["persistent", "required"]},
+            {id: col, header: col, type: "string", flag: ["persistent", "writable"]},
+        ],
+        topic_name: topic,
+        record: {id: "a", [col]: "x"},
+        render_mode: "edit",
+        editable: true,
+    }, app);
+    gobj_start(form);
+    const $c = gobj_read_attr(form, "$container");
+    const $label = $c.querySelector(`label[for="${col}"]`);
+    const $input = $c.querySelector(`input[name="${col}"]`);
+    expect(!!$label).toBe(true);
+    expect(!!$input).toBe(true);
+    return {$c, $label, $input};
+}
+
+/*  What an app does on a language change.  */
+async function switch_to_spanish($c)
+{
+    await i18next.changeLanguage("es");
+    refresh_language($c, i18next.t.bind(i18next));
+}
+
+/*  The text refresh_language() writes into a node that carries
+ *  data-i18n: t(<that key>). Asked directly, because the document
+ *  double's text nodes have no `nodeValue`, which is what it writes
+ *  (the attributes -- aria-label, title -- it rewrites in the double
+ *  too, and those are read from the control).  */
+function retranslated($el)
+{
+    return i18next.t($el.getAttribute("data-i18n"));
+}
+
+describe("the label of a field changes language by the key that translated it", () => {
+    test("(a) translated by '<topic>.<col>' alone", async () => {
+        const {$c, $label, $input} = build("devices", "alias");
+        expect($label.textContent).toBe("Device alias");
+        expect($label.getAttribute("data-i18n")).toBe("devices.alias");
+        expect($input.getAttribute("data-i18n-aria-label")).toBe("devices.alias");
+
+        await switch_to_spanish($c);
+        expect(retranslated($label)).toBe("Alias del equipo");
+        expect($input.getAttribute("aria-label")).toBe("Alias del equipo");
+        expect($input.getAttribute("title")).toBe("Alias del equipo");
+    });
+
+    test("(b) translated by '<topic>.<col>' and by '<col>': the topic's wins, before and after", async () => {
+        const {$c, $label, $input} = build("groups", "title");
+        expect($label.textContent).toBe("Group title");
+        expect($label.getAttribute("data-i18n")).toBe("groups.title");
+
+        await switch_to_spanish($c);
+        expect(retranslated($label)).toBe("Título del grupo");
+        expect($input.getAttribute("aria-label")).toBe("Título del grupo");
+    });
+
+    test("translated by '<col>' alone, as before", async () => {
+        const {$c, $label} = build("other", "title");
+        expect($label.textContent).toBe("Title");
+        expect($label.getAttribute("data-i18n")).toBe("title");
+
+        await switch_to_spanish($c);
+        expect(retranslated($label)).toBe("Título");
+    });
+
+    test("translated by nothing: the header, as before", () => {
+        const {$label} = build("other", "zone");
+        expect($label.textContent).toBe("zone");
+        expect($label.getAttribute("data-i18n")).toBe("zone");
+    });
+});

package/src/i18n_key_functions.js

@@ -71,11 +71,15 @@
  *          literal (or DOM, or nothing), a const the reader follows, a key
  *          position of the enclosing table function handed on, or a marked
  *          value fails, with the file and the line; a TRANSLATED text --
- *          t("..."), tr(), an alias of t, `t?.()`, `t.call()` -- fails even
- *          marked (it would be translated again, and never change
- *          language). A test (i18n_key_functions.test.js) holds the library
- *          to it, and validate-locales an app's own code. Publishing a list
- *          exempts no module.
+ *          t("..."), tr(), an alias of t, `t?.()`, `t.call()`, or a string
+ *          built from one, `t("k") + ":"` -- fails even marked (it would be
+ *          translated again, and never change language). A translator
+ *          handed as a callback is held the same way: each element
+ *          `keys.map(t)` walks is a key position, and what `.then(t)` is
+ *          handed is one no source writes. A test
+ *          (i18n_key_functions.test.js) holds the library to it, and
+ *          validate-locales an app's own code. Publishing a list exempts
+ *          no module.
  *
  *          The table is COMPLETE and CORRECT, and the same test proves both
  *          (REV-CLOUD V21.4.1, V22): it finds every function of the library
@@ -233,7 +237,8 @@ export const I18N_KEY_FUNCTIONS = Object.freeze([
         keys: ["1[].name", "1[].tooltip", "1[].aria_label"]},
     {module: "c_yui_nav.js", name: "render_drawer", exported: false,
         keys: ["1[].name", "1[].tooltip", "1[].aria_label"]},
-    {module: "c_yui_nav.js", name: "render_breadcrumb", exported: false, keys: ["1[].name", "1[].id"]},
+    {module: "c_yui_nav.js", name: "render_breadcrumb", exported: false,
+        keys: ["1[].name", "1[].id", "1[].tooltip", "1[].aria_label"]},
     {module: "c_yui_nav.js", name: "render_accordion", exported: false,
         keys: ["1[].name", "1[].submenu.items[].name", "1[].submenu.items[].tooltip",
                "1[].submenu.items[].aria_label"]},
@@ -253,6 +258,9 @@ export const I18N_KEY_FUNCTIONS = Object.freeze([
     {module: "c_yui_shell.js", name: "toggle_toolbar_dropdown", exported: false, keys: ["1.name", "1.aria_label"]},
     {module: "c_yui_shell.js", name: "open_toolbar_dropdown", exported: false, keys: ["1.name", "1.aria_label"]},
     {module: "c_yui_shell.js", name: "build_dropdown_row", exported: false, keys: ["1.name", "1.aria_label"]},
+    /*  c_yui_shell.js -- the name of a badged item, said with its count:
+     *  the app's shell declaration  */
+    {module: "c_yui_shell.js", name: "announce_badge", exported: false, keys: ["1"]},
     /*  shell_route_map.js -- a node of the route map  */
     {module: "shell_route_map.js", name: "render_node", exported: false, keys: ["0.label"]},
 ]);

package/src/i18n_key_functions.test.js

@@ -36,8 +36,10 @@
  *          handed -- a comment `i18n: <NAME>_I18N_KEYS` (the module
  *          publishes those keys) or `i18n: data` (no key a list can hold).
  *          Anything else fails, naming the file and the line; so does a
- *          translated text -- t("..."), tr(), an alias of t -- marked or
- *          not;
+ *          translated text -- t("..."), tr(), an alias of t, a string built
+ *          from one (`t("k") + ":"`) -- marked or not. A translator handed
+ *          as a callback (V23.5: `keys.map(t)`, `promise.then(t)`) is held
+ *          the same way, each element it walks a key position;
  *        - every marker is one and stands where a key is read; the lists
  *          it names are published by its module or one it imports; the
  *          keys it marks that can be read are in them -- a marked `let`
@@ -1935,3 +1937,123 @@ describe("REV-CLOUD V22.3-4: the data marker hides no key; one notion of a trans
                               [{name: "B_I18N_KEYS", keys: ["b"]}]).map((e) => e.line)).toEqual([2]);
     });
 });
+
+describe("REV-CLOUD V23.5: a translator as a callback, by destructuring; setAttributeNS; t() compositions; aliases", () => {
+    let module = "x.js";
+    let head = [`import {yui_shell_show_info} from "./shell_modals.js";`,
+                `import i18next from "i18next";`];
+    let scan = (lines) => scan_ast(parse_as([...head, ...lines].join("\n"), module), {lib_module: module});
+    let rule = (lines) => rule_report(parse_as([...head, ...lines].join("\n"), module), module);
+    let found_in = (lines) => {
+        let ast = parse_as(lines.join("\n"), module);
+        return find_forwarders([module], () => ast, []);
+    };
+
+    test("each element a translator handed to .map() / .forEach() walks is a key; a promise's value is none", () => {
+        let r = scan([`const KINDS = ["kind a", "kind b"];`,
+                      `KINDS.map(t);`,
+                      `["literal a"].forEach(i18next.t);`,
+                      `Array.from(["from a"], t);`]);
+        expect(["kind a", "kind b", "literal a", "from a"].every((k) => r.keys.has(k))).toBe(true);
+        expect(rule([`const KINDS = ["kind a"];`, `KINDS.map(t);`])).toEqual([]);
+        expect(rule([`function f(kw) {`,
+                     `    let rows = kw.rows;`,
+                     `    rows.map(t);`,
+                     `    load().then(t);`,
+                     `    /* i18n: data */ rows.forEach(t);`,
+                     `    load().catch(/* i18n: data */ i18next.t);`,
+                     `    [t("a")].map(t);`,
+                     `}`])).toEqual([
+            `${module}:5 t() [map callback]: rows`,
+            `${module}:6 t() [then callback]: load().then(t)`,
+            `${module}:9 t() [map callback]: t("a") -- a TRANSLATED text where a key goes: hand the key`
+        ]);
+        /*  A translator handed to a FUNCTION is how gobj-ui takes one: no callback of these  */
+        expect(rule([`function f(shell) { yui_shell_show_info(shell, "k", {t: t}); build(rows, t); }`])).toEqual([]);
+    });
+
+    test("the search for forwarders sees them: an array walked by t(), setAttributeNS(), a destructured t", () => {
+        let found = found_in([
+            `const ATTR = "data-i18n-title";`,
+            `export function f_map(gobj, keys) { return keys.map(t); }`,
+            `export function f_ns(gobj, el, k) { el.setAttributeNS(null, ATTR, k); }`,
+            `export function f_destr(gobj, {t: translate}, k) { return translate(k); }`,
+            `export function f_const(gobj, k) { const {t: tt} = i18next; return tt(k); }`
+        ]);
+        expect(found.opaque).toEqual([]);
+        expect(Object.fromEntries(found.found.map((f) => [f.name, f.keys]))).toEqual({
+            f_map: ["1[]"], f_ns: ["2"], f_destr: ["2"], f_const: ["1"]
+        });
+    });
+
+    test("a destructured translator translates: its key is asked for, and its text is no key", () => {
+        let r = scan([`const {t: tt} = i18next;`, `tt("a destructured key");`]);
+        expect(r.keys.has("a destructured key")).toBe(true);
+        expect(rule([`const {t: tt} = i18next;`, `yui_shell_show_info(shell, /* i18n: data */ tt("k"));`]))
+            .toEqual([`${module}:4 yui_shell_show_info() [1]: tt("k") -- a TRANSLATED text where a key goes: hand the key`]);
+    });
+
+    test("a text BUILT from a translation is translated text: at a key position, and under a marker anywhere", () => {
+        expect(rule([`yui_shell_show_info(shell, /* i18n: data */ t("k") + ":");`,
+                     `yui_shell_show_info(shell, /* i18n: data */ t("k").toUpperCase());`,
+                     "yui_shell_show_info(shell, /* i18n: data */ `${t(\"k\")}: ${n}`);",
+                     `yui_shell_show_info(shell, /* i18n: data */ [t("a"), name].join(" "));`,
+                     `yui_shell_show_info(shell, /* i18n: data */ name + ":");`,
+                     `yui_shell_show_info(shell, /* i18n: data */ ["p", {}, t("k")]);`])
+            .map((l) => l.replace(/ -- .*/, ""))).toEqual([
+            `${module}:3 yui_shell_show_info() [1]: t("k") + ":"`,
+            `${module}:4 yui_shell_show_info() [1]: t("k").toUpperCase()`,
+            `${module}:5 yui_shell_show_info() [1]: \`\${t("k")}: \${n}\``,
+            `${module}:6 yui_shell_show_info() [1]: [t("a"), name].join(" ")`
+        ]);
+        let r = scan([`t(/* i18n: data */ t("k") + "!");`,
+                      `x.i18n = /* i18n: data */ t("k").trim();`,
+                      `t(/* i18n: data */ kw.comment + "!");`]);
+        expect(r.marker_errors.map((e) => e.line)).toEqual([3, 4]);
+        expect(r.marker_errors[0].why).toMatch(/^marked as data, but `t\("k"\) \+ "!"` is a TRANSLATED text: .*hand the key, not t\(key\)$/);
+    });
+
+    test("an UNMARKED let given nothing but literals is read where a key is read -- at a key position the rule still fails it", () => {
+        let r = scan([`function f(x, el) {`,
+                      `    let k = x? "a let key" : "another let key";`,
+                      `    let held = "a held key";`,
+                      `    held = k;`,                                          // a let given a literal-only let
+                      `    el.setAttribute("data-i18n", held);`,
+                      `    return t(k);`,
+                      `}`,
+                      `function g(kw) {`,
+                      `    let d = "a data let key";`,
+                      `    d = kw.comment;`,
+                      `    return t(d);`,
+                      `}`]);
+        expect(["a let key", "another let key", "a held key"].every((k) => r.keys.has(k))).toBe(true);
+        expect(r.keys.has("a data let key")).toBe(false);
+        expect(r.marker_errors).toEqual([]);
+        expect(rule([`function f(x) { let k = x? "a" : "b"; yui_shell_show_info(shell, k); }`]))
+            .toEqual([`${module}:3 yui_shell_show_info() [1]: k`]);
+    });
+
+    test("a published list mutated through a const or let alias, or a namespace member", () => {
+        let ast = parse_source([
+            `import * as M from "./m.js";`,
+            `import {Y_I18N_KEYS} from "./y.js";`,
+            `export const X_I18N_KEYS = ["x"];`,
+            `const a = X_I18N_KEYS;`,
+            `a.push("k");`,                                // 5
+            `let b = Y_I18N_KEYS;`,
+            `b[0] = "k";`,                                 // 7
+            `M.Z_I18N_KEYS.unshift("k");`,                 // 8
+            `const z = M.Z_I18N_KEYS;`,
+            `delete z[0];`,                                // 10
+            `let c = X_I18N_KEYS;`,
+            `c = c.concat(["k"]);`,
+            `c.push("a copy");`,
+            `M.helper.push("not a list");`,
+            `function f(a) { a.push("a parameter"); }`,
+            `let d = X_I18N_KEYS;`,
+            `d = X_I18N_KEYS;`,                            // the alias pointed again: no mutation
+            `X_I18N_KEYS = [];`                            // 18: the list itself given another value
+        ].join("\n"));
+        expect(list_mutations(ast, [{name: "X_I18N_KEYS", keys: ["x"]}]).map((e) => e.line)).toEqual([5, 7, 8, 10, 18]);
+    });
+});

package/src/lib_maplibre.js

@@ -3,7 +3,7 @@
  *
  *          Utilities for maplibre
  *
- *          Copyright (c) 2025, ArtGins.
+ *          Copyright (c) 2025-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 import {
@@ -283,6 +283,23 @@ function label_ctrl($root, selector, text)
     }
 }
 
+/*  What maplibre wrote ONCE from its locale and never again: the name
+ *  of the map's canvas (`Map.Title`: a region a keyboard focuses, so a
+ *  reader announces it) and of a default marker (`Marker.Title`).
+ *  Rewritten where it still holds the word maplibre wrote -- a name an
+ *  app gave a marker is its own.  */
+function relabel_written($root, selector, was, now)
+{
+    if(!$root || !now) {
+        return;
+    }
+    for(const $el of $root.querySelectorAll(selector)) {
+        if($el.getAttribute("aria-label") === was) {
+            $el.setAttribute("aria-label", now);
+        }
+    }
+}
+
 function yui_maplibre_relocalize(map, t)
 {
     if(!map || typeof map.getContainer !== "function") {
@@ -291,7 +308,9 @@ function yui_maplibre_relocalize(map, t)
     const strings = yui_maplibre_locale(t);
 
     /*  The map's own table first: a control added later (or a popup
-     *  opened later) reads it when it builds itself.  */
+     *  opened later) reads it when it builds itself. What it said
+     *  before is kept, to know which names maplibre wrote with it.  */
+    const was = Object.assign({}, map._locale);
     try {
         map._locale = Object.assign({}, map._locale, strings);
     } catch(e) {
@@ -308,6 +327,11 @@ function yui_maplibre_relocalize(map, t)
     label_ctrl($c, ".maplibregl-ctrl-fullscreen", strings["FullscreenControl.Enter"]);
     label_ctrl($c, ".maplibregl-popup-close-button", strings["Popup.Close"]);
 
+    /*  The canvas said "Mapa" in an English app after a switch, and a
+     *  default marker "Marcador del mapa": maplibre names them once.  */
+    relabel_written($c, ".maplibregl-canvas", was["Map.Title"], strings["Map.Title"]);
+    relabel_written($c, ".maplibregl-marker", was["Marker.Title"], strings["Marker.Title"]);
+
     /*  The notice of the cooperative gesture: two lines, one for a
      *  pointer and one for a finger, built by `_setupUI()` as
      *  `.maplibregl-desktop-message` / `.maplibregl-mobile-message`.  */

package/src/lib_maplibre_relocalize.test.js

@@ -0,0 +1,78 @@
+/***********************************************************************
+ *          lib_maplibre_relocalize.test.js
+ *
+ *      After a language change, yui_maplibre_relocalize() rewrites the
+ *      words maplibre drew from its locale. Two of them maplibre writes
+ *      ONCE and never again: the aria-label of the map's canvas
+ *      (`Map.Title`, a region a keyboard focuses) and of a default
+ *      marker (`Marker.Title`). Up to 7.26.34 they stayed in the
+ *      language the map was built in -- "Mapa" in an English app after
+ *      a switch (REV-CLOUD V23.5.6). A name an app gave a marker is its
+ *      own, and is left alone.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+const {yui_maplibre_locale, yui_maplibre_relocalize} = await import("./lib_maplibre.js");
+
+let i18next = null;
+
+beforeAll(async () => {
+    i18next = (await import("i18next")).default;
+    await i18next.init({
+        lng: "es",
+        resources: {
+            es: {translation: {"map": "Mapa", "map marker": "Marcador del mapa"}},
+            en: {translation: {"map": "Map", "map marker": "Map marker"}}
+        }
+    });
+});
+
+/*  A map built in Spanish, as maplibre leaves it: its locale table, and
+ *  the names it wrote from it.  */
+function spanish_map()
+{
+    const $c = document.createElement("div");
+    const $canvas = document.createElement("canvas");
+    $canvas.className = "maplibregl-canvas";
+    $canvas.setAttribute("aria-label", "Mapa");
+    $c.appendChild($canvas);
+
+    const $default = document.createElement("div");
+    $default.className = "maplibregl-marker";
+    $default.setAttribute("aria-label", "Marcador del mapa");
+    $c.appendChild($default);
+
+    const $own = document.createElement("div");
+    $own.className = "maplibregl-marker";
+    $own.setAttribute("aria-label", "Sensor 7");
+    $c.appendChild($own);
+
+    const map = {
+        _locale: yui_maplibre_locale(i18next.getFixedT("es")),
+        getContainer: () => $c,
+    };
+    return {map, $canvas, $default, $own};
+}
+
+describe("the names maplibre writes once", () => {
+    test("follow a language change: the canvas and a default marker", () => {
+        const {map, $canvas, $default, $own} = spanish_map();
+        yui_maplibre_relocalize(map, i18next.getFixedT("en"));
+
+        expect($canvas.getAttribute("aria-label")).toBe("Map");
+        expect($default.getAttribute("aria-label")).toBe("Map marker");
+        expect($own.getAttribute("aria-label")).toBe("Sensor 7");     // the app's own
+        expect(map._locale["Map.Title"]).toBe("Map");
+
+        /*  And back, from what the last switch wrote.  */
+        yui_maplibre_relocalize(map, i18next.getFixedT("es"));
+        expect($canvas.getAttribute("aria-label")).toBe("Mapa");
+        expect($default.getAttribute("aria-label")).toBe("Marcador del mapa");
+    });
+});