Merge pull request #25 from rameel/fix-x-format

Fix `x-format` directive failing on nested `x-data` elements

Author: rameel

src/plugins/format/index.js

@@ -5,6 +5,7 @@ function plugin({ directive, evaluateLater, mutateDom }) {
     directive("format", (el, { modifiers }, { effect }) => {
         const placeholder_regex = /{{(?<expr>.+?)}}/g;
         const is_once = has_modifier(modifiers, "once");
+        const has_format_attr = el => el.hasAttribute("x-format");
 
         process(el);
 
@@ -66,6 +67,29 @@ function plugin({ directive, evaluateLater, mutateDom }) {
 
         function process_nodes(node) {
             for (let child of node.childNodes) {
+                if (child.nodeType === Node.ELEMENT_NODE) {
+                    //
+                    // When we encounter an element with the 'x-data' attribute, its properties
+                    // are not yet initialized, and the Alpine context is unavailable.
+                    // Attempting to use these properties will result in
+                    // an "Alpine Expression Error: [expression] is not defined".
+                    //
+                    // Workaround:
+                    // To avoid this, we manually add our 'x-format' directive to the element.
+                    // Alpine evaluates 'x-format' directive once the context is initialized.
+                    // In the current loop, we skip these elements to defer their processing.
+                    //
+                    // This also handles cases where the user manually adds the 'x-format' attribute.
+                    //
+                    if (child.hasAttribute("x-data") && !has_format_attr(child)) {
+                        child.setAttribute("x-format", "");
+                    }
+
+                    if (has_format_attr(child)) {
+                        continue;
+                    }
+                }
+
                 process(child);
             }
         }

tests/playwright/x-format.spec.js

@@ -41,3 +41,48 @@ test("x-format: context aware", async ({ page }) => {
     await expect(page.locator("#id_4")).toContainText("id_4");
     await expect(page.locator("#id_3")).toHaveAttribute("title", "id_3");
 });
+
+test("x-format: nested x-data", async ({ page }) => {
+    await set_html(page, `
+      <div x-data="{ value1: 3.14 }" x-format>
+        <div x-data="{ value2: 2.71 }">
+          <span id="v2">{{ value2 }}</span>
+          <button id="b2" @click="value2 = 'math.e'">Change</button>
+        </div>
+
+        <span id="v1">{{ value1 }}</span>
+        <button id="b1" @click="value1 = 'math.pi'">Change</button>
+      </div>`);
+
+    await expect(page.locator("#v1")).toContainText("3.14");
+    await expect(page.locator("#v2")).toContainText("2.71");
+
+    await page.locator("#b1").click();
+    await expect(page.locator("#v1")).toContainText("math.pi");
+
+    await page.locator("#b2").click();
+    await expect(page.locator("#v2")).toContainText("math.e");
+});
+
+test("x-format: nested x-data with manually x-format", async ({ page }) => {
+    await set_html(page, `
+      <div x-data="{ value1: 3.14 }" x-format>
+        <div x-data="{ value2: 2.71 }" x-format>
+          <span id="v2">{{ value2 }}</span>
+          <button id="b2" @click="value2 = 'math.e'">Change</button>
+        </div>
+
+        <span id="v1">{{ value1 }}</span>
+        <button id="b1" @click="value1 = 'math.pi'">Change</button>
+      </div>`);
+
+    await expect(page.locator("#v1")).toContainText("3.14");
+    await expect(page.locator("#v2")).toContainText("2.71");
+
+    await page.locator("#b1").click();
+    await expect(page.locator("#v1")).toContainText("math.pi");
+
+    await page.locator("#b2").click();
+    await expect(page.locator("#v2")).toContainText("math.e");
+});
+