diff --git a/Cargo.toml b/Cargo.toml index 0169c8761..5beed3343 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -49,7 +49,7 @@ members = [ "playwright-tests/web", "playwright-tests/fullstack", ] -exclude = ["examples/mobile_demo", "packages/fermi", "examples/openid_connect_demo",] +exclude = ["examples/mobile_demo", "examples/openid_connect_demo",] [workspace.package] version = "0.4.3" diff --git a/examples/calculator.rs b/examples/calculator.rs index d81f17f80..84752fa44 100644 --- a/examples/calculator.rs +++ b/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); } diff --git a/examples/clock.rs b/examples/clock.rs index ae994078c..38e7e8584 100644 --- a/examples/clock.rs +++ b/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}"); } }); diff --git a/examples/custom_assets.rs b/examples/custom_assets.rs index 2c5114ab2..7f9503a5f 100644 --- a/examples/custom_assets.rs +++ b/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 { diff --git a/examples/disabled.rs b/examples/disabled.rs index fffa828b4..c7288f352 100644 --- a/examples/disabled.rs +++ b/examples/disabled.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/dog_app.rs b/examples/dog_app.rs index 035628372..b98cb0f3b 100644 --- a/examples/dog_app.rs +++ b/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 { diff --git a/examples/eval.rs b/examples/eval.rs index 51207be1c..736c8d652 100644 --- a/examples/eval.rs +++ b/examples/eval.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/file_upload.rs b/examples/file_upload.rs index 6c48b6b41..1ee5d968b 100644 --- a/examples/file_upload.rs +++ b/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 { diff --git a/examples/flat_router.rs b/examples/flat_router.rs index 3f445acfa..9bdcf9b29 100644 --- a/examples/flat_router.rs +++ b/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:: {} }) + launch(|| { + rsx! { + Router:: {} + } + }) } #[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:: {} - - 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:: {} + 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; + } +"#; diff --git a/examples/global.rs b/examples/global.rs index 947d839c1..5030bd30d 100644 --- a/examples/global.rs +++ b/examples/global.rs @@ -8,7 +8,7 @@ static COUNT: GlobalSignal = Signal::global(|| 0); static DOUBLED_COUNT: GlobalSelector = Signal::global_selector(|| COUNT() * 2); fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/inputs.rs b/examples/inputs.rs index e9d417578..e61ba3b05 100644 --- a/examples/inputs.rs +++ b/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", diff --git a/examples/multiwindow.rs b/examples/multiwindow.rs index f62b76583..974e024d7 100644 --- a/examples/multiwindow.rs +++ b/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!" } } } diff --git a/examples/nested_listeners.rs b/examples/nested_listeners.rs index 201bf3645..aaee9757e 100644 --- a/examples/nested_listeners.rs +++ b/examples/nested_listeners.rs @@ -7,7 +7,7 @@ use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/optional_props.rs b/examples/optional_props.rs index 391570e25..75ba1e3be 100644 --- a/examples/optional_props.rs +++ b/examples/optional_props.rs @@ -7,7 +7,7 @@ use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/pattern_reducer.rs b/examples/pattern_reducer.rs index ba931ed3c..cc685a8e1 100644 --- a/examples/pattern_reducer.rs +++ b/examples/pattern_reducer.rs @@ -8,7 +8,7 @@ use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/readme.rs b/examples/readme.rs index 1691dec82..405953712 100644 --- a/examples/readme.rs +++ b/examples/readme.rs @@ -5,7 +5,7 @@ use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/spread.rs b/examples/spread.rs index b16c10ccf..d3747e2eb 100644 --- a/examples/spread.rs +++ b/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, extra_data: String, + extra_data2: String, } + +fn spreadable_component(props: Props) -> Element { + rsx! { + audio { ..props.attributes, "1: {props.extra_data}\n2: {props.extra_data2}" } + } +} diff --git a/examples/svg.rs b/examples/svg.rs index 9818591bf..1ba7c4e32 100644 --- a/examples/svg.rs +++ b/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] diff --git a/examples/svg_basic.rs b/examples/svg_basic.rs index 7c9c37f92..eeb261299 100644 --- a/examples/svg_basic.rs +++ b/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); -} diff --git a/examples/todomvc.rs b/examples/todomvc.rs index 26e6c8fa5..c3187c3f6 100644 --- a/examples/todomvc.rs +++ b/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::::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>) -> Element { +fn TodoHeader(mut todos: Signal>) -> 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>) -> Element { } #[component] -pub fn TodoEntry(mut todos: Signal>, id: u32) -> Element { +fn TodoEntry(mut todos: Signal>, 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>, id: u32) -> Element } #[component] -pub fn ListFooter( +fn ListFooter( mut todos: Signal>, active_todo_count: ReadOnlySignal, mut filter: Signal, @@ -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" } diff --git a/examples/web_component.rs b/examples/web_component.rs index 42a55f6f6..9aa712891 100644 --- a/examples/web_component.rs +++ b/examples/web_component.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn main() { - launch_desktop(app); + launch(app); } fn app() -> Element { diff --git a/examples/window_focus.rs b/examples/window_focus.rs index 8aab3c88b..d4f477391 100644 --- a/examples/window_focus.rs +++ b/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 { diff --git a/packages/signals/src/signal.rs b/packages/signals/src/signal.rs index 9e5bb30c5..21e14bb9d 100644 --- a/packages/signals/src/signal.rs +++ b/packages/signals/src/signal.rs @@ -726,7 +726,7 @@ impl>> PartialEq for ReadOnlySignal { } } -impl> + 'static> Deref for ReadOnlySignal { +impl> + 'static> Deref for ReadOnlySignal { type Target = dyn Fn() -> T; fn deref(&self) -> &Self::Target { @@ -735,7 +735,7 @@ impl> + 'static> Deref for ReadOnlySignal). let uninit_callable = MaybeUninit::::uninit(); // Then move that value into the closure. We assume that the closure now has a in memory layout of Self. - let uninit_closure = move || *Self::read(unsafe { &*uninit_callable.as_ptr() }); + let uninit_closure = move || Self::read(unsafe { &*uninit_callable.as_ptr() }).clone(); // Check that the size of the closure is the same as the size of Self in case the compiler changed the layout of the closure. let size_of_closure = std::mem::size_of_val(&uninit_closure);