Rework Event System

Cargo.toml

@@ -60,7 +60,7 @@ dioxus-core = { path = "packages/core", version = "0.4.2" }
 dioxus-core-macro = { path = "packages/core-macro", version = "0.4.0"  }
 dioxus-router = { path = "packages/router", version = "0.4.1"  }
 dioxus-router-macro = { path = "packages/router-macro", version = "0.4.1" }
-dioxus-html = { path = "packages/html", version = "0.4.0"  }
+dioxus-html = { path = "packages/html", default-features = false, version = "0.4.0"  }
 dioxus-hooks = { path = "packages/hooks", version = "0.4.0" }
 dioxus-web = { path = "packages/web", version = "0.4.0"  }
 dioxus-ssr = { path = "packages/ssr", version = "0.4.0"  }

docs/guide/examples/hello_world_tui_no_ctrl_c.rs

@@ -1,7 +1,7 @@
 // todo remove deprecated
 #![allow(non_snake_case, deprecated)]
 
-use dioxus::events::{KeyCode, KeyboardEvent};
+use dioxus::events::KeyboardEvent;
 use dioxus::prelude::*;
 use dioxus_tui::TuiContext;
 
@@ -26,7 +26,7 @@ fn App(cx: Scope) -> Element {
             background_color: "red",
             justify_content: "center",
             align_items: "center",
-            onkeydown: move |k: KeyboardEvent| if let KeyCode::Q = k.key_code {
+            onkeydown: move |k: KeyboardEvent| if let Code::KeyQ = k.code() {
                 tui_ctx.quit();
             },
 

docs/guide/examples/input_controlled.rs

@@ -14,7 +14,7 @@ fn App(cx: Scope) -> Element {
             // we tell the component what to render
             value: "{name}",
             // and what to do when the value changes
-            oninput: move |evt| name.set(evt.value.clone()),
+            oninput: move |evt| name.set(evt.value()),
         }
     })
 }

docs/guide/examples/meme_editor.rs

@@ -28,7 +28,7 @@ fn MemeEditor(cx: Scope) -> Element {
             },
             CaptionEditor {
                 caption: caption,
-                on_input: move |event: FormEvent| {caption.set(event.value.clone());},
+                on_input: move |event: FormEvent| {caption.set(event.value());},
             },
         }
     })

docs/guide/examples/meme_editor_dark_mode.rs

@@ -62,7 +62,7 @@ pub fn DarkModeToggle(cx: Scope) -> Element {
         input {
             r#type: "checkbox",
             oninput: move |event| {
-                let is_enabled = event.value == "true";
+                let is_enabled = event.value() == "true";
                 dark_mode.write().0 = is_enabled;
             },
         },
@@ -97,7 +97,7 @@ fn MemeEditor(cx: Scope) -> Element {
             },
             CaptionEditor {
                 caption: caption,
-                on_input: move |event: FormEvent| {caption.set(event.value.clone());},
+                on_input: move |event: FormEvent| {caption.set(event.value().clone());},
             },
         }
     })

docs/guide/examples/rendering_lists.rs

