fix more examples

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",
 ]
 

examples/PWA-example/src/main.rs

@@ -9,12 +9,13 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! (
+    render! (
-        div {
+        div { style: "text-align: center;",
-            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."
+            }
         }
-    ))
+    )
 }

examples/all_css.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! {
+    render! {
         div {
             align_content: "a",
             align_items: "a",

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}",

examples/calculator.rs

@@ -57,7 +57,7 @@ fn app() -> Element {
         _ => {}
     };
 
-    rsx! {
+    render! {
         style { {include_str!("./assets/calculator.css")} }
         div { id: "wrapper",
             div { class: "app",

examples/clock.rs

@@ -16,7 +16,7 @@ fn app() -> Element {
         }
     });
 
-    rsx! {
+    render! {
         div { "High-Five counter: {count}" }
     }
 }

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<dyn Fn(String)>) -> Element {
     let mut user_input = use_signal(String::new);
 
-    rsx! {
+    render! {
         div {
             h1 { "Compose a new email" }
 

examples/control_focus.rs

@@ -25,7 +25,7 @@ fn app() -> Element {
         }
     });
 
-    rsx! {
+    render! {
         div {
             h1 { "Input Roulette" }
             for i in 0..100 {

examples/crm.rs

@@ -60,7 +60,7 @@ pub struct Client {
 fn ClientList() -> Element {
     let mut clients = use_context::<Clients>();
 
-    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 {

examples/custom_assets.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! {
+    render! {
         div {
             p {
                 "This should show an image:"

examples/custom_html.rs

@@ -30,7 +30,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! {
+    render! {
         div { h1 { "hello world!" } }
     }
 }

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 "

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<String>) -> 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..." },
     }
 }
 

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 }
         }
     }

examples/eval.rs

@@ -23,7 +23,7 @@ fn app() -> Element {
     });
 
     match future.value().read().as_ref() {
-        Some(v) => rsx!( p { "{v}" } ),
+        Some(v) => render!( p { "{v}" } ),
-        _ => rsx!( p { "waiting.." } ),
+        _ => render!( p { "waiting.." } ),
     }
 }

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}",

examples/file_upload.rs

@@ -30,7 +30,7 @@ fn App() -> Element {
         }
     };
 
-    rsx! {
+    render! {
         label {
             input {
                 r#type: "checkbox",

examples/filedragdrop.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx!(
+    render!(
         div { h1 { "drag a file here and check your console" } }
     )
 }

examples/form.rs

@@ -10,7 +10,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! {
+    render! {
         div {
             h1 { "Form" }
             form {

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" }

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",

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 {

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" }

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!" }
     }
 }

examples/nested_listeners.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! {
+    render! {
         div {
             onclick: move |_| println!("clicked! top"),
             "- div"

examples/openid_connect_demo/src/views/header.rs

@@ -24,7 +24,7 @@ pub fn LogOut(cx: Scope<ClientProps>) -> 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<ClientProps>) -> Element {
                             }
                         }
                         Err(error) => {
-                            rsx! {
+                            render! { div { "Failed to load disconnection url: {error:?}" } }
-                                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<ClientProps>) -> 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<ClientProps>) -> 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::<Route> {}
                 }
             }
             Err(error) => {
                 log::info! {"Failed to load client: {:?}", error};
-                rsx! {
+                render! {
                     div { "Failed to load client: {error:?}" }
                     Outlet::<Route> {}
                 }
             }
         },
         None => {
-            rsx! {
+            render! {
                 div {
                     div { "Loading client, please wait" }
                     Outlet::<Route> {}
@@ -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::<Route> {}
                                             }
                                         }
@@ -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::<Route> {}
@@ -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::<Route> {}
@@ -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! {{}}
         }
     })
 }

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! {{}}
         }
     })
 }

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:?} | "

examples/overlay.rs

@@ -6,7 +6,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! {
+    render! {
         div {
             width: "100%",
             height: "100%",

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<MouseEvent>,
     children: Element,
 ) -> Element {
-    rsx! {
+    render! {
         button {
             class: "calculator-key {name}",
             onclick: move |e| onclick.call(e),

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()}, "!" }

examples/read_size.rs

@@ -38,7 +38,7 @@ fn app() -> Element {
         }
     };
 
-    rsx!(
+    render!(
         div {
             width: "50%",
             height: "50%",

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!" }

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"}),
+//                 true => render!( h1 {"Top text"}),
-//                 false => rsx!( h1 {"Bottom 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
+//             // You can convert a bool condition to render! with .then and .or
-//             {true.then(|| rsx!(div {}))},
+//             {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}" }
 //     }
 // }

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())),

examples/shortcut.rs

@@ -10,5 +10,5 @@ fn app() -> Element {
 
     _ = use_global_shortcut("ctrl+s", move || toggled.toggle());
 
-    rsx!("toggle: {toggled}")
+    render!("toggle: {toggled}")
 }

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!" }

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::<Vec<_>>()
                 .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 {

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" }

examples/streams.rs

@@ -18,7 +18,7 @@ fn app() -> Element {
         }
     });
 
-    rsx! {
+    render! {
         h1 { "High-Five counter: {count}" }
     }
 }

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" } },
+        Some(Err(_)) => render! { div { "loading dogs failed" } },
-        None => rsx! { div { "loading dogs..." } },
+        None => render! { div { "loading dogs..." } },
     }
 }

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",

examples/svg_basic.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn app() -> Element {
-    rsx! {
+    render! {
         svg {
             width: "200",
             height: "250",

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"] }

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(app);
-   launch_desktop(app);
-    #[cfg(target_arch = "wasm32")]
-    dioxus_web::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", "First Link" }
-                        a { class: "mr-5 hover:text-white", "Second 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", "Third Link" }
-                        a { class: "mr-5 hover:text-white", "Fourth Link"}
+                        a { class: "mr-5 hover:text-white", "Fourth Link" }
                     }
-                    button {
+                    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",
-                        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 {
+                        p { class: "mb-8 leading-relaxed",
-                            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 {
+                            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",
-                                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 {
+                            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",
-                                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",
+                            referrerpolicy: "no-referrer",
-                            alt: "hero",
+                            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" }
         }
-    ))
+    )
 }

examples/tasks.rs

@@ -19,7 +19,7 @@ fn app() -> Element {
         }
     });
 
-    rsx! {
+    render! {
         div {
             h1 { "Current count: {count}" }
             button {

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",

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<HashMap<u32, TodoItem>>) -> Element {
         }
     };
 
-    rsx! {
+    render! {
         header { class: "header",
             h1 { "todos" }
             input {
@@ -119,7 +119,7 @@ pub fn TodoEntry(mut todos: Signal<HashMap<u32, TodoItem>>, 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 {

examples/web_component.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    rsx! {
+    render! {
         web-component {
             "my-prop": "5%",
         }

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"

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!"

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}",

examples/xss_safety.rs

@@ -11,7 +11,7 @@ fn main() {
 fn app() -> Element {
     let mut contents = use_signal(|| String::from("<script>alert(\"hello world\")</script>"));
 
-    rsx! {
+    render! {
         div {
             h1 {"Dioxus is XSS-Safe"}
             h3 { "{contents}" }

packages/liveview/examples/rocket.rs

@@ -57,7 +57,7 @@ fn ws(ws: WebSocket, pool: &State<LiveViewPool>) -> Channel<'static> {
                 .await;
             Ok(())
         })
-    }
+    })
 }
 
 #[tokio::main]

packages/web/tests/hydrate.rs

@@ -10,18 +10,14 @@ fn makes_tree() {
     fn app() -> Element {
         rsx! {
             div {
-                div {
+                div { h1 {} }
-                    h1 {}
+                div { h2 {} }
-                }
-                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 {
+                div { h1 { "h1" } }
-                    h1 { "h1" }
+                div { h2 { "h2" } }
-                }
-                div {
-                    h2 { "h2" }
-                }
                 button {
                     onclick: move |_| {
                         println!("clicked");
@@ -45,7 +37,7 @@ fn rehydrates() {
                 }
                 {false.then(|| rsx!{ "hello" })}
             }
-        })
+        }
     }
 
     let mut dom = VirtualDom::new(app);

playwright-tests/fullstack/src/main.rs

@@ -60,11 +60,7 @@ fn app(cx: Scope<AppProps>) -> Element {
 
     rsx! {
         h1 { "hello axum! {count}" }
-        button {
+        button { class: "increment-button", onclick: move |_| count += 1, "Increment" }
-            class: "increment-button",
-            onclick: move |_| count += 1,
-            "Increment"
-        }
         button {
             class: "server-button",
             onclick: move |_| {
@@ -80,7 +76,7 @@ fn app(cx: Scope<AppProps>) -> Element {
             "Run a server function!"
         }
         "Server said: {text}"
-    })
+    }
 }
 
 #[server(PostServerData)]

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]

playwright-tests/web/Cargo.toml

@@ -7,7 +7,5 @@ license = "MIT OR Apache-2.0"
 publish = false
 
 [dependencies]
-dioxus = { path = "../../packages/dioxus" }
+dioxus = { path = "../../packages/dioxus", features = ["web"]}
-dioxus-web = { path = "../../packages/web" }
-dioxus-html = { path = "../../packages/html" }
 serde_json = "1.0.96"

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);
 }