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

[seefeldb]

• 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.

---

Summary by cubic

Added a serializableEvent sanitizer to extract a safe, serializable subset of DOM event properties, and added tests to ensure correct event serialization.

• New Features
  • serializableEvent function allows events to be safely serialized by copying only allow-listed properties.
  • Tests cover Event, KeyboardEvent, MouseEvent, InputEvent (with target value), and CustomEvent (with detail).

[linear]

CT-611 Add basic event sanitizer that makes events serializable

[Copilot]

Pull Request Overview

Adds a serializer for DOM events in render.ts and validates it with new tests.

• Implements serializableEvent to extract an allow-listed subset of event and target properties and ensure plain-object serialization.
• Defines property allow-lists (allowListedEventProperties and allowListedEventTargetProperties) and makes sanitizeEvent default to use serializableEvent.
• Adds comprehensive tests in render.test.ts covering generic Event, KeyboardEvent, MouseEvent, InputEvent (with target value), and CustomEvent (with detail).

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/html/src/render.ts	Introduced serializableEvent, allow-lists for event/target properties, and set it as the default sanitizer.
packages/html/test/render.test.ts	Imported and tested serializableEvent, added global event constructors, and helper to verify plain-object serialization.

Comments suppressed due to low confidence (2)

packages/html/src/render.ts:361

• The generic <T> return type may be misleading since the function always returns a plain object. Consider specifying a concrete return type like Record<string, any> or defining a dedicated serializable event interface.

export function serializableEvent<T>(event: Event): T {

packages/html/src/render.ts:320

• [nitpick] To improve clarity, consider renaming allowListedEventProperties and allowListedEventTargetProperties to allowedEventProperties and allowedEventTargetProperties, respectively, so the naming more directly reflects their purpose.

const allowListedEventProperties = [

[Copilot]

Consider checking for at least one non-undefined property in targetObject before assigning it to eventObject.target, so you don’t include an empty target object for events without relevant target properties.

Suggested change

	targetObject[property] = event.target?.[property as keyof EventTarget];
	}
	if (Object.keys(targetObject).length > 0) eventObject.target = targetObject;
	const value = event.target?.[property as keyof EventTarget];
	if (value !== undefined) {
	targetObject[property] = value;
	}
	}
	if (Object.keys(targetObject).length > 0) {
	eventObject.target = targetObject;
	}

[cubic-dev-ai]

cubic reviewed 2 files and found no issues. Review PR in cubic.dev.

[jsantell]

detail could contain anything, but the serialization cycle should at least sever e.g. element references

[seefeldb]

added comment. my understanding is that only our own custom elements can trigger those, right?

[jsantell]

yes, or at least no CustomEvents fired from default browser interaction