fix: some examples

examples/filedragdrop.rs

@@ -12,7 +12,7 @@ fn main() {
 fn app(cx: Scope) -> Element {
     cx.render(rsx!(
         div {
-            h1 { "drag an file here" }
+            h1 { "drag a file here and check your console" }
         }
     ))
 }

examples/inputs.rs

@@ -104,7 +104,6 @@ fn app(cx: Scope) -> Element {
 
             // elements with driven values will preventdefault automatically.
             // you can disable this override with preventdefault: false
-
             div {
                 input {
                     id: "pdf",
@@ -121,8 +120,6 @@ fn app(cx: Scope) -> Element {
                 }
             }
 
-
-
             FIELDS.iter().map(|(field, value)| rsx!(
                 div {
                     input {

examples/link.rs

@@ -10,7 +10,7 @@ fn app(cx: Scope) -> Element {
             p {
                 a {
                     href: "http://dioxuslabs.com/",
-                    "default link"
+                    "Default link - links outside of your app"
                 }
             }
             p {
@@ -20,7 +20,19 @@ fn app(cx: Scope) -> Element {
                     onclick: |_| {
                         println!("Hello Dioxus");
                     },
-                    "custom event link",
+                    "Custom event link - links inside of your app",
+                }
+            }
+        }
+        div {
+            Router {
+                Route { to: "/", h1 { "Home" } },
+                Route { to: "/settings", h1 { "settings" } },
+
+                p { "----"}
+                ul {
+                    Link { to: "/", li { "Router link to home" } },
+                    Link { to: "/settings", li { "Router link to settings" } },
                 }
             }
         }

examples/nested_listeners.rs

@@ -14,6 +14,8 @@ fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         div {
             onclick: move |_| println!("clicked! top"),
+            "- div"
+
             button {
                 onclick: move |_| println!("clicked! bottom propoate"),
                 "Propogate"
@@ -26,7 +28,7 @@ fn app(cx: Scope) -> Element {
                 "Dont propogate"
             }
             button {
-                "Does not handle clicks"
+                "Does not handle clicks - only propogate"
             }
         }
     })

examples/router.rs

@@ -13,18 +13,17 @@ fn app(cx: Scope) -> Element {
         Router {
             ul {
                 Link { to: "/",  li { "Go home!" } }
-                Link { to: "users",  li { "List all users" } }
+                Link { to: "/users",  li { "List all users" } }
-                Link { to: "blog", li { "Blog posts" } }
+                Link { to: "/blog", li { "Blog posts" } }
+
+                Link { to: "/users/bill",  li { "List all users" } }
+                Link { to: "/blog/5", li { "Blog post 5" } }
             }
             Route { to: "/", "Home" }
-            Route { to: "users",
+            Route { to: "/users", "User list" }
-                Route { to: "/", "User list" }
+            Route { to: "/users/:name", User {} }
-                Route { to: ":name", User {} }
+            Route { to: "/blog", "Blog list" }
-             }
+            Route { to: "/blog/:post", BlogPost {} }
-            Route { to: "blog"
-                Route { to: "/", "Blog list" }
-                Route { to: ":post", BlogPost {} }
-            }
             Route { to: "", "Err 404 Route Not Found" }
         }
     })

examples/todomvc.rs

@@ -118,34 +118,43 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
     let completed = if todo.checked { "completed" } else { "" };
     let editing = if **is_editing { "editing" } else { "" };
 
-    rsx!(cx, li {
+    cx.render(rsx!{
-        class: "{completed} {editing}",
+        li {
-        div { class: "view",
+            class: "{completed} {editing}",
-            input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
+            div { class: "view",
-                onchange: move |evt| {
+
-                    cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
+                input {
+                    class: "toggle",
+                    r#type: "checkbox",
+                    id: "cbg-{todo.id}",
+                    checked: "{todo.checked}",
+                    oninput: move |evt| {
+                        cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
+                    }
+                }
+
+                label {
+                    r#for: "cbg-{todo.id}",
+                    onclick: move |_| is_editing.set(true),
+                    prevent_default: "onclick",
+                    "{todo.contents}"
                 }
             }
-            label {
+            is_editing.then(|| rsx!{
-                r#for: "cbg-{todo.id}",
+                input {
-                onclick: move |_| is_editing.set(true),
+                    class: "edit",
-                "{todo.contents}"
+                    value: "{todo.contents}",
-            }
+                    oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
+                    autofocus: "true",
+                    onfocusout: move |_| is_editing.set(false),
+                    onkeydown: move |evt| {
+                        match evt.key.as_str() {
+                            "Enter" | "Escape" | "Tab" => is_editing.set(false),
+                            _ => {}
+                        }
+                    },
+                }
+            })
         }
-        is_editing.then(|| rsx!{
-            input {
-                class: "edit",
-                value: "{todo.contents}",
-                oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
-                autofocus: "true",
-                onfocusout: move |_| is_editing.set(false),
-                onkeydown: move |evt| {
-                    match evt.key.as_str() {
-                        "Enter" | "Escape" | "Tab" => is_editing.set(false),
-                        _ => {}
-                    }
-                },
-            }
-        })
     })
 }

src/lib.rs

@@ -33,7 +33,7 @@ pub mod prelude {
     pub use dioxus_html as dioxus_elements;
 
     #[cfg(feature = "router")]
-    pub use dioxus_router::{use_route, use_router, Link, Redirect, Router, UseRoute};
+    pub use dioxus_router::{use_route, use_router, Link, Redirect, Router, UseRoute, Route};
 
     #[cfg(feature = "fermi")]
     pub use fermi::{use_atom_ref, use_init_atom_root, use_read, use_set, Atom, AtomRef};