wip: polish some more things

examples/README.md

@@ -64,7 +64,7 @@ Here's what a few common tasks look like in Dioxus:
 
 Nested components with children and internal state:
 ```rust
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
   cx.render(rsx!( Toggle { "Toggle me" } ))
 }
 
@@ -86,7 +86,7 @@ fn Toggle(cx: Scope<ToggleProps>) -> Element {
 
 Controlled inputs:
 ```rust
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
   let value = use_state(&cx, String::new);
   cx.render(rsx!( 
     input {
@@ -100,7 +100,7 @@ fn App(cx: Scope<()>) -> Element {
 
 Lists and Conditional rendering:
 ```rust
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
   let list = (0..10).map(|i| {
     rsx!(li { key: "{i}", "Value: {i}" })
   });
@@ -128,7 +128,7 @@ static App: Component = |cx, _| rsx!(cx, div {"hello world!"});
 
 Borrowed prop contents:
 ```rust
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
   let name = use_state(&cx, || String::from("example"));
   rsx!(cx, Child { title: name.as_str() })
 }
@@ -145,12 +145,12 @@ Global State
 ```rust
 struct GlobalState { name: String }
 
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
   use_provide_shared_state(cx, || GlobalState { name: String::from("Toby") })
   rsx!(cx, Leaf {})
 }
 
-fn Leaf(cx: Scope<()>) -> Element {
+fn Leaf(cx: Scope) -> Element {
   let state = use_consume_shared_state::<GlobalState>(cx)?;
   rsx!(cx, "Hello {state.name}")
 }
@@ -166,7 +166,7 @@ enum Route {
   Post(id)
 }
 
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
   let route = use_router(cx, Route::parse);
   cx.render(rsx!(div {
     {match route {
@@ -179,7 +179,7 @@ fn App(cx: Scope<()>) -> Element {
 
 Suspense 
 ```rust
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
   let doggo = use_suspense(cx,
     || async { reqwest::get("https://dog.ceo/api/breeds/image/random").await.unwrap().json::<Response>().await.unwrap() },
     |response| cx.render(rsx!( img { src: "{response.message}" }))

examples/async.rs

@@ -8,19 +8,19 @@ use gloo_timers::future::TimeoutFuture;
 
 #[tokio::main]
 async fn main() {
-    dioxus::desktop::launch(App);
+    dioxus::desktop::launch(app);
 }
 
-pub static App: Component = |cx| {
+fn app(cx: Scope) -> Element {
     let count = use_state(&cx, || 0);
-    let mut direction = use_state(&cx, || 1);
+    let direction = use_state(&cx, || 1);
 
     let (async_count, dir) = (count.for_async(), *direction);
 
     let task = use_coroutine(&cx, move || async move {
         loop {
             TimeoutFuture::new(250).await;
-            *async_count.get_mut() += dir;
+            *async_count.modify() += dir;
         }
     });
 
@@ -37,9 +37,9 @@ pub static App: Component = |cx| {
         button {
             "Switch counting direcion"
             onclick: move |_| {
-                direction *= -1;
+                *direction.modify() *= -1;
                 task.restart();
             }
         }
     })
-};
+}

examples/borrowed.rs

@@ -20,7 +20,7 @@ fn main() {
     dioxus::desktop::launch(App);
 }
 
-fn App(cx: Scope<()>) -> Element {
+fn App(cx: Scope) -> Element {
     let text: &mut Vec<String> = cx.use_hook(|_| vec![String::from("abc=def")], |f| f);
 
     let first = text.get_mut(0).unwrap();

examples/calculator.rs

@@ -1,3 +1,5 @@
+#![allow(non_snake_case)]
+
 /*
 This example is a simple iOS-style calculator. This particular example can run any platform - Web, Mobile, Desktop.
 This calculator version uses React-style state management. All state is held as individual use_states.
@@ -10,10 +12,10 @@ use dioxus::prelude::*;
 use separator::Separatable;
 
 fn main() {
-    dioxus::desktop::launch(APP);
+    dioxus::desktop::launch(app);
 }
 
-static APP: Component = |cx| {
+fn app(cx: Scope) -> Element {
     let cur_val = use_state(&cx, || 0.0_f64);
     let operator = use_state(&cx, || None as Option<&'static str>);
     let display_value = use_state(&cx, || String::from(""));
@@ -21,109 +23,111 @@ static APP: Component = |cx| {
     let toggle_percent = move |_| todo!();
     let input_digit = move |num: u8| display_value.modify().push_str(num.to_string().as_str());
 
-    rsx!(cx, div {
-        class: "calculator",
-        onkeydown: move |evt| match evt.key_code {
-            KeyCode::Add => operator.set(Some("+")),
-            KeyCode::Subtract => operator.set(Some("-")),
-            KeyCode::Divide => operator.set(Some("/")),
-            KeyCode::Multiply => operator.set(Some("*")),
-            KeyCode::Num0 => input_digit(0),
-            KeyCode::Num1 => input_digit(1),
-            KeyCode::Num2 => input_digit(2),
-            KeyCode::Num3 => input_digit(3),
-            KeyCode::Num4 => input_digit(4),
-            KeyCode::Num5 => input_digit(5),
-            KeyCode::Num6 => input_digit(6),
-            KeyCode::Num7 => input_digit(7),
-            KeyCode::Num8 => input_digit(8),
-            KeyCode::Num9 => input_digit(9),
-            KeyCode::Backspace => {
-                if !display_value.as_str().eq("0") {
-                    display_value.modify().pop();
-                }
-            }
-            _ => {}
-        }
-        div { class: "calculator-display", {[format_args!("{}", cur_val.separated_string())]} }
-        div { class: "input-keys"
-            div { class: "function-keys"
-                CalculatorKey {
-                    {[if display_value == "0" { "C" } else { "AC" }]}
-                    name: "key-clear",
-                    onclick: move |_| {
-                        display_value.set("0".to_string());
-                        if display_value != "0" {
-                            operator.set(None);
-                            cur_val.set(0.0);
-                        }
+    cx.render(rsx!(
+        div { class: "calculator",
+            onkeydown: move |evt| match evt.key_code {
+                KeyCode::Add => operator.set(Some("+")),
+                KeyCode::Subtract => operator.set(Some("-")),
+                KeyCode::Divide => operator.set(Some("/")),
+                KeyCode::Multiply => operator.set(Some("*")),
+                KeyCode::Num0 => input_digit(0),
+                KeyCode::Num1 => input_digit(1),
+                KeyCode::Num2 => input_digit(2),
+                KeyCode::Num3 => input_digit(3),
+                KeyCode::Num4 => input_digit(4),
+                KeyCode::Num5 => input_digit(5),
+                KeyCode::Num6 => input_digit(6),
+                KeyCode::Num7 => input_digit(7),
+                KeyCode::Num8 => input_digit(8),
+                KeyCode::Num9 => input_digit(9),
+                KeyCode::Backspace => {
+                    if !display_value.as_str().eq("0") {
+                        display_value.modify().pop();
                     }
                 }
-                CalculatorKey {
-                    "±"
-                    name: "key-sign",
-                    onclick: move |_| {
-                        if display_value.starts_with("-") {
-                            display_value.set(display_value.trim_start_matches("-").to_string())
-                        } else {
-                            display_value.set(format!("-{}", *display_value))
-                        }
-                    },
-                }
-                CalculatorKey {
-                    "%"
-                    onclick: {toggle_percent}
-                    name: "key-percent",
-                }
+                _ => {}
             }
-            div { class: "digit-keys"
-                CalculatorKey { name: "key-0", onclick: move |_| input_digit(0), "0" }
-                CalculatorKey { name: "key-dot", onclick: move |_| display_value.modify().push_str("."), "●" }
+            div { class: "calculator-display", {[cur_val.separated_string()]} }
+            div { class: "input-keys"
+                div { class: "function-keys"
+                    CalculatorKey {
+                        {[if display_value == "0" { "C" } else { "AC" }]}
+                        name: "key-clear",
+                        onclick: move |_| {
+                            display_value.set("0".to_string());
+                            if display_value != "0" {
+                                operator.set(None);
+                                cur_val.set(0.0);
+                            }
+                        }
+                    }
+                    CalculatorKey {
+                        "±"
+                        name: "key-sign",
+                        onclick: move |_| {
+                            if display_value.starts_with("-") {
+                                display_value.set(display_value.trim_start_matches("-").to_string())
+                            } else {
+                                display_value.set(format!("-{}", *display_value))
+                            }
+                        },
+                    }
+                    CalculatorKey {
+                        "%"
+                        onclick: {toggle_percent}
+                        name: "key-percent",
+                    }
+                }
+                div { class: "digit-keys"
+                    CalculatorKey { name: "key-0", onclick: move |_| input_digit(0), "0" }
+                    CalculatorKey { name: "key-dot", onclick: move |_| display_value.modify().push_str("."), "●" }
 
-                {(1..9).map(|k| rsx!{
-                    CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| input_digit(k), "{k}" }
-                })}
-            }
-            div { class: "operator-keys"
-                CalculatorKey { name: "key-divide", onclick: move |_| operator.set(Some("/")) "÷" }
-                CalculatorKey { name: "key-multiply", onclick: move |_| operator.set(Some("*")) "×" }
-                CalculatorKey { name: "key-subtract", onclick: move |_| operator.set(Some("-")) "−" }
-                CalculatorKey { name: "key-add", onclick: move |_| operator.set(Some("+")) "+" }
-                CalculatorKey {
-                    "="
-                    name: "key-equals",
-                    onclick: move |_| {
-                        if let Some(op) = operator.as_ref() {
-                            let rhs = display_value.parse::<f64>().unwrap();
-                            let new_val = match *op {
-                                "+" => *cur_val + rhs,
-                                "-" => *cur_val - rhs,
-                                "*" => *cur_val * rhs,
-                                "/" => *cur_val / rhs,
-                                _ => unreachable!(),
-                            };
-                            cur_val.set(new_val);
-                            display_value.set(new_val.to_string());
-                            operator.set(None);
-                        }
-                    },
+                    {(1..9).map(|k| rsx!{
+                        CalculatorKey { key: "{k}", name: "key-{k}", onclick: move |_| input_digit(k), "{k}" }
+                    })}
+                }
+                div { class: "operator-keys"
+                    CalculatorKey { name: "key-divide", onclick: move |_| operator.set(Some("/")) "÷" }
+                    CalculatorKey { name: "key-multiply", onclick: move |_| operator.set(Some("*")) "×" }
+                    CalculatorKey { name: "key-subtract", onclick: move |_| operator.set(Some("-")) "−" }
+                    CalculatorKey { name: "key-add", onclick: move |_| operator.set(Some("+")) "+" }
+                    CalculatorKey {
+                        "="
+                        name: "key-equals",
+                        onclick: move |_| {
+                            if let Some(op) = operator.as_ref() {
+                                let rhs = display_value.parse::<f64>().unwrap();
+                                let new_val = match *op {
+                                    "+" => *cur_val + rhs,
+                                    "-" => *cur_val - rhs,
+                                    "*" => *cur_val * rhs,
+                                    "/" => *cur_val / rhs,
+                                    _ => unreachable!(),
+                                };
+                                cur_val.set(new_val);
+                                display_value.set(new_val.to_string());
+                                operator.set(None);
+                            }
+                        },
+                    }
                 }
             }
         }
-    })
-};
+    ))
+}
 
-#[derive(Props)]
-struct CalculatorKeyProps<'a> {
+#[inline_props]
+fn CalculatorKey<'a>(
+    cx: Scope,
     name: &'static str,
     onclick: &'a dyn Fn(Arc<MouseEvent>),
     children: Element<'a>,
-}
-
-fn CalculatorKey<'a>(cx: Scope<'a, CalculatorKeyProps<'a>>) -> Element {
-    rsx!(cx, button {
-        class: "calculator-key {cx.props.name}"
-        onclick: {cx.props.onclick}
-        {&cx.props.children}
+) -> Element {
+    cx.render(rsx! {
+        button {
+            class: "calculator-key {name}"
+            onclick: {onclick}
+            {children}
+        }
     })
 }

examples/core/jsframework.rs

@@ -15,7 +15,7 @@ fn main() {
     assert!(g.edits.len() > 1);
 }
 
-fn App((cx, props): Scope<()>) -> Element {
+fn App((cx, props): Scope) -> Element {
     let mut rng = SmallRng::from_entropy();
     let rows = (0..10_000_usize).map(|f| {
         let label = Label::new(&mut rng);

examples/desktop/todomvc.rs

@@ -5,15 +5,10 @@ use dioxus_core::prelude::*;
 use dioxus_core_macro::*;
 use dioxus_hooks::*;
 use dioxus_html as dioxus_elements;
-use simple_logger::SimpleLogger;
 
 use std::collections::HashMap;
 
 fn main() {
-    if cfg!(debug_assertions) {
-        SimpleLogger::new().init().unwrap();
-    }
-
     dioxus_desktop::launch(App)
 }
 

examples/file_explorer.rs

@@ -8,7 +8,6 @@
 use dioxus::prelude::*;
 
 fn main() {
-    // simple_logger::init_with_level(log::Level::Debug);
     dioxus::desktop::launch_cfg(App, |c| {
         c.with_window(|w| {
             w.with_resizable(true).with_inner_size(

examples/hello_world.rs

@@ -4,7 +4,7 @@ fn main() {
     dioxus::desktop::launch(app);
 }
 
-fn app(cx: Scope<()>) -> Element {
+fn app(cx: Scope) -> Element {
     cx.render(rsx! (
         div { "Hello, world!" }
     ))

examples/readme.rs

@@ -3,18 +3,19 @@
 //! The example from the README.md.
 
 use dioxus::prelude::*;
+
 fn main() {
     dioxus::desktop::launch(App);
 }
 
 static App: Component = |cx| {
-    let mut count = use_state(&cx, || 0);
+    let count = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {
             h1 { "High-Five counter: {count}" }
-            button { onclick: move |_| count += 1, "Up high!" }
-            button { onclick: move |_| count -= 1, "Down low!" }
+            button { onclick: move |_| *count.modify() += 1, "Up high!" }
+            button { onclick: move |_| *count.modify() -= 1, "Down low!" }
         }
     })
 };

examples/tasks.rs

@@ -2,26 +2,30 @@
 //!
 //! The example from the README.md.
 
+use dioxus::prelude::*;
 use std::time::Duration;
 
-use dioxus::prelude::*;
 fn main() {
     dioxus::desktop::launch(app);
 }
 
-fn app(cx: Scope<()>) -> Element {
-    let mut count = use_state(&cx, || 0);
+fn app(cx: Scope) -> Element {
+    let count = use_state(&cx, || 0);
 
-    cx.push_future(|| async move {
-        tokio::time::sleep(Duration::from_millis(100)).await;
-        count += 1;
+    use_future(&cx, || {
+        for_async![count];
+        async move {
+            while let _ = tokio::time::sleep(Duration::from_millis(1000)).await {
+                *count.modify() += 1;
+            }
+        }
     });
 
     cx.render(rsx! {
         div {
             h1 { "High-Five counter: {count}" }
             button {
-                onclick: move |_| count +=1 ,
+                onclick: move |_| *count.modify() += 1,
                 "Click me!"
             }
         }

examples/webview_web.rs

@@ -1,4 +1,3 @@
-#![allow(non_upper_case_globals, non_snake_case)]
 //! Example: Webview Renderer
 //! -------------------------
 //!
@@ -13,17 +12,17 @@
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::web::launch(App);
+    dioxus::desktop::launch(app);
 }
 
-static App: Component = |cx| {
-    let mut count = use_state(&cx, || 0);
+fn app(cx: Scope) -> Element {
+    let count = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {
             h1 { "Hifive counter: {count}" }
-            button { onclick: move |_| count += 1, "Up high!" }
-            button { onclick: move |_| count -= 1, "Down low!" }
+            button { onclick: move |_| *count.modify() += 1, "Up high!" }
+            button { onclick: move |_| *count.modify() -= 1, "Down low!" }
         }
     })
-};
+}