From fe1b35d6105d92a8cab553bc6a808a2155578ace Mon Sep 17 00:00:00 2001
From: Evan Almloff <evanalmloff@gmail.com>
Date: Fri, 12 Jan 2024 17:47:27 -0600
Subject: [PATCH] fix mount event

---
 packages/desktop/headless_tests/events.rs | 16 ++++++-
 packages/liveview/src/pool.rs             |  4 +-
 packages/web/src/dom.rs                   |  6 +--
 playwright-tests/liveview/src/main.rs     | 26 +++---------
 playwright-tests/web/src/main.rs          | 51 +++++++----------------
 5 files changed, 41 insertions(+), 62 deletions(-)

diff --git a/packages/desktop/headless_tests/events.rs b/packages/desktop/headless_tests/events.rs
index 061c040ed..69f743a1a 100644
--- a/packages/desktop/headless_tests/events.rs
+++ b/packages/desktop/headless_tests/events.rs
@@ -216,13 +216,27 @@ fn app(cx: Scope) -> Element {
         r#"new FocusEvent("focusout",{bubbles: true})"#,
     );
 
-    if **received_events == 12 {
+    if **received_events == 13 {
         println!("all events recieved");
         desktop_context.close();
     }
 
     render! {
         div {
+            div {
+                width: "100px",
+                height: "100px",
+                onmounted: move |evt| {
+                    to_owned![received_events];
+                    async move {
+                        let rect = evt.get_client_rect().await.unwrap();
+                        println!("rect: {:?}", rect);
+                        assert_eq!(rect.width(), 100.0);
+                        assert_eq!(rect.height(), 100.0);
+                        received_events.modify(|x| *x + 1)
+                    }
+                }
+            }
             button {
                 id: "button",
                 onclick: move |event| {
diff --git a/packages/liveview/src/pool.rs b/packages/liveview/src/pool.rs
index 6fac0abfe..79fc6b34d 100644
--- a/packages/liveview/src/pool.rs
+++ b/packages/liveview/src/pool.rs
@@ -6,7 +6,7 @@ use crate::{
     LiveViewError,
 };
 use dioxus_core::{prelude::*, BorrowedAttributeValue, Mutations};
-use dioxus_html::{event_bubbles, EventData, HtmlEvent, MountedData, PlatformEventData};
+use dioxus_html::{event_bubbles, EventData, HtmlEvent, PlatformEventData};
 use dioxus_interpreter_js::binary_protocol::Channel;
 use futures_util::{pin_mut, SinkExt, StreamExt};
 use rustc_hash::FxHashMap;
@@ -188,7 +188,7 @@ pub async fn run(mut vdom: VirtualDom, ws: impl LiveViewSocket) -> Result<(), Li
                                         let element = LiveviewElement::new(evt.element, query_engine.clone());
                                         vdom.handle_event(
                                             &evt.name,
-                                            Rc::new(PlatformEventData::new(Box::new(MountedData::new(element)))),
+                                            Rc::new(PlatformEventData::new(Box::new(element))),
                                             evt.element,
                                             evt.bubbles,
                                         );
diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs
index 9d08f09f4..44c0628e6 100644
--- a/packages/web/src/dom.rs
+++ b/packages/web/src/dom.rs
@@ -9,8 +9,8 @@
 use dioxus_core::{
     BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode,
 };
+use dioxus_html::event_bubbles;
 use dioxus_html::PlatformEventData;
-use dioxus_html::{event_bubbles, MountedData};
 use dioxus_interpreter_js::{get_node, minimal_bindings, save_template, Channel};
 use futures_channel::mpsc;
 use rustc_hash::FxHashMap;
@@ -267,13 +267,11 @@ impl WebsysDom {
     pub(crate) fn send_mount_event(&self, id: ElementId) {
         let node = get_node(id.0 as u32);
         if let Some(element) = node.dyn_ref::<Element>() {
-            let data: MountedData = element.into();
-            let data = Box::new(data);
             let _ = self.event_channel.unbounded_send(UiEvent {
                 name: "mounted".to_string(),
                 bubbles: false,
                 element: id,
-                data: PlatformEventData::new(data),
+                data: PlatformEventData::new(Box::new(element.clone())),
             });
         }
     }
diff --git a/playwright-tests/liveview/src/main.rs b/playwright-tests/liveview/src/main.rs
index d28e3b7fd..71af6cc81 100644
--- a/playwright-tests/liveview/src/main.rs
+++ b/playwright-tests/liveview/src/main.rs
@@ -11,29 +11,15 @@ fn app(cx: Scope) -> Element {
             "hello axum! {num}"
             button { onclick: move |_| num += 1, "Increment" }
         }
-        svg {
-            circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" }
-        }
-        div {
-            class: "raw-attribute-div",
-            "raw-attribute": "raw-attribute-value",
-        }
-        div {
-            class: "hidden-attribute-div",
-            hidden: true,
-        }
+        svg { circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } }
+        div { class: "raw-attribute-div", "raw-attribute": "raw-attribute-value" }
+        div { class: "hidden-attribute-div", hidden: true }
         div {
             class: "dangerous-inner-html-div",
-            dangerous_inner_html: "<p>hello dangerous inner html</p>",
-        }
-        input {
-            value: "hello input",
-        }
-        div {
-            class: "style-div",
-            color: "red",
-            "colored text"
+            dangerous_inner_html: "<p>hello dangerous inner html</p>"
         }
+        input { value: "hello input" }
+        div { class: "style-div", color: "red", "colored text" }
     })
 }
 
diff --git a/playwright-tests/web/src/main.rs b/playwright-tests/web/src/main.rs
index c116d9365..1af72b92f 100644
--- a/playwright-tests/web/src/main.rs
+++ b/playwright-tests/web/src/main.rs
@@ -11,57 +11,38 @@ fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         div {
             "hello axum! {num}"
-            button {
-                class: "increment-button",
-                onclick: move |_| num += 1, "Increment"
-            }
-        }
-        svg {
-            circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" }
-        }
-        div {
-            class: "raw-attribute-div",
-            "raw-attribute": "raw-attribute-value",
-        }
-        div {
-            class: "hidden-attribute-div",
-            hidden: true,
+            button { class: "increment-button", onclick: move |_| num += 1, "Increment" }
         }
+        svg { circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } }
+        div { class: "raw-attribute-div", "raw-attribute": "raw-attribute-value" }
+        div { class: "hidden-attribute-div", hidden: true }
         div {
             class: "dangerous-inner-html-div",
-            dangerous_inner_html: "<p>hello dangerous inner html</p>",
-        }
-        input {
-            value: "hello input",
-        }
-        div {
-            class: "style-div",
-            color: "red",
-            "colored text"
+            dangerous_inner_html: "<p>hello dangerous inner html</p>"
         }
+        input { value: "hello input" }
+        div { class: "style-div", color: "red", "colored text" }
         button {
             class: "eval-button",
             onclick: move |_| {
                 let eval = eval_provider(
-                    r#"
-                    window.document.title = 'Hello from Dioxus Eval!';
-                    dioxus.send("returned eval value");
-                "#).unwrap();
+                        r#"
+                            window.document.title = 'Hello from Dioxus Eval!';
+                            dioxus.send("returned eval value");
+                        "#,
+                    )
+                    .unwrap();
                 let setter = eval_result.setter();
                 async move {
-                    // Set the window title
                     let result = eval.recv().await;
                     if let Ok(serde_json::Value::String(string)) = result {
                         setter(string);
                     }
-
-            }},
+                }
+            },
             "Eval"
         }
-        div {
-            class: "eval-result",
-            "{eval_result}"
-        }
+        div { class: "eval-result", "{eval_result}" }
     })
 }