diff --git a/Cargo.lock b/Cargo.lock index 5ee06b5f3..bc647d375 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2806,8 +2806,6 @@ name = "dioxus-playwright-web-test" version = "0.0.1" dependencies = [ "dioxus", - "dioxus-html", - "dioxus-web", "serde_json", ] @@ -2919,8 +2917,6 @@ name = "dioxus-tailwind" version = "0.0.0" dependencies = [ "dioxus", - "dioxus-desktop", - "dioxus-web", "manganis", ] diff --git a/examples/PWA-example/src/main.rs b/examples/PWA-example/src/main.rs index 04053415c..168929d6a 100644 --- a/examples/PWA-example/src/main.rs +++ b/examples/PWA-example/src/main.rs @@ -9,12 +9,13 @@ fn main() { } fn app() -> Element { - rsx! ( - div { - style: "text-align: center;", + render! ( + div { style: "text-align: center;", h1 { "🌗 Dioxus 🚀" } h3 { "Frontend that scales." } - p { "Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust." } + p { + "Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust." + } } - )) + ) } diff --git a/examples/all_css.rs b/examples/all_css.rs index a2529aeba..e92c0b76e 100644 --- a/examples/all_css.rs +++ b/examples/all_css.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { align_content: "a", align_items: "a", diff --git a/examples/all_events.rs b/examples/all_events.rs index dd156c64d..23e81f662 100644 --- a/examples/all_events.rs +++ b/examples/all_events.rs @@ -52,7 +52,7 @@ fn app() -> Element { events.push_back(event); }; - rsx! { + render! { div { style: "{CONTAINER_STYLE}", div { style: "{RECT_STYLE}", diff --git a/examples/calculator.rs b/examples/calculator.rs index 8aa35ab11..496871770 100644 --- a/examples/calculator.rs +++ b/examples/calculator.rs @@ -57,7 +57,7 @@ fn app() -> Element { _ => {} }; - rsx! { + render! { style { {include_str!("./assets/calculator.css")} } div { id: "wrapper", div { class: "app", diff --git a/examples/clock.rs b/examples/clock.rs index 99e872811..20627fd0d 100644 --- a/examples/clock.rs +++ b/examples/clock.rs @@ -16,7 +16,7 @@ fn app() -> Element { } }); - rsx! { + render! { div { "High-Five counter: {count}" } } } diff --git a/examples/compose.rs b/examples/compose.rs index 30e9e19aa..0ebc57f2b 100644 --- a/examples/compose.rs +++ b/examples/compose.rs @@ -27,7 +27,7 @@ fn app() -> Element { ); }; - rsx! { + render! { h1 { "This is your email" } button { onclick: open_compose_window, "Click to compose a new email" } ul { @@ -44,7 +44,7 @@ fn app() -> Element { fn compose(send: Rc) -> Element { let mut user_input = use_signal(String::new); - rsx! { + render! { div { h1 { "Compose a new email" } diff --git a/examples/control_focus.rs b/examples/control_focus.rs index 0310f2cc7..bd1cd79c1 100644 --- a/examples/control_focus.rs +++ b/examples/control_focus.rs @@ -25,7 +25,7 @@ fn app() -> Element { } }); - rsx! { + render! { div { h1 { "Input Roulette" } for i in 0..100 { diff --git a/examples/crm.rs b/examples/crm.rs index aa6221b1a..47935bed2 100644 --- a/examples/crm.rs +++ b/examples/crm.rs @@ -60,7 +60,7 @@ pub struct Client { fn ClientList() -> Element { let mut clients = use_context::(); - rsx! { + render! { h2 { "List of Clients" } Link { to: Route::ClientAdd {}, class: "pure-button pure-button-primary", "Add Client" } Link { to: Route::Settings {}, class: "pure-button", "Settings" } @@ -88,7 +88,7 @@ fn ClientAdd() -> Element { dioxus_router::router().push(Route::ClientList {}); }; - rsx! { + render! { h2 { "Add new Client" } form { class: "pure-form pure-form-aligned", onsubmit: submit_client, @@ -138,7 +138,7 @@ fn ClientAdd() -> Element { #[component] fn Settings() -> Element { - rsx! { + render! { h2 { "Settings" } button { diff --git a/examples/custom_assets.rs b/examples/custom_assets.rs index f449ef6fe..8c98c41c3 100644 --- a/examples/custom_assets.rs +++ b/examples/custom_assets.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { p { "This should show an image:" diff --git a/examples/custom_html.rs b/examples/custom_html.rs index dc9320a6d..38b96ecaf 100644 --- a/examples/custom_html.rs +++ b/examples/custom_html.rs @@ -30,7 +30,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { h1 { "hello world!" } } } } diff --git a/examples/disabled.rs b/examples/disabled.rs index fffa828b4..d542ff0f2 100644 --- a/examples/disabled.rs +++ b/examples/disabled.rs @@ -7,7 +7,7 @@ fn main() { fn app() -> Element { let mut disabled = use_signal(|| false); - rsx! { + render! { div { button { onclick: move |_| disabled.toggle(), "click to " diff --git a/examples/dog_app.rs b/examples/dog_app.rs index 035628372..9f991a7ca 100644 --- a/examples/dog_app.rs +++ b/examples/dog_app.rs @@ -15,10 +15,10 @@ fn app() -> Element { .await; let Ok(breeds) = list else { - return rsx! { "error fetching breeds" }; + return render! { "error fetching breeds" }; }; - rsx! { + render! { for cur_breed in breeds.message.keys().take(10).cloned() { li { key: "{cur_breed}", button { onclick: move |_| breed.set(cur_breed.clone()), @@ -30,10 +30,10 @@ fn app() -> Element { }); let Some(breed_list) = breed_list.value().cloned() else { - return rsx! { "loading breeds..." }; + return render! { "loading breeds..." }; }; - rsx! { + render! { h1 { "Select a dog breed!" } div { height: "500px", display: "flex", ul { flex: "50%", {breed_list} } @@ -53,13 +53,13 @@ fn BreedPic(breed: Signal) -> Element { }); match fut.value().read().as_ref() { - Some(Ok(resp)) => rsx! { + Some(Ok(resp)) => render! { div { button { onclick: move |_| fut.restart(), "Click to fetch another doggo" } img { max_width: "500px", max_height: "500px", src: "{resp.message}" } } }, - _ => rsx! { "loading image..." }, + _ => render! { "loading image..." }, } } diff --git a/examples/error_handle.rs b/examples/error_handle.rs index d007e43f1..2fc899115 100644 --- a/examples/error_handle.rs +++ b/examples/error_handle.rs @@ -5,9 +5,9 @@ fn main() { } fn app() -> Element { - rsx! { + render! { ErrorBoundary { - handle_error: |error: CapturedError| rsx! {"Found error {error}"}, + handle_error: |error: CapturedError| render! {"Found error {error}"}, DemoC { x: 1 } } } diff --git a/examples/eval.rs b/examples/eval.rs index 51207be1c..3abd1a156 100644 --- a/examples/eval.rs +++ b/examples/eval.rs @@ -23,7 +23,7 @@ fn app() -> Element { }); match future.value().read().as_ref() { - Some(v) => rsx!( p { "{v}" } ), - _ => rsx!( p { "waiting.." } ), + Some(v) => render!( p { "{v}" } ), + _ => render!( p { "waiting.." } ), } } diff --git a/examples/file_explorer.rs b/examples/file_explorer.rs index c711261b2..18ed4684c 100644 --- a/examples/file_explorer.rs +++ b/examples/file_explorer.rs @@ -22,7 +22,7 @@ const _STYLE: &str = manganis::mg!(file("./examples/assets/fileexplorer.css")); fn app() -> Element { let mut files = use_signal(Files::new); - rsx! { + render! { div { link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet" } header { @@ -34,7 +34,7 @@ fn app() -> Element { main { {files.read().path_names.iter().enumerate().map(|(dir_id, path)| { let path_end = path.split('/').last().unwrap_or(path.as_str()); - rsx! ( + render! ( div { class: "folder", key: "{path}", diff --git a/examples/file_upload.rs b/examples/file_upload.rs index 6c48b6b41..dad2d0be4 100644 --- a/examples/file_upload.rs +++ b/examples/file_upload.rs @@ -30,7 +30,7 @@ fn App() -> Element { } }; - rsx! { + render! { label { input { r#type: "checkbox", diff --git a/examples/filedragdrop.rs b/examples/filedragdrop.rs index ad6556ab1..1587f4f7b 100644 --- a/examples/filedragdrop.rs +++ b/examples/filedragdrop.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - rsx!( + render!( div { h1 { "drag a file here and check your console" } } ) } diff --git a/examples/form.rs b/examples/form.rs index 897587daa..f367245aa 100644 --- a/examples/form.rs +++ b/examples/form.rs @@ -10,7 +10,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { h1 { "Form" } form { diff --git a/examples/hydration.rs b/examples/hydration.rs index fb6ec5cae..af328a842 100644 --- a/examples/hydration.rs +++ b/examples/hydration.rs @@ -27,7 +27,7 @@ fn main() { fn app() -> Element { let mut val = use_signal(|| 0); - rsx! { + render! { div { h1 { "hello world. Count: {val}" } button { onclick: move |_| val += 1, "click to increment" } diff --git a/examples/inputs.rs b/examples/inputs.rs index e9d417578..36f1039fd 100644 --- a/examples/inputs.rs +++ b/examples/inputs.rs @@ -35,7 +35,7 @@ const FIELDS: &[(&str, &str)] = &[ ]; fn app() -> Element { - rsx! { + render! { div { margin_left: "30px", {select_example()}, div { @@ -137,7 +137,7 @@ fn app() -> Element { } fn select_example() -> Element { - rsx! { + render! { div { select { id: "selection", diff --git a/examples/link.rs b/examples/link.rs index 4d9d9e079..37ce804c4 100644 --- a/examples/link.rs +++ b/examples/link.rs @@ -7,7 +7,7 @@ fn main() { #[component] fn App() -> Element { - rsx! ( + render! ( div { p { a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" } } p { diff --git a/examples/login_form.rs b/examples/login_form.rs index 220472886..8bab70ab6 100644 --- a/examples/login_form.rs +++ b/examples/login_form.rs @@ -29,7 +29,7 @@ fn app() -> Element { } }; - rsx! { + render! { h1 { "Login" } form { onsubmit, input { r#type: "text", id: "username", name: "username" } diff --git a/examples/multiwindow.rs b/examples/multiwindow.rs index 3f86d36aa..7ac9ae829 100644 --- a/examples/multiwindow.rs +++ b/examples/multiwindow.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { button { onclick: move |_| { @@ -19,7 +19,7 @@ fn app() -> Element { } fn popup() -> Element { - rsx! { + render! { div { "This is a popup!" } } } diff --git a/examples/nested_listeners.rs b/examples/nested_listeners.rs index 201bf3645..ba0030974 100644 --- a/examples/nested_listeners.rs +++ b/examples/nested_listeners.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { onclick: move |_| println!("clicked! top"), "- div" diff --git a/examples/openid_connect_demo/src/views/header.rs b/examples/openid_connect_demo/src/views/header.rs index ec4360bef..eb6174a80 100644 --- a/examples/openid_connect_demo/src/views/header.rs +++ b/examples/openid_connect_demo/src/views/header.rs @@ -24,7 +24,7 @@ pub fn LogOut(cx: Scope) -> Element { Some(log_out_url_result) => match log_out_url_result { Some(uri) => match uri { Ok(uri) => { - rsx! { + render! { Link { onclick: move |_| { { @@ -40,13 +40,11 @@ pub fn LogOut(cx: Scope) -> Element { } } Err(error) => { - rsx! { - div { "Failed to load disconnection url: {error:?}" } - } + render! { div { "Failed to load disconnection url: {error:?}" } } } }, None => { - rsx! { div { "Loading... Please wait" } } + render! { div { "Loading... Please wait" } } } }, None => { @@ -61,15 +59,15 @@ pub fn LogOut(cx: Scope) -> Element { }) }; logout_url_task(); - rsx! { div{"Loading log out url... Please wait"}} + render! { div { "Loading log out url... Please wait" } } } }, None => { - rsx! {{}} + render! {{}} } }, None => { - rsx! {{}} + render! {{}} } }) } @@ -115,14 +113,14 @@ pub fn RefreshToken(cx: Scope) -> Element { }) }; exchange_refresh_token_spawn(); - rsx! { div { "Refreshing session, please wait" } } + render! { div { "Refreshing session, please wait" } } } None => { - rsx! { div { "Id token expired and no refresh token found" } } + render! { div { "Id token expired and no refresh token found" } } } }, None => { - rsx! {{}} + render! {{}} } }) } @@ -137,21 +135,21 @@ pub fn LoadClient() -> Element { *fermi_client.write() = ClientState { oidc_client: Some(ClientProps::new(client_id.clone(), client.clone())), }; - rsx! { + render! { div { "Client successfully loaded" } Outlet:: {} } } Err(error) => { log::info! {"Failed to load client: {:?}", error}; - rsx! { + render! { div { "Failed to load client: {error:?}" } Outlet:: {} } } }, None => { - rsx! { + render! { div { div { "Loading client, please wait" } Outlet:: {} @@ -182,7 +180,7 @@ pub fn AuthHeader() -> Element { auth_request.nonce.clone(), ) { Ok(email) => { - rsx! { + render! { div { div { {email} } LogOut { client_id: client_props.client_id, client: client_props.client } @@ -195,9 +193,9 @@ pub fn AuthHeader() -> Element { // Id token failed to be decoded because it expired, we refresh it openidconnect::ClaimsVerificationError::Expired(_message) => { log::info!("Token expired"); - rsx! { + render! { div { - RefreshToken {client_id: client_props.client_id, client: client_props.client} + RefreshToken { client_id: client_props.client_id, client: client_props.client } Outlet:: {} } } @@ -205,7 +203,7 @@ pub fn AuthHeader() -> Element { // Other issue with token decoding _ => { log::info!("Other issue with token"); - rsx! { + render! { div { div { "{error}" } Outlet:: {} @@ -217,7 +215,7 @@ pub fn AuthHeader() -> Element { } // User is not logged in None => { - rsx! { + render! { div { Link { to: auth_request.authorize_url.clone(), "Log in" } Outlet:: {} @@ -234,17 +232,17 @@ pub fn AuthHeader() -> Element { auth_request: Some(auth_request), }), ); - rsx! { div { "Loading nonce" } } + render! { div { "Loading nonce" } } } } } // Client is not initialized yet, we need it for everything (None, _, _) => { - rsx! { LoadClient {} } + render! { LoadClient {} } } // We need everything loaded before doing anything (_client, _auth_request, _auth_token) => { - rsx! {{}} + render! {{}} } }) } diff --git a/examples/openid_connect_demo/src/views/login.rs b/examples/openid_connect_demo/src/views/login.rs index b3b611558..a79c012b0 100644 --- a/examples/openid_connect_demo/src/views/login.rs +++ b/examples/openid_connect_demo/src/views/login.rs @@ -21,14 +21,14 @@ pub fn Login(query_string: String) -> Element { (Some(client_props), Some(auth_token_read)) => { match (auth_token_read.id_token, auth_token_read.refresh_token) { (Some(_id_token), Some(_refresh_token)) => { - rsx! { + render! { div { "Sign in successful" } Link { to: home_url, "Go back home" } } } // If the refresh token is set but not the id_token, there was an error, we just go back home and reset their value (None, Some(_)) | (Some(_), None) => { - rsx! { + render! { div { "Error while attempting to log in" } Link { to: home_url, @@ -70,17 +70,17 @@ pub fn Login(query_string: String) -> Element { }) }; token_response_spawn(); - rsx!{ div {} } + render!{ div {} } } None => { - rsx! { div { "No code provided" } } + render! { div { "No code provided" } } } } } } } (_, _) => { - rsx! {{}} + render! {{}} } }) } diff --git a/examples/optional_props.rs b/examples/optional_props.rs index ad7edfdb3..9d8664161 100644 --- a/examples/optional_props.rs +++ b/examples/optional_props.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { Button { a: "asd".to_string(), c: "asd".to_string(), @@ -52,7 +52,7 @@ struct ButtonProps { } fn Button(props: ButtonProps) -> Element { - rsx! { + render! { button { "{props.a} | " "{props.b:?} | " diff --git a/examples/overlay.rs b/examples/overlay.rs index 9aa1ac2f8..8189bed2c 100644 --- a/examples/overlay.rs +++ b/examples/overlay.rs @@ -6,7 +6,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { width: "100%", height: "100%", diff --git a/examples/pattern_model.rs b/examples/pattern_model.rs index 686e682f5..8b6179466 100644 --- a/examples/pattern_model.rs +++ b/examples/pattern_model.rs @@ -40,7 +40,7 @@ const STYLE: &str = include_str!("./assets/calculator.css"); fn app() -> Element { let mut state = use_signal(Calculator::new); - rsx! { + render! { style { {STYLE} } div { id: "wrapper", div { class: "app", @@ -126,7 +126,7 @@ fn CalculatorKey( onclick: EventHandler, children: Element, ) -> Element { - rsx! { + render! { button { class: "calculator-key {name}", onclick: move |e| onclick.call(e), diff --git a/examples/pattern_reducer.rs b/examples/pattern_reducer.rs index ba931ed3c..6824f5f3c 100644 --- a/examples/pattern_reducer.rs +++ b/examples/pattern_reducer.rs @@ -14,7 +14,7 @@ fn main() { fn app() -> Element { let mut state = use_signal(|| PlayerState { is_playing: false }); - rsx!( + render!( div { h1 {"Select an option"} h3 { "The radio is... ", {state.read().is_playing()}, "!" } diff --git a/examples/read_size.rs b/examples/read_size.rs index 9d1b878cc..a2d6abce1 100644 --- a/examples/read_size.rs +++ b/examples/read_size.rs @@ -38,7 +38,7 @@ fn app() -> Element { } }; - rsx!( + render!( div { width: "50%", height: "50%", diff --git a/examples/readme.rs b/examples/readme.rs index 1691dec82..83036875d 100644 --- a/examples/readme.rs +++ b/examples/readme.rs @@ -11,7 +11,7 @@ fn main() { fn app() -> Element { let mut count = use_signal(|| 0); - rsx! { + render! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } diff --git a/examples/rsx_usage.rs b/examples/rsx_usage.rs index e9cfa57aa..64449f591 100644 --- a/examples/rsx_usage.rs +++ b/examples/rsx_usage.rs @@ -1,7 +1,7 @@ -//! A tour of the rsx! macro +//! A tour of the render! macro //! ------------------------ //! -//! This example serves as an informal quick reference of all the things that the rsx! macro can do. +//! This example serves as an informal quick reference of all the things that the render! macro can do. //! //! A full in-depth reference guide is available at: https://www.notion.so/rsx-macro-basics-ef6e367dec124f4784e736d91b0d0b19 //! @@ -55,7 +55,7 @@ fn main() { // let formatting_tuple = ("a", "b"); // let lazy_fmt = format_args!("lazily formatted text"); // let asd = 123; -// rsx! { +// render! { // div { // // Elements // div {} @@ -95,10 +95,10 @@ fn main() { // } // // Expressions can be used in element position too: -// {rsx!(p { "More templating!" })}, +// {render!(p { "More templating!" })}, // // Iterators -// {(0..10).map(|i| rsx!(li { "{i}" }))}, +// {(0..10).map(|i| render!(li { "{i}" }))}, // // Iterators within expressions // { @@ -106,19 +106,19 @@ fn main() { // // Iterators *should* have keys when you can provide them. // // Keys make your app run faster. Make sure your keys are stable, unique, and predictable. // // Using an "ID" associated with your data is a good idea. -// data.into_iter().map(|(k, v)| rsx!(li { key: "{k}", "{v}" })) +// data.into_iter().map(|(k, v)| render!(li { key: "{k}", "{v}" })) // } // // Matching // match true { -// true => rsx!( h1 {"Top text"}), -// false => rsx!( h1 {"Bottom text"}) +// true => render!( h1 {"Top text"}), +// false => render!( h1 {"Bottom text"}) // } // // 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 {}))}, +// // You can convert a bool condition to render! with .then and .or +// {true.then(|| render!(div {}))}, // // Alternatively, you can use the "if" syntax - but both branches must be resolve to Element // if false { @@ -130,7 +130,7 @@ fn main() { // // Using optionals for diverging branches // // Note that since this is wrapped in curlies, it's interpreted as an expression // {if true { -// Some(rsx!(h1 {"Top text"})) +// Some(render!(h1 {"Top text"})) // } else { // None // }} @@ -172,7 +172,7 @@ fn main() { // // Can pass in props directly as an expression // { // let props = TallerProps {a: "hello", children: None }; -// rsx!(Taller { ..props }) +// render!(Taller { ..props }) // } // // Spreading can also be overridden manually @@ -225,7 +225,7 @@ fn main() { // } // fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element { -// rsx! { +// render! { // p { "{text}" } // } // } @@ -235,7 +235,7 @@ fn main() { // // something like Clippy. // #[component(no_case_check)] // fn lowercase_helper() -> Element { -// rsx! { +// render! { // "asd" // } // } @@ -254,18 +254,18 @@ fn main() { // // something like Clippy. // #[component(no_case_check)] // pub fn lowercase_component() -> Element { -// rsx! { "look ma, no uppercase" } +// render! { "look ma, no uppercase" } // } // } // /// Documention for this component is visible within the rsx macro // #[component] // pub fn Taller( -// /// Fields are documented and accessible in rsx! +// /// Fields are documented and accessible in render! // a: &'static str, // children: Element, // ) -> Element { -// rsx! { {&children} } +// render! { {&children} } // } // #[derive(Props, PartialEq, Eq)] @@ -285,7 +285,7 @@ fn main() { // #[component] // fn WithInline(cx: Scope<'a>, text: &'a str) -> Element { -// rsx! { +// render! { // p { "{text}" } // } // } @@ -295,7 +295,7 @@ fn main() { // where // T: Display, // { -// rsx! { +// render! { // p { "{text}" } // } // } diff --git a/examples/scroll_to_top.rs b/examples/scroll_to_top.rs index d84b4c994..5b16e23ce 100644 --- a/examples/scroll_to_top.rs +++ b/examples/scroll_to_top.rs @@ -7,7 +7,7 @@ fn main() { fn app() -> Element { let mut header_element = use_signal(|| None); - rsx! { + render! { div { h1 { onmounted: move |cx| header_element.set(Some(cx.inner().clone())), diff --git a/examples/shortcut.rs b/examples/shortcut.rs index f86d2fc48..58b031522 100644 --- a/examples/shortcut.rs +++ b/examples/shortcut.rs @@ -10,5 +10,5 @@ fn app() -> Element { _ = use_global_shortcut("ctrl+s", move || toggled.toggle()); - rsx!("toggle: {toggled}") + render!("toggle: {toggled}") } diff --git a/examples/signals.rs b/examples/signals.rs index 962463362..d4649f0dc 100644 --- a/examples/signals.rs +++ b/examples/signals.rs @@ -26,7 +26,7 @@ fn app() -> Element { } }); - rsx! { + render! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } diff --git a/examples/simple_list.rs b/examples/simple_list.rs index dfe1f4b76..36597647e 100644 --- a/examples/simple_list.rs +++ b/examples/simple_list.rs @@ -5,20 +5,20 @@ fn main() { } fn app() -> Element { - rsx!( + render!( div { // Use Map directly to lazily pull elements - {(0..10).map(|f| rsx! { "{f}" })}, + {(0..10).map(|f| render! { "{f}" })}, // Collect into an intermediate collection if necessary, and call into_iter {["a", "b", "c", "d", "e", "f"] .into_iter() - .map(|f| rsx! { "{f}" }) + .map(|f| render! { "{f}" }) .collect::>() .into_iter()}, // Use optionals - {Some(rsx! { "Some" })}, + {Some(render! { "Some" })}, // use a for loop where the body itself is RSX for name in 0..10 { diff --git a/examples/ssr.rs b/examples/ssr.rs index c356222b3..0f000bf64 100644 --- a/examples/ssr.rs +++ b/examples/ssr.rs @@ -9,10 +9,10 @@ fn main() { let mut vdom = VirtualDom::prebuilt(app); println!("{}", dioxus_ssr::render(&vdom)); - // Or we can render rsx! calls themselves + // Or we can render render! calls themselves println!( "{}", - dioxus_ssr::render_element(rsx! { + dioxus_ssr::render_element(render! { div { h1 { "Hello, world!" } } @@ -30,7 +30,7 @@ fn main() { } fn app() -> Element { - rsx!( + render!( div { h1 { "Title" } p { "Body" } diff --git a/examples/streams.rs b/examples/streams.rs index 37a03b37a..581100c35 100644 --- a/examples/streams.rs +++ b/examples/streams.rs @@ -18,7 +18,7 @@ fn app() -> Element { } }); - rsx! { + render! { h1 { "High-Five counter: {count}" } } } diff --git a/examples/suspense.rs b/examples/suspense.rs index c40b446fb..37fdb6d1d 100644 --- a/examples/suspense.rs +++ b/examples/suspense.rs @@ -2,7 +2,7 @@ //! Suspense in Dioxus //! -//! Currently, `rsx!` does not accept futures as values. To achieve the functionality +//! Currently, `render!` does not accept futures as values. To achieve the functionality //! of suspense, we need to make a new component that performs its own suspense //! handling. //! @@ -29,7 +29,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { div { h1 { "Dogs are very important" } p { @@ -64,11 +64,11 @@ fn Doggo() -> Element { }); match fut.value().read().as_ref() { - Some(Ok(resp)) => rsx! { + Some(Ok(resp)) => render! { button { onclick: move |_| fut.restart(), "Click to fetch another doggo" } div { img { max_width: "500px", max_height: "500px", src: "{resp.message}" } } }, - Some(Err(_)) => rsx! { div { "loading dogs failed" } }, - None => rsx! { div { "loading dogs..." } }, + Some(Err(_)) => render! { div { "loading dogs failed" } }, + None => render! { div { "loading dogs..." } }, } } diff --git a/examples/svg.rs b/examples/svg.rs index 9818591bf..c12774567 100644 --- a/examples/svg.rs +++ b/examples/svg.rs @@ -8,7 +8,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { 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 {} } @@ -33,7 +33,7 @@ fn Dice() -> Element { let mut value = use_signal(|| 5); let active_dots = use_selector(move || &DOTS_FOR_VALUE[(value() - 1) as usize]); - rsx! { + render! { svg { view_box: "-1000 -1000 2000 2000", prevent_default: "onclick", diff --git a/examples/svg_basic.rs b/examples/svg_basic.rs index 7c9c37f92..b0523b3f7 100644 --- a/examples/svg_basic.rs +++ b/examples/svg_basic.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn app() -> Element { - rsx! { + render! { svg { width: "200", height: "250", diff --git a/examples/tailwind/Cargo.toml b/examples/tailwind/Cargo.toml index f61f1def8..4a2158c9b 100644 --- a/examples/tailwind/Cargo.toml +++ b/examples/tailwind/Cargo.toml @@ -12,11 +12,10 @@ rust-version = "1.60.0" publish = false [dependencies] -dioxus = { path = "../../packages/dioxus" } manganis = { workspace = true } [target.'cfg(not(target_arch = "wasm32"))'.dependencies] -dioxus-desktop = { path = "../../packages/desktop" } +dioxus = { path = "../../packages/dioxus", features = ["desktop"] } [target.'cfg(target_arch = "wasm32")'.dependencies] -dioxus-web = { path = "../../packages/web" } +dioxus = { path = "../../packages/dioxus", features = ["web"] } diff --git a/examples/tailwind/src/main.rs b/examples/tailwind/src/main.rs index f1a2b0b54..0a6dcde01 100644 --- a/examples/tailwind/src/main.rs +++ b/examples/tailwind/src/main.rs @@ -5,33 +5,31 @@ use dioxus::prelude::*; const _STYLE: &str = manganis::mg!(file("./public/tailwind.css")); fn main() { - #[cfg(not(target_arch = "wasm32"))] - launch_desktop(app); - #[cfg(target_arch = "wasm32")] - dioxus_web::launch(app); + launch(app); } pub fn app() -> Element { let grey_background = true; - rsx!( + render!( div { header { class: "text-gray-400 body-font", // you can use optional attributes to optionally apply a tailwind class - class: if grey_background { "bg-gray-900" }, + class: if grey_background { + "bg-gray-900" + }, div { class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center", a { class: "flex title-font font-medium items-center text-white mb-4 md:mb-0", StacksIcon {} - span { class: "ml-3 text-xl", "Hello Dioxus!"} + span { class: "ml-3 text-xl", "Hello Dioxus!" } } nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center", - a { class: "mr-5 hover:text-white", "First Link"} - a { class: "mr-5 hover:text-white", "Second Link"} - a { class: "mr-5 hover:text-white", "Third Link"} - a { class: "mr-5 hover:text-white", "Fourth Link"} + a { class: "mr-5 hover:text-white", "First Link" } + a { class: "mr-5 hover:text-white", "Second Link" } + a { class: "mr-5 hover:text-white", "Third Link" } + a { class: "mr-5 hover:text-white", "Fourth Link" } } - button { - class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0", + button { class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0", "Button" RightArrowIcon {} } @@ -45,21 +43,17 @@ pub fn app() -> Element { br { class: "hidden lg:inline-block" } "Dioxus Sneak Peek" } - p { - class: "mb-8 leading-relaxed", + p { class: "mb-8 leading-relaxed", "Dioxus is a new UI framework that makes it easy and simple to write cross-platform apps using web technologies! It is functional, fast, and portable. Dioxus can run on the web, on the desktop, and on mobile and embedded platforms." - } div { class: "flex justify-center", - button { - class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg", + button { class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg", "Learn more" } - button { - class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg", + button { class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg", "Build an app" } } @@ -68,18 +62,18 @@ pub fn app() -> Element { img { class: "object-cover object-center rounded", src: "https://i.imgur.com/oK6BLtw.png", - referrerpolicy:"no-referrer", - alt: "hero", + referrerpolicy: "no-referrer", + alt: "hero" } } } } } - )) + ) } pub fn StacksIcon() -> Element { - rsx!( + render!( svg { fill: "none", stroke: "currentColor", @@ -88,13 +82,13 @@ pub fn StacksIcon() -> Element { stroke_width: "2", class: "w-10 h-10 text-white p-2 bg-indigo-500 rounded-full", view_box: "0 0 24 24", - path { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"} + path { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" } } - )) + ) } pub fn RightArrowIcon() -> Element { - rsx!( + render!( svg { fill: "none", stroke: "currentColor", @@ -103,7 +97,7 @@ pub fn RightArrowIcon() -> Element { stroke_width: "2", class: "w-4 h-4 ml-1", view_box: "0 0 24 24", - path { d: "M5 12h14M12 5l7 7-7 7"} + path { d: "M5 12h14M12 5l7 7-7 7" } } - )) + ) } diff --git a/examples/tasks.rs b/examples/tasks.rs index e65f99197..3df04f6f7 100644 --- a/examples/tasks.rs +++ b/examples/tasks.rs @@ -19,7 +19,7 @@ fn app() -> Element { } }); - rsx! { + render! { div { h1 { "Current count: {count}" } button { diff --git a/examples/textarea.rs b/examples/textarea.rs index 3ad2143ec..44c8462c3 100644 --- a/examples/textarea.rs +++ b/examples/textarea.rs @@ -9,7 +9,7 @@ fn main() { fn app() -> Element { let mut model = use_signal(|| String::from("asd")); - rsx! { + render! { textarea { class: "border", rows: "10", diff --git a/examples/todomvc.rs b/examples/todomvc.rs index 4c7364b5c..221e068bd 100644 --- a/examples/todomvc.rs +++ b/examples/todomvc.rs @@ -45,7 +45,7 @@ pub fn app() -> Element { filtered_todos }); - rsx! { + render! { section { class: "todoapp", style { {include_str!("./assets/todomvc.css")} } TodoHeader { todos } @@ -98,7 +98,7 @@ pub fn TodoHeader(mut todos: Signal>) -> Element { } }; - rsx! { + render! { header { class: "header", h1 { "todos" } input { @@ -119,7 +119,7 @@ pub fn TodoEntry(mut todos: Signal>, id: u32) -> Element let checked = use_selector(move || todos.read().get(&id).unwrap().checked); let contents = use_selector(move || todos.read().get(&id).unwrap().contents.clone()); - rsx! { + render! { li { class: if checked() { "completed" }, class: if is_editing() { "editing"}, div { class: "view", input { @@ -168,7 +168,7 @@ pub fn ListFooter( ) -> Element { let show_clear_completed = use_selector(move || todos.read().values().any(|todo| todo.checked)); - rsx! { + render! { footer { class: "footer", span { class: "todo-count", strong { "{active_todo_count} " } @@ -209,7 +209,7 @@ pub fn ListFooter( } pub fn PageFooter() -> Element { - rsx! { + render! { footer { class: "info", p { "Double-click to edit a todo" } p { diff --git a/examples/web_component.rs b/examples/web_component.rs index 42a55f6f6..dd9221361 100644 --- a/examples/web_component.rs +++ b/examples/web_component.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - rsx! { + render! { web-component { "my-prop": "5%", } diff --git a/examples/window_event.rs b/examples/window_event.rs index 3372dbc3b..421869c65 100644 --- a/examples/window_event.rs +++ b/examples/window_event.rs @@ -18,7 +18,7 @@ fn app() -> Element { let mut always_on_top = use_signal(|| false); let mut decorations = use_signal(|| false); - rsx!( + render!( link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" diff --git a/examples/window_focus.rs b/examples/window_focus.rs index 67d444037..3a4739e43 100644 --- a/examples/window_focus.rs +++ b/examples/window_focus.rs @@ -21,7 +21,7 @@ fn app() -> Element { _ => {} }); - rsx! { + render! { div { width: "100%", height: "100%", display: "flex", flex_direction: "column", align_items: "center", if focused() { "This window is focused!" diff --git a/examples/window_zoom.rs b/examples/window_zoom.rs index 2c6f68b00..5907588bd 100644 --- a/examples/window_zoom.rs +++ b/examples/window_zoom.rs @@ -7,7 +7,7 @@ fn main() { fn app() -> Element { let mut level = use_signal(|| 1.0); - rsx! { + render! { input { r#type: "number", value: "{level}", diff --git a/examples/xss_safety.rs b/examples/xss_safety.rs index 8f4dc7245..c7ba2663d 100644 --- a/examples/xss_safety.rs +++ b/examples/xss_safety.rs @@ -11,7 +11,7 @@ fn main() { fn app() -> Element { let mut contents = use_signal(|| String::from("")); - rsx! { + render! { div { h1 {"Dioxus is XSS-Safe"} h3 { "{contents}" } diff --git a/packages/liveview/examples/rocket.rs b/packages/liveview/examples/rocket.rs index c597957fd..e5f045698 100644 --- a/packages/liveview/examples/rocket.rs +++ b/packages/liveview/examples/rocket.rs @@ -57,7 +57,7 @@ fn ws(ws: WebSocket, pool: &State) -> Channel<'static> { .await; Ok(()) }) - } + }) } #[tokio::main] diff --git a/packages/web/tests/hydrate.rs b/packages/web/tests/hydrate.rs index 0fc95a971..fff3ed39c 100644 --- a/packages/web/tests/hydrate.rs +++ b/packages/web/tests/hydrate.rs @@ -10,18 +10,14 @@ fn makes_tree() { fn app() -> Element { rsx! { div { - div { - h1 {} - } - div { - h2 {} - } + div { h1 {} } + div { h2 {} } } - }) + } } let mut dom = VirtualDom::new(app); - let muts = dom.rebuild(); + let muts = dom.rebuild_to_vec(); dbg!(muts.edits); } @@ -31,12 +27,8 @@ fn rehydrates() { fn app() -> Element { rsx! { div { - div { - h1 { "h1" } - } - div { - h2 { "h2" } - } + div { h1 { "h1" } } + div { h2 { "h2" } } button { onclick: move |_| { println!("clicked"); @@ -45,7 +37,7 @@ fn rehydrates() { } {false.then(|| rsx!{ "hello" })} } - }) + } } let mut dom = VirtualDom::new(app); diff --git a/playwright-tests/fullstack/src/main.rs b/playwright-tests/fullstack/src/main.rs index e8ea05176..b1d8f8ccd 100644 --- a/playwright-tests/fullstack/src/main.rs +++ b/playwright-tests/fullstack/src/main.rs @@ -60,11 +60,7 @@ fn app(cx: Scope) -> Element { rsx! { h1 { "hello axum! {count}" } - button { - class: "increment-button", - onclick: move |_| count += 1, - "Increment" - } + button { class: "increment-button", onclick: move |_| count += 1, "Increment" } button { class: "server-button", onclick: move |_| { @@ -80,7 +76,7 @@ fn app(cx: Scope) -> Element { "Run a server function!" } "Server said: {text}" - }) + } } #[server(PostServerData)] diff --git a/playwright-tests/liveview/src/main.rs b/playwright-tests/liveview/src/main.rs index b834b6842..dca0bb735 100644 --- a/playwright-tests/liveview/src/main.rs +++ b/playwright-tests/liveview/src/main.rs @@ -20,7 +20,7 @@ fn app() -> Element { } input { value: "hello input" } div { class: "style-div", color: "red", "colored text" } - }) + } } #[tokio::main] diff --git a/playwright-tests/web/Cargo.toml b/playwright-tests/web/Cargo.toml index 8bf931ecc..268be52fa 100644 --- a/playwright-tests/web/Cargo.toml +++ b/playwright-tests/web/Cargo.toml @@ -7,7 +7,5 @@ license = "MIT OR Apache-2.0" publish = false [dependencies] -dioxus = { path = "../../packages/dioxus" } -dioxus-web = { path = "../../packages/web" } -dioxus-html = { path = "../../packages/html" } +dioxus = { path = "../../packages/dioxus", features = ["web"]} serde_json = "1.0.96" diff --git a/playwright-tests/web/src/main.rs b/playwright-tests/web/src/main.rs index a3a3cc71e..2501ed70c 100644 --- a/playwright-tests/web/src/main.rs +++ b/playwright-tests/web/src/main.rs @@ -6,8 +6,6 @@ fn app() -> Element { let mut num = use_signal(|| 0); let eval_result = use_signal(String::new); - let eval_provider = dioxus_html::prelude::use_eval(cx); - rsx! { div { "hello axum! {num}" @@ -25,27 +23,26 @@ fn app() -> Element { button { class: "eval-button", onclick: move |_| { - let eval = eval_provider( + let eval = eval( r#" window.document.title = 'Hello from Dioxus Eval!'; dioxus.send("returned eval value"); "#, ) .unwrap(); - let setter = eval_result.setter(); async move { let result = eval.recv().await; if let Ok(serde_json::Value::String(string)) = result { - setter(string); + eval_result.set(string); } } }, "Eval" } div { class: "eval-result", "{eval_result}" } - }) + } } fn main() { - dioxus_web::launch(app); + launch_web(app); }