making calendar tutorial

packages/html/src/render.ts

@@ -1,4 +1,4 @@
-import { isObject } from "@commontools/utils/types";
+import { isObject, isRecord } from "@commontools/utils/types";
 import {
   type Cancel,
   type Cell,
@@ -322,10 +322,23 @@ const listen = (
 };
 
 const setProp = <T>(target: T, key: string, value: unknown) => {
-  // @ts-ignore - we've validated these via runtime checks
-  if (target[key] !== value) {
-    // @ts-ignore - we've validated these via runtime checks
-    target[key] = value;
+  // Handle data-* attributes specially - they need to be set as HTML attributes
+  // to populate the dataset property correctly
+  if (key.startsWith("data-") && target instanceof Element) {
+    // If value is null or undefined, remove the attribute
+    if (value == null) {
+      if (target.hasAttribute(key)) {
+        target.removeAttribute(key);
+      }
+    } else {
+      const currentValue = target.getAttribute(key);
+      const newValue = String(value);
+      if (currentValue !== newValue) {
+        target.setAttribute(key, newValue);
+      }
+    }
+  } else if (target[key as keyof T] !== value) {
+    target[key as keyof T] = value as T[keyof T];
   }
 };
 
@@ -415,6 +428,18 @@ export function serializableEvent<T>(event: Event): T {
       );
   }
 
+  // Copy dataset as a plain object for serialization
+  if (isObject(target) && "dataset" in target && isRecord(target.dataset)) {
+    const dataset: Record<string, string> = {};
+    for (const key in target.dataset) {
+      // String() to normalize, just in case
+      dataset[key] = String(target.dataset[key]);
+    }
+    if (Object.keys(dataset).length > 0) {
+      targetObject.dataset = dataset;
+    }
+  }
+
   if (Object.keys(targetObject).length > 0) eventObject.target = targetObject;
 
   if ((event as CustomEvent).detail !== undefined) {

packages/html/src/utils.ts

@@ -14,6 +14,23 @@ function renderOptionsFromDoc(document: globalThis.Document): RenderOptions {
       key: string,
       value: unknown,
     ) {
+      const el = element as any;
+
+      // Handle data-* attributes specially - they need to be set as HTML attributes
+      // to populate the dataset property correctly
+      if (key.startsWith("data-") && el.attribs) {
+        // If value is null or undefined, remove the attribute
+        if (value == null) {
+          if (key in el.attribs) {
+            delete el.attribs[key];
+          }
+        } else {
+          el.attribs[key] = String(value);
+        }
+        return;
+      }
+
+      // For non-data attributes, use the existing logic
       let attrValue;
       if (typeof value === "string") {
         attrValue = value;
@@ -26,7 +43,6 @@ function renderOptionsFromDoc(document: globalThis.Document): RenderOptions {
       } else {
         attrValue = `${value}`;
       }
-      const el = element as domhandler.Element;
       if (!el.attribs[key]) {
         el.attribs[key] = attrValue;
       }
@@ -94,6 +110,48 @@ export class MockDoc {
           }
         },
       },
+      setAttribute: {
+        value(attrName: string, value: string) {
+          if (this && (this as any).attribs) {
+            // @ts-ignore: domhandler.Element has `attribs`
+            (this as Element).attribs[attrName] = value;
+          }
+        },
+      },
+      hasAttribute: {
+        value(attrName: string) {
+          if (this && (this as any).attribs) {
+            // @ts-ignore: domhandler.Element has `attribs`
+            return attrName in (this as Element).attribs;
+          }
+          return false;
+        },
+      },
+      removeAttribute: {
+        value(attrName: string) {
+          if (this && (this as any).attribs) {
+            // @ts-ignore: domhandler.Element has `attribs`
+            delete (this as Element).attribs[attrName];
+          }
+        },
+      },
+      dataset: {
+        get() {
+          const el = this as any;
+          if (!el.attribs) return {};
+          const dataset: Record<string, string> = {};
+          for (const key in el.attribs) {
+            if (key.startsWith("data-")) {
+              const dataKey = key.slice(5).replace(
+                /-([a-z])/g,
+                (_, char) => char.toUpperCase(),
+              );
+              dataset[dataKey] = el.attribs[key];
+            }
+          }
+          return dataset;
+        },
+      },
     };
 
     // Extend `Document` with element creation methods

packages/html/test/render.test.ts

@@ -380,4 +380,174 @@ describe("serializableEvent", () => {
       "Should not include id on target",
     );
   });
