Make more examples cross-platform

examples/calculator.rs

@@ -3,20 +3,20 @@ This example is a simple iOS-style calculator. This particular example can run a
 This calculator version uses React-style state management. All state is held as individual use_states.
 */
 
-use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
 use dioxus::events::*;
 use dioxus::html::input_data::keyboard_types::Key;
 use dioxus::prelude::*;
 
 fn main() {
-    LaunchBuilder::desktop()
-        .with_cfg(
+    LaunchBuilder::new()
+        .with_cfg(desktop!({
+            use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
             Config::new().with_window(
                 WindowBuilder::default()
                     .with_title("Calculator")
                     .with_inner_size(LogicalSize::new(300.0, 525.0)),
-            ),
-        )
+            )
+        }))
         .launch(app);
 }
 

examples/clock.rs

@@ -11,7 +11,6 @@ fn app() -> Element {
         loop {
             tokio::time::sleep(std::time::Duration::from_millis(10)).await;
             count += 1;
-            println!("current: {count}");
         }
     });
 

examples/custom_assets.rs

@@ -7,7 +7,7 @@ static ASSET_PATH: &str = "examples/assets/logo.png";
 static ASSET_PATH: &str = manganis::mg!(image("examples/assets/logo.png").format(ImageType::Avif));
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/disabled.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/dog_app.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 use std::collections::HashMap;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/eval.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/file_upload.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 use tokio::time::sleep;
 
 fn main() {
-    launch_desktop(App);
+    launch(App);
 }
 
 fn App() -> Element {

examples/flat_router.rs

@@ -3,15 +3,11 @@ use dioxus::prelude::*;
 use dioxus::router::prelude::*;
 
 fn main() {
-    LaunchBuilder::desktop()
-        .with_cfg(
-            Config::new().with_window(
-                WindowBuilder::new()
-                    .with_inner_size(LogicalSize::new(600, 1000))
-                    .with_resizable(false),
-            ),
-        )
-        .launch(|| rsx! { Router::<Route> {} })
+    launch(|| {
+        rsx! {
+            Router::<Route> {}
+        }
+    })
 }
 
 #[derive(Routable, Clone)]
@@ -20,10 +16,13 @@ enum Route {
     #[layout(Footer)]
         #[route("/")]
         Home {},
+
         #[route("/games")]
         Games {},
+
         #[route("/play")]
         Play {},
+
         #[route("/settings")]
         Settings {},
 }
@@ -31,27 +30,14 @@ enum Route {
 #[component]
 fn Footer() -> Element {
     rsx! {
-        div {
-            Outlet::<Route> {}
-
-            p { "----" }
-
-            nav {
-                ul {
-                    li {
-                        Link { to: Route::Home {}, "Home" }
-                    }
-                    li {
-                        Link { to: Route::Games {}, "Games" }
-                    }
-                    li {
-                        Link { to: Route::Play {}, "Play" }
-                    }
-                    li {
-                        Link { to: Route::Settings {}, "Settings" }
-                    }
-                }
-            }
+        Outlet::<Route> {}
+        p { "----" }
+        nav {
+            style { {STYLE} }
+            Link { to: Route::Home {}, class: "nav-btn", "Home" }
+            Link { to: Route::Games {}, class: "nav-btn", "Games" }
+            Link { to: Route::Play {}, class: "nav-btn", "Play" }
+            Link { to: Route::Settings {}, class: "nav-btn", "Settings" }
         }
     }
 }
@@ -75,3 +61,14 @@ fn Play() -> Element {
 fn Settings() -> Element {
     rsx!("Settings")
 }
+
+const STYLE: &str = r#"
+    nav {
+        display: flex;
+        justify-content: space-around;
+    }
+    .nav-btn {
+        text-decoration: none;
+        color: black;
+    }
+"#;

examples/global.rs

@@ -8,7 +8,7 @@ static COUNT: GlobalSignal<i32> = Signal::global(|| 0);
 static DOUBLED_COUNT: GlobalSelector<i32> = Signal::global_selector(|| COUNT() * 2);
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/inputs.rs

@@ -42,9 +42,7 @@ fn app() -> Element {
                 // handling inputs on divs will catch all input events below
                 // so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe)
                 // be mindful in grouping inputs together, as they will all be handled by the same event handler
-                oninput: move |evt| {
-                    println!("{evt:?}");
-                },
+                oninput: move |evt| println!("{evt:?}"),
                 div {
                     input {
                         id: "huey",

examples/multiwindow.rs

@@ -5,21 +5,18 @@ fn main() {
 }
 
 fn app() -> Element {
+    let onclick = move |_| {
+        let dom = VirtualDom::new(popup);
+        dioxus::desktop::window().new_window(dom, Default::default());
+    };
+
     rsx! {
-        div {
-            button {
-                onclick: move |_| {
-                    let dom = VirtualDom::new(popup);
-                    dioxus::desktop::window().new_window(dom, Default::default());
-                },
-                "New Window"
-            }
-        }
+        button { onclick, "New Window" }
     }
 }
 
 fn popup() -> Element {
     rsx! {
-        div { "This is a popup!" }
+        div { "This is a popup window!" }
     }
 }

examples/nested_listeners.rs

@@ -7,7 +7,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/optional_props.rs

@@ -7,7 +7,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/pattern_reducer.rs

@@ -8,7 +8,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/readme.rs

@@ -5,7 +5,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/spread.rs

@@ -19,17 +19,18 @@ fn app() -> Element {
     }
 }
 
-fn spreadable_component(props: Props) -> Element {
-    rsx! {
-        audio { ..props.attributes, "1: {props.extra_data}\n2: {props.extra_data2}" }
-    }
-}
-
 #[derive(Props, PartialEq, Clone)]
 struct Props {
     #[props(extends = GlobalAttributes)]
     attributes: Vec<Attribute>,
 
     extra_data: String,
+
     extra_data2: String,
 }
+
+fn spreadable_component(props: Props) -> Element {
+    rsx! {
+        audio { ..props.attributes, "1: {props.extra_data}\n2: {props.extra_data2}" }
+    }
+}

examples/svg.rs

@@ -4,16 +4,14 @@ use dioxus::prelude::*;
 use rand::{thread_rng, Rng};
 
 fn main() {
-    launch_desktop(app);
-}
-
-fn app() -> Element {
-    rsx! {
-        div { user_select: "none", webkit_user_select: "none", margin_left: "10%", margin_right: "10%",
-            h1 { "Click die to generate a new value" }
-            div { cursor: "pointer", height: "100%", width: "100%", Dice {} }
+    launch(|| {
+        rsx! {
+            div { user_select: "none", webkit_user_select: "none", margin_left: "10%", margin_right: "10%",
+                h1 { "Click die to generate a new value" }
+                div { cursor: "pointer", height: "100%", width: "100%", Dice {} }
+            }
         }
-    }
+    });
 }
 
 #[component]

examples/svg_basic.rs

@@ -1,5 +1,9 @@
 use dioxus::prelude::*;
 
+fn main() {
+    launch(app);
+}
+
 fn app() -> Element {
     rsx! {
         svg {
@@ -71,13 +75,9 @@ fn app() -> Element {
             path {
                 d: "M9.00001 9C9 62 103.5 124 103.5 178",
                 stroke: "#3CC4DC",
-                "stroke-linecap": "square",
-                "stroke-width": "square",
+                stroke_linecap: "square",
+                stroke_width: "5",
             }
         }
     }
 }
-
-fn main() {
-    launch_desktop(app);
-}

examples/todomvc.rs

@@ -4,24 +4,26 @@ use dioxus_elements::input_data::keyboard_types::Key;
 use std::collections::HashMap;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 #[derive(PartialEq, Eq, Clone, Copy)]
-pub enum FilterState {
+enum FilterState {
     All,
     Active,
     Completed,
 }
 
-#[derive(Debug, PartialEq, Eq, Clone)]
-pub struct TodoItem {
-    pub id: u32,
-    pub checked: bool,
-    pub contents: String,
+#[derive(Debug, PartialEq, Eq)]
+struct TodoItem {
+    id: u32,
+    checked: bool,
+    contents: String,
 }
 
-pub fn app() -> Element {
+const STYLE: &str = include_str!("./assets/todomvc.css");
+
+fn app() -> Element {
     let mut todos = use_signal(|| HashMap::<u32, TodoItem>::new());
     let mut filter = use_signal(|| FilterState::All);
 
@@ -45,9 +47,16 @@ pub fn app() -> Element {
         filtered_todos
     });
 
+    let mut toggle_all = move |_| {
+        let check = active_todo_count() != 0;
+        for (_, item) in todos.write().iter_mut() {
+            item.checked = check;
+        }
+    };
+
     rsx! {
         section { class: "todoapp",
-            style { {include_str!("./assets/todomvc.css")} }
+            style { {STYLE} }
             TodoHeader { todos }
             section { class: "main",
                 if !todos.read().is_empty() {
@@ -55,18 +64,13 @@ pub fn app() -> Element {
                         id: "toggle-all",
                         class: "toggle-all",
                         r#type: "checkbox",
-                        onchange: move |_| {
-                            let check = active_todo_count() != 0;
-                            for (_, item) in todos.write().iter_mut() {
-                                item.checked = check;
-                            }
-                        },
+                        onchange: toggle_all,
                         checked: active_todo_count() == 0,
                     }
                     label { r#for: "toggle-all" }
                 }
                 ul { class: "todo-list",
-                    for id in filtered_todos.read().iter().copied() {
+                    for id in filtered_todos() {
                         TodoEntry { key: "{id}", id, todos }
                     }
                 }
@@ -80,7 +84,7 @@ pub fn app() -> Element {
 }
 
 #[component]
-pub fn TodoHeader(mut todos: Signal<HashMap<u32, TodoItem>>) -> Element {
+fn TodoHeader(mut todos: Signal<HashMap<u32, TodoItem>>) -> Element {
     let mut draft = use_signal(|| "".to_string());
     let mut todo_id = use_signal(|| 0);
 
@@ -114,7 +118,7 @@ pub fn TodoHeader(mut todos: Signal<HashMap<u32, TodoItem>>) -> Element {
 }
 
 #[component]
-pub fn TodoEntry(mut todos: Signal<HashMap<u32, TodoItem>>, id: u32) -> Element {
+fn TodoEntry(mut todos: Signal<HashMap<u32, TodoItem>>, id: u32) -> Element {
     let mut is_editing = use_signal(|| false);
     let checked = use_selector(move || todos.read().get(&id).unwrap().checked);
     let contents = use_selector(move || todos.read().get(&id).unwrap().contents.clone());
@@ -161,7 +165,7 @@ pub fn TodoEntry(mut todos: Signal<HashMap<u32, TodoItem>>, id: u32) -> Element
 }
 
 #[component]
-pub fn ListFooter(
+fn ListFooter(
     mut todos: Signal<HashMap<u32, TodoItem>>,
     active_todo_count: ReadOnlySignal<usize>,
     mut filter: Signal<FilterState>,
@@ -208,7 +212,7 @@ pub fn ListFooter(
     }
 }
 
-pub fn PageFooter() -> Element {
+fn PageFooter() -> Element {
     rsx! {
         footer { class: "info",
             p { "Double-click to edit a todo" }

examples/web_component.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    launch_desktop(app);
+    launch(app);
 }
 
 fn app() -> Element {

examples/window_focus.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    let mut focused = use_signal(|| false);
+    let mut focused = use_signal(|| true);
 
     use_wry_event_handler(move |event, _| match event {
         WryEvent::WindowEvent {