Dev/listener multiplexer

packages/yew-macro/src/html_tree/html_element.rs

@@ -269,7 +269,7 @@ impl ToTokens for HtmlElement {
         };
 
         let listeners = if listeners.is_empty() {
-            quote! { ::std::vec![] }
+            quote! { ::yew::virtual_dom::listeners::Listeners::None }
         } else {
             let listeners_it = listeners.iter().map(|Prop { label, value, .. }| {
                 let name = &label.name;
@@ -278,7 +278,11 @@ impl ToTokens for HtmlElement {
                 }
             });
 
-            quote! { ::std::vec![#(#listeners_it),*].into_iter().flatten().collect() }
+            quote! {
+                ::yew::virtual_dom::listeners::Listeners::Pending(
+                    ::std::boxed::Box::new([#(#listeners_it),*])
+                )
+            }
         };
 
         // TODO: if none of the children have possibly None expressions or literals as keys, we can

packages/yew-macro/tests/html_macro/element-fail.stderr

@@ -302,69 +302,68 @@ error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<Cow<'stat
              <Option<String> as IntoPropValue<Option<Cow<'static, str>>>>
    = note: required by `into_prop_value`
 
-error[E0277]: expected a `Fn<(MouseEvent,)>` closure, found `{integer}`
+error[E0277]: the trait bound `{integer}: IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not satisfied
    --> $DIR/element-fail.rs:51:28
     |
 51  |       html! { <input onclick=1 /> };
-    |                              ^ expected an `Fn<(MouseEvent,)>` closure, found `{integer}`
+    |                              ^ the trait `IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not implemented for `{integer}`
     |
    ::: $WORKSPACE/packages/yew/src/html/listener/events.rs
     |
-    | / impl_action! {
-3   | |     onabort(name: "abort", event: Event) -> web_sys::Event => |_, event| { event }
-4   | |     onauxclick(name: "auxclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
-5   | |     onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+    | / impl_short! {
+133 | |     onauxclick(MouseEvent)
+134 | |     onclick(MouseEvent)
+135 | |
 ...   |
-102 | |     ontransitionstart(name: "transitionstart", event: TransitionEvent) -> web_sys::TransitionEvent => |_, event| { event }
-103 | | }
+196 | |     ontransitionstart(TransitionEvent)
+197 | | }
     | |_- required by this bound in `yew::html::onclick::Wrapper::__macro_new`
     |
-    = help: the trait `Fn<(MouseEvent,)>` is not implemented for `{integer}`
-    = note: required because of the requirements on the impl of `IntoEventCallback<MouseEvent>` for `{integer}`
+    = help: the following implementations were found:
+              <&'static str as IntoPropValue<Cow<'static, str>>>
+              <&'static str as IntoPropValue<Option<Cow<'static, str>>>>
+              <&'static str as IntoPropValue<Option<String>>>
+              <&'static str as IntoPropValue<String>>
+            and 11 others
 
-error[E0277]: expected a `Fn<(MouseEvent,)>` closure, found `yew::Callback<String>`
+error[E0277]: the trait bound `yew::Callback<String>: IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not satisfied
    --> $DIR/element-fail.rs:52:29
     |
 52  |       html! { <input onclick={Callback::from(|a: String| ())} /> };
-    |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    |                               |
-    |                               expected an implementor of trait `IntoEventCallback<MouseEvent>`
-    |                               help: consider borrowing here: `&Callback::from(|a: String| ())`
+    |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not implemented for `yew::Callback<String>`
     |
    ::: $WORKSPACE/packages/yew/src/html/listener/events.rs
     |
-    | / impl_action! {
-3   | |     onabort(name: "abort", event: Event) -> web_sys::Event => |_, event| { event }
-4   | |     onauxclick(name: "auxclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
-5   | |     onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+    | / impl_short! {
+133 | |     onauxclick(MouseEvent)
+134 | |     onclick(MouseEvent)
+135 | |
 ...   |
-102 | |     ontransitionstart(name: "transitionstart", event: TransitionEvent) -> web_sys::TransitionEvent => |_, event| { event }
-103 | | }
+196 | |     ontransitionstart(TransitionEvent)
+197 | | }
     | |_- required by this bound in `yew::html::onclick::Wrapper::__macro_new`
-    |
-    = note: the trait bound `yew::Callback<String>: IntoEventCallback<MouseEvent>` is not satisfied
-    = note: required because of the requirements on the impl of `IntoEventCallback<MouseEvent>` for `yew::Callback<String>`
 
-error[E0277]: the trait bound `Option<{integer}>: IntoEventCallback<FocusEvent>` is not satisfied
+error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<yew::Callback<FocusEvent>>>` is not satisfied
    --> $DIR/element-fail.rs:53:29
     |
 53  |       html! { <input onfocus={Some(5)} /> };
-    |                               ^^^^^^^ the trait `IntoEventCallback<FocusEvent>` is not implemented for `Option<{integer}>`
+    |                               ^^^^^^^ the trait `IntoPropValue<Option<yew::Callback<FocusEvent>>>` is not implemented for `Option<{integer}>`
     |
    ::: $WORKSPACE/packages/yew/src/html/listener/events.rs
     |
-    | / impl_action! {
-3   | |     onabort(name: "abort", event: Event) -> web_sys::Event => |_, event| { event }
-4   | |     onauxclick(name: "auxclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
-5   | |     onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+    | / impl_short! {
+133 | |     onauxclick(MouseEvent)
+134 | |     onclick(MouseEvent)
+135 | |
 ...   |
-102 | |     ontransitionstart(name: "transitionstart", event: TransitionEvent) -> web_sys::TransitionEvent => |_, event| { event }
-103 | | }
+196 | |     ontransitionstart(TransitionEvent)
+197 | | }
     | |_- required by this bound in `yew::html::onfocus::Wrapper::__macro_new`
     |
     = help: the following implementations were found:
-              <Option<T> as IntoEventCallback<EVENT>>
-              <Option<yew::Callback<EVENT>> as IntoEventCallback<EVENT>>
+              <Option<&'static str> as IntoPropValue<Option<Cow<'static, str>>>>
+              <Option<&'static str> as IntoPropValue<Option<String>>>
+              <Option<String> as IntoPropValue<Option<Cow<'static, str>>>>
 
 error[E0277]: the trait bound `(): IntoPropValue<yew::NodeRef>` is not satisfied
   --> $DIR/element-fail.rs:56:25
@@ -386,28 +385,22 @@ error[E0277]: the trait bound `Option<yew::NodeRef>: IntoPropValue<yew::NodeRef>
              <Option<String> as IntoPropValue<Option<Cow<'static, str>>>>
    = note: required by `into_prop_value`
 
-error[E0277]: expected a `Fn<(MouseEvent,)>` closure, found `yew::Callback<String>`
+error[E0277]: the trait bound `yew::Callback<String>: IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not satisfied
    --> $DIR/element-fail.rs:58:29
     |
 58  |       html! { <input onclick={Callback::from(|a: String| ())} /> };
-    |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    |                               |
-    |                               expected an implementor of trait `IntoEventCallback<MouseEvent>`
-    |                               help: consider borrowing here: `&Callback::from(|a: String| ())`
+    |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not implemented for `yew::Callback<String>`
     |
    ::: $WORKSPACE/packages/yew/src/html/listener/events.rs
     |
-    | / impl_action! {
-3   | |     onabort(name: "abort", event: Event) -> web_sys::Event => |_, event| { event }
-4   | |     onauxclick(name: "auxclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
-5   | |     onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+    | / impl_short! {
+133 | |     onauxclick(MouseEvent)
+134 | |     onclick(MouseEvent)
+135 | |
 ...   |
-102 | |     ontransitionstart(name: "transitionstart", event: TransitionEvent) -> web_sys::TransitionEvent => |_, event| { event }
-103 | | }
+196 | |     ontransitionstart(TransitionEvent)
+197 | | }
     | |_- required by this bound in `yew::html::onclick::Wrapper::__macro_new`
-    |
-    = note: the trait bound `yew::Callback<String>: IntoEventCallback<MouseEvent>` is not satisfied
-    = note: required because of the requirements on the impl of `IntoEventCallback<MouseEvent>` for `yew::Callback<String>`
 
 error[E0277]: the trait bound `NotToString: IntoPropValue<Option<Cow<'static, str>>>` is not satisfied
   --> $DIR/element-fail.rs:60:28

packages/yew/Cargo.toml

@@ -54,6 +54,7 @@ features = [
   "Element",
   "ErrorEvent",
   "Event",
+  "EventInit",
   "EventTarget",
   "File",
   "FileList",
@@ -66,6 +67,7 @@ features = [
   "HtmlSelectElement",
   "HtmlTextAreaElement",
   "InputEvent",
+  "InputEventInit",
   "KeyboardEvent",
   "Location",
   "MessageEvent",

packages/yew/src/callback.rs

@@ -17,8 +17,18 @@ use std::rc::Rc;
 /// </aside>
 /// An `Rc` wrapper is used to make it cloneable.
 pub enum Callback<IN> {
-    /// A callback which can be called multiple times
-    Callback(Rc<dyn Fn(IN)>),
+    /// A callback which can be called multiple times with optional modifier flags
+    Callback {
+        /// A callback which can be called multiple times
+        cb: Rc<dyn Fn(IN)>,
+
+        /// Setting `passive` to [Some] explicitly makes the event listener passive or not.
+        /// Yew sets sane defaults depending on the type of the listener.
+        /// See
+        /// [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
+        passive: Option<bool>,
+    },
+
     /// A callback which can only be called once. The callback will panic if it is
     /// called more than once.
     CallbackOnce(Rc<CallbackOnce<IN>>),
@@ -28,14 +38,20 @@ type CallbackOnce<IN> = RefCell<Option<Box<dyn FnOnce(IN)>>>;
 
 impl<IN, F: Fn(IN) + 'static> From<F> for Callback<IN> {
     fn from(func: F) -> Self {
-        Callback::Callback(Rc::new(func))
+        Callback::Callback {
+            cb: Rc::new(func),
+            passive: None,
+        }
     }
 }
 
 impl<IN> Clone for Callback<IN> {
     fn clone(&self) -> Self {
         match self {
-            Callback::Callback(cb) => Callback::Callback(cb.clone()),
+            Callback::Callback { cb, passive } => Callback::Callback {
+                cb: cb.clone(),
+                passive: *passive,
+            },
             Callback::CallbackOnce(cb) => Callback::CallbackOnce(cb.clone()),
         }
     }
@@ -45,10 +61,16 @@ impl<IN> Clone for Callback<IN> {
 impl<IN> PartialEq for Callback<IN> {
     fn eq(&self, other: &Callback<IN>) -> bool {
         match (&self, &other) {
-            (Callback::Callback(cb), Callback::Callback(other_cb)) => Rc::ptr_eq(cb, other_cb),
             (Callback::CallbackOnce(cb), Callback::CallbackOnce(other_cb)) => {
                 Rc::ptr_eq(cb, other_cb)
             }
+            (
+                Callback::Callback { cb, passive },
+                Callback::Callback {
+                    cb: rhs_cb,
+                    passive: rhs_passive,
+                },
+            ) => Rc::ptr_eq(cb, rhs_cb) && passive == rhs_passive,
             _ => false,
         }
     }
@@ -57,7 +79,7 @@ impl<IN> PartialEq for Callback<IN> {
 impl<IN> fmt::Debug for Callback<IN> {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         let data = match self {
-            Callback::Callback(_) => "Callback<_>",
+            Callback::Callback { .. } => "Callback<_>",
             Callback::CallbackOnce(_) => "CallbackOnce<_>",
         };
 
@@ -69,10 +91,10 @@ impl<IN> Callback<IN> {
     /// This method calls the callback's function.
     pub fn emit(&self, value: IN) {
         match self {
-            Callback::Callback(cb) => cb(value),
+            Callback::Callback { cb, .. } => cb(value),
             Callback::CallbackOnce(rc) => {
                 let cb = rc.replace(None);
-                let f = cb.expect("callback in CallbackOnce has already been used");
+                let f = cb.expect("callback contains `FnOnce` which has already been used");
                 f(value)
             }
         };

packages/yew/src/context.rs

@@ -17,7 +17,7 @@ pub struct ContextProviderProps<T: Clone + PartialEq> {
 /// The context provider component.
 ///
 /// Every child (direct or indirect) of this component may access the context value.
-/// In order to consume contexts, [`ComponentLink::context`][Scope::context] method is used,
+/// In order to consume contexts, [`Scope::context`][Scope::context] method is used,
 /// In function components the `use_context` hook is used.
 #[derive(Debug)]
 pub struct ContextProvider<T: Clone + PartialEq + 'static> {

packages/yew/src/html/component/scope.rs

@@ -255,6 +255,29 @@ impl<COMP: Component> Scope<COMP> {
     /// synchronously schedules a call to the [Component](Component)
     /// interface.
     pub fn callback<F, IN, M>(&self, function: F) -> Callback<IN>
+    where
+        M: Into<COMP::Message>,
+        F: Fn(IN) -> M + 'static,
+    {
+        self.callback_with_passive(None, function)
+    }
+
+    /// Creates a `Callback` which will send a message to the linked
+    /// component's update method when invoked.
+    ///
+    /// Setting `passive` to [Some] explicitly makes the event listener passive or not.
+    /// Yew sets sane defaults depending on the type of the listener.
+    /// See
+    /// [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
+    ///
+    /// Please be aware that currently the result of this callback
+    /// synchronously schedules a call to the [Component](Component)
+    /// interface.
+    pub fn callback_with_passive<F, IN, M>(
+        &self,
+        passive: impl Into<Option<bool>>,
+        function: F,
+    ) -> Callback<IN>
     where
         M: Into<COMP::Message>,
         F: Fn(IN) -> M + 'static,
@@ -264,7 +287,10 @@ impl<COMP: Component> Scope<COMP> {
             let output = function(input);
             scope.send_message(output);
         };
-        closure.into()
+        Callback::Callback {
+            passive: passive.into(),
+            cb: Rc::new(closure),
+        }
     }
 
     /// Creates a `Callback` from an `FnOnce` which will send a message