From dfbad3e222f9da8efbbf47202b71a9e83c730474 Mon Sep 17 00:00:00 2001
From: TPReal <tpreal@gmail.com>
Date: Fri, 18 Oct 2024 22:54:56 +0200
Subject: [PATCH 1/3] Fix in DOMAttributes

Added the (possibly forgotten?) BoolAttributes to DOMAttributes. It is never used otherwise.
---
 packages/dom-expressions/src/jsx-h.d.ts | 1 +
 packages/dom-expressions/src/jsx.d.ts   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/dom-expressions/src/jsx-h.d.ts b/packages/dom-expressions/src/jsx-h.d.ts
index 52548511..213f0872 100644
--- a/packages/dom-expressions/src/jsx-h.d.ts
+++ b/packages/dom-expressions/src/jsx-h.d.ts
@@ -136,6 +136,7 @@ export namespace JSX {
       DirectiveFunctionAttributes<T>,
       PropAttributes,
       AttrAttributes,
+      BoolAttributes,
       OnAttributes<T>,
       OnCaptureAttributes<T>,
       CustomEventHandlersCamelCase<T>,
diff --git a/packages/dom-expressions/src/jsx.d.ts b/packages/dom-expressions/src/jsx.d.ts
index 3b93d3eb..b2e6a2ef 100644
--- a/packages/dom-expressions/src/jsx.d.ts
+++ b/packages/dom-expressions/src/jsx.d.ts
@@ -202,6 +202,7 @@ export namespace JSX {
       DirectiveFunctionAttributes<T>,
       PropAttributes,
       AttrAttributes,
+      BoolAttributes,
       OnAttributes<T>,
       OnCaptureAttributes<T>,
       CustomEventHandlersCamelCase<T>,

From 4fbe4db461543314d35f25166041cfede0d85895 Mon Sep 17 00:00:00 2001
From: TPReal <tpreal@gmail.com>
Date: Sat, 19 Oct 2024 15:31:07 +0200
Subject: [PATCH 2/3] Fixed the types of on:* attributes.

Allow the syntax that specifies the capture, passive and once keys.
---
 packages/dom-expressions/src/jsx-h.d.ts | 182 ++++++++++-----------
 packages/dom-expressions/src/jsx.d.ts   | 202 ++++++++++++------------
 2 files changed, 193 insertions(+), 191 deletions(-)

diff --git a/packages/dom-expressions/src/jsx-h.d.ts b/packages/dom-expressions/src/jsx-h.d.ts
index 213f0872..30611c86 100644
--- a/packages/dom-expressions/src/jsx-h.d.ts
+++ b/packages/dom-expressions/src/jsx-h.d.ts
@@ -62,7 +62,7 @@ export namespace JSX {
     ) => void;
   }
 
-  type CustomEventHandlerUnion<T, E extends Event> =
+  type EventHandlerWithOptionsUnion<T, E extends Event> =
     | EventHandler<T, E>
     | EventHandlerWithOptions<T, E>;
 
@@ -122,7 +122,7 @@ export namespace JSX {
     [Key in keyof ExplicitBoolAttributes as `bool:${Key}`]?: ExplicitBoolAttributes[Key];
   };
   type OnAttributes<T> = {
-    [Key in keyof CustomEvents as `on:${Key}`]?: CustomEventHandlerUnion<T, CustomEvents[Key]>;
+    [Key in keyof CustomEvents as `on:${Key}`]?: EventHandlerWithOptionsUnion<T, CustomEvents[Key]>;
   };
   type OnCaptureAttributes<T> = {
     [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<
@@ -169,16 +169,16 @@ export namespace JSX {
     onencrypted?: EventHandlerUnion<T, Event>;
     ondragexit?: EventHandlerUnion<T, DragEvent>;
     // namespaced events
-    "on:copy"?: EventHandlerUnion<T, ClipboardEvent>;
-    "on:cut"?: EventHandlerUnion<T, ClipboardEvent>;
-    "on:paste"?: EventHandlerUnion<T, ClipboardEvent>;
-    "on:compositionend"?: EventHandlerUnion<T, CompositionEvent>;
-    "on:compositionstart"?: EventHandlerUnion<T, CompositionEvent>;
-    "on:compositionupdate"?: EventHandlerUnion<T, CompositionEvent>;
-    "on:focusout"?: EventHandlerUnion<T, FocusEvent>;
-    "on:focusin"?: EventHandlerUnion<T, FocusEvent>;
-    "on:encrypted"?: EventHandlerUnion<T, Event>;
-    "on:dragexit"?: EventHandlerUnion<T, DragEvent>;
+    "on:copy"?: EventHandlerWithOptionsUnion<T, ClipboardEvent>;
+    "on:cut"?: EventHandlerWithOptionsUnion<T, ClipboardEvent>;
+    "on:paste"?: EventHandlerWithOptionsUnion<T, ClipboardEvent>;
+    "on:compositionend"?: EventHandlerWithOptionsUnion<T, CompositionEvent>;
+    "on:compositionstart"?: EventHandlerWithOptionsUnion<T, CompositionEvent>;
+    "on:compositionupdate"?: EventHandlerWithOptionsUnion<T, CompositionEvent>;
+    "on:focusout"?: EventHandlerWithOptionsUnion<T, FocusEvent>;
+    "on:focusin"?: EventHandlerWithOptionsUnion<T, FocusEvent>;
+    "on:encrypted"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:dragexit"?: EventHandlerWithOptionsUnion<T, DragEvent>;
   }
   interface CustomEventHandlersCamelCase<T> {
     onAbort?: EventHandlerUnion<T, Event>;
@@ -344,85 +344,85 @@ export namespace JSX {
     onwheel?: EventHandlerUnion<T, WheelEvent>;
   }
   interface CustomEventHandlersNamespaced<T> {
-    "on:abort"?: EventHandlerUnion<T, Event>;
-    "on:animationend"?: EventHandlerUnion<T, AnimationEvent>;
-    "on:animationiteration"?: EventHandlerUnion<T, AnimationEvent>;
-    "on:animationstart"?: EventHandlerUnion<T, AnimationEvent>;
-    "on:auxclick"?: EventHandlerUnion<T, MouseEvent>;
-    "on:beforeinput"?: EventHandlerUnion<T, InputEvent>;
-    "on:beforetoggle"?: EventHandlerUnion<T, ToggleEvent>;
-    "on:blur"?: EventHandlerUnion<T, FocusEvent>;
-    "on:canplay"?: EventHandlerUnion<T, Event>;
-    "on:canplaythrough"?: EventHandlerUnion<T, Event>;
-    "on:change"?: EventHandlerUnion<T, Event>;
-    "on:click"?: EventHandlerUnion<T, MouseEvent>;
-    "on:contextmenu"?: EventHandlerUnion<T, MouseEvent>;
-    "on:dblclick"?: EventHandlerUnion<T, MouseEvent>;
-    "on:drag"?: EventHandlerUnion<T, DragEvent>;
-    "on:dragend"?: EventHandlerUnion<T, DragEvent>;
-    "on:dragenter"?: EventHandlerUnion<T, DragEvent>;
-    "on:dragleave"?: EventHandlerUnion<T, DragEvent>;
-    "on:dragover"?: EventHandlerUnion<T, DragEvent>;
-    "on:dragstart"?: EventHandlerUnion<T, DragEvent>;
-    "on:drop"?: EventHandlerUnion<T, DragEvent>;
-    "on:durationchange"?: EventHandlerUnion<T, Event>;
-    "on:emptied"?: EventHandlerUnion<T, Event>;
-    "on:ended"?: EventHandlerUnion<T, Event>;
-    "on:error"?: EventHandlerUnion<T, Event>;
-    "on:focus"?: EventHandlerUnion<T, FocusEvent>;
-    "on:gotpointercapture"?: EventHandlerUnion<T, PointerEvent>;
-    "on:input"?: EventHandlerUnion<T, InputEvent>;
-    "on:invalid"?: EventHandlerUnion<T, Event>;
-    "on:keydown"?: EventHandlerUnion<T, KeyboardEvent>;
-    "on:keypress"?: EventHandlerUnion<T, KeyboardEvent>;
-    "on:keyup"?: EventHandlerUnion<T, KeyboardEvent>;
-    "on:load"?: EventHandlerUnion<T, Event>;
-    "on:loadeddata"?: EventHandlerUnion<T, Event>;
-    "on:loadedmetadata"?: EventHandlerUnion<T, Event>;
-    "on:loadstart"?: EventHandlerUnion<T, Event>;
-    "on:lostpointercapture"?: EventHandlerUnion<T, PointerEvent>;
-    "on:mousedown"?: EventHandlerUnion<T, MouseEvent>;
-    "on:mouseenter"?: EventHandlerUnion<T, MouseEvent>;
-    "on:mouseleave"?: EventHandlerUnion<T, MouseEvent>;
-    "on:mousemove"?: EventHandlerUnion<T, MouseEvent>;
-    "on:mouseout"?: EventHandlerUnion<T, MouseEvent>;
-    "on:mouseover"?: EventHandlerUnion<T, MouseEvent>;
-    "on:mouseup"?: EventHandlerUnion<T, MouseEvent>;
-    "on:pause"?: EventHandlerUnion<T, Event>;
-    "on:play"?: EventHandlerUnion<T, Event>;
-    "on:playing"?: EventHandlerUnion<T, Event>;
-    "on:pointercancel"?: EventHandlerUnion<T, PointerEvent>;
-    "on:pointerdown"?: EventHandlerUnion<T, PointerEvent>;
-    "on:pointerenter"?: EventHandlerUnion<T, PointerEvent>;
-    "on:pointerleave"?: EventHandlerUnion<T, PointerEvent>;
-    "on:pointermove"?: EventHandlerUnion<T, PointerEvent>;
-    "on:pointerout"?: EventHandlerUnion<T, PointerEvent>;
-    "on:pointerover"?: EventHandlerUnion<T, PointerEvent>;
-    "on:pointerup"?: EventHandlerUnion<T, PointerEvent>;
-    "on:progress"?: EventHandlerUnion<T, Event>;
-    "on:ratechange"?: EventHandlerUnion<T, Event>;
-    "on:reset"?: EventHandlerUnion<T, Event>;
-    "on:scroll"?: EventHandlerUnion<T, Event>;
-    "on:scrollend"?: EventHandlerUnion<T, Event>;
-    "on:seeked"?: EventHandlerUnion<T, Event>;
-    "on:seeking"?: EventHandlerUnion<T, Event>;
-    "on:select"?: EventHandlerUnion<T, UIEvent>;
-    "on:stalled"?: EventHandlerUnion<T, Event>;
-    "on:submit"?: EventHandlerUnion<T, SubmitEvent>;
-    "on:suspend"?: EventHandlerUnion<T, Event>;
-    "on:timeupdate"?: EventHandlerUnion<T, Event>;
-    "on:toggle"?: EventHandlerUnion<T, ToggleEvent>;
-    "on:touchcancel"?: EventHandlerUnion<T, TouchEvent>;
-    "on:touchend"?: EventHandlerUnion<T, TouchEvent>;
-    "on:touchmove"?: EventHandlerUnion<T, TouchEvent>;
-    "on:touchstart"?: EventHandlerUnion<T, TouchEvent>;
-    "on:transitionstart"?: EventHandlerUnion<T, TransitionEvent>;
-    "on:transitionend"?: EventHandlerUnion<T, TransitionEvent>;
-    "on:transitionrun"?: EventHandlerUnion<T, TransitionEvent>;
-    "on:transitioncancel"?: EventHandlerUnion<T, TransitionEvent>;
-    "on:volumechange"?: EventHandlerUnion<T, Event>;
-    "on:waiting"?: EventHandlerUnion<T, Event>;
-    "on:wheel"?: EventHandlerUnion<T, WheelEvent>;
+    "on:abort"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:animationend"?: EventHandlerWithOptionsUnion<T, AnimationEvent>;
+    "on:animationiteration"?: EventHandlerWithOptionsUnion<T, AnimationEvent>;
+    "on:animationstart"?: EventHandlerWithOptionsUnion<T, AnimationEvent>;
+    "on:auxclick"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:beforeinput"?: EventHandlerWithOptionsUnion<T, InputEvent>;
+    "on:beforetoggle"?: EventHandlerWithOptionsUnion<T, ToggleEvent>;
+    "on:blur"?: EventHandlerWithOptionsUnion<T, FocusEvent>;
+    "on:canplay"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:canplaythrough"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:change"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:click"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:contextmenu"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:dblclick"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:drag"?: EventHandlerWithOptionsUnion<T, DragEvent>;
+    "on:dragend"?: EventHandlerWithOptionsUnion<T, DragEvent>;
+    "on:dragenter"?: EventHandlerWithOptionsUnion<T, DragEvent>;
+    "on:dragleave"?: EventHandlerWithOptionsUnion<T, DragEvent>;
+    "on:dragover"?: EventHandlerWithOptionsUnion<T, DragEvent>;
+    "on:dragstart"?: EventHandlerWithOptionsUnion<T, DragEvent>;
+    "on:drop"?: EventHandlerWithOptionsUnion<T, DragEvent>;
+    "on:durationchange"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:emptied"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:ended"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:error"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:focus"?: EventHandlerWithOptionsUnion<T, FocusEvent>;
+    "on:gotpointercapture"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:input"?: EventHandlerWithOptionsUnion<T, InputEvent>;
+    "on:invalid"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:keydown"?: EventHandlerWithOptionsUnion<T, KeyboardEvent>;
+    "on:keypress"?: EventHandlerWithOptionsUnion<T, KeyboardEvent>;
+    "on:keyup"?: EventHandlerWithOptionsUnion<T, KeyboardEvent>;
+    "on:load"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:loadeddata"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:loadedmetadata"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:loadstart"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:lostpointercapture"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:mousedown"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:mouseenter"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:mouseleave"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:mousemove"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:mouseout"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:mouseover"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:mouseup"?: EventHandlerWithOptionsUnion<T, MouseEvent>;
+    "on:pause"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:play"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:playing"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:pointercancel"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:pointerdown"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:pointerenter"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:pointerleave"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:pointermove"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:pointerout"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:pointerover"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:pointerup"?: EventHandlerWithOptionsUnion<T, PointerEvent>;
+    "on:progress"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:ratechange"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:reset"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:scroll"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:scrollend"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:seeked"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:seeking"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:select"?: EventHandlerWithOptionsUnion<T, UIEvent>;
+    "on:stalled"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:submit"?: EventHandlerWithOptionsUnion<T, SubmitEvent>;
+    "on:suspend"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:timeupdate"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:toggle"?: EventHandlerWithOptionsUnion<T, ToggleEvent>;
+    "on:touchcancel"?: EventHandlerWithOptionsUnion<T, TouchEvent>;
+    "on:touchend"?: EventHandlerWithOptionsUnion<T, TouchEvent>;
+    "on:touchmove"?: EventHandlerWithOptionsUnion<T, TouchEvent>;
+    "on:touchstart"?: EventHandlerWithOptionsUnion<T, TouchEvent>;
+    "on:transitionstart"?: EventHandlerWithOptionsUnion<T, TransitionEvent>;
+    "on:transitionend"?: EventHandlerWithOptionsUnion<T, TransitionEvent>;
+    "on:transitionrun"?: EventHandlerWithOptionsUnion<T, TransitionEvent>;
+    "on:transitioncancel"?: EventHandlerWithOptionsUnion<T, TransitionEvent>;
+    "on:volumechange"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:waiting"?: EventHandlerWithOptionsUnion<T, Event>;
+    "on:wheel"?: EventHandlerWithOptionsUnion<T, WheelEvent>;
   }
 
   interface CSSProperties extends csstype.PropertiesHyphen {
diff --git a/packages/dom-expressions/src/jsx.d.ts b/packages/dom-expressions/src/jsx.d.ts
index b2e6a2ef..561ee68d 100644
--- a/packages/dom-expressions/src/jsx.d.ts
+++ b/packages/dom-expressions/src/jsx.d.ts
@@ -41,18 +41,14 @@ export namespace JSX {
   }
   type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
 
-  interface EventHandlerWithOptions<T, E extends Event> extends AddEventListenerOptions {
-    handleEvent: (
-      e: E & {
-        currentTarget: T;
-        target: Element;
-      }
-    ) => void;
+  interface EventHandlerWithOptions<T, E extends Event, EHandler = EventHandler<T, E>>
+      extends AddEventListenerOptions {
+    handleEvent: EHandler;
   }
 
-  type CustomEventHandlerUnion<T, E extends Event> =
-    | EventHandler<T, E>
-    | EventHandlerWithOptions<T, E>;
+  type EventHandlerWithOptionsUnion<T, E extends Event, EHandler = EventHandler<T, E>> =
+    | EHandler
+    | EventHandlerWithOptions<T, E, EHandler>;
 
   interface InputEventHandler<T, E extends InputEvent> {
     (
@@ -188,7 +184,7 @@ export namespace JSX {
     [Key in keyof ExplicitBoolAttributes as `bool:${Key}`]?: ExplicitBoolAttributes[Key];
   };
   type OnAttributes<T> = {
-    [Key in keyof CustomEvents as `on:${Key}`]?: CustomEventHandlerUnion<T, CustomEvents[Key]>;
+    [Key in keyof CustomEvents as `on:${Key}`]?: EventHandlerWithOptionsUnion<T, CustomEvents[Key]>;
   };
   type OnCaptureAttributes<T> = {
     [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<
@@ -235,16 +231,18 @@ export namespace JSX {
     onencrypted?: EventHandlerUnion<T, Event> | undefined;
     ondragexit?: EventHandlerUnion<T, DragEvent> | undefined;
     // lower case events
-    "on:copy"?: EventHandlerUnion<T, ClipboardEvent> | undefined;
-    "on:cut"?: EventHandlerUnion<T, ClipboardEvent> | undefined;
-    "on:paste"?: EventHandlerUnion<T, ClipboardEvent> | undefined;
-    "on:compositionend"?: EventHandlerUnion<T, CompositionEvent> | undefined;
-    "on:compositionstart"?: EventHandlerUnion<T, CompositionEvent> | undefined;
-    "on:compositionupdate"?: EventHandlerUnion<T, CompositionEvent> | undefined;
-    "on:focusout"?: FocusEventHandlerUnion<T, FocusEvent> | undefined;
-    "on:focusin"?: FocusEventHandlerUnion<T, FocusEvent> | undefined;
-    "on:encrypted"?: EventHandlerUnion<T, Event> | undefined;
-    "on:dragexit"?: EventHandlerUnion<T, DragEvent> | undefined;
+    "on:copy"?: EventHandlerWithOptionsUnion<T, ClipboardEvent> | undefined;
+    "on:cut"?: EventHandlerWithOptionsUnion<T, ClipboardEvent> | undefined;
+    "on:paste"?: EventHandlerWithOptionsUnion<T, ClipboardEvent> | undefined;
+    "on:compositionend"?: EventHandlerWithOptionsUnion<T, CompositionEvent> | undefined;
+    "on:compositionstart"?: EventHandlerWithOptionsUnion<T, CompositionEvent> | undefined;
+    "on:compositionupdate"?: EventHandlerWithOptionsUnion<T, CompositionEvent> | undefined;
+    "on:focusout"?:
+      EventHandlerWithOptionsUnion<T, FocusEvent, FocusEventHandler<T, FocusEvent>> | undefined;
+    "on:focusin"?:
+      EventHandlerWithOptionsUnion<T, FocusEvent, FocusEventHandler<T, FocusEvent>> | undefined;
+    "on:encrypted"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:dragexit"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
   }
   interface CustomEventHandlersCamelCase<T> {
     onAbort?: EventHandlerUnion<T, Event> | undefined;
@@ -410,85 +408,89 @@ export namespace JSX {
     onwheel?: EventHandlerUnion<T, WheelEvent> | undefined;
   }
   interface CustomEventHandlersNamespaced<T> {
-    "on:abort"?: EventHandlerUnion<T, Event> | undefined;
-    "on:animationend"?: EventHandlerUnion<T, AnimationEvent> | undefined;
-    "on:animationiteration"?: EventHandlerUnion<T, AnimationEvent> | undefined;
-    "on:animationstart"?: EventHandlerUnion<T, AnimationEvent> | undefined;
-    "on:auxclick"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:beforeinput"?: InputEventHandlerUnion<T, InputEvent> | undefined;
-    "on:beforetoggle"?: EventHandlerUnion<T, ToggleEvent> | undefined;
-    "on:blur"?: FocusEventHandlerUnion<T, FocusEvent> | undefined;
-    "on:canplay"?: EventHandlerUnion<T, Event> | undefined;
-    "on:canplaythrough"?: EventHandlerUnion<T, Event> | undefined;
-    "on:change"?: ChangeEventHandlerUnion<T, Event> | undefined;
-    "on:click"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:contextmenu"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:dblclick"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:drag"?: EventHandlerUnion<T, DragEvent> | undefined;
-    "on:dragend"?: EventHandlerUnion<T, DragEvent> | undefined;
-    "on:dragenter"?: EventHandlerUnion<T, DragEvent> | undefined;
-    "on:dragleave"?: EventHandlerUnion<T, DragEvent> | undefined;
-    "on:dragover"?: EventHandlerUnion<T, DragEvent> | undefined;
-    "on:dragstart"?: EventHandlerUnion<T, DragEvent> | undefined;
-    "on:drop"?: EventHandlerUnion<T, DragEvent> | undefined;
-    "on:durationchange"?: EventHandlerUnion<T, Event> | undefined;
-    "on:emptied"?: EventHandlerUnion<T, Event> | undefined;
-    "on:ended"?: EventHandlerUnion<T, Event> | undefined;
-    "on:error"?: EventHandlerUnion<T, Event> | undefined;
-    "on:focus"?: FocusEventHandlerUnion<T, FocusEvent> | undefined;
-    "on:gotpointercapture"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:input"?: InputEventHandlerUnion<T, InputEvent> | undefined;
-    "on:invalid"?: EventHandlerUnion<T, Event> | undefined;
-    "on:keydown"?: EventHandlerUnion<T, KeyboardEvent> | undefined;
-    "on:keypress"?: EventHandlerUnion<T, KeyboardEvent> | undefined;
-    "on:keyup"?: EventHandlerUnion<T, KeyboardEvent> | undefined;
-    "on:load"?: EventHandlerUnion<T, Event> | undefined;
-    "on:loadeddata"?: EventHandlerUnion<T, Event> | undefined;
-    "on:loadedmetadata"?: EventHandlerUnion<T, Event> | undefined;
-    "on:loadstart"?: EventHandlerUnion<T, Event> | undefined;
-    "on:lostpointercapture"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:mousedown"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:mouseenter"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:mouseleave"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:mousemove"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:mouseout"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:mouseover"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:mouseup"?: EventHandlerUnion<T, MouseEvent> | undefined;
-    "on:pause"?: EventHandlerUnion<T, Event> | undefined;
-    "on:play"?: EventHandlerUnion<T, Event> | undefined;
-    "on:playing"?: EventHandlerUnion<T, Event> | undefined;
-    "on:pointercancel"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:pointerdown"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:pointerenter"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:pointerleave"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:pointermove"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:pointerout"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:pointerover"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:pointerup"?: EventHandlerUnion<T, PointerEvent> | undefined;
-    "on:progress"?: EventHandlerUnion<T, ProgressEvent> | undefined;
-    "on:ratechange"?: EventHandlerUnion<T, Event> | undefined;
-    "on:reset"?: EventHandlerUnion<T, Event> | undefined;
-    "on:scroll"?: EventHandlerUnion<T, Event> | undefined;
-    "on:scrollend"?: EventHandlerUnion<T, Event> | undefined;
-    "on:seeked"?: EventHandlerUnion<T, Event> | undefined;
-    "on:seeking"?: EventHandlerUnion<T, Event> | undefined;
-    "on:select"?: EventHandlerUnion<T, Event> | undefined;
-    "on:stalled"?: EventHandlerUnion<T, Event> | undefined;
-    "on:submit"?: EventHandlerUnion<T, SubmitEvent> | undefined;
-    "on:suspend"?: EventHandlerUnion<T, Event> | undefined;
-    "on:timeupdate"?: EventHandlerUnion<T, Event> | undefined;
-    "on:toggle"?: EventHandlerUnion<T, ToggleEvent> | undefined;
-    "on:touchcancel"?: EventHandlerUnion<T, TouchEvent> | undefined;
-    "on:touchend"?: EventHandlerUnion<T, TouchEvent> | undefined;
-    "on:touchmove"?: EventHandlerUnion<T, TouchEvent> | undefined;
-    "on:touchstart"?: EventHandlerUnion<T, TouchEvent> | undefined;
-    "on:transitionstart"?: EventHandlerUnion<T, TransitionEvent> | undefined;
-    "on:transitionend"?: EventHandlerUnion<T, TransitionEvent> | undefined;
-    "on:transitionrun"?: EventHandlerUnion<T, TransitionEvent> | undefined;
-    "on:transitioncancel"?: EventHandlerUnion<T, TransitionEvent> | undefined;
-    "on:volumechange"?: EventHandlerUnion<T, Event> | undefined;
-    "on:waiting"?: EventHandlerUnion<T, Event> | undefined;
-    "on:wheel"?: EventHandlerUnion<T, WheelEvent> | undefined;
+    "on:abort"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:animationend"?: EventHandlerWithOptionsUnion<T, AnimationEvent> | undefined;
+    "on:animationiteration"?: EventHandlerWithOptionsUnion<T, AnimationEvent> | undefined;
+    "on:animationstart"?: EventHandlerWithOptionsUnion<T, AnimationEvent> | undefined;
+    "on:auxclick"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:beforeinput"?:
+      EventHandlerWithOptionsUnion<T, InputEvent, InputEventHandler<T, InputEvent>> | undefined;
+    "on:beforetoggle"?: EventHandlerWithOptionsUnion<T, ToggleEvent> | undefined;
+    "on:blur"?:
+      EventHandlerWithOptionsUnion<T, FocusEvent, FocusEventHandler<T, FocusEvent>> | undefined;
+    "on:canplay"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:canplaythrough"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:change"?: EventHandlerWithOptionsUnion<T, Event, ChangeEventHandler<T, Event>> | undefined;
+    "on:click"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:contextmenu"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:dblclick"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:drag"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
+    "on:dragend"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
+    "on:dragenter"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
+    "on:dragleave"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
+    "on:dragover"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
+    "on:dragstart"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
+    "on:drop"?: EventHandlerWithOptionsUnion<T, DragEvent> | undefined;
+    "on:durationchange"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:emptied"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:ended"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:error"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:focus"?:
+      EventHandlerWithOptionsUnion<T, FocusEvent, FocusEventHandler<T, FocusEvent>> | undefined;
+    "on:gotpointercapture"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:input"?:
+      EventHandlerWithOptionsUnion<T, InputEvent, InputEventHandler<T, InputEvent>> | undefined;
+    "on:invalid"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:keydown"?: EventHandlerWithOptionsUnion<T, KeyboardEvent> | undefined;
+    "on:keypress"?: EventHandlerWithOptionsUnion<T, KeyboardEvent> | undefined;
+    "on:keyup"?: EventHandlerWithOptionsUnion<T, KeyboardEvent> | undefined;
+    "on:load"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:loadeddata"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:loadedmetadata"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:loadstart"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:lostpointercapture"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:mousedown"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:mouseenter"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:mouseleave"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:mousemove"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:mouseout"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:mouseover"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:mouseup"?: EventHandlerWithOptionsUnion<T, MouseEvent> | undefined;
+    "on:pause"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:play"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:playing"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:pointercancel"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:pointerdown"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:pointerenter"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:pointerleave"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:pointermove"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:pointerout"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:pointerover"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:pointerup"?: EventHandlerWithOptionsUnion<T, PointerEvent> | undefined;
+    "on:progress"?: EventHandlerWithOptionsUnion<T, ProgressEvent> | undefined;
+    "on:ratechange"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:reset"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:scroll"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:scrollend"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:seeked"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:seeking"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:select"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:stalled"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:submit"?: EventHandlerWithOptionsUnion<T, SubmitEvent> | undefined;
+    "on:suspend"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:timeupdate"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:toggle"?: EventHandlerWithOptionsUnion<T, ToggleEvent> | undefined;
+    "on:touchcancel"?: EventHandlerWithOptionsUnion<T, TouchEvent> | undefined;
+    "on:touchend"?: EventHandlerWithOptionsUnion<T, TouchEvent> | undefined;
+    "on:touchmove"?: EventHandlerWithOptionsUnion<T, TouchEvent> | undefined;
+    "on:touchstart"?: EventHandlerWithOptionsUnion<T, TouchEvent> | undefined;
+    "on:transitionstart"?: EventHandlerWithOptionsUnion<T, TransitionEvent> | undefined;
+    "on:transitionend"?: EventHandlerWithOptionsUnion<T, TransitionEvent> | undefined;
+    "on:transitionrun"?: EventHandlerWithOptionsUnion<T, TransitionEvent> | undefined;
+    "on:transitioncancel"?: EventHandlerWithOptionsUnion<T, TransitionEvent> | undefined;
+    "on:volumechange"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:waiting"?: EventHandlerWithOptionsUnion<T, Event> | undefined;
+    "on:wheel"?: EventHandlerWithOptionsUnion<T, WheelEvent> | undefined;
   }
 
   interface CSSProperties extends csstype.PropertiesHyphen {

From c9bdad0b32ccc03598eb1936b72183cbf3399b16 Mon Sep 17 00:00:00 2001
From: TPReal <tpreal@gmail.com>
Date: Sat, 19 Oct 2024 15:54:07 +0200
Subject: [PATCH 3/3] Further improved the JSX event handler attributes types.

---
 packages/dom-expressions/src/jsx.d.ts | 67 ++++++---------------------
 1 file changed, 15 insertions(+), 52 deletions(-)

diff --git a/packages/dom-expressions/src/jsx.d.ts b/packages/dom-expressions/src/jsx.d.ts
index 561ee68d..c211e970 100644
--- a/packages/dom-expressions/src/jsx.d.ts
+++ b/packages/dom-expressions/src/jsx.d.ts
@@ -29,24 +29,29 @@ export namespace JSX {
     ): void;
   }
 
-  interface BoundEventHandler<T, E extends Event> {
+  interface BoundEventHandler<
+      T,
+      E extends Event,
+      EHandler extends EventHandler<T, any> = EventHandler<T, E>,
+  > {
     0: (
       data: any,
-      e: E & {
-        currentTarget: T;
-        target: DOMElement;
-      }
+      ...e: Parameters<EHandler>,
     ) => void;
     1: any;
   }
-  type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
+  type EventHandlerUnion<
+    T,
+    E extends Event,
+    EHandler extends EventHandler<T, any> = EventHandler<T, E>,
+  > = EHandler | BoundEventHandler<T, E, EHandler>;
 
   interface EventHandlerWithOptions<T, E extends Event, EHandler = EventHandler<T, E>>
       extends AddEventListenerOptions {
     handleEvent: EHandler;
   }
 
-  type EventHandlerWithOptionsUnion<T, E extends Event, EHandler = EventHandler<T, E>> =
+  type EventHandlerWithOptionsUnion<T, E extends Event, EHandler extends EventHandler<T, any> = EventHandler<T, E>> =
     | EHandler
     | EventHandlerWithOptions<T, E, EHandler>;
 
@@ -60,21 +65,7 @@ export namespace JSX {
       }
     ): void;
   }
-  interface BoundInputEventHandler<T, E extends InputEvent> {
-    0: (
-      data: any,
-      e: E & {
-        currentTarget: T;
-        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-          ? T
-          : DOMElement;
-      }
-    ) => void;
-    1: any;
-  }
-  type InputEventHandlerUnion<T, E extends InputEvent> =
-    | InputEventHandler<T, E>
-    | BoundInputEventHandler<T, E>;
+  type InputEventHandlerUnion<T, E extends InputEvent> = EventHandlerUnion<T, E, InputEventHandler<T, E>>;
 
   interface ChangeEventHandler<T, E extends Event> {
     (
@@ -86,21 +77,7 @@ export namespace JSX {
       }
     ): void;
   }
-  interface BoundChangeEventHandler<T, E extends Event> {
-    0: (
-      data: any,
-      e: E & {
-        currentTarget: T;
-        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-          ? T
-          : DOMElement;
-      }
-    ) => void;
-    1: any;
-  }
-  type ChangeEventHandlerUnion<T, E extends Event> =
-    | ChangeEventHandler<T, E>
-    | BoundChangeEventHandler<T, E>;
+  type ChangeEventHandlerUnion<T, E extends Event> = EventHandlerUnion<T, E, ChangeEventHandler<T, E>>;
 
   interface FocusEventHandler<T, E extends FocusEvent> {
     (
@@ -112,21 +89,7 @@ export namespace JSX {
       }
     ): void;
   }
-  interface BoundFocusEventHandler<T, E extends FocusEvent> {
-    0: (
-      data: any,
-      e: E & {
-        currentTarget: T;
-        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-          ? T
-          : DOMElement;
-      }
-    ) => void;
-    1: any;
-  }
-  type FocusEventHandlerUnion<T, E extends FocusEvent> =
-    | FocusEventHandler<T, E>
-    | BoundFocusEventHandler<T, E>;
+  type FocusEventHandlerUnion<T, E extends FocusEvent> = EventHandlerUnion<T, E, FocusEventHandler<T, E>>;
 
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {