[OnurGumus]

Builds on #84 (Hook.useEventListener). Until that merges, this PR also shows its commit. Only the last commit is new here.

Adds typed custom events. One value states an event's name and the type of its detail, and both ends take their types from it:

let itemAdded = customEvent<string * int> "item-added"

// Sender
document.dispatchCustom(itemAdded, ("apples", 3))

// Listener, in a HookComponent or LitElement
Hook.useEventListener(document, itemAdded, fun (name, count) ->
    setLast $"{count} {name}")

Why

With dispatchCustomEvent, the sender boxes a value into detail and each listener casts it back with (e :?> CustomEvent).detail :?> (string * int). Nothing ties those casts to what the sender sent. Change the payload and every listener keeps compiling, then reads a shape that isn't there at runtime.

Here the payload type lives in one place. Sending ("apples", "3") to itemAdded is a compile error (expected to have type 'int' but here has type 'string'). The one unchecked cast left is inside the hook, next to the descriptor that pairs the name with the type.

What's added

• CustomEventOf<'T> (in DomHelpers): an erased single-case union, so at runtime it's just the name string.
• customEvent<'T> name: makes one. It's a function, not the union case itself, because F# can't apply type arguments to a union case (CustomEventOf<string> "x" is error FS0717: Unexpected type arguments).
• EventTarget.dispatchCustom(ev, detail, ?bubbles, ?composed, ?cancelable): works on any EventTarget, not only a LitElement's host, so components that don't hold a reference to each other can talk over document. The defaults match dispatchCustomEvent: all true.
• Hook.useEventListener(target, ev: CustomEventOf<'T>, handler: 'T -> unit): an overload of the hook from feat: add Hook.useEventListener #84 that hands the handler the typed detail.

Docs: a "Typed custom events" section under Events in docsrc/docs/web-components.md. Its example compiles.

Tests

useEventListener carries a typed detail both ways in HookTest.fs sends a tuple through document and reads it back in a hook component. dotnet build Fable.Lit.sln and npm test pass (39 tests).

🤖 Generated with Claude Code