add examples for onmounted

examples/controll_focus.rs

@@ -0,0 +1,44 @@
+use std::rc::Rc;
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let elements: &UseRef<Vec<Rc<MountedData>>> = use_ref(cx, || Vec::new());
+    let running = use_state(cx, || true);
+
+    use_future!(cx, |(elements, running)| async move {
+        let mut focused = 0;
+        if *running.current() {
+            loop {
+                tokio::time::sleep(std::time::Duration::from_millis(10)).await;
+                if let Some(element) = elements.read().get(focused) {
+                    element.set_focus(true);
+                } else {
+                    focused = 0;
+                }
+                focused += 1;
+            }
+        }
+    });
+
+    cx.render(rsx!(
+        div {
+            h1 { "Input Roulette" }
+            for i in 0..100 {
+                input {
+                    value: "{i}",
+                    onmounted: move |cx| {
+                        elements.write().push(cx.inner().clone());
+                    },
+                    oninput: move |_| {
+                        running.set(false);
+                    }
+                }
+            }
+        }
+    ))
+}

examples/read_size.rs

@@ -0,0 +1,57 @@
+use std::rc::Rc;
+
+use dioxus::{html::geometry::euclid::Rect, prelude::*};
+
+fn main() {
+    dioxus_desktop::launch_cfg(
+        app,
+        dioxus_desktop::Config::default().with_custom_head(
+            r#"
+<style type="text/css">
+    html, body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+    }
+    #main {
+        height: 100%;
+        width: 100%;
+    }
+</style>
+"#
+            .to_owned(),
+        ),
+    );
+}
+
+fn app(cx: Scope) -> Element {
+    let div_element: &UseRef<Option<Rc<MountedData>>> = use_ref(cx, || None);
+
+    let dimentions = use_ref(cx, || Rect::zero());
+
+    cx.render(rsx!(
+        div {
+            width: "50%",
+            height: "50%",
+            background_color: "red",
+            onmounted: move |cx| {
+                div_element.set(Some(cx.inner().clone()));
+            },
+            "This element is {dimentions.read():?}"
+        }
+
+        button {
+            onclick: move |_| {
+                to_owned![div_element, dimentions];
+                async move {
+                    if let Some(div) = div_element.read().as_ref() {
+                        if let Ok(rect)=div.get_client_rect().await{
+                            dimentions.set(rect);
+                        }
+                    }
+                }
+            },
+            "Read dimentions"
+        }
+    ))
+}

examples/scroll_to_top.rs

@@ -0,0 +1,33 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let header_element = use_ref(cx, || None);
+
+    cx.render(rsx!(
+        div {
+            h1 {
+                onmounted: move |cx| {
+                    header_element.set(Some(cx.inner().clone()));
+                },
+                "Scroll to top example"
+            }
+
+            for i in 0..100 {
+                div { "Item {i}" }
+            }
+
+            button {
+                onclick: move |_| {
+                    if let Some(header) = header_element.read().as_ref() {
+                        header.scroll_to(ScrollBehavior::Smooth);
+                    }
+                },
+                "Scroll to top"
+            }
+        }
+    ))
+}

packages/desktop/src/element.rs

@@ -88,12 +88,10 @@ impl RenderedElementBacking for DesktopElement {
             self.id.0, focus
         );
 
-        println!("script: {}", script);
         let fut = self
             .query
             .new_query::<bool>(&script, &self.webview)
             .resolve();
-        println!("fut");
 
         Box::pin(async move {
             match fut.await {

packages/desktop/src/lib.rs

@@ -265,7 +265,7 @@ pub fn launch_with_props<P: 'static>(root: Component<P>, props: P, cfg: Config)
                 EventData::Ipc(msg) if msg.method() == "query" => {
                     let params = msg.params();
 
-                    if let Ok(result) = dbg!(serde_json::from_value::<QueryResult>(params)) {
+                    if let Ok(result) = serde_json::from_value::<QueryResult>(params) {
                         let view = webviews.get(&event.1).unwrap();
                         let query = view
                             .dom