diff --git a/examples/file_explorer.rs b/examples/file_explorer.rs index 6a07cfe45..b175ad011 100644 --- a/examples/file_explorer.rs +++ b/examples/file_explorer.rs @@ -28,7 +28,7 @@ fn app() -> Element { link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet" } 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/file_upload.rs b/examples/file_upload.rs index 26f01f9af..58642e9c6 100644 --- a/examples/file_upload.rs +++ b/examples/file_upload.rs @@ -54,7 +54,7 @@ fn app() -> Element { id: "directory-upload", checked: enable_directory_upload, oninput: move |evt| enable_directory_upload.set(evt.checked()), - }, + } } div { diff --git a/examples/global.rs b/examples/global.rs index df6849ab5..2f121fbed 100644 --- a/examples/global.rs +++ b/examples/global.rs @@ -41,8 +41,8 @@ fn Decrement() -> Element { #[component] fn Display() -> Element { rsx! { - p { "Count: ", "{COUNT}" } - p { "Doubled: ", "{DOUBLED_COUNT}" } + p { "Count: {COUNT}" } + p { "Doubled: {DOUBLED_COUNT}" } } } diff --git a/examples/reducer.rs b/examples/reducer.rs index 082714ff5..d742bcf3e 100644 --- a/examples/reducer.rs +++ b/examples/reducer.rs @@ -20,7 +20,7 @@ fn app() -> Element { // Add some cute animations if the radio is playing! div { class: if state.read().is_playing { "bounce" }, - "The radio is... ", {state.read().is_playing()}, "!" + "The radio is... " {state.read().is_playing()} "!" } button { id: "play", onclick: move |_| state.write().reduce(PlayerAction::Pause), "Pause" } diff --git a/examples/rsx_usage.rs b/examples/rsx_usage.rs index 6fb2c8c73..25466943f 100644 --- a/examples/rsx_usage.rs +++ b/examples/rsx_usage.rs @@ -79,7 +79,7 @@ fn app() -> Element { } div { // pass simple rust expressions in - class: lazy_fmt, + class: "{lazy_fmt}", id: format_args!("attributes can be passed lazily with std::fmt::Arguments"), class: "asd", class: "{asd}", @@ -97,7 +97,7 @@ fn app() -> Element { {rsx!(p { "More templating!" })}, // Iterators - {(0..10).map(|i| rsx!(li { "{i}" }))}, + {(0..10).map(|i| rsx!(li { "{i}" }))} // Iterators within expressions { @@ -117,7 +117,7 @@ fn app() -> Element { // Conditional rendering // Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals. // You can convert a bool condition to rsx! with .then and .or - {true.then(|| rsx!(div {}))}, + {true.then(|| rsx!(div {}))} // Alternatively, you can use the "if" syntax - but both branches must be resolve to Element if false { @@ -135,7 +135,7 @@ fn app() -> Element { }} // returning "None" without a diverging branch is a bit noisy... but rare in practice - {None as Option<()>}, + {None as Option<()>} // can also just use empty fragments Fragment {} @@ -176,8 +176,8 @@ fn app() -> Element { // Spreading can also be overridden manually Taller { - ..TallerProps { a: "ballin!", children: VNode::empty() }, - a: "not ballin!" + a: "not ballin!", + ..TallerProps { a: "ballin!", children: VNode::empty() } } // Can take children too! diff --git a/examples/simple_list.rs b/examples/simple_list.rs index 4bbbd2188..3c1b9d71a 100644 --- a/examples/simple_list.rs +++ b/examples/simple_list.rs @@ -12,17 +12,17 @@ fn app() -> Element { rsx!( div { // Use Map directly to lazily pull elements - {(0..10).map(|f| rsx! { "{f}" })}, + {(0..10).map(|f| rsx! { "{f}" })} // Collect into an intermediate collection if necessary, and call into_iter {["a", "b", "c", "d", "e", "f"] .into_iter() .map(|f| rsx! { "{f}" }) .collect::>() - .into_iter()}, + .into_iter()} // Use optionals - {Some(rsx! { "Some" })}, + {Some(rsx! { "Some" })} // use a for loop where the body itself is RSX for name in 0..10 { diff --git a/examples/todomvc.rs b/examples/todomvc.rs index c96ab2501..f48ebe241 100644 --- a/examples/todomvc.rs +++ b/examples/todomvc.rs @@ -225,7 +225,7 @@ fn ListFooter( match active_todo_count() { 1 => "item", _ => "items", - }, + } " left" } } diff --git a/packages/autofmt/tests/samples.rs b/packages/autofmt/tests/samples.rs index ed7d08f2e..225b53d83 100644 --- a/packages/autofmt/tests/samples.rs +++ b/packages/autofmt/tests/samples.rs @@ -4,8 +4,8 @@ macro_rules! twoway { // doc attrs $( #[doc = $doc:expr] )* - $name:ident, - )* + $name:ident + ),* ) => { $( $( #[doc = $doc] )* @@ -51,4 +51,6 @@ twoway![ letsome, fat_exprs, nested, + staged, + misplaced ]; diff --git a/packages/autofmt/tests/samples/commentshard.rsx b/packages/autofmt/tests/samples/commentshard.rsx index 71782f39d..0a05cfe4a 100644 --- a/packages/autofmt/tests/samples/commentshard.rsx +++ b/packages/autofmt/tests/samples/commentshard.rsx @@ -38,5 +38,9 @@ rsx! { // todo some work in here class: "hello world" } + + div { + div {} + } } } diff --git a/packages/autofmt/tests/samples/docsite.rsx b/packages/autofmt/tests/samples/docsite.rsx index e6943c9b9..d244d7514 100644 --- a/packages/autofmt/tests/samples/docsite.rsx +++ b/packages/autofmt/tests/samples/docsite.rsx @@ -12,7 +12,11 @@ pub(crate) fn Nav() -> Element { let mut sidebar = SHOW_SIDEBAR.write(); *sidebar = !*sidebar; }, - MaterialIcon { name: "menu", size: 24, color: MaterialIconColor::Dark } + MaterialIcon { + name: "menu", + size: 24, + color: MaterialIconColor::Dark + } } div { class: "flex z-50 md:flex-1 px-2", LinkList {} } diff --git a/packages/autofmt/tests/samples/misplaced.rsx b/packages/autofmt/tests/samples/misplaced.rsx new file mode 100644 index 000000000..159afdf31 --- /dev/null +++ b/packages/autofmt/tests/samples/misplaced.rsx @@ -0,0 +1,35 @@ +pub(crate) fn Nav() -> Element { + rsx! { + SearchModal {} + header { + class: "sticky top-0 z-30 bg-white dark:text-gray-200 dark:bg-ideblack border-b dark:border-stone-700 h-16 bg-opacity-80 backdrop-blur-sm", + class: if HIGHLIGHT_NAV_LAYOUT() { "border border-orange-600 rounded-md" }, + div { class: "lg:py-2 px-2 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6 h-16", + button { + class: "bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100]", + class: if !SHOW_DOCS_NAV() { "hidden" }, + onclick: move |_| { + let mut sidebar = SHOW_SIDEBAR.write(); + *sidebar = !*sidebar; + }, + MaterialIcon { + name: "menu", + size: 24, + color: MaterialIconColor::Dark + } + } + div { class: "flex z-50 md:flex-1 px-2", LinkList {} } + } + } + } +} + +#[component] +fn SidebarSection(chapter: &'static SummaryItem) -> Element { + let link = chapter.maybe_link()?; + let sections = link.nested_items.iter().map(|chapter| { + rsx! { + SidebarChapter { chapter } + } + }); +} diff --git a/packages/autofmt/tests/samples/staged.rsx b/packages/autofmt/tests/samples/staged.rsx new file mode 100644 index 000000000..7f636e3cb --- /dev/null +++ b/packages/autofmt/tests/samples/staged.rsx @@ -0,0 +1,26 @@ +rsx! { + div {} + + div { "hi" } + + div { class: "helo", "hi" } + + div { class: "helo", glass: "123", "hi" } + + div { {some_expr} } + div { + { + POSTS.iter().enumerate().map(|(id, post)| rsx! { + BlogPostItem { post, id } + }) + } + } + + div { class: "123123123123123123123123123123123123", + {some_really_long_expr_some_really_long_expr_some_really_long_expr_some_really_long_expr_} + } + + div { class: "-my-8 divide-y-2 divide-gray-100", + {POSTS.iter().enumerate().map(|(id, post)| rsx! { BlogPostItem { post: post, id: id } })} + } +}