web: align the rest of events

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/DomApplier.kt

@@ -1,13 +1,11 @@
 package org.jetbrains.compose.web
 
 import androidx.compose.runtime.AbstractApplier
-import org.jetbrains.compose.web.attributes.WrappedEventListener
+import org.jetbrains.compose.web.attributes.SyntheticEventListener
 import org.jetbrains.compose.web.css.StyleHolder
 import org.jetbrains.compose.web.dom.setProperty
 import org.jetbrains.compose.web.dom.setVariable
 import kotlinx.dom.clear
-import org.jetbrains.compose.web.attributes.Options
-import org.jetbrains.compose.web.css.jsObject
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.Node
@@ -46,9 +44,9 @@ external interface EventListenerOptions {
 }
 
 open class DomNodeWrapper(open val node: Node) {
-    private var currentListeners = emptyList<WrappedEventListener<*>>()
+    private var currentListeners = emptyList<SyntheticEventListener<*>>()
 
-    fun updateEventListeners(list: List<WrappedEventListener<*>>) {
+    fun updateEventListeners(list: List<SyntheticEventListener<*>>) {
         val htmlElement = node as? HTMLElement ?: return
 
         currentListeners.forEach {

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt

@@ -1,5 +1,6 @@
 package org.jetbrains.compose.web.attributes
 
+import org.jetbrains.compose.web.events.SyntheticSubmitEvent
 import org.w3c.dom.HTMLAnchorElement
 import org.w3c.dom.HTMLButtonElement
 import org.w3c.dom.HTMLFormElement
@@ -92,6 +93,20 @@ fun AttrsBuilder<HTMLFormElement>.noValidate() =
 fun AttrsBuilder<HTMLFormElement>.target(value: FormTarget) =
     attr("target", value.targetStr)
 
+fun AttrsBuilder<HTMLFormElement>.onSubmit(
+    options: Options = Options.DEFAULT,
+    listener: (SyntheticSubmitEvent) -> Unit
+) {
+    addEventListener(eventName = EventsListenerBuilder.SUBMIT, options = options, listener = listener)
+}
+
+fun AttrsBuilder<HTMLFormElement>.onReset(
+    options: Options = Options.DEFAULT,
+    listener: (SyntheticSubmitEvent) -> Unit
+) {
+    addEventListener(eventName = EventsListenerBuilder.RESET, options = options, listener = listener)
+}
+
 /* Input attributes */
 
 fun AttrsBuilder<HTMLInputElement>.type(value: InputType<*>) =

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt

@@ -1,241 +1,203 @@
 package org.jetbrains.compose.web.attributes
 
 import androidx.compose.web.events.SyntheticDragEvent
+import androidx.compose.web.events.SyntheticEvent
 import androidx.compose.web.events.SyntheticMouseEvent
 import androidx.compose.web.events.SyntheticWheelEvent
-import org.jetbrains.compose.web.events.WrappedClipboardEvent
-import org.jetbrains.compose.web.events.WrappedEvent
-import org.jetbrains.compose.web.events.WrappedFocusEvent
-import org.jetbrains.compose.web.events.WrappedInputEvent
-import org.jetbrains.compose.web.events.WrappedKeyboardEvent
-import org.jetbrains.compose.web.events.WrappedTouchEvent
-import org.jetbrains.compose.web.events.GenericWrappedEvent
+import org.jetbrains.compose.web.events.*
+import org.w3c.dom.HTMLFormElement
+import org.w3c.dom.events.EventTarget
 
 private typealias SyntheticMouseEventListener = (SyntheticMouseEvent) -> Unit
 private typealias SyntheticWheelEventListener = (SyntheticWheelEvent) -> Unit
 private typealias SyntheticDragEventListener = (SyntheticDragEvent) -> Unit
 
 open class EventsListenerBuilder {
 
-    protected val listeners = mutableListOf<WrappedEventListener<*>>()
+    protected val listeners = mutableListOf<SyntheticEventListener<*>>()
 
     /* Mouse Events */
 
-    private fun createMouseEventListener(
-        name: String, options: Options, listener: SyntheticMouseEventListener
-    ): MouseEventListener {
-        return MouseEventListener(
-            event = name,
-            options = options,
-            listener = {
-                listener(SyntheticMouseEvent(it.nativeEvent))
-            }
-        )
-    }
-
-    private fun createMouseWheelEventListener(
-        name: String, options: Options, listener: SyntheticWheelEventListener
-    ): MouseWheelEventListener {
-        return MouseWheelEventListener(
-            event = name,
-            options = options,
-            listener = {
-                listener(SyntheticWheelEvent(it.nativeEvent))
-            }
-        )
-    }
-
     fun onContextMenu(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(CONTEXTMENU, options, listener))
+        listeners.add(MouseEventListener(CONTEXTMENU, options, listener))
     }
 
     fun onClick(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(CLICK, options, listener))
+        listeners.add(MouseEventListener(CLICK, options, listener))
     }
 
     fun onDoubleClick(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(DBLCLICK, options, listener))
+        listeners.add(MouseEventListener(DBLCLICK, options, listener))
     }
 
     fun onMouseDown(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(MOUSEDOWN, options, listener))
+        listeners.add(MouseEventListener(MOUSEDOWN, options, listener))
     }
 
     fun onMouseUp(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(MOUSEUP, options, listener))
+        listeners.add(MouseEventListener(MOUSEUP, options, listener))
     }
 
     fun onMouseEnter(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(MOUSEENTER, options, listener))