@@ -40,7 +40,7 @@ cx.render(rsx!(
         },
         input {
             value: "{comment_field}",
-            oninput: |event| comment_field.set(event.value.clone()),
+            oninput: |event| comment_field.set(event.value()),
         }
         input {
             r#type: "submit",
@@ -71,7 +71,7 @@ cx.render(rsx!(
         },
         input {
             value: "{comment_field}",
-            oninput: |event| comment_field.set(event.value.clone()),
+            oninput: |event| comment_field.set(event.value()),
         }
         input {
             r#type: "submit",

examples/compose.rs

@@ -73,7 +73,7 @@ fn compose(cx: Scope<ComposeProps>) -> Element {
 
             input {
                 oninput: move |e| {
-                    user_input.set(e.value.clone());
+                    user_input.set(e.value());
                 },
                 value: "{user_input}"
             }

examples/counter.rs

@@ -22,7 +22,7 @@ fn app(cx: Scope) -> Element {
                     input {
                         value: "{counter}",
                         oninput: move |e| {
-                            if let Ok(value) = e.value.parse::<usize>() {
+                            if let Ok(value) = e.value().parse::<usize>() {
                                 counters.make_mut()[i] = value;
                             }
                         }

examples/crm.rs

@@ -119,7 +119,7 @@ fn ClientAdd(cx: Scope) -> Element {
                         placeholder: "First Name…",
                         required: "",
                         value: "{first_name}",
-                        oninput: move |e| first_name.set(e.value.clone())
+                        oninput: move |e| first_name.set(e.value())
                     }
                 }
 
@@ -135,7 +135,7 @@ fn ClientAdd(cx: Scope) -> Element {
                         placeholder: "Last Name…",
                         required: "",
                         value: "{last_name}",
-                        oninput: move |e| last_name.set(e.value.clone())
+                        oninput: move |e| last_name.set(e.value())
                     }
                 }
 
@@ -149,7 +149,7 @@ fn ClientAdd(cx: Scope) -> Element {
                         id: "description",
                         placeholder: "Description…",
                         value: "{description}",
-                        oninput: move |e| description.set(e.value.clone())
+                        oninput: move |e| description.set(e.value())
                     }
                 }
 

examples/file_upload.rs

@@ -16,7 +16,7 @@ fn App(cx: Scope) -> Element {
                 r#type: "checkbox",
                 checked: "{enable_directory_upload}",
                 oninput: move |evt| {
-                    enable_directory_upload.set(evt.value.parse().unwrap());
+                    enable_directory_upload.set(evt.value().parse().unwrap());
                 },
             },
             "Enable directory upload"
@@ -30,7 +30,7 @@ fn App(cx: Scope) -> Element {
             onchange: |evt| {
                 to_owned![files_uploaded];
                 async move {
-                    if let Some(file_engine) = &evt.files {
+                    if let Some(file_engine) = &evt.files() {
                         let files = file_engine.files();
                         for file_name in files {
                             sleep(std::time::Duration::from_secs(1)).await;

examples/form.rs

@@ -14,8 +14,8 @@ fn app(cx: Scope) -> Element {
         div {
             h1 { "Form" }
             form {
-                onsubmit: move |ev| println!("Submitted {:?}", ev.values),
-                oninput: move |ev| println!("Input {:?}", ev.values),
+                onsubmit: move |ev| println!("Submitted {:?}", ev.values()),
+                oninput: move |ev| println!("Input {:?}", ev.values()),
                 input { r#type: "text", name: "username" }
                 input { r#type: "text", name: "full-name" }
                 input { r#type: "password", name: "password" }

examples/login_form.rs

@@ -13,8 +13,8 @@ fn app(cx: Scope) -> Element {
             let resp = reqwest::Client::new()
                 .post("http://localhost:8080/login")
                 .form(&[
-                    ("username", &evt.values["username"]),
-                    ("password", &evt.values["password"]),
+                    ("username", &evt.values()["username"]),
+                    ("password", &evt.values()["password"]),
                 ])
                 .send()
                 .await;

examples/shared_state.rs

@@ -65,7 +65,7 @@ fn DataEditor(cx: Scope, id: usize) -> Element {
 fn DataView(cx: Scope, id: usize) -> Element {
     let cool_data = use_shared_state::<CoolData>(cx).unwrap();
 
-    let oninput = |e: FormEvent| cool_data.write().set(*id, e.value.clone());
+    let oninput = |e: FormEvent| cool_data.write().set(*id, e.value());
 
     let cool_data = cool_data.read();
     let my_data = &cool_data.view(id).unwrap();

examples/textarea.rs

@@ -17,7 +17,7 @@ fn app(cx: Scope) -> Element {
             rows: "10",
             cols: "80",
             value: "{model}",
-            oninput: move |e| model.set(e.value.clone()),
+            oninput: move |e| model.set(e.value().clone()),
         }
     })
 }

examples/todomvc.rs

@@ -66,7 +66,7 @@ pub fn app(cx: Scope<()>) -> Element {
                     value: "{draft}",
                     autofocus: "true",
                     oninput: move |evt| {
-                        draft.set(evt.value.clone());
+                        draft.set(evt.value());
                     },
                     onkeydown: move |evt| {
                         if evt.key() == Key::Enter && !draft.is_empty() {
@@ -176,7 +176,7 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
                     id: "cbg-{todo.id}",
                     checked: "{todo.checked}",
                     oninput: move |evt| {
-                        cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
+                        cx.props.todos.make_mut()[&cx.props.id].checked = evt.value().parse().unwrap();
                     }
                 }
                 label {
@@ -195,7 +195,7 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
                 input {
                     class: "edit",
                     value: "{todo.contents}",
-                    oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
+                    oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value(),
                     autofocus: "true",
                     onfocusout: move |_| is_editing.set(false),
                     onkeydown: move |evt| {

examples/window_zoom.rs

@@ -14,7 +14,7 @@ fn app(cx: Scope) -> Element {
             r#type: "number",
             value: "{level}",
             oninput: |e| {
-                if let Ok(new_zoom) = e.value.parse::<f64>() {
+                if let Ok(new_zoom) = e.value().parse::<f64>() {
                     level.set(new_zoom);
                     window.webview.zoom(new_zoom);
                 }

examples/xss_safety.rs

@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
             input {
                 value: "{contents}",
                 r#type: "text",
-                oninput: move |e| contents.set(e.value.clone()),
+                oninput: move |e| contents.set(e.value()),
             }
         }
     })

packages/core/Cargo.toml

@@ -36,6 +36,7 @@ serde = { version = "1", features = ["derive"], optional = true }
 [dev-dependencies]
 tokio = { workspace = true, features = ["full"] }
 dioxus = { workspace = true }
+dioxus-html = { workspace = true, features = ["serialize"] }
 pretty_assertions = "1.3.0"
 rand = "0.8.5"
 dioxus-ssr = { workspace = true }

packages/core/src/diff.rs

@@ -577,8 +577,7 @@ impl<'b> VirtualDom {
         }
 
         // 4. Compute the LIS of this list
-        let mut lis_sequence = Vec::default();
-        lis_sequence.reserve(new_index_to_old_index.len());
+        let mut lis_sequence = Vec::with_capacity(new_index_to_old_index.len());
 
         let mut predecessors = vec![0; new_index_to_old_index.len()];
         let mut starts = vec![0; new_index_to_old_index.len()];

packages/core/src/events.rs

@@ -28,6 +28,27 @@ pub struct Event<T: 'static + ?Sized> {
 }
 
 impl<T> Event<T> {
+    /// Map the event data to a new type
+    ///
+    /// # Example
+    ///
+    /// ```rust, ignore
+    /// rsx! {
+    ///    button {
+    ///       onclick: move |evt: Event<FormData>| {
+    ///          let data = evt.map(|data| data.value());
+    ///          assert_eq!(data.inner(), "hello world");
+    ///       }
+    ///    }
+    /// }
+    /// ```
+    pub fn map<U: 'static, F: FnOnce(&T) -> U>(&self, f: F) -> Event<U> {
+        Event {
+            data: Rc::new(f(&self.data)),
+            propagates: self.propagates.clone(),
+        }
+    }
+
     /// Prevent this event from continuing to bubble up the tree to parent elements.
     ///
     /// # Example

packages/core/tests/lifecycle.rs

@@ -4,6 +4,7 @@
 //! Tests for the lifecycle of components.
 use dioxus::core::{ElementId, Mutation::*};
 use dioxus::prelude::*;
+use dioxus_html::SerializedHtmlEventConverter;
 use std::rc::Rc;
 use std::sync::{Arc, Mutex};
 
@@ -39,6 +40,7 @@ fn manual_diffing() {
 
 #[test]
 fn events_generate() {
+    set_event_converter(Box::new(SerializedHtmlEventConverter));
     fn app(cx: Scope) -> Element {
         let count = cx.use_hook(|| 0);
 
@@ -56,7 +58,12 @@ fn events_generate() {
     let mut dom = VirtualDom::new(app);
     _ = dom.rebuild();
 
-    dom.handle_event("click", Rc::new(MouseData::default()), ElementId(1), true);
+    dom.handle_event(
+        "click",
+        Rc::new(PlatformEventData::new(Box::<SerializedMouseData>::default())),
+        ElementId(1),
+        true,
+    );
 
     dom.mark_dirty(ScopeId::ROOT);
     let edits = dom.render_immediate();

packages/core/tests/miri_full_app.rs

@@ -1,15 +1,23 @@
+use crate::dioxus_elements::SerializedMouseData;
 use dioxus::prelude::*;
 use dioxus_core::ElementId;
+use dioxus_elements::SerializedHtmlEventConverter;
 use std::rc::Rc;
 
 #[test]
 fn miri_rollover() {
+    set_event_converter(Box::new(SerializedHtmlEventConverter));
     let mut dom = VirtualDom::new(app);
 
     _ = dom.rebuild();
 
     for _ in 0..3 {
-        dom.handle_event("click", Rc::new(MouseData::default()), ElementId(2), true);
+        dom.handle_event(
+            "click",
+            Rc::new(PlatformEventData::new(Box::<SerializedMouseData>::default())),
+            ElementId(2),
+            true,
+        );
         dom.process_events();
         _ = dom.render_immediate();
     }

packages/core/tests/suspense.rs

@@ -36,7 +36,7 @@ fn suspended_child(cx: Scope) -> Element {
         cx.spawn(async move {
             val += 1;
         });
-        return cx.suspend()?;
+        cx.suspend()?;
     }
 
     render!("child")

packages/desktop/Cargo.toml

@@ -11,7 +11,7 @@ keywords = ["dom", "ui", "gui", "react"]
 
 [dependencies]
 dioxus-core = { workspace = true, features = ["serialize"] }
-dioxus-html = { workspace = true, features = ["serialize", "native-bind"] }
+dioxus-html = { workspace = true, features = ["serialize", "native-bind", "mounted", "eval"] }
 dioxus-interpreter-js = { workspace = true }
 dioxus-hot-reload = { workspace = true, optional = true }
 

packages/desktop/headless_tests/events.rs

@@ -304,7 +304,7 @@ fn app(cx: Scope) -> Element {
                     assert!(event.data.modifiers().is_empty());
                     assert_eq!(event.data.key().to_string(), "a");
                     assert_eq!(event.data.code().to_string(), "KeyA");
-                    assert_eq!(event.data.location, 0);
+                    assert_eq!(event.data.location(), Location::Standard);
                     assert!(event.data.is_auto_repeating());
 
                     recieved_events.modify(|x| *x + 1)
@@ -317,7 +317,7 @@ fn app(cx: Scope) -> Element {
                     assert!(event.data.modifiers().is_empty());
                     assert_eq!(event.data.key().to_string(), "a");
                     assert_eq!(event.data.code().to_string(), "KeyA");
-                    assert_eq!(event.data.location, 0);
+                    assert_eq!(event.data.location(), Location::Standard);
                     assert!(!event.data.is_auto_repeating());
 
                     recieved_events.modify(|x| *x + 1)
@@ -330,7 +330,7 @@ fn app(cx: Scope) -> Element {
                     assert!(event.data.modifiers().is_empty());
                     assert_eq!(event.data.key().to_string(), "a");
                     assert_eq!(event.data.code().to_string(), "KeyA");
-                    assert_eq!(event.data.location, 0);
+                    assert_eq!(event.data.location(), Location::Standard);
                     assert!(!event.data.is_auto_repeating());
 
                     recieved_events.modify(|x| *x + 1)

packages/desktop/src/element.rs

@@ -3,6 +3,7 @@ use dioxus_html::{geometry::euclid::Rect, MountedResult, RenderedElementBacking}
 
 use crate::{desktop_context::DesktopContext, query::QueryEngine};
 
+#[derive(Clone)]
 /// A mounted element passed to onmounted events
 pub struct DesktopElement {
     id: ElementId,
@@ -17,8 +18,8 @@ impl DesktopElement {
 }
 
 impl RenderedElementBacking for DesktopElement {
-    fn get_raw_element(&self) -> dioxus_html::MountedResult<&dyn std::any::Any> {
-        Ok(self)
+    fn as_any(&self) -> &dyn std::any::Any {
+        self
     }
 
     fn get_client_rect(