feat(dom): Add DOMLocalization.p.setArgs() (#615)

Author: eemeli

fluent-dom/src/dom_localization.ts

@@ -90,9 +90,16 @@ export class DOMLocalization extends Localization {
   setAttributes(
     element: Element,
     id: string,
-    args: Record<string, string>
+    args?: Record<string, string>
   ): Element {
     element.setAttribute(L10NID_ATTR_NAME, id);
+    return this.setArgs(element, args);
+  }
+
+  /**
+   * Set only the `data-l10n-args` attribute on a DOM element.
+   */
+  setArgs(element: Element, args?: Record<string, string>): Element {
     if (args) {
       element.setAttribute(L10NARGS_ATTR_NAME, JSON.stringify(args));
     } else {

fluent-dom/test/dom_localization_test.js

@@ -5,7 +5,7 @@ import { vi } from "vitest";
 
 async function* mockGenerateMessages() {
   const bundle = new FluentBundle(["en-US"]);
-  const resource = new FluentResource("key1 = Key 1");
+  const resource = new FluentResource("key1 = Key 1\nkey2 = Key {$arg}\n");
   bundle.addResource(resource);
   yield bundle;
 }
@@ -24,6 +24,24 @@ suite("translateFragment", function () {
     assert.strictEqual(elem.textContent, "Key 1");
   });
 
+  test("translates a node with arguments", async function () {
+    const FSI = "\u2068";
+    const PDI = "\u2069";
+    const domLoc = new DOMLocalization(["test.ftl"], mockGenerateMessages);
+
+    const frag = document.createDocumentFragment();
+    const elem = document.createElement("p");
+    domLoc.setAttributes(elem, "key2", { arg: 42 });
+    frag.appendChild(elem);
+
+    await domLoc.translateFragment(frag);
+    assert.strictEqual(elem.textContent, `Key ${FSI}42${PDI}`);
+
+    domLoc.setArgs(elem, { arg: 99 });
+    await domLoc.translateFragment(frag);
+    assert.strictEqual(elem.textContent, `Key ${FSI}99${PDI}`);
+  });
+
   test("does not inject content into a node with missing translation", async function () {
     const domLoc = new DOMLocalization(["test.ftl"], mockGenerateMessages);