Create closure type; allow async event handlers in props; allow short hand event handlers (#2437)

* create closure type; allow async event handlers in props; allow shorthand event handlers

* test forwarding event handlers with the shorthand syntax

* fix clippy

* fix imports in spawn async doctest

examples/calculator_mutable.rs

@@ -89,7 +89,7 @@ fn app() -> Element {
 #[component]
 fn CalculatorKey(name: String, onclick: EventHandler<MouseEvent>, children: Element) -> Element {
     rsx! {
-        button { class: "calculator-key {name}", onclick: move |e| onclick.call(e), {&children} }
+        button { class: "calculator-key {name}", onclick, {children} }
     }
 }
 

examples/rsx_usage.rs

@@ -21,7 +21,7 @@
 //!
 //! ### Events
 //! - Handle events with the "onXYZ" syntax
-//! - Closures can capture their environment with the 'a lifetime
+//! - Closures can capture their environment with the 'static lifetime
 //!
 //!
 //! ### Components

examples/shorthand.rs

@@ -27,12 +27,18 @@ fn app() -> Element {
 }
 
 #[component]
-fn Component(a: i32, b: i32, c: i32, children: Element, onclick: EventHandler) -> Element {
+fn Component(
+    a: i32,
+    b: i32,
+    c: i32,
+    children: Element,
+    onclick: EventHandler<MouseEvent>,
+) -> Element {
     rsx! {
         div { "{a}" }
         div { "{b}" }
         div { "{c}" }
         div { {children} }
-        div { onclick: move |_| onclick.call(()) }
+        div { onclick }
     }
 }

examples/weather_app.rs

@@ -25,7 +25,7 @@ fn app() -> Element {
                 div { class: "flex items-start justify-center flex-row",
                     SearchBox { country }
                     div { class: "flex flex-wrap w-full px-2",
-                        div { class: "bg-gray-900 text-white relative min-w-0 break-words rounded-lg overflow-hidden shadow-sm mb-4 w-full bg-white dark:bg-gray-600",
+                        div { class: "bg-gray-900 text-white relative min-w-0 break-words rounded-lg overflow-hidden shadow-sm mb-4 w-full dark:bg-gray-600",
                             div { class: "px-6 py-6 relative",
                                 if let Some(Ok(weather)) = current_weather.read().as_ref() {
                                     CountryData {
@@ -122,7 +122,7 @@ fn SearchBox(mut country: Signal<WeatherLocation>) -> Element {
                         placeholder: "Country name",
                         "type": "text",
                         autofocus: true,
-                        oninput: move |e| input.set(e.value())
+                        oninput: move |e: FormEvent| input.set(e.value())
                     }
                     svg {
                         class: "w-4 h-4 absolute left-2.5 top-3.5",