diff --git a/examples/calculator.rs b/examples/calculator.rs index df0ac4c04..37ab0c794 100644 --- a/examples/calculator.rs +++ b/examples/calculator.rs @@ -57,12 +57,12 @@ fn app(cx: Scope) -> Element { }; cx.render(rsx!( - style { [include_str!("./assets/calculator.css")] } + style { include_str!("./assets/calculator.css") } div { id: "wrapper", div { class: "app", div { class: "calculator", onkeydown: handle_key_down_event, - div { class: "calculator-display", [val.to_string()] } + div { class: "calculator-display", val.to_string() } div { class: "calculator-keypad", div { class: "input-keys", div { class: "function-keys", @@ -74,7 +74,7 @@ fn app(cx: Scope) -> Element { val.set("0".into()); } }, - [if val.is_empty() { "C" } else { "AC" }] + if val.is_empty() { "C" } else { "AC" } } button { class: "calculator-key key-sign", diff --git a/examples/disabled.rs b/examples/disabled.rs index 2545748fd..f89aafe56 100644 --- a/examples/disabled.rs +++ b/examples/disabled.rs @@ -12,7 +12,7 @@ fn app(cx: Scope) -> Element { button { onclick: move |_| disabled.set(!disabled), "click to " - [if disabled == true {"enable"} else {"disable"}] + if disabled == true { "enable" } else { "disable" } " the lower button" } diff --git a/examples/file_explorer.rs b/examples/file_explorer.rs index 27f9bee6f..24ac60c90 100644 --- a/examples/file_explorer.rs +++ b/examples/file_explorer.rs @@ -19,10 +19,10 @@ fn app(cx: Scope) -> Element { rsx!(cx, div { link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", } - style { [include_str!("./assets/fileexplorer.css")] } + style { include_str!("./assets/fileexplorer.css") } header { i { class: "material-icons icon-menu", "menu" } - h1 { "Files: " [files.read().current()] } + h1 { "Files: ", files.read().current() } span { } i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" } } diff --git a/examples/inputs.rs b/examples/inputs.rs index 8be3fdee2..9b6ec104f 100644 --- a/examples/inputs.rs +++ b/examples/inputs.rs @@ -38,12 +38,6 @@ const FIELDS: &[(&str, &str)] = &[ fn app(cx: Scope) -> Element { cx.render(rsx! { div { margin_left: "30px", - - // radio group - - - - div { // 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) @@ -127,7 +121,6 @@ fn app(cx: Scope) -> Element { name: "{field}", r#type: "{field}", value: "{value}", - // checked: "false", oninput: move |evt: FormEvent| { println!("{:?}", evt); }, diff --git a/examples/nested_listeners.rs b/examples/nested_listeners.rs index 7e3a1a066..163a827a2 100644 --- a/examples/nested_listeners.rs +++ b/examples/nested_listeners.rs @@ -15,7 +15,6 @@ fn app(cx: Scope) -> Element { div { onclick: move |_| println!("clicked! top"), "- div" - button { onclick: move |_| println!("clicked! bottom propoate"), "Propogate" diff --git a/examples/pattern_model.rs b/examples/pattern_model.rs index 71c854352..f379277e5 100644 --- a/examples/pattern_model.rs +++ b/examples/pattern_model.rs @@ -36,18 +36,18 @@ fn app(cx: Scope) -> Element { let state = use_ref(&cx, Calculator::new); cx.render(rsx! { - style { [include_str!("./assets/calculator.css")] } + style { include_str!("./assets/calculator.css") } div { id: "wrapper", div { class: "app", div { class: "calculator", onkeypress: move |evt| state.write().handle_keydown(evt), - div { class: "calculator-display", [state.read().formatted_display()]} + div { class: "calculator-display", state.read().formatted_display() } div { class: "calculator-keypad", div { class: "input-keys", div { class: "function-keys", CalculatorKey { name: "key-clear", onclick: move |_| state.write().clear_display(), - [if state.read().display_value == "0" { "C" } else { "AC" }] + if state.read().display_value == "0" { "C" } else { "AC" } } CalculatorKey { name: "key-sign", diff --git a/examples/pattern_reducer.rs b/examples/pattern_reducer.rs index c3d1a962d..6778324a4 100644 --- a/examples/pattern_reducer.rs +++ b/examples/pattern_reducer.rs @@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element { cx.render(rsx!( div { h1 {"Select an option"} - h3 { "The radio is... " [state.is_playing()] "!" } + h3 { "The radio is... ", state.is_playing(), "!" } button { onclick: move |_| state.make_mut().reduce(PlayerAction::Pause), "Pause" } diff --git a/examples/rsx_compile_fail.rs b/examples/rsx_compile_fail.rs index 4b9ac017b..2859dc53e 100644 --- a/examples/rsx_compile_fail.rs +++ b/examples/rsx_compile_fail.rs @@ -32,27 +32,19 @@ fn example(cx: Scope) -> Element { cx.render(rsx!( div { - div { - id: "asd", + div { id: "asd", "your neighborhood spiderman" items.iter().cycle().take(5).map(|f| rsx!{ - div { - "{f.a}" - } + div { "{f.a}" } }) things_list.iter().map(|f| rsx!{ - div { - "{f.a}" - "{f.b}" - } + div { "{f.a}" "{f.b}" } }) - mything_read.as_ref().map(|f| rsx!{ - div { - "{f}" - } + mything_read.as_ref().map(|f| rsx! { + div { "{f}" } }) } } diff --git a/examples/rsx_usage.rs b/examples/rsx_usage.rs index b4085a2e4..a610fe334 100644 --- a/examples/rsx_usage.rs +++ b/examples/rsx_usage.rs @@ -1,3 +1,5 @@ +#![allow(non_snake_case)] + //! A tour of the rsx! macro //! ------------------------ //! @@ -42,10 +44,6 @@ fn main() { dioxus_desktop::launch(app); } -/// When trying to return "nothing" to Dioxus, you'll need to specify the type parameter or Rust will be sad. -/// This type alias specifies the type for you so you don't need to write "None as Option<()>" -const NONE_ELEMENT: Option<()> = None; - use core::{fmt, str::FromStr}; use std::fmt::Display; @@ -63,7 +61,7 @@ fn app(cx: Scope) -> Element { h1 {"Some text"} h1 {"Some text with {formatting}"} h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"} - h1 {"Formatting without interpolation " [formatting_tuple.0] "and" [formatting_tuple.1] } + h1 {"Formatting without interpolation " formatting_tuple.0 "and" formatting_tuple.1 } h2 { "Multiple" "Text" @@ -131,13 +129,9 @@ fn app(cx: Scope) -> Element { None } - // returning "None" without a diverging branch is a bit noisy... but rare in practice None as Option<()>, - // Use the Dioxus type-alias for less noise - NONE_ELEMENT, - // can also just use empty fragments Fragment {} @@ -160,7 +154,7 @@ fn app(cx: Scope) -> Element { // Can accept any paths // Notice how you still get syntax highlighting and IDE support :) Baller {} - baller::Baller { } + baller::Baller {} crate::baller::Baller {} // Can take properties @@ -187,11 +181,13 @@ fn app(cx: Scope) -> Element { // This component's props are defined *inline* with the `inline_props` macro WithInline { text: "using functionc all syntax" } - // Components can be geneirc too + // Components can be generic too // This component takes i32 type to give you typed input TypedInput::> {} + // Type inference can be used too TypedInput { initial: 10.0 } + // geneircs with the `inline_props` macro Label { text: "hello geneirc world!" } Label { text: 99.9 } @@ -205,10 +201,23 @@ fn app(cx: Scope) -> Element { // helper functions // Anything that implements IntoVnode can be dropped directly into Rsx helper(&cx, "hello world!") + + // Strings can be supplied directly + String::from("Hello world!") + + // So can format_args + format_args!("Hello {}!", "world") + + // Or we can shell out to a helper function + format_dollars(10, 50) } }) } +fn format_dollars(dollars: u32, cents: u32) -> String { + format!("${}.{:02}", dollars, cents) +} + fn helper<'a>(cx: &'a ScopeState, text: &str) -> Element<'a> { cx.render(rsx! { p { "{text}" } @@ -223,7 +232,7 @@ fn lowercase_helper(cx: Scope) -> Element { mod baller { use super::*; - #[derive(Props, PartialEq)] + #[derive(Props, PartialEq, Eq)] pub struct BallerProps {} #[allow(non_snake_case)] @@ -252,7 +261,7 @@ pub fn Taller<'a>(cx: Scope<'a, TallerProps<'a>>) -> Element { }) } -#[derive(Props, PartialEq)] +#[derive(Props, PartialEq, Eq)] pub struct TypedInputProps { #[props(optional, default)] initial: Option, diff --git a/examples/todomvc.rs b/examples/todomvc.rs index 61fa39c16..073cbaee8 100644 --- a/examples/todomvc.rs +++ b/examples/todomvc.rs @@ -1,3 +1,5 @@ +#![allow(non_snake_case)] + use dioxus::prelude::*; use dioxus_elements::input_data::keyboard_types::Key; @@ -5,14 +7,14 @@ fn main() { dioxus_desktop::launch(app); } -#[derive(PartialEq)] +#[derive(Eq, PartialEq)] pub enum FilterState { All, Active, Completed, } -#[derive(Debug, PartialEq, Clone)] +#[derive(Debug, Eq, PartialEq, Clone)] pub struct TodoItem { pub id: u32, pub checked: bool, @@ -46,7 +48,7 @@ pub fn app(cx: Scope<()>) -> Element { cx.render(rsx!{ section { class: "todoapp", - style { [include_str!("./assets/todomvc.css")] } + style { include_str!("./assets/todomvc.css") } div { header { class: "header", h1 {"todos"} @@ -86,7 +88,7 @@ pub fn app(cx: Scope<()>) -> Element { li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }} li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }} } - (show_clear_completed).then(|| rsx!( + show_clear_completed.then(|| rsx!( button { class: "clear-completed", onclick: move |_| todos.make_mut().retain(|_, todo| !todo.checked), @@ -123,7 +125,6 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element { li { class: "{completed} {editing}", div { class: "view", - input { class: "toggle", r#type: "checkbox", diff --git a/examples/window_event.rs b/examples/window_event.rs index ee2d3a752..7384b5be9 100644 --- a/examples/window_event.rs +++ b/examples/window_event.rs @@ -84,9 +84,7 @@ fn app(cx: Scope) -> Element { button { class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded", onmousedown: |evt| evt.cancel_bubble(), - onclick: move |_| { - window.set_title("Dioxus Application"); - }, + onclick: move |_| window.set_title("Dioxus Application"), "Change Title" } }