docs: remove all usages of static closure syntax and update readme

examples/todomvc.rs

@@ -4,7 +4,7 @@ use im_rc::HashMap;
 use std::rc::Rc;
 
 fn main() {
-    dioxus::desktop::launch(App);
+    dioxus::desktop::launch(app);
 }
 
 #[derive(PartialEq)]
@@ -21,8 +21,7 @@ pub struct TodoItem {
     pub contents: String,
 }
 
-const STYLE: &str = include_str!("./assets/todomvc.css");
-const App: Component = |cx| {
+fn app(cx: Scope) -> Element {
     let draft = use_state(&cx, || "".to_string());
     let todos = use_state(&cx, || HashMap::<u32, Rc<TodoItem>>::new());
     let filter = use_state(&cx, || FilterState::All);
@@ -48,40 +47,43 @@ const App: Component = |cx| {
         _ => "items",
     };
 
-    rsx!(cx, div { id: "app",
-        style {"{STYLE}"}
-        div {
-            header { class: "header",
-                h1 {"todos"}
-                input {
-                    class: "new-todo",
-                    placeholder: "What needs to be done?",
-                    value: "{draft}",
-                    oninput: move |evt| draft.set(evt.value.clone()),
+    cx.render(rsx!(
+        div { id: "app",
+            style { [include_str!("./assets/todomvc.css")] }
+            div {
+                header {
+                    class: "header",
+                    h1 { "todos" }
+                    input {
+                        class: "new-todo",
+                        placeholder: "What needs to be done?",
+                        value: "{draft}",
+                        oninput: move |evt| draft.set(evt.value.clone()),
+                    }
                 }
+                todolist,
+                (!todos.is_empty()).then(|| rsx!(
+                    footer {
+                        span {
+                            strong {"{items_left}"}
+                            span {"{item_text} left"}
+                        }
+                        ul { class: "filters",
+                            li { class: "All", a { href: "", onclick: move |_| filter.set(FilterState::All), "All" }}
+                            li { class: "Active", a { href: "active", onclick: move |_| filter.set(FilterState::Active), "Active" }}
+                            li { class: "Completed", a { href: "completed", onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
+                        }
+                    }
+                ))
+            }
+            footer { class: "info",
+                p {"Double-click to edit a todo"}
+                p { "Created by ", a {  href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }}
+                p { "Part of ", a { href: "http://todomvc.com", "TodoMVC" }}
             }
-            todolist,
-            (!todos.is_empty()).then(|| rsx!(
-                footer {
-                    span {
-                        strong {"{items_left}"}
-                        span {"{item_text} left"}
-                    }
-                    ul { class: "filters",
-                        li { class: "All", a { href: "", onclick: move |_| filter.set(FilterState::All), "All" }}
-                        li { class: "Active", a { href: "active", onclick: move |_| filter.set(FilterState::Active), "Active" }}
-                        li { class: "Completed", a { href: "completed", onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
-                    }
-                }
-            ))
         }
-        footer { class: "info",
-            p {"Double-click to edit a todo"}
-            p { "Created by ", a {  href: "http://github.com/jkelleyrtp/", "jkelleyrtp" }}
-            p { "Part of ", a { href: "http://todomvc.com", "TodoMVC" }}
-        }
-    })
-};
+    ))
+}
 
 #[derive(PartialEq, Props)]
 pub struct TodoEntryProps {
@@ -93,18 +95,20 @@ pub fn TodoEntry(cx: Scope<TodoEntryProps>) -> Element {
     let contents = use_state(&cx, || String::from(""));
     let todo = &cx.props.todo;
 
-    rsx!(cx, li {
-        "{todo.id}"
-        input {
-            class: "toggle",
-            r#type: "checkbox",
-            "{todo.checked}"
-        }
-       {is_editing.then(|| rsx!{
+    cx.render(rsx! {
+        li {
+            "{todo.id}"
             input {
-                value: "{contents}",
-                oninput: move |evt| contents.set(evt.value.clone())
+                class: "toggle",
+                r#type: "checkbox",
+                "{todo.checked}"
             }
-        })}
+           is_editing.then(|| rsx!{
+                input {
+                    value: "{contents}",
+                    oninput: move |evt| contents.set(evt.value.clone())
+                }
+            })
+        }
     })
 }