+
+  it("serializes an event with target.dataset", () => {
+    const { document } = mock;
+    const div = document.createElement("div");
+    div.setAttribute("data-id", "123");
+    div.setAttribute("data-name", "test");
+    const event = new Event("click");
+    Object.defineProperty(event, "target", { value: div });
+    const result = serializableEvent(event) as object;
+    assert.matchObject(result, {
+      type: "click",
+      target: {
+        dataset: {
+          id: "123",
+          name: "test",
+        },
+      },
+    });
+    assert.equal(
+      isPlainSerializableObject(result),
+      true,
+      "Result should be a plain serializable object",
+    );
+  });
+});
+
+describe("dataset attributes", () => {
+  it("sets data-* attributes using setAttribute", () => {
+    const { renderOptions, document } = mock;
+    const vnode = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-id": "123",
+        "data-name": "test",
+      },
+      children: [],
+    };
+    const parent = document.getElementById("root")!;
+    const cancel = renderImpl(parent, vnode, renderOptions);
+    const div = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div.getAttribute("data-id"), "123");
+    assert.equal(div.getAttribute("data-name"), "test");
+    // @ts-ignore: dataset exists on Element in real DOM
+    assert.equal(div.dataset.id, "123");
+    // @ts-ignore: dataset exists on Element in real DOM
+    assert.equal(div.dataset.name, "test");
+    cancel();
+  });
+
+  it("removes data-* attributes when value is null", () => {
+    const { renderOptions, document } = mock;
+    const parent = document.getElementById("root")!;
+
+    // First render with data attribute
+    const vnode1 = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-id": "123",
+      },
+      children: [],
+    };
+    const cancel1 = renderImpl(parent, vnode1, renderOptions);
+    const div = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div.getAttribute("data-id"), "123");
+    cancel1();
+
+    // Re-render with null value
+    const vnode2 = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-id": null,
+      },
+      children: [],
+    };
+    const cancel2 = renderImpl(parent, vnode2, renderOptions);
+    const div2 = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div2.hasAttribute("data-id"), false);
+    cancel2();
+  });
+
+  it("removes data-* attributes when value is undefined", () => {
+    const { renderOptions, document } = mock;
+    const parent = document.getElementById("root")!;
+
+    // First render with data attribute
+    const vnode1 = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-id": "123",
+      },
+      children: [],
+    };
+    const cancel1 = renderImpl(parent, vnode1, renderOptions);
+    const div = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div.getAttribute("data-id"), "123");
+    cancel1();
+
+    // Re-render with undefined value
+    // @ts-ignore: Testing undefined handling even though it's not in Props type
+    const vnode2 = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-id": undefined,
+      },
+      children: [],
+    } as VNode;
+    const cancel2 = renderImpl(parent, vnode2, renderOptions);
+    const div2 = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div2.hasAttribute("data-id"), false);
+    cancel2();
+  });
+
+  it("converts non-string values to strings for data-* attributes", () => {
+    const { renderOptions, document } = mock;
+    const vnode = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-count": 42,
+        "data-enabled": true,
+        "data-items": ["a", "b", "c"],
+      },
+      children: [],
+    };
+    const parent = document.getElementById("root")!;
+    const cancel = renderImpl(parent, vnode, renderOptions);
+    const div = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div.getAttribute("data-count"), "42");
+    assert.equal(div.getAttribute("data-enabled"), "true");
+    assert.equal(div.getAttribute("data-items"), "a,b,c");
+    cancel();
+  });
+
+  it("updates data-* attributes when value changes", () => {
+    const { renderOptions, document } = mock;
+    const parent = document.getElementById("root")!;
+
+    // First render
+    const vnode1 = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-id": "123",
+      },
+      children: [],
+    };
+    const cancel1 = renderImpl(parent, vnode1, renderOptions);
+    const div = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div.getAttribute("data-id"), "123");
+    cancel1();
+
+    // Update with new value
+    const vnode2 = {
+      type: "vnode" as const,
+      name: "div",
+      props: {
+        "data-id": "456",
+      },
+      children: [],
+    };
+    const cancel2 = renderImpl(parent, vnode2, renderOptions);
+    const div2 = parent.getElementsByTagName("div")[0]!;
+    assert.equal(div2.getAttribute("data-id"), "456");
+    cancel2();
+  });
 });