feat(html): add serializableEvent sanitizer and tests for event serialization

- Introduce `serializableEvent` in `render.ts` to sanitize DOM events, making them serializable by extracting a safe subset of properties.
- Add allow-lists for event and event target properties to control what gets serialized.
- Update `render.test.ts` to include comprehensive tests for `serializableEvent`, covering Event, KeyboardEvent, MouseEvent, InputEvent (with target value), and CustomEvent (with detail).
- Ensure all serialized events are plain objects suitable for structured cloning.

Author: seefeldb

packages/html/src/render.ts

@@ -314,9 +314,70 @@ export const setNodeSanitizer = (fn: (node: VNode) => VNode | null) => {
 
 export type EventSanitizer<T> = (event: Event) => T;
 
-const passthroughEvent: EventSanitizer<Event> = (event: Event): Event => event;
+export const passthroughEvent: EventSanitizer<Event> = (event: Event): Event =>
+  event;
+
+const allowListedEventProperties = [
+  "type", // general
+  "key", // keyboard event
+  "code", // keyboard event
+  "repeat", // keyboard event
+  "altKey", // keyboard & mouse event
+  "ctrlKey", // keyboard & mouse event
+  "metaKey", // keyboard & mouse event
+  "shiftKey", // keyboard & mouse event
+  "inputType", // input event
+  "data", // input event
+  "button", // mouse event
+  "buttons", // mouse event
+];
+
+const allowListedEventTargetProperties = [
+  "name", // general input
+  "value", // general input
+  "checked", // checkbox
+  "selected", // option
+  "selectedIndex", // select
+  "selectedOptions", // select, multiple
+];
 
-let sanitizeEvent: EventSanitizer<unknown> = passthroughEvent;
+/**
+ * Sanitize an event so it can be serialized.
+ *
+ * NOTE: This isn't yet vetted for security, it's just a coarse first pass with
+ * the primary objective of making events serializable.
+ *
+ * E.g. one glaring omission is that this can leak data via bubbling and we
+ * should sanitize quite differently if the target isn't the same as
+ * eventTarget.
+ *
+ * This code also doesn't make any effort to only copy properties that are
+ * allowed on various event types, or otherwise tailor sanitization to the event
+ * type.
+ *
+ * @param event - The event to sanitize.
+ * @returns The serializable event.
+ */
+export function serializableEvent<T>(event: Event): T {
+  const eventObject: Record<string, any> = {};
+  for (const property of allowListedEventProperties) {
+    eventObject[property] = event[property as keyof Event];
+  }
+
+  const targetObject: Record<string, any> = {};
+  for (const property of allowListedEventTargetProperties) {
+    targetObject[property] = event.target?.[property as keyof EventTarget];
+  }
+  if (Object.keys(targetObject).length > 0) eventObject.target = targetObject;
+
+  if ((event as CustomEvent).detail !== undefined) {
+    eventObject.detail = (event as CustomEvent).detail;
+  }
+
+  return JSON.parse(JSON.stringify(eventObject)) as T;
+}
+
+let sanitizeEvent: EventSanitizer<unknown> = serializableEvent;
 
 export const setEventSanitizer = (sanitize: EventSanitizer<unknown>) => {
   sanitizeEvent = sanitize;

packages/html/test/render.test.ts

@@ -3,6 +3,7 @@ import { h, UI } from "@commontools/api";
 import { render, renderImpl } from "../src/render.ts";
 import * as assert from "./assert.ts";
 import { JSDOM } from "jsdom";
+import { serializableEvent } from "../src/render.ts";
 
 let dom: JSDOM;
 
@@ -13,6 +14,10 @@ beforeEach(() => {
   globalThis.Element = dom.window.Element;
   globalThis.Node = dom.window.Node;
   globalThis.Text = dom.window.Text;
+  globalThis.InputEvent = dom.window.InputEvent;
+  globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+  globalThis.MouseEvent = dom.window.MouseEvent;
+  globalThis.CustomEvent = dom.window.CustomEvent;
 });
 
 describe("render", () => {
@@ -109,3 +114,119 @@ describe("renderImpl", () => {
     assert.equal(parent.children.length, 0);
   });
 });
+
+describe("serializableEvent", () => {
+  function isPlainSerializableObject(obj: any): boolean {
+    if (typeof obj !== "object" || obj === null) return true; // primitives are serializable
+    if (Array.isArray(obj)) {
+      return obj.every(isPlainSerializableObject);
+    }
+    if (Object.getPrototypeOf(obj) !== Object.prototype) return false;
+    for (const key in obj) {
+      if (typeof obj[key] === "function") return false;
+      if (!isPlainSerializableObject(obj[key])) return false;
+    }
+    return true;
+  }
+
+  it("serializes a basic Event", () => {
+    const event = new Event("test");
+    const result = serializableEvent(event);
+    assert.matchObject(result, { type: "test" });
+    assert.equal(
+      isPlainSerializableObject(result),
+      true,
+      "Result should be a plain serializable object",
+    );
+  });
+
+  it("serializes a KeyboardEvent", () => {
+    const event = new KeyboardEvent("keydown", {
+      key: "a",
+      code: "KeyA",
+      repeat: true,
+      altKey: true,
+      ctrlKey: false,
+      metaKey: true,
+      shiftKey: false,
+    });
+    const result = serializableEvent(event);
+    assert.matchObject(result, {
+      type: "keydown",
+      key: "a",
+      code: "KeyA",
+      repeat: true,
+      altKey: true,
+      ctrlKey: false,
+      metaKey: true,
+      shiftKey: false,
+    });
+    assert.equal(
+      isPlainSerializableObject(result),
+      true,
+      "Result should be a plain serializable object",
+    );
+  });
+
+  it("serializes a MouseEvent", () => {
+    const event = new MouseEvent("click", {
+      button: 0,
+      buttons: 1,
+      altKey: false,
+      ctrlKey: true,
+      metaKey: false,
+      shiftKey: true,
+    });
+    const result = serializableEvent(event);
+    assert.matchObject(result, {
+      type: "click",
+      button: 0,
+      buttons: 1,
+      altKey: false,
+      ctrlKey: true,
+      metaKey: false,
+      shiftKey: true,
+    });
+    assert.equal(
+      isPlainSerializableObject(result),
+      true,
+      "Result should be a plain serializable object",
+    );
+  });
+
+  it("serializes an InputEvent with target value", () => {
+    const input = document.createElement("input");
+    input.value = "hello";
+    const event = new InputEvent("input", {
+      data: "h",
+      inputType: "insertText",
+    });
+    Object.defineProperty(event, "target", { value: input });
+    const result = serializableEvent(event);
+    assert.matchObject(result, {
+      type: "input",
+      data: "h",
+      inputType: "insertText",
+      target: { value: "hello" },
+    });
+    assert.equal(
+      isPlainSerializableObject(result),
+      true,
+      "Result should be a plain serializable object",
+    );
+  });
+
+  it("serializes a CustomEvent with detail", () => {
+    const event = new CustomEvent("custom", { detail: { foo: [42, 43] } });
+    const result = serializableEvent(event);
+    assert.matchObject(result, {
+      type: "custom",
+      detail: { foo: [42, 43] },
+    });
+    assert.equal(
+      isPlainSerializableObject(result),
+      true,
+      "Result should be a plain serializable object",
+    );
+  });
+});