better error handling

examples/hot_reload.rs

@@ -1,56 +1,105 @@
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::web::launch_with_props(with_hot_reload, app, |c| c);
+    dioxus::desktop::launch_with_props(with_hot_reload, app, |c| c);
 }
 
 fn app(cx: Scope) -> Element {
-    let count = use_state(&cx, || 170);
-    let rsx_code = use_state(&cx, || None);
-    let re_render = cx.schedule_update();
-
-    cx.render(rsx! {
-        div {
+    let rsx_code = use_state(&cx, || {
+        r##"div {
             width: "100%",
             height: "500px",
             onclick: move |_| {
                 count.modify(|count| *count + 10);
             },
 
-            div {
-                display: "flex",
-                flex_direction: "row",
-                width: "100%",
-                height: "50%",
-                textarea {
-                    width: "90%",
-                    value: {
-                        if rsx_code.get().is_none() {
-                            let rsx_text_index: RsxTextIndex = cx.consume_context().unwrap();
-                            let read = rsx_text_index.read();
-                            rsx_code.set(Some(read.get(&__line_num).unwrap().clone()));
-                        }
-                        (*rsx_code.current()).clone().unwrap()
-                    },
-                    oninput: move |evt| {
-                        rsx_code.set(Some(evt.value.clone()));
-                    },
-                }
-
-                button {
-                    height: "100%",
-                    width: "10%",
-                    onclick: move |_|{
-                        if let Some(code) = rsx_code.get(){
-                            let rsx_text_index: RsxTextIndex = cx.consume_context().unwrap();
-                            rsx_text_index.insert(__line_num.clone(), code.clone());
-                            re_render();
-                        }
-                    },
-                    "submit"
-                }
+            p {
+                "High-Five counter: {count}",
             }
 
+            div {
+                width: "{count}px",
+                height: "10px",
+                background_color: "red",
+            }
+
+            Comp {
+                color: "#083289"
+            }
+
+            Comp {
+                color: "green"
+            }
+
+            {
+                (0..10).map(|i| {
+                    cx.render(rsx!{p {"{i}"}})
+                })
+            }
+        }"##
+        .to_string()
+    });
+    let submitted_rsx_code = use_state(&cx, || None);
+
+    cx.render(rsx! {
+        div {
+             display: "flex",
+             flex_direction: "row",
+             width: "100%",
+             height: "50%",
+             Editable{
+                current_code: submitted_rsx_code.get().clone(),
+             },
+
+             textarea {
+                 width: "90%",
+                 value:
+                    rsx_code
+                 ,
+                 oninput: move |evt| {
+                     rsx_code.set(evt.value.clone());
+                 },
+             }
+
+             button {
+                 height: "100%",
+                 width: "10%",
+                 onclick: move |_|{
+                         submitted_rsx_code.set(Some(rsx_code.get().clone()));
+                 },
+                 "submit"
+             }
+         }
+    })
+}
+
+#[derive(PartialEq, Props)]
+struct EditableProps {
+    #[props(!optional)]
+    current_code: Option<String>,
+}
+
+fn Editable(cx: Scope<EditableProps>) -> Element {
+    let count = use_state(&cx, || 170);
+    if let Some(code) = cx.props.current_code.as_ref() {
+        let rsx_index: RsxTextIndex = cx.consume_context().unwrap();
+        rsx_index.insert(
+            CodeLocation {
+                file: r"examples\hot_reload.rs".to_string(),
+                line: 95,
+                column: 15,
+            },
+            code.clone(),
+        );
+    }
+    cx.render(rsx! {
+         div {
+            width: "100%",
+            height: "500px",
+            onclick: move |_| {
+                count.modify(|count| *count + 10);
+            },
+
             p {
                 "High-Five counter: {count}",
             }