+        listeners.add(MouseEventListener(MOUSEENTER, options, listener))
     }
 
     fun onMouseLeave(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(MOUSELEAVE, options, listener))
+        listeners.add(MouseEventListener(MOUSELEAVE, options, listener))
     }
 
     fun onMouseMove(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(MOUSEMOVE, options, listener))
+        listeners.add(MouseEventListener(MOUSEMOVE, options, listener))
     }
 
     fun onMouseOut(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(MOUSEOUT, options, listener))
+        listeners.add(MouseEventListener(MOUSEOUT, options, listener))
     }
 
     fun onMouseOver(options: Options = Options.DEFAULT, listener: SyntheticMouseEventListener) {
-        listeners.add(createMouseEventListener(MOUSEOVER, options, listener))
+        listeners.add(MouseEventListener(MOUSEOVER, options, listener))
     }
 
-    fun onWheel(options: Options = Options.DEFAULT, listener: (SyntheticWheelEvent) -> Unit) {
-        listeners.add(createMouseWheelEventListener(WHEEL, options, listener))
+    fun onWheel(options: Options = Options.DEFAULT, listener: SyntheticWheelEventListener) {
+        listeners.add(MouseWheelEventListener(WHEEL, options, listener))
     }
 
     /* Drag Events */
 
-    private fun createDragEventListener(
-        name: String, options: Options, listener: SyntheticDragEventListener
-    ): DragEventListener {
-        return DragEventListener(
-            event = name,
-            options = options,
-            listener = {
-                listener(SyntheticDragEvent(it.nativeEvent))
-            }
-        )
-    }
-
     fun onDrag(options: Options = Options.DEFAULT, listener: SyntheticDragEventListener) {
-        listeners.add(createDragEventListener(DRAG, options, listener))
+        listeners.add(DragEventListener(DRAG, options, listener))
     }
 
     fun onDrop(options: Options = Options.DEFAULT, listener: SyntheticDragEventListener) {
-        listeners.add(createDragEventListener(DROP, options, listener))
+        listeners.add(DragEventListener(DROP, options, listener))
     }
 
     fun onDragStart(options: Options = Options.DEFAULT, listener: SyntheticDragEventListener) {
-        listeners.add(createDragEventListener(DRAGSTART, options, listener))
+        listeners.add(DragEventListener(DRAGSTART, options, listener))
     }
 
     fun onDragEnd(options: Options = Options.DEFAULT, listener: SyntheticDragEventListener) {
-        listeners.add(createDragEventListener(DRAGEND, options, listener))
+        listeners.add(DragEventListener(DRAGEND, options, listener))
     }
 
     fun onDragOver(options: Options = Options.DEFAULT, listener: SyntheticDragEventListener) {
-        listeners.add(createDragEventListener(DRAGOVER, options, listener))
+        listeners.add(DragEventListener(DRAGOVER, options, listener))
     }
 
     fun onDragEnter(options: Options = Options.DEFAULT, listener: SyntheticDragEventListener) {
-        listeners.add(createDragEventListener(DRAGENTER, options, listener))
+        listeners.add(DragEventListener(DRAGENTER, options, listener))
     }
 
     fun onDragLeave(options: Options = Options.DEFAULT, listener: SyntheticDragEventListener) {
-        listeners.add(createDragEventListener(DRAGLEAVE, options, listener))
+        listeners.add(DragEventListener(DRAGLEAVE, options, listener))
     }
 
     /* End of Drag Events */
 
-    fun onCopy(options: Options = Options.DEFAULT, listener: (WrappedClipboardEvent) -> Unit) {
+    /* Clipboard Events */
+
+    fun onCopy(options: Options = Options.DEFAULT, listener: (SyntheticClipboardEvent) -> Unit) {
         listeners.add(ClipboardEventListener(COPY, options, listener))
     }
 
-    fun onCut(options: Options = Options.DEFAULT, listener: (WrappedClipboardEvent) -> Unit) {
+    fun onCut(options: Options = Options.DEFAULT, listener: (SyntheticClipboardEvent) -> Unit) {
         listeners.add(ClipboardEventListener(CUT, options, listener))
     }
 
-    fun onPaste(options: Options = Options.DEFAULT, listener: (WrappedClipboardEvent) -> Unit) {
+    fun onPaste(options: Options = Options.DEFAULT, listener: (SyntheticClipboardEvent) -> Unit) {
         listeners.add(ClipboardEventListener(PASTE, options, listener))
     }
 
-    fun onGenericInput(
-        options: Options = Options.DEFAULT,
-        listener: (GenericWrappedEvent<*>) -> Unit
-    ) {
-        listeners.add(WrappedEventListener(INPUT, options, listener))
-    }
+    /* End of Clipboard Events */
 
-    fun onChange(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(CHANGE, options, listener))
-    }
+    /* Keyboard Events */
 
-    fun onInvalid(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(INVALID, options, listener))
+    fun onKeyDown(options: Options = Options.DEFAULT, listener: (SyntheticKeyboardEvent) -> Unit) {
+        listeners.add(KeyboardEventListener(KEYDOWN, options, listener))
     }
 
-    fun onSearch(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(SEARCH, options, listener))
+    fun onKeyUp(options: Options = Options.DEFAULT, listener: (SyntheticKeyboardEvent) -> Unit) {
+        listeners.add(KeyboardEventListener(KEYUP, options, listener))
     }
 
-    fun onFocus(options: Options = Options.DEFAULT, listener: (WrappedFocusEvent) -> Unit) {
+    /* End of Keyboard Events */
+
+    /* Focus Events */
+
+    fun onFocus(options: Options = Options.DEFAULT, listener: (SyntheticFocusEvent) -> Unit) {
         listeners.add(FocusEventListener(FOCUS, options, listener))
     }
 
-    fun onBlur(options: Options = Options.DEFAULT, listener: (WrappedFocusEvent) -> Unit) {
+    fun onBlur(options: Options = Options.DEFAULT, listener: (SyntheticFocusEvent) -> Unit) {
         listeners.add(FocusEventListener(BLUR, options, listener))
     }
 
-    fun onFocusIn(options: Options = Options.DEFAULT, listener: (WrappedFocusEvent) -> Unit) {
+    fun onFocusIn(options: Options = Options.DEFAULT, listener: (SyntheticFocusEvent) -> Unit) {
         listeners.add(FocusEventListener(FOCUSIN, options, listener))
     }
 
-    fun onFocusOut(options: Options = Options.DEFAULT, listener: (WrappedFocusEvent) -> Unit) {
+    fun onFocusOut(options: Options = Options.DEFAULT, listener: (SyntheticFocusEvent) -> Unit) {
         listeners.add(FocusEventListener(FOCUSOUT, options, listener))
     }
 
-    fun onKeyDown(options: Options = Options.DEFAULT, listener: (WrappedKeyboardEvent) -> Unit) {
-        listeners.add(KeyboardEventListener(KEYDOWN, options, listener))
-    }
-
-    fun onKeyUp(options: Options = Options.DEFAULT, listener: (WrappedKeyboardEvent) -> Unit) {
-        listeners.add(KeyboardEventListener(KEYUP, options, listener))
-    }
-
-    fun onScroll(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(SCROLL, options, listener))
-    }
+    /* End of Focus Events */
 
-    fun onSelect(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(SELECT, options, listener))
-    }
+    /* Touch Events */
 
-    fun onTouchCancel(options: Options = Options.DEFAULT, listener: (WrappedTouchEvent) -> Unit) {
+    fun onTouchCancel(options: Options = Options.DEFAULT, listener: (SyntheticTouchEvent) -> Unit) {
         listeners.add(TouchEventListener(TOUCHCANCEL, options, listener))
     }
 
-    fun onTouchMove(options: Options = Options.DEFAULT, listener: (WrappedTouchEvent) -> Unit) {
+    fun onTouchMove(options: Options = Options.DEFAULT, listener: (SyntheticTouchEvent) -> Unit) {
         listeners.add(TouchEventListener(TOUCHMOVE, options, listener))
     }
 
-    fun onTouchEnd(options: Options = Options.DEFAULT, listener: (WrappedTouchEvent) -> Unit) {
+    fun onTouchEnd(options: Options = Options.DEFAULT, listener: (SyntheticTouchEvent) -> Unit) {
         listeners.add(TouchEventListener(TOUCHEND, options, listener))
     }
 
-    fun onTouchStart(options: Options = Options.DEFAULT, listener: (WrappedTouchEvent) -> Unit) {
+    fun onTouchStart(options: Options = Options.DEFAULT, listener: (SyntheticTouchEvent) -> Unit) {
         listeners.add(TouchEventListener(TOUCHSTART, options, listener))
     }
 
-    fun onAnimationEnd(options: Options = Options.DEFAULT, listener: (WrappedTouchEvent) -> Unit) {
-        listeners.add(WrappedEventListener(ANIMATIONEND, options, listener))
+    /* End of Touch Events */
+
+    /* Animation Events */
+
+    fun onAnimationEnd(options: Options = Options.DEFAULT, listener: (SyntheticAnimationEvent) -> Unit) {
+        listeners.add(AnimationEventListener(ANIMATIONEND, options, listener))
     }
 
-    fun onAnimationIteration(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(ANIMATIONITERATION, options, listener))
+    fun onAnimationIteration(options: Options = Options.DEFAULT, listener: (SyntheticAnimationEvent) -> Unit) {
+        listeners.add(AnimationEventListener(ANIMATIONITERATION, options, listener))
     }
 
-    fun onAnimationStart(options: Options = Options.DEFAULT, listener: (WrappedEvent) -> Unit) {
-        listeners.add(WrappedEventListener(ANIMATIONSTART, options, listener))
+    fun onAnimationStart(options: Options = Options.DEFAULT, listener: (SyntheticAnimationEvent) -> Unit) {
+        listeners.add(AnimationEventListener(ANIMATIONSTART, options, listener))
     }
 
-    fun onBeforeInput(options: Options = Options.DEFAULT, listener: (WrappedInputEvent) -> Unit) {
-        listeners.add(InputEventListener(BEFOREINPUT, options, listener))
+    /* End of Animation Events */
+
+    fun onScroll(options: Options = Options.DEFAULT, listener: (SyntheticEvent<EventTarget>) -> Unit) {
+        listeners.add(SyntheticEventListener(SCROLL, options, listener))
     }
 
-    fun collectListeners(): List<WrappedEventListener<*>> = listeners
+    fun collectListeners(): List<SyntheticEventListener<*>> = listeners
+
+    fun <T : SyntheticEvent<out EventTarget>> addEventListener(
+        eventName: String,
+        options: Options = Options.DEFAULT,
+        listener: (T) -> Unit
+    ) {
+        listeners.add(SyntheticEventListener(eventName, options, listener))
+    }
 
     fun addEventListener(
         eventName: String,
         options: Options = Options.DEFAULT,
-        listener: (WrappedEvent) -> Unit
+        listener: (SyntheticEvent<EventTarget>) -> Unit
     ) {
-        listeners.add(WrappedEventListener(eventName, options, listener))
+        listeners.add(SyntheticEventListener(eventName, options, listener))
     }
 
     internal fun copyListenersFrom(from: EventsListenerBuilder) {
@@ -282,7 +244,6 @@ open class EventsListenerBuilder {
         const val INPUT = "input"
         const val CHANGE = "change"
         const val INVALID = "invalid"
-        const val SEARCH = "search"
 
         const val DRAG = "drag"
         const val DROP = "drop"
@@ -291,5 +252,8 @@ open class EventsListenerBuilder {
         const val DRAGOVER = "dragover"
         const val DRAGENTER = "dragenter"
         const val DRAGLEAVE = "dragleave"
+
+        const val SUBMIT = "submit"
+        const val RESET = "reset"
     }
 }