Steve/v3-data-attrs

packages/runtime/src/internal/compute/setRealProperties.spec.ts

@@ -1,4 +1,4 @@
-import { setValueForStyle } from "./setRealProperties.js";
+import { setRealProperties, setValueForStyle } from "./setRealProperties.js";
 
 describe("setValueForStyle", () => {
   let mockStyle: CSSStyleDeclaration;
@@ -36,3 +36,18 @@ describe("setValueForStyle", () => {
     expect((mockStyle as any).margin).toBe("10px");
   });
 });
+
+describe("setRealProperties", () => {
+  test("should set plain data attributes on the element", () => {
+    const brick = document.createElement("div");
+    const realProps = {
+      "data-test": "value1",
+      "data-info": "value2",
+    };
+
+    setRealProperties(brick, realProps);
+
+    expect(brick.getAttribute("data-test")).toBe("value1");
+    expect(brick.getAttribute("data-info")).toBe("value2");
+  });
+});

packages/runtime/src/internal/compute/setRealProperties.ts

@@ -25,7 +25,11 @@ export function setRealProperties(
         // `innerHTML` is dangerous, use `textContent` instead.
         throw new Error(`set \`${propName}\` is prohibited`);
       default:
-        (brick as unknown as Record<string, unknown>)[propName] = propValue;
+        if (propName.startsWith("data-")) {
+          brick.setAttribute(propName, String(propValue));
+        } else {
+          (brick as unknown as Record<string, unknown>)[propName] = propValue;
+        }
     }
   }
 }