depreciate the render macro

packages/core-macro/src/component_body/mod.rs

@@ -67,11 +67,11 @@
 //!
 //! #[name_changer(CoolName)]
 //! pub fn LameName() -> Element {
-//!     render! { "I want a cool name!" }
+//!     rsx! { "I want a cool name!" }
 //! }
 //!
 //! pub fn App() -> Element {
-//!     render! { CoolName {} } // Renders: "I want a cool name!"
+//!     rsx! { CoolName {} } // Renders: "I want a cool name!"
 //! }
 //! ```
 //! ## Implementing a component body deserializer

packages/core-macro/src/lib.rs

@@ -40,20 +40,21 @@ pub fn derive_typed_builder(input: TokenStream) -> TokenStream {
 /// The rsx! macro makes it easy for developers to write jsx-style markup in their components.
 #[proc_macro]
 pub fn rsx(tokens: TokenStream) -> TokenStream {
-    render(tokens)
-}
-
-/// The render! macro makes it easy for developers to write jsx-style markup in their components.
-///
-/// The render macro automatically renders rsx - making it unhygienic.
-#[proc_macro]
-pub fn render(s: TokenStream) -> TokenStream {
-    match syn::parse::<rsx::CallBody>(s) {
+    match syn::parse::<rsx::CallBody>(tokens) {
         Err(err) => err.to_compile_error().into(),
         Ok(body) => RenderCallBody(body).into_token_stream().into(),
     }
 }
 
+/// The rsx! macro makes it easy for developers to write jsx-style markup in their components.
+///
+/// The render macro automatically renders rsx - making it unhygienic.
+#[deprecated(note = "Use `rsx!` instead.")]
+#[proc_macro]
+pub fn render(tokens: TokenStream) -> TokenStream {
+    rsx(tokens)
+}
+
 /// Derive props for a component within the component definition.
 ///
 /// This macro provides a simple transformation from `Scope<{}>` to `Scope<P>`,
@@ -129,7 +130,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 /// ```rust,ignore
 /// #[component]
 /// fn GreetBob() -> Element {
-///     render! { "hello, bob" }
+///     rsx! { "hello, bob" }
 /// }
 ///
 /// // is equivalent to
@@ -139,7 +140,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 ///     #[warn(non_snake_case)]
 ///     #[inline(always)]
 ///     fn __dx_inner_comp() -> Element {
-///         render! { "hello, bob" }
+///         rsx! { "hello, bob" }
 ///     }
 ///     // There's no function call overhead since __dx_inner_comp has the #[inline(always)] attribute,
 ///     // so don't worry about performance.
@@ -150,7 +151,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 /// ```rust,ignore
 /// #[component(no_case_check)]
 /// fn GreetPerson(person: String) -> Element {
-///     render! { "hello, {person}" }
+///     rsx! { "hello, {person}" }
 /// }
 ///
 /// // is equivalent to
@@ -168,7 +169,7 @@ pub(crate) const COMPONENT_ARG_CASE_CHECK_OFF: &str = "no_case_check";
 ///     fn __dx_inner_comp(props: GreetPersonProps>e) -> Element {
 ///         let GreetPersonProps { person } = &cx.props;
 ///         {
-///             render! { "hello, {person}" }
+///             rsx! { "hello, {person}" }
 ///         }
 ///     }
 ///

packages/core/src/properties.rs

@@ -75,7 +75,7 @@ where
 ///
 /// ```rust
 /// fn app() -> Element {
-///     render! {
+///     rsx! {
 ///         div {}
 ///     }
 /// }
@@ -90,7 +90,7 @@ where
 /// }
 ///
 /// fn app(props: MyProps) -> Element {
-///     render! {
+///     rsx! {
 ///         div {
 ///             "{props.data}"
 ///         }
@@ -103,7 +103,7 @@ where
 /// ```rust
 /// #[component]
 /// fn app(data: String) -> Element {
-///     render! {
+///     rsx! {
 ///         div {
 ///             "{data}"
 ///         }

packages/core/src/runtime.rs

@@ -140,7 +140,7 @@ impl Runtime {
 /// }
 ///
 /// fn app() -> Element {
-///     render!{ Component { runtime: Runtime::current().unwrap() } }
+///     rsx!{ Component { runtime: Runtime::current().unwrap() } }
 /// }
 ///
 /// // In a dynamic library
@@ -158,7 +158,7 @@ impl Runtime {
 /// fn Component(cx: ComponentProps) -> Element {
 ///     cx.use_hook(|| RuntimeGuard::new(cx.runtime.clone()));
 ///
-///     render! { div {} }
+///     rsx! { div {} }
 /// }
 /// ```
 pub struct RuntimeGuard(());

packages/core/src/scope_context.rs

@@ -176,12 +176,12 @@ impl ScopeContext {
     ///
     /// static app: Component = |cx| {
     ///     cx.use_hook(|| cx.provide_context(SharedState("world")));
-    ///     render!(Child {})
+    ///     rsx!(Child {})
     /// }
     ///
     /// static Child: Component = |cx| {
     ///     let state = cx.consume_state::<SharedState>();
-    ///     render!(div { "hello {state.0}" })
+    ///     rsx!(div { "hello {state.0}" })
     /// }
     /// ```
     pub fn provide_context<T: 'static + Clone>(&self, value: T) -> T {

packages/core/tests/attr_cleanup.rs

@@ -10,8 +10,8 @@ fn attrs_cycle() {
     let mut dom = VirtualDom::new(|| {
         let id = generation();
         match id % 2 {
-            0 => render! { div {} },
-            1 => render! {
+            0 => rsx! { div {} },
+            1 => rsx! {
                 div { h1 { class: "{id}", id: "{id}" } }
             },
             _ => unreachable!(),

packages/core/tests/boolattrs.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 
 #[test]
 fn bool_test() {
-    let mut app = VirtualDom::new(|| render!(div { hidden: false }));
+    let mut app = VirtualDom::new(|| rsx!(div { hidden: false }));
 
     assert_eq!(
         app.rebuild_to_vec().santize().edits,

packages/core/tests/bubble_error.rs

@@ -11,7 +11,7 @@ fn app() -> Element {
 
     let value = raw.parse::<f32>().unwrap_or(123.123);
 
-    render! { div { "hello {value}" } }
+    rsx! { div { "hello {value}" } }
 }
 
 #[test]

packages/core/tests/context_api.rs

@@ -6,16 +6,16 @@ fn state_shares() {
     fn app() -> Element {
         provide_context(generation() as i32);
 
-        render!(child_1 {})
+        rsx!(child_1 {})
     }
 
     fn child_1() -> Element {
-        render!(child_2 {})
+        rsx!(child_2 {})
     }
 
     fn child_2() -> Element {
         let value = consume_context::<i32>().unwrap();
-        render!("Value is {value}")
+        rsx!("Value is {value}")
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/create_dom.rs

@@ -12,7 +12,7 @@ use dioxus_core::ElementId;
 #[test]
 fn test_original_diff() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div { div { "Hello, world!" } }
         }
     });
@@ -32,7 +32,7 @@ fn test_original_diff() {
 #[test]
 fn create() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div {
                 div {
                     "Hello, world!"
@@ -75,7 +75,7 @@ fn create() {
 
 #[test]
 fn create_list() {
-    let mut dom = VirtualDom::new(|| render! {{(0..3).map(|f| render!( div { "hello" } ))}});
+    let mut dom = VirtualDom::new(|| rsx! {{(0..3).map(|f| rsx!( div { "hello" } ))}});
 
     let _edits = dom.rebuild_to_vec().santize();
 
@@ -95,7 +95,7 @@ fn create_list() {
 #[test]
 fn create_simple() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div {}
             div {}
             div {}
@@ -122,7 +122,7 @@ fn create_simple() {
 #[test]
 fn create_components() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             Child { "abc1" }
             Child { "abc2" }
             Child { "abc3" }
@@ -135,7 +135,7 @@ fn create_components() {
     }
 
     fn Child(cx: ChildProps) -> Element {
-        render! {
+        rsx! {
             h1 {}
             div { {cx.children} }
             p {}
@@ -150,7 +150,7 @@ fn create_components() {
 #[test]
 fn anchors() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             if true {
                  div { "hello" }
             }

packages/core/tests/create_element.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 #[test]
 fn multiroot() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div { "Hello a" }
             div { "Hello b" }
             div { "Hello c" }

packages/core/tests/create_fragments.rs

@@ -7,7 +7,7 @@ use dioxus_core::ElementId;
 #[test]
 fn empty_fragment_creates_nothing() {
     fn app() -> Element {
-        render!({ () })
+        rsx!({ () })
     }
 
     let mut vdom = VirtualDom::new(app);
@@ -25,7 +25,7 @@ fn empty_fragment_creates_nothing() {
 #[test]
 fn root_fragments_work() {
     let mut vdom = VirtualDom::new(|| {
-        render!(
+        rsx!(
             div { "hello" }
             div { "goodbye" }
         )
@@ -40,16 +40,16 @@ fn root_fragments_work() {
 #[test]
 fn fragments_nested() {
     let mut vdom = VirtualDom::new(|| {
-        render!(
+        rsx!(
             div { "hello" }
             div { "goodbye" }
-            {render! {
+            {rsx! {
                 div { "hello" }
                 div { "goodbye" }
-                {render! {
+                {rsx! {
                     div { "hello" }
                     div { "goodbye" }
-                    {render! {
+                    {rsx! {
                         div { "hello" }
                         div { "goodbye" }
                     }}
@@ -67,7 +67,7 @@ fn fragments_nested() {
 #[test]
 fn fragments_across_components() {
     fn app() -> Element {
-        render! {
+        rsx! {
             demo_child {}
             demo_child {}
             demo_child {}
@@ -77,7 +77,7 @@ fn fragments_across_components() {
 
     fn demo_child() -> Element {
         let world = "world";
-        render! { "hellO!", {world} }
+        rsx! { "hellO!", {world} }
     }
 
     assert_eq!(
@@ -89,9 +89,9 @@ fn fragments_across_components() {
 #[test]
 fn list_fragments() {
     fn app() -> Element {
-        render!(
+        rsx!(
             h1 { "hello" }
-            {(0..6).map(|f| render!( span { "{f}" }))}
+            {(0..6).map(|f| rsx!( span { "{f}" }))}
         )
     }
     assert_eq!(

packages/core/tests/create_lists.rs

@@ -5,11 +5,11 @@ use dioxus_core::ElementId;
 // A real-world usecase of templates at peak performance
 // In react, this would be a lot of node creation.
 //
-// In Dioxus, we memoize the render! body and simplify it down to a few template loads
+// In Dioxus, we memoize the rsx! body and simplify it down to a few template loads
 //
 // Also note that the IDs increase linearly. This lets us drive a vec on the renderer for O(1) re-indexing
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             for i in 0..3 {
                 div {

packages/core/tests/create_passthru.rs

@@ -6,7 +6,7 @@ use dioxus_core::ElementId;
 #[test]
 fn nested_passthru_creates() {
     fn app() -> Element {
-        render! {
+        rsx! {
             PassThru {
                 PassThru {
                     PassThru { div { "hi" } }
@@ -17,7 +17,7 @@ fn nested_passthru_creates() {
 
     #[component]
     fn PassThru(children: Element) -> Element {
-        render!({ children })
+        rsx!({ children })
     }
 
     let mut dom = VirtualDom::new(app);
@@ -38,7 +38,7 @@ fn nested_passthru_creates() {
 #[test]
 fn nested_passthru_creates_add() {
     fn app() -> Element {
-        render! {
+        rsx! {
             ChildComp {
                 "1"
                 ChildComp {
@@ -54,7 +54,7 @@ fn nested_passthru_creates_add() {
 
     #[component]
     fn ChildComp(children: Element) -> Element {
-        render! {{children}}
+        rsx! {{children}}
     }
 
     let mut dom = VirtualDom::new(app);
@@ -81,7 +81,7 @@ fn dynamic_node_as_root() {
     fn app() -> Element {
         let a = 123;
         let b = 456;
-        render! { "{a}", "{b}" }
+        rsx! { "{a}", "{b}" }
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/cycle.rs

@@ -5,8 +5,8 @@ use dioxus::prelude::*;
 #[test]
 fn cycling_elements() {
     let mut dom = VirtualDom::new(|| match generation() % 2 {
-        0 => render! { div { "wasd" } },
-        1 => render! { div { "abcd" } },
+        0 => rsx! { div { "wasd" } },
+        1 => rsx! { div { "abcd" } },
         _ => unreachable!(),
     });
 

packages/core/tests/diff_component.rs

@@ -13,46 +13,46 @@ fn component_swap() {
         render_phase += 1;
 
         match *render_phase() {
-            0 => render! {
+            0 => rsx! {
                 nav_bar {}
                 dash_board {}
             },
-            1 => render! {
+            1 => rsx! {
                 nav_bar {}
                 dash_results {}
             },
-            2 => render! {
+            2 => rsx! {
                 nav_bar {}
                 dash_board {}
             },
-            3 => render! {
+            3 => rsx! {
                 nav_bar {}
                 dash_results {}
             },
-            4 => render! {
+            4 => rsx! {
                 nav_bar {}
                 dash_board {}
             },
-            _ => render!("blah"),
+            _ => rsx!("blah"),
         }
     }
 
     fn nav_bar() -> Element {
-        render! {
-            h1 { "NavBar", {(0..3).map(|_| render!(nav_link {}))} }
+        rsx! {
+            h1 { "NavBar", {(0..3).map(|_| rsx!(nav_link {}))} }
         }
     }
 
     fn nav_link() -> Element {
-        render!( h1 { "nav_link" } )
+        rsx!( h1 { "nav_link" } )
     }
 
     fn dash_board() -> Element {
-        render!( div { "dashboard" } )
+        rsx!( div { "dashboard" } )
     }
 
     fn dash_results() -> Element {
-        render!( div { "results" } )
+        rsx!( div { "results" } )
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/diff_element.rs

@@ -6,7 +6,7 @@ use dioxus_core::{ElementId, NoOpMutations};
 fn text_diff() {
     fn app() -> Element {
         let gen = generation();
-        render!( h1 { "hello {gen}" } )
+        rsx!( h1 { "hello {gen}" } )
     }
 
     let mut vdom = VirtualDom::new(app);
@@ -37,8 +37,8 @@ fn element_swap() {
         let gen = generation();
 
         match gen % 2 {
-            0 => render!( h1 { "hello 1" } ),
-            1 => render!( h2 { "hello 2" } ),
+            0 => rsx!( h1 { "hello 1" } ),
+            1 => rsx!( h2 { "hello 2" } ),
             _ => unreachable!(),
         }
     }

packages/core/tests/diff_keyed_list.rs

@@ -17,7 +17,7 @@ fn keyed_diffing_out_of_order() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     {
@@ -59,7 +59,7 @@ fn keyed_diffing_out_of_order_adds() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -85,7 +85,7 @@ fn keyed_diffing_out_of_order_adds_3() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -111,7 +111,7 @@ fn keyed_diffing_out_of_order_adds_4() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -137,7 +137,7 @@ fn keyed_diffing_out_of_order_adds_5() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -162,7 +162,7 @@ fn keyed_diffing_additions() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -187,7 +187,7 @@ fn keyed_diffing_additions_and_moves_on_ends() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -216,7 +216,7 @@ fn keyed_diffing_additions_and_moves_in_middle() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -250,7 +250,7 @@ fn controlled_keyed_diffing_out_of_order() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -284,7 +284,7 @@ fn controlled_keyed_diffing_out_of_order_max_test() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -313,7 +313,7 @@ fn remove_list() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);
@@ -338,7 +338,7 @@ fn no_common_keys() {
             _ => unreachable!(),
         };
 
-        render!({ order.iter().map(|i| render!(div { key: "{i}" })) })
+        rsx!({ order.iter().map(|i| rsx!(div { key: "{i}" })) })
     });
 
     dom.rebuild(&mut dioxus_core::NoOpMutations);

packages/core/tests/diff_unkeyed_list.rs

@@ -7,7 +7,7 @@ fn list_creates_one_by_one() {
     let mut dom = VirtualDom::new(|| {
         let gen = generation();
 
-        render! {
+        rsx! {
             div {
                 for i in 0..gen {
                     div { "{i}" }
@@ -76,7 +76,7 @@ fn removes_one_by_one() {
     let mut dom = VirtualDom::new(|| {
         let gen = 3 - generation() % 4;
 
-        render! {
+        rsx! {
             div {
                 for i in 0..gen {
                     div { "{i}" }
@@ -151,7 +151,7 @@ fn removes_one_by_one() {
 #[test]
 fn list_shrink_multiroot() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             div {
                 for i in 0..generation() {
                     div { "{i}" }
@@ -212,7 +212,7 @@ fn removes_one_by_one_multiroot() {
     let mut dom = VirtualDom::new(|| {
         let gen = 3 - generation() % 4;
 
-        render! {
+        rsx! {
             div {
                 {(0..gen).map(|i| rsx! {
                     div { "{i}" }
@@ -275,7 +275,7 @@ fn removes_one_by_one_multiroot() {
 #[test]
 fn two_equal_fragments_are_equal_static() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             for _ in 0..5 {
                 div { "hello" }
             }
@@ -289,7 +289,7 @@ fn two_equal_fragments_are_equal_static() {
 #[test]
 fn two_equal_fragments_are_equal() {
     let mut dom = VirtualDom::new(|| {
-        render! {
+        rsx! {
             for i in 0..5 {
                 div { "hello {i}" }
             }
@@ -310,7 +310,7 @@ fn remove_many() {
             _ => unreachable!(),
         };
 
-        render! {
+        rsx! {
             for i in 0..num {
                 div { "hello {i}" }
             }

packages/core/tests/error_boundary.rs

@@ -9,7 +9,7 @@ fn catches_panic() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div {
             h1 { "Title" }
 
@@ -28,5 +28,5 @@ fn ThrowChild() -> Element {
 
     let _g: i32 = "123123".parse().throw()?;
 
-    render! { div {} }
+    rsx! { div {} }
 }

packages/core/tests/event_propagation.rs

@@ -52,14 +52,14 @@ fn events_propagate() {
 }
 
 fn app() -> Element {
-    render! {
+    rsx! {
         div { onclick: move |_| {
                 println!("top clicked");
                 *CLICKS.lock().unwrap() += 1;
             },
 
             {vec![
-                render! {
+                rsx! {
                     problematic_child {}
                 }
             ].into_iter()}
@@ -68,7 +68,7 @@ fn app() -> Element {
 }
 
 fn problematic_child() -> Element {
-    render! {
+    rsx! {
         button { onclick: move |evt| {
                 println!("bottom clicked");
                 let mut clicks = CLICKS.lock().unwrap();

packages/core/tests/kitchen_sink.rs

@@ -5,7 +5,7 @@ fn basic_syntax_is_a_template() -> Element {
     let asd = 123;
     let var = 123;
 
-    render! {
+    rsx! {
         div { key: "12345", class: "asd", class: "{asd}", class: if true {
                 "{asd}"
             }, class: if false {

packages/core/tests/lifecycle.rs

@@ -19,7 +19,7 @@ fn manual_diffing() {
 
     fn app(cx: AppProps) -> Element {
         let val = cx.value.lock().unwrap();
-        render! { div { "{val}" } }
+        rsx! { div { "{val}" } }
     };
 
     let value = Arc::new(Mutex::new("Hello"));
@@ -46,7 +46,7 @@ fn events_generate() {
         let mut count = use_signal(|| 0);
 
         match *count() {
-            0 => render! {
+            0 => rsx! {
                 div { onclick: move |_| count += 1,
                     div { "nested" }
                     "Click me!"

packages/core/tests/miri_full_app.rs

@@ -27,7 +27,7 @@ fn app() -> Element {
     let mut idx = use_signal(|| 0);
     let onhover = |_| println!("go!");
 
-    render! {
+    rsx! {
         div {
             button {
                 onclick: move |_| {
@@ -48,5 +48,5 @@ fn app() -> Element {
 
 #[component]
 fn ChildExample(i: i32, onhover: EventHandler<MouseEvent>) -> Element {
-    render! { li { onmouseover: move |e| onhover.call(e), "{i}" } }
+    rsx! { li { onmouseover: move |e| onhover.call(e), "{i}" } }
 }

packages/core/tests/miri_simple.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[test]
 fn app_drops() {
     fn app() -> Element {
-        render! { div {} }
+        rsx! { div {} }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -21,7 +21,7 @@ fn hooks_drop() {
         use_hook(|| String::from("asd"));
         use_hook(|| String::from("asd"));
 
-        render! { div {} }
+        rsx! { div {} }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -36,7 +36,7 @@ fn contexts_drop() {
     fn app() -> Element {
         provide_context(String::from("asd"));
 
-        render! {
+        rsx! {
             div { ChildComp {} }
         }
     }
@@ -44,7 +44,7 @@ fn contexts_drop() {
     fn ChildComp() -> Element {
         let el = consume_context::<String>().unwrap();
 
-        render! { div { "hello {el}" } }
+        rsx! { div { "hello {el}" } }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -61,7 +61,7 @@ fn tasks_drop() {
             // tokio::time::sleep(std::time::Duration::from_millis(100000)).await;
         });
 
-        render! { div {} }
+        rsx! { div {} }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -77,7 +77,7 @@ fn root_props_drop() {
     struct RootProps(String);
 
     let mut dom = VirtualDom::new_with_props(
-        |cx| render!( div { "{cx.0}" } ),
+        |cx| rsx!( div { "{cx.0}" } ),
         RootProps("asdasd".to_string()),
     );
 
@@ -89,11 +89,11 @@ fn root_props_drop() {
 #[test]
 fn diffing_drops_old() {
     fn app() -> Element {
-        render! {
+        rsx! {
             div {
                 match generation() % 2 {
-                    0 => render!( ChildComp1 { name: "asdasd".to_string() }),
-                    1 => render!( ChildComp2 { name: "asdasd".to_string() }),
+                    0 => rsx!( ChildComp1 { name: "asdasd".to_string() }),
+                    1 => rsx!( ChildComp2 { name: "asdasd".to_string() }),
                     _ => todo!()
                 }
             }
@@ -102,12 +102,12 @@ fn diffing_drops_old() {
 
     #[component]
     fn ChildComp1(name: String) -> Element {
-        render! {"Hello {name}"}
+        rsx! {"Hello {name}"}
     }
 
     #[component]
     fn ChildComp2(name: String) -> Element {
-        render! {"Goodbye {name}"}
+        rsx! {"Goodbye {name}"}
     }
 
     let mut dom = VirtualDom::new(app);

packages/core/tests/miri_stress.rs

@@ -16,14 +16,14 @@ fn test_memory_leak() {
         spawn(async {});
 
         if val == 2 || val == 4 {
-            return render!({});
+            return rsx!({});
         }
 
         let mut name = use_hook(|| String::from("numbers: "));
 
         name.push_str("123 ");
 
-        render!(
+        rsx!(
             div { "Hello, world!" }
             Child {}
             Child {}
@@ -45,7 +45,7 @@ fn test_memory_leak() {
     }
 
     fn BorrowedChild(cx: BorrowedProps) -> Element {
-        render! {
+        rsx! {
             div {
                 "goodbye {cx.name}"
                 Child {}
@@ -55,7 +55,7 @@ fn test_memory_leak() {
     }
 
     fn Child() -> Element {
-        render!( div { "goodbye world" } )
+        rsx!( div { "goodbye world" } )
     }
 
     let mut dom = VirtualDom::new(app);
@@ -79,7 +79,7 @@ fn memo_works_properly() {
 
         let name = use_hook(|| String::from("asd"));
 
-        render!(
+        rsx!(
             div { "Hello, world! {name}" }
             Child { na: "asdfg".to_string() }
         )
@@ -91,7 +91,7 @@ fn memo_works_properly() {
     }
 
     fn Child(cx: ChildProps) -> Element {
-        render!( div { "goodbye world" } )
+        rsx!( div { "goodbye world" } )
     }
 
     let mut dom = VirtualDom::new(app);
@@ -119,11 +119,11 @@ fn free_works_on_root_hooks() {
 
     fn app(cx: AppProps) -> Element {
         let name: AppProps = use_hook(|| cx.clone());
-        render!(child_component { inner: name.inner.clone() })
+        rsx!(child_component { inner: name.inner.clone() })
     }
 
     fn child_component(props: AppProps) -> Element {
-        render!( div { "{props.inner}" } )
+        rsx!( div { "{props.inner}" } )
     }
 
     let ptr = Rc::new("asdasd".to_string());
@@ -176,7 +176,7 @@ fn supports_async() {
         let mid = colors[1];
         let small = colors[2];
 
-        render! {
+        rsx! {
             div { background: "{big}", height: "stretch", width: "stretch", padding: "50",
                 label { "hello" }
                 div { background: "{mid}", height: "auto", width: "stretch", padding: "{padding}",

packages/core/tests/safety.rs

@@ -5,7 +5,7 @@ use dioxus::prelude::*;
 /// Ensure no issues with not calling rebuild_to_vec
 #[test]
 fn root_node_isnt_null() {
-    let dom = VirtualDom::new(|| render!("Hello world!"));
+    let dom = VirtualDom::new(|| rsx!("Hello world!"));
 
     let scope = dom.base_scope();
 

packages/core/tests/suspense.rs

@@ -20,7 +20,7 @@ fn suspense_resolves() {
 }
 
 fn app() -> Element {
-    render!(
+    rsx!(
         div {
             "Waiting for... "
             suspended_child {}
@@ -38,5 +38,5 @@ fn suspended_child() -> Element {
         suspend()?;
     }
 
-    render!("child")
+    rsx!("child")
 }

packages/core/tests/task.rs

@@ -25,7 +25,7 @@ async fn it_works() {
             });
         });
 
-        render!({ () })
+        rsx!({ () })
     }
 
     let mut dom = VirtualDom::new(app);

packages/desktop/headless_tests/events.rs

@@ -209,7 +209,7 @@ fn app() -> Element {
         desktop_context.close();
     }
 
-    render! {
+    rsx! {
         div {
             div {
                 width: "100px",

packages/desktop/headless_tests/rendering.rs

@@ -75,7 +75,7 @@ fn check_html_renders() -> Element {
         }
     };
 
-    render! {
+    rsx! {
         div {
             id: "main_div",
             div {

packages/dioxus-lib/README.md

@@ -103,7 +103,7 @@ fn Example() -> Element {
     // both of these are equivalent
     rsx!("hello world"))
 
-    render!("hello world!")
+    rsx!("hello world!")
 }
 ```
 
@@ -246,7 +246,7 @@ use hooks to define the state and modify it from within listeners.
 fn App() -> Element {
     let name = use_signal(|| "world");
 
-    render!("hello {name}!")
+    rsx!("hello {name}!")
 }
 ```
 

packages/dioxus-tui/benches/update.rs

@@ -116,7 +116,7 @@ fn Grid(cx: Scope<GridProps>) -> Element {
         }
     }
 
-    render! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",

packages/dioxus-tui/examples/many_small_edit_stress.rs

@@ -66,7 +66,7 @@ fn Grid(cx: Scope<GridProps>) -> Element {
         });
     }
 
-    render! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",

packages/dioxus/README.md

@@ -103,7 +103,7 @@ fn Example() -> Element {
     // both of these are equivalent
     rsx!("hello world"))
 
-    render!("hello world!")
+    rsx!("hello world!")
 }
 ```
 
@@ -246,7 +246,7 @@ use hooks to define the state and modify it from within listeners.
 fn App() -> Element {
     let name = use_signal(|| "world");
 
-    render!("hello {name}!")
+    rsx!("hello {name}!")
 }
 ```
 

packages/fullstack/examples/axum-router/src/main.rs

@@ -33,7 +33,7 @@ enum Route {
 
 #[component]
 fn Blog(id: i32) -> Element {
-    render! {
+    rsx! {
         Link { to: Route::Home {}, "Go to counter" }
         table {
             tbody {

packages/fullstack/examples/static-hydrated/src/main.rs

@@ -51,7 +51,7 @@ enum Route {
 
 #[component]
 fn Blog() -> Element {
-    render! {
+    rsx! {
         Link { to: Route::Home {}, "Go to counter" }
         table {
             tbody {

packages/fullstack/src/adapters/axum_adapter.rs

@@ -380,7 +380,7 @@ fn apply_request_parts_to_response<B>(
 /// use dioxus_fullstack::{axum_adapter::render_handler_with_context, prelude::*};
 ///
 /// fn app() -> Element {
-///     render! {
+///     rsx! {
 ///         "hello!"
 ///     }
 /// }

packages/fullstack/src/router.rs

@@ -12,7 +12,7 @@ where
     use dioxus_router::prelude::RouterConfig;
 
     let cfg = props;
-    render! {
+    rsx! {
         dioxus_router::prelude::Router::<R> {
             config: move || {
                 RouterConfig::default()

packages/hooks/src/computed.rs

@@ -21,7 +21,7 @@ use std::{
 /// fn Parent() -> Element {
 ///    let count = use_tracked_state(|| 0);
 ///
-///    render! {
+///    rsx! {
 ///        Child {
 ///            count: count.clone(),
 ///        }
@@ -32,7 +32,7 @@ use std::{
 /// fn Child(count: Tracked<usize>) -> Element {
 ///    let less_than_five = use_selector(count, |count| *count < 5);
 ///
-///    render! {
+///    rsx! {
 ///        "{less_than_five}"
 ///    }
 /// }

packages/hooks/src/use_memo.rs

@@ -18,14 +18,14 @@ use crate::UseFutureDep;
 ///         // This will only be calculated when `number` has changed.
 ///         number * 100
 ///     });
-///     render!(
+///     rsx!(
 ///         p { "{bigger_number}" }
 ///     )
 /// }
 ///
 /// #[component]
 /// fn App() -> Element {
-///     render!(Calculator { number: 0 })
+///     rsx!(Calculator { number: 0 })
 /// }
 /// ```
 #[must_use = "Consider using `use_effect` to run rerun a callback when dependencies change"]

packages/hooks/src/use_on_destroy.rs

@@ -19,14 +19,14 @@ pub fn use_on_unmount<D: FnOnce() + 'static>(destroy: D) {
 ///
 /// fn app() -> Element {
 ///     let state = use_signal(|| true);
-///     render! {
+///     rsx! {
 ///         for _ in 0..100 {
 ///             h1 {
 ///                 "spacer"
 ///             }
 ///         }
 ///         if **state {
-///             render! {
+///             rsx! {
 ///                 child_component {}
 ///             }
 ///         }
@@ -61,7 +61,7 @@ pub fn use_on_unmount<D: FnOnce() + 'static>(destroy: D) {
 ///         }
 ///     });
 ///
-///     render!{
+///     rsx!{
 ///         div {
 ///             id: "my_element",
 ///             "hello"

packages/hooks/src/use_shared_state.rs

@@ -105,7 +105,7 @@ impl<T> ProvidedStateInner<T> {
 /// # use dioxus::prelude::*;
 /// #
 /// # fn app() -> Element {
-/// #     render! {
+/// #     rsx! {
 /// #         Parent{}
 /// #     }
 /// # }
@@ -121,7 +121,7 @@ impl<T> ProvidedStateInner<T> {
 ///     use_shared_state_provider(|| Theme::Dark);
 ///     let theme = use_shared_state::<Theme>().unwrap();
 ///
-///     render! {
+///     rsx! {
 ///         button{
 ///             onclick: move |_| {
 ///                 let current_theme = *theme.read();
@@ -141,7 +141,7 @@ impl<T> ProvidedStateInner<T> {
 ///     let theme = use_shared_state::<Theme>().unwrap();
 ///     let current_theme = *theme.read();
 ///
-///     render! {
+///     rsx! {
 ///         match current_theme {
 ///             Theme::Dark => {
 ///                 "Dark mode"
@@ -331,7 +331,7 @@ impl<T> PartialEq for UseSharedState<T> {
 /// # use dioxus::prelude::*;
 /// #
 /// # fn app() -> Element {
-/// #     render! {
+/// #     rsx! {
 /// #         Parent{}
 /// #     }
 /// # }
@@ -347,7 +347,7 @@ impl<T> PartialEq for UseSharedState<T> {
 ///     use_shared_state_provider(|| Theme::Dark);
 ///     let theme = use_shared_state::<Theme>().unwrap();
 ///
-///     render! {
+///     rsx! {
 ///         button{
 ///             onclick: move |_| {
 ///                 let current_theme = *theme.read();

packages/native-core/src/utils/persistant_iterator.rs

@@ -202,7 +202,7 @@ fn traverse() {
     use dioxus::prelude::*;
     #[allow(non_snake_case)]
     fn Base() -> Element {
-        render!(
+        rsx!(
             div{
                 div{
                     "hello"
@@ -305,7 +305,7 @@ fn persist_removes() {
             1 => 2,
             _ => unreachable!(),
         };
-        render!(
+        rsx!(
             div {
                 for i in 0..children {
                     p { key: "{i}", "{i}" }
@@ -381,7 +381,7 @@ fn persist_instertions_before() {
             1 => 2,
             _ => unreachable!(),
         };
-        render!(
+        rsx!(
             div {
                 for i in 0..children {
                     p { key: "{i}", "{i}" }
@@ -434,7 +434,7 @@ fn persist_instertions_after() {
             1 => 2,
             _ => unreachable!(),
         };
-        render!(
+        rsx!(
             div{
                 for i in 0..children {
                     p { key: "{i}", "{i}" }

packages/native-core/tests/called_minimally_on_build.rs

@@ -116,7 +116,7 @@ macro_rules! test_state{
         fn state_reduce_initally_called_minimally() {
             #[allow(non_snake_case)]
             fn Base() -> Element {
-                render!{
+                rsx!{
                     div {
                         div{
                             div{

packages/router-macro/src/layout.rs

@@ -22,7 +22,7 @@ impl Layout {
             .flat_map(|id| nests[id.0].dynamic_segments());
 
         quote! {
-            render! {
+            rsx! {
                 #comp_name { #(#dynamic_segments: #dynamic_segments,)* }
             }
         }

packages/router-macro/src/lib.rs

@@ -612,7 +612,7 @@ impl RouteEnum {
 
                 fn call(&self, props: Self::Props) -> dioxus_core::Element {
                     let initial_route = self.clone();
-                    render! {
+                    rsx! {
                         ::dioxus_router::prelude::Router::<#name> {
                             config: move || props.take().initial_route(initial_route)
                         }

packages/router-macro/src/route.rs

@@ -247,7 +247,7 @@ impl Route {
                 quote! {
                     #[allow(unused)]
                     (#last_index, Self::#name { #(#dynamic_segments,)* }) => {
-                        render! {
+                        rsx! {
                             #component {
                                 #(#dynamic_segments_from_route: #dynamic_segments_from_route,)*
                             }

packages/router/README.md

@@ -48,14 +48,14 @@ enum Route {
 
 #[component]
 fn App() -> Element {
-    render! {
+    rsx! {
         Router::<Route> { }
     }
 }
 
 #[component]
 fn Index() -> Element {
-    render! {
+    rsx! {
         h1 { "Index" }
         Link {
             to: Route::BlogList {},
@@ -66,7 +66,7 @@ fn Index() -> Element {
 
 #[component]
 fn Blog() -> Element {
-    render! {
+    rsx! {
         h1 { "Blog" }
         Outlet::<Route> { }
     }
@@ -74,7 +74,7 @@ fn Blog() -> Element {
 
 #[component]
 fn BlogList() -> Element {
-    render! {
+    rsx! {
         h2 { "List of blog posts" }
         Link {
             to: Route::BlogPost { blog_id: 0 },
@@ -89,7 +89,7 @@ fn BlogList() -> Element {
 
 #[component]
 fn BlogPost(blog_id: usize) -> Element {
-    render! {
+    rsx! {
         h2 { "Blog Post" }
     }
 }

packages/router/benches/incremental.rs

@@ -136,7 +136,7 @@ criterion_main!(benches);
 
 #[component]
 fn Blog() -> Element {
-    render! {
+    rsx! {
         div {
             "Blog"
         }
@@ -145,7 +145,7 @@ fn Blog() -> Element {
 
 #[component]
 fn Post(id: usize) -> Element {
-    render! {
+    rsx! {
         for _ in 0..*id {
             div {
                 "PostId: {id}"
@@ -156,7 +156,7 @@ fn Post(id: usize) -> Element {
 
 #[component]
 fn PostHome() -> Element {
-    render! {
+    rsx! {
         div {
             "Post"
         }
@@ -165,7 +165,7 @@ fn PostHome() -> Element {
 
 #[component]
 fn Home() -> Element {
-    render! {
+    rsx! {
         div {
             "Home"
         }
@@ -192,7 +192,7 @@ enum Route {
 #[component]
 fn RenderPath(path: Route) -> Element {
     let path = path.clone();
-    render! {
+    rsx! {
         Router::<Route> {
             config: || RouterConfig::default().history(MemoryHistory::with_initial_path(path))
         }

packages/router/examples/simple_routes.rs

@@ -49,7 +49,7 @@ fn main() {
 
 #[component]
 fn UserFrame(user_id: usize) -> Element {
-    render! {
+    rsx! {
         pre { "UserFrame{{\n\tuser_id:{user_id}\n}}" }
         div { background_color: "rgba(0,0,0,50%)",
             "children:"
@@ -60,7 +60,7 @@ fn UserFrame(user_id: usize) -> Element {
 
 #[component]
 fn Route1(user_id: usize, dynamic: usize, query: String, extra: String) -> Element {
-    render! {
+    rsx! {
         pre {
             "Route1{{\n\tuser_id:{user_id},\n\tdynamic:{dynamic},\n\tquery:{query},\n\textra:{extra}\n}}"
         }
@@ -85,7 +85,7 @@ fn Route1(user_id: usize, dynamic: usize, query: String, extra: String) -> Eleme
 
 #[component]
 fn Route2(user_id: usize) -> Element {
-    render! {
+    rsx! {
         pre { "Route2{{\n\tuser_id:{user_id}\n}}" }
         {(0..*user_id).map(|i| rsx!{ p { "{i}" } })},
         p { "Footer" }
@@ -111,7 +111,7 @@ fn Route3(dynamic: String) -> Element {
 
     let navigator = use_navigator();
 
-    render! {
+    rsx! {
         input {
             oninput: move |evt| {
                 *current_route_str.write() = evt.value();
@@ -146,7 +146,7 @@ fn Route3(dynamic: String) -> Element {
         match parsed {
             Ok(route) => {
                 if route != current_route {
-                    render! {
+                    rsx! {
                         Link {
                             to: route.clone(),
                             "{route}"
@@ -158,7 +158,7 @@ fn Route3(dynamic: String) -> Element {
                 }
             }
             Err(err) => {
-                render! {
+                rsx! {
                     pre {
                         color: "red",
                         "Invalid route:\n{err}"

packages/router/examples/static_generation.rs

@@ -54,7 +54,7 @@ async fn main() {
 
 #[component]
 fn Blog() -> Element {
-    render! {
+    rsx! {
         div {
             "Blog"
         }
@@ -63,7 +63,7 @@ fn Blog() -> Element {
 
 #[component]
 fn Post(id: usize) -> Element {
-    render! {
+    rsx! {
         div {
             "PostId: {id}"
         }
@@ -72,7 +72,7 @@ fn Post(id: usize) -> Element {
 
 #[component]
 fn PostHome() -> Element {
-    render! {
+    rsx! {
         div {
             "Post"
         }
@@ -81,7 +81,7 @@ fn PostHome() -> Element {
 
 #[component]
 fn Home() -> Element {
-    render! {
+    rsx! {
         div {
             "Home"
         }

packages/router/src/components/default_errors.rs

@@ -8,7 +8,7 @@ pub fn FailureExternalNavigation() -> Element {
     #[allow(deprecated)]
     let router = use_router();
 
-    render! {
+    rsx! {
         h1 { "External Navigation Failure!" }
         p {
             "The application tried to programmatically navigate to an external page. This "

packages/router/src/components/history_buttons.rs

@@ -33,14 +33,14 @@ pub struct HistoryButtonProps {
 ///
 /// #[component]
 /// fn App() -> Element {
-///     render! {
+///     rsx! {
 ///         Router::<Route> {}
 ///     }
 /// }
 ///
 /// #[component]
 /// fn Index() -> Element {
-///     render! {
+///     rsx! {
 ///         GoBackButton {
 ///             "go back"
 ///         }
@@ -76,7 +76,7 @@ pub fn GoBackButton(
 
     let disabled = !router.can_go_back();
 
-    render! {
+    rsx! {
         button { disabled: "{disabled}", prevent_default: "onclick", onclick: move |_| router.go_back(), {children} }
     }
 }
@@ -103,14 +103,14 @@ pub fn GoBackButton(
 ///
 /// #[component]
 /// fn App() -> Element {
-///     render! {
+///     rsx! {
 ///         Router::<Route> {}
 ///     }
 /// }
 ///
 /// #[component]
 /// fn Index() -> Element {
-///     render! {
+///     rsx! {
 ///         GoForwardButton {
 ///             "go forward"
 ///         }
@@ -146,7 +146,7 @@ pub fn GoForwardButton(
 
     let disabled = !router.can_go_forward();
 
-    render! {
+    rsx! {
         button { disabled: "{disabled}", prevent_default: "onclick", onclick: move |_| router.go_forward(), {children} }
     }
 }

packages/router/src/components/link.rs

@@ -156,15 +156,15 @@ impl Debug for LinkProps {
 ///
 /// #[component]
 /// fn App() -> Element {
-///     render! {
+///     rsx! {
 ///         Router::<Route> {}
 ///     }
 /// }
 ///
 /// #[component]
 /// fn Index() -> Element {
-///     render! {
-///         render! {
+///     rsx! {
+///         rsx! {
 ///             Link {
 ///                 active_class: "active",
 ///                 class: "link_class",
@@ -244,7 +244,7 @@ pub fn Link(props: LinkProps) -> Element {
         }
     };
 
-    render! {
+    rsx! {
         a {
             onclick: action,
             href: "{href}",

packages/router/src/components/outlet.rs

@@ -31,7 +31,7 @@ use dioxus_lib::prelude::*;
 ///
 /// #[component]
 /// fn Index() -> Element {
-///     render! {
+///     rsx! {
 ///         div {
 ///             "Index"
 ///         }
@@ -40,7 +40,7 @@ use dioxus_lib::prelude::*;
 ///
 /// #[component]
 /// fn Wrapper() -> Element {
-///     render! {
+///     rsx! {
 ///         h1 { "App" }
 ///         Outlet::<Route> {} // The content of child routes will be rendered here
 ///     }
@@ -48,7 +48,7 @@ use dioxus_lib::prelude::*;
 ///
 /// #[component]
 /// fn Child() -> Element {
-///     render! {
+///     rsx! {
 ///         p {
 ///             "Child"
 ///         }
@@ -57,7 +57,7 @@ use dioxus_lib::prelude::*;
 ///
 /// # #[component]
 /// # fn App() -> Element {
-/// #     render! {
+/// #     rsx! {
 /// #         Router::<Route> {
 /// #             config: || RouterConfig::default().history(MemoryHistory::with_initial_path(Route::Child {}))
 /// #         }

packages/router/src/components/router.rs

@@ -146,7 +146,7 @@ where
         });
     });
 
-    render! { Outlet::<R> {} }
+    rsx! { Outlet::<R> {} }
 }
 
 #[cfg(feature = "serde")]
@@ -171,5 +171,5 @@ where
         _marker: std::marker::PhantomData,
     });
 
-    render! { Outlet::<R> {} }
+    rsx! { Outlet::<R> {} }
 }

packages/router/src/hooks/use_navigator.rs

@@ -19,7 +19,7 @@ use crate::prelude::{Navigator, RouterContext};
 ///
 /// #[component]
 /// fn App() -> Element {
-///     render! {
+///     rsx! {
 ///         Router::<Route> {}
 ///     }
 /// }
@@ -28,7 +28,7 @@ use crate::prelude::{Navigator, RouterContext};
 /// fn Index() -> Element {
 ///     let navigator = use_navigator(&cx);
 ///
-///     render! {
+///     rsx! {
 ///         button {
 ///             onclick: move |_| { navigator.push(Route::Dynamic { id: 1234 }); },
 ///             "Go to /1234"
@@ -38,7 +38,7 @@ use crate::prelude::{Navigator, RouterContext};
 ///
 /// #[component]
 /// fn Dynamic(id: usize) -> Element {
-///     render! {
+///     rsx! {
 ///         p {
 ///             "Current ID: {id}"
 ///         }

packages/router/src/hooks/use_route.rs

@@ -25,7 +25,7 @@ use crate::utils::use_router_internal::use_router_internal;
 ///
 /// #[component]
 /// fn App() -> Element {
-///     render! {
+///     rsx! {
 ///         h1 { "App" }
 ///         Router::<Route> {}
 ///     }
@@ -34,7 +34,7 @@ use crate::utils::use_router_internal::use_router_internal;
 /// #[component]
 /// fn Index() -> Element {
 ///     let path: Route = use_route(&cx).unwrap();
-///     render! {
+///     rsx! {
 ///         h2 { "Current Path" }
 ///         p { "{path}" }
 ///     }

packages/router/src/incremental.rs

@@ -94,7 +94,7 @@ where
         <R as FromStr>::Err: std::fmt::Display,
     {
         let path = path.clone();
-        render! {
+        rsx! {
             Router::<R> {
                 config: || RouterConfig::default().history(MemoryHistory::with_initial_path(path))
             }

packages/router/tests/via_ssr/link.rs

@@ -31,7 +31,7 @@ where
     where
         <R as FromStr>::Err: std::fmt::Display,
     {
-        render! {
+        rsx! {
             h1 { "App" }
             Router::<R> {
                 config: || RouterConfig::default().history(MemoryHistory::default())
@@ -57,7 +57,7 @@ fn href_internal() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: Route::Test {},
                 "Link"
@@ -95,7 +95,7 @@ fn href_external() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: "https://dioxuslabs.com/",
                 "Link"
@@ -133,7 +133,7 @@ fn with_class() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: Route::Test {},
                 class: "test_class",
@@ -165,7 +165,7 @@ fn with_active_class_active() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: Route::Root {},
                 active_class: "active_class",
@@ -205,7 +205,7 @@ fn with_active_class_inactive() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: Route::Test {},
                 active_class: "active_class",
@@ -245,7 +245,7 @@ fn with_id() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: Route::Test {},
                 id: "test_id",
@@ -284,7 +284,7 @@ fn with_new_tab() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: Route::Test {},
                 new_tab: true,
@@ -316,7 +316,7 @@ fn with_new_tab_external() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: "https://dioxuslabs.com/",
                 new_tab: true,
@@ -355,7 +355,7 @@ fn with_rel() {
 
     #[component]
     fn Root() -> Element {
-        render! {
+        rsx! {
             Link {
                 to: Route::Test {},
                 rel: "test_rel",

packages/router/tests/via_ssr/outlet.rs

@@ -36,7 +36,7 @@ fn prepare(path: impl Into<String>) -> VirtualDom {
 
     #[component]
     fn App(cx: Scope<AppProps>) -> Element {
-        render! {
+        rsx! {
             h1 { "App" }
             Router::<Route> {
                 config: {
@@ -49,14 +49,14 @@ fn prepare(path: impl Into<String>) -> VirtualDom {
 
     #[component]
     fn RootIndex() -> Element {
-        render! {
+        rsx! {
             h2 { "Root Index" }
         }
     }
 
     #[component]
     fn Fixed() -> Element {
-        render! {
+        rsx! {
             h2 { "Fixed" }
             Outlet::<Route> { }
         }
@@ -64,21 +64,21 @@ fn prepare(path: impl Into<String>) -> VirtualDom {
 
     #[component]
     fn FixedIndex() -> Element {
-        render! {
+        rsx! {
             h3 { "Fixed - Index" }
         }
     }
 
     #[component]
     fn FixedFixed() -> Element {
-        render! {
+        rsx! {
             h3 { "Fixed - Fixed"}
         }
     }
 
     #[component]
     fn Parameter(id: u8) -> Element {
-        render! {
+        rsx! {
             h2 { "Parameter {id}" }
             Outlet::<Route> { }
         }
@@ -86,14 +86,14 @@ fn prepare(path: impl Into<String>) -> VirtualDom {
 
     #[component]
     fn ParameterIndex(id: u8) -> Element {
-        render! {
+        rsx! {
             h3 { "Parameter - Index" }
         }
     }
 
     #[component]
     fn ParameterFixed(id: u8) -> Element {
-        render! {
+        rsx! {
             h3 { "Parameter - Fixed" }
         }
     }

packages/signals/README.md

@@ -19,7 +19,7 @@ fn App() -> Element {
         print!("{signal}");
     });
 
-    render! {
+    rsx! {
         "{signal}"
     }
 }
@@ -38,7 +38,7 @@ fn App() -> Element {
     // Because signal is never read in this component, this component will not rerun when the signal changes
     let signal = use_signal(|| 0);
 
-    render! {
+    rsx! {
         button {
             onclick: move |_| {
                 *signal.write() += 1;
@@ -61,7 +61,7 @@ struct ChildProps {
 #[component]
 fn Child(cx: Scope<ChildProps>) -> Element {
     // This component does read from the signal, so when the signal changes it will rerun
-    render! {
+    rsx! {
         "{cx.props.signal}"
     }
 }
@@ -78,7 +78,7 @@ fn App() -> Element {
     // Because signal is never read in this component, this component will not rerun when the signal changes
     use_context_provider(|| Signal::new(0));
 
-    render! {
+    rsx! {
         Child {}
     }
 }
@@ -87,7 +87,7 @@ fn App() -> Element {
 fn Child() -> Element {
     let signal: Signal<i32> = *use_context(cx).unwrap();
     // This component does read from the signal, so when the signal changes it will rerun
-    render! {
+    rsx! {
         "{signal}"
     }
 }
@@ -108,7 +108,7 @@ fn App() -> Element {
     let signal = use_signal(|| 0);
     let doubled = use_selector(|| signal * 2);
 
-    render! {
+    rsx! {
         button {
             onclick: move |_| *signal.write() += 1,
             "Increase"
@@ -121,7 +121,7 @@ fn App() -> Element {
 
 #[component]
 fn Child(signal: ReadOnlySignal<usize>) -> Element {
-    render! {
+    rsx! {
         "{signal}"
     }
 }

packages/signals/examples/context.rs

@@ -11,7 +11,7 @@ fn app() -> Element {
     // Because signal is never read in this component, this component will not rerun when the signal changes
     use_context_provider(|| Signal::new(0));
 
-    render! {
+    rsx! {
         Child {}
     }
 }
@@ -19,7 +19,7 @@ fn app() -> Element {
 fn Child() -> Element {
     let signal: Signal<i32> = *use_context(cx).unwrap();
     // This component does read from the signal, so when the signal changes it will rerun
-    render! {
+    rsx! {
         "{signal}"
     }
 }

packages/signals/examples/dependancies.rs

@@ -23,7 +23,7 @@ fn app() -> Element {
     });
     println!("Running app");
 
-    render! {
+    rsx! {
         button {
             onclick: move |_| {
                 local_state.set(local_state.get() + 1);

packages/signals/examples/selector.rs

@@ -10,7 +10,7 @@ fn App() -> Element {
     let signal = use_signal(|| 0);
     let doubled = use_selector(move || signal * 2);
 
-    render! {
+    rsx! {
         button {
             onclick: move |_| *signal.write() += 1,
             "Increase"
@@ -21,5 +21,5 @@ fn App() -> Element {
 
 #[component]
 fn Child(signal: ReadOnlySignal<usize>) -> Element {
-    render! { "{signal}" }
+    rsx! { "{signal}" }
 }

packages/signals/examples/split_subscriptions.rs

@@ -21,7 +21,7 @@ fn use_app_data() -> ApplicationData {
 fn app() -> Element {
     use_context_provider(ApplicationData::default);
 
-    render! {
+    rsx! {
         div { ReadsFirst {} }
         div { ReadsSecond {} }
         div { ReadsManySignals {} }
@@ -32,7 +32,7 @@ fn ReadsFirst() -> Element {
     println!("running first");
     let data = use_app_data(cx);
 
-    render! {
+    rsx! {
         button {
             onclick: move |_| {
                 *data.first_data.write() += 1;
@@ -59,7 +59,7 @@ fn ReadsSecond() -> Element {
     println!("running second");
     let data = use_app_data(cx);
 
-    render! {
+    rsx! {
         button {
             onclick: move |_| {
                 *data.second_data.write() += 1;
@@ -86,7 +86,7 @@ fn ReadsManySignals() -> Element {
     println!("running many signals");
     let data = use_app_data(cx);
 
-    render! {
+    rsx! {
         button {
             onclick: move |_| {
                 data.many_signals.write().push(Signal::new(0));
@@ -122,7 +122,7 @@ fn Child(cx: Scope<ChildProps>) -> Element {
     println!("running child");
     let count = cx.props.count;
 
-    render! {
+    rsx! {
         div {
             "Child: {count}"
             button {

packages/signals/src/selector.rs

@@ -18,7 +18,7 @@ use crate::{get_effect_stack, signal::SignalData, CopyValue, Effect, ReadOnlySig
 ///     count += 1;
 ///     assert_eq!(double.value(), count * 2);
 ///
-///     render! { "{double}" }
+///     rsx! { "{double}" }
 /// }
 /// ```
 #[must_use = "Consider using `use_effect` to rerun a callback when dependencies change"]

packages/signals/src/signal.rs

@@ -28,7 +28,7 @@ use crate::{get_effect_stack, CopyValue, Effect, EffectStack};
 ///
 ///     // Because signals have automatic dependency tracking, if you never read them in a component, that component will not be re-rended when the signal is updated.
 ///     // The app component will never be rerendered in this example.
-///     render! { Child { state: count } }
+///     rsx! { Child { state: count } }
 /// }
 ///
 /// #[component]
@@ -40,7 +40,7 @@ use crate::{get_effect_stack, CopyValue, Effect, EffectStack};
 ///         *state.write() += 1;
 ///     });
 ///
-///     render! {
+///     rsx! {
 ///         button {
 ///             onclick: move |_| *state.write() += 1,
 ///             "{state}"
@@ -112,7 +112,7 @@ pub(crate) struct SignalData<T> {
 ///
 ///     // Because signals have automatic dependency tracking, if you never read them in a component, that component will not be re-rended when the signal is updated.
 ///     // The app component will never be rerendered in this example.
-///     render! { Child { state: count } }
+///     rsx! { Child { state: count } }
 /// }
 ///
 /// #[component]
@@ -124,7 +124,7 @@ pub(crate) struct SignalData<T> {
 ///         *state.write() += 1;
 ///     });
 ///
-///     render! {
+///     rsx! {
 ///         button {
 ///             onclick: move |_| *state.write() += 1,
 ///             "{state}"

packages/signals/tests/create.rs

@@ -7,7 +7,7 @@ use dioxus_signals::*;
 #[test]
 fn create_signals_global() {
     let mut dom = VirtualDom::new(|cx| {
-        render! {
+        rsx! {
             for _ in 0..10 {
                 Child {}
             }
@@ -17,7 +17,7 @@ fn create_signals_global() {
     fn Child() -> Element {
         let signal = create_without_cx();
 
-        render! {
+        rsx! {
             "{signal}"
         }
     }
@@ -32,7 +32,7 @@ fn create_signals_global() {
 #[test]
 fn deref_signal() {
     let mut dom = VirtualDom::new(|cx| {
-        render! {
+        rsx! {
             for _ in 0..10 {
                 Child {}
             }
@@ -45,7 +45,7 @@ fn deref_signal() {
         // You can call signals like functions to get a Ref of their value.
         assert_eq!(&*signal(), "hello world");
 
-        render! {
+        rsx! {
             "hello world"
         }
     }
@@ -59,7 +59,7 @@ fn drop_signals() {
         let generation = generation();
 
         let count = if generation % 2 == 0 { 10 } else { 0 };
-        render! {
+        rsx! {
             for _ in 0..count {
                 Child {}
             }
@@ -69,7 +69,7 @@ fn drop_signals() {
     fn Child() -> Element {
         let signal = create_without_cx();
 
-        render! {
+        rsx! {
             "{signal}"
         }
     }

packages/signals/tests/effect.rs

@@ -32,7 +32,7 @@ fn effects_rerun() {
             });
             signal += 1;
 
-            render! {
+            rsx! {
                 div {}
             }
         },

packages/signals/tests/selector.rs

@@ -36,7 +36,7 @@ fn memos_rerun() {
             signal += 1;
             assert_eq!(memo.value(), 1);
 
-            render! {
+            rsx! {
                 div {}
             }
         },
@@ -73,7 +73,7 @@ fn memos_prevents_component_rerun() {
                 *signal.write() = 1;
             }
 
-            render! {
+            rsx! {
                 Child {
                     signal: signal,
                     counter: cx.props.clone(),
@@ -118,7 +118,7 @@ fn memos_prevents_component_rerun() {
             _ => panic!("Unexpected generation"),
         }
 
-        render! {
+        rsx! {
             div {}
         }
     }

packages/signals/tests/subscribe.rs

@@ -28,7 +28,7 @@ fn reading_subscribes() {
 
             cx.props.borrow_mut().parent += 1;
 
-            render! {
+            rsx! {
                 for id in 0..10 {
                     Child {
                         signal: signal,
@@ -61,7 +61,7 @@ fn reading_subscribes() {
             .entry(cx.scope_id())
             .or_default() += 1;
 
-        render! {
+        rsx! {
             "{cx.props.signal}"
         }
     }

packages/ssr/README.md

@@ -18,7 +18,7 @@ This crate is a part of the broader Dioxus ecosystem. For more resources about D
 Dioxus SSR provides utilities to render Dioxus components to valid HTML. Once rendered, the HTML can be rehydrated client-side or served from your web server of choice.
 
 ```rust, ignore
-let app: Component = |cx| render!(div {"hello world!"});
+let app: Component = |cx| rsx!(div {"hello world!"});
 
 let mut vdom = VirtualDom::new(app);
 let _ = vdom.rebuild();
@@ -29,12 +29,12 @@ assert_eq!(text, "<div>hello world!</div>")
 
 ## Basic Usage
 
-The simplest example is to simply render some `render!` nodes to HTML. This can be done with the [`render_element`] API.
+The simplest example is to simply render some `rsx!` nodes to HTML. This can be done with the [`render_element`] API.
 
 ```rust, ignore
-let content = dioxus_ssr::render_element(render!{
+let content = dioxus_ssr::render_element(rsx!{
     div {
-        (0..5).map(|i| render!(
+        (0..5).map(|i| rsx!(
             "Number: {i}"
         ))
     }
@@ -84,10 +84,10 @@ The rest of the space - IE doing this more efficiently, caching the VirtualDom,
 
 ## Usage without a VirtualDom
 
-Dioxus SSR needs an arena to allocate from - whether it be the VirtualDom or a dedicated Bump allocator. To render `render!` directly to a string, you'll want to create a `Renderer` and call `render_element`.
+Dioxus SSR needs an arena to allocate from - whether it be the VirtualDom or a dedicated Bump allocator. To render `rsx!` directly to a string, you'll want to create a `Renderer` and call `render_element`.
 
 ```rust, ignore
-let text = dioxus_ssr::Renderer::new().render_element(render!{
+let text = dioxus_ssr::Renderer::new().render_element(rsx!{
     div { "hello world" }
 });
 assert_eq!(text, "<div>hello world!</div>")
@@ -96,7 +96,7 @@ assert_eq!(text, "<div>hello world!</div>")
 This can be automated with the `render_element!` macro:
 
 ```rust, ignore
-let text = render_element!(render!( div { "hello world" } ));
+let text = render_element!(rsx!( div { "hello world" } ));
 ```
 
 ## Usage in static site generation

packages/ssr/src/lib.rs

@@ -19,7 +19,7 @@ use dioxus_core::{Element, VirtualDom};
 
 pub use crate::renderer::Renderer;
 
-/// A convenience function to render an `render!` call to a string
+/// A convenience function to render an `rsx!` call to a string
 ///
 /// For advanced rendering, create a new `SsrRender`.
 pub fn render_element(element: Element) -> String {

packages/ssr/src/renderer.rs

@@ -232,7 +232,7 @@ fn to_string_works() {
         let dynamic = 123;
         let dyn2 = "</diiiiiiiiv>"; // this should be escaped
 
-        render! {
+        rsx! {
             div { class: "asdasdasd", class: "asdasdasd", id: "id-{dynamic}",
                 "Hello world 1 -->"
                 "{dynamic}"
@@ -289,7 +289,7 @@ fn empty_for_loop_works() {
     use dioxus::prelude::*;
 
     fn app() -> Element {
-        render! {
+        rsx! {
             div { class: "asdasdasd",
                 for _ in (0..5) {
 
@@ -332,7 +332,7 @@ fn empty_render_works() {
     use dioxus::prelude::*;
 
     fn app() -> Element {
-        render! {}
+        rsx! {}
     }
 
     let mut dom = VirtualDom::new(app);

packages/ssr/tests/bool_attr.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[test]
 fn static_boolean_attributs() {
     fn app() -> Element {
-        render! {
+        rsx! {
             div { hidden: "false" }
             div { hidden: "true" }
         }
@@ -21,7 +21,7 @@ fn static_boolean_attributs() {
 #[test]
 fn dynamic_boolean_attributs() {
     fn app() -> Element {
-        render! {
+        rsx! {
             div { hidden: false }
             div { hidden: true }
         }

packages/ssr/tests/hydration.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[test]
 fn root_ids() {
     fn app() -> Element {
-        render! { div { width: "100px" } }
+        rsx! { div { width: "100px" } }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -19,7 +19,7 @@ fn root_ids() {
 fn dynamic_attributes() {
     fn app() -> Element {
         let dynamic = 123;
-        render! {
+        rsx! {
             div { width: "100px", div { width: "{dynamic}px" } }
         }
     }
@@ -36,7 +36,7 @@ fn dynamic_attributes() {
 #[test]
 fn listeners() {
     fn app() -> Element {
-        render! {
+        rsx! {
             div { width: "100px", div { onclick: |_| {} } }
         }
     }
@@ -51,7 +51,7 @@ fn listeners() {
 
     fn app2() -> Element {
         let dynamic = 123;
-        render! {
+        rsx! {
             div { width: "100px", div { width: "{dynamic}px", onclick: |_| {} } }
         }
     }
@@ -69,7 +69,7 @@ fn listeners() {
 fn text_nodes() {
     fn app() -> Element {
         let dynamic_text = "hello";
-        render! {
+        rsx! {
             div { {dynamic_text} }
         }
     }
@@ -84,7 +84,7 @@ fn text_nodes() {
 
     fn app2() -> Element {
         let dynamic = 123;
-        render! {
+        rsx! {
             div { "{dynamic}", "{1234}" }
         }
     }
@@ -102,11 +102,11 @@ fn text_nodes() {
 #[test]
 fn components_hydrate() {
     fn app() -> Element {
-        render! { Child {} }
+        rsx! { Child {} }
     }
 
     fn Child() -> Element {
-        render! { div { "hello" } }
+        rsx! { div { "hello" } }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -118,12 +118,12 @@ fn components_hydrate() {
     );
 
     fn app2() -> Element {
-        render! { Child2 {} }
+        rsx! { Child2 {} }
     }
 
     fn Child2() -> Element {
         let dyn_text = "hello";
-        render! {
+        rsx! {
             div { {dyn_text} }
         }
     }
@@ -137,11 +137,11 @@ fn components_hydrate() {
     );
 
     fn app3() -> Element {
-        render! { Child3 {} }
+        rsx! { Child3 {} }
     }
 
     fn Child3() -> Element {
-        render! { div { width: "{1}" } }
+        rsx! { div { width: "{1}" } }
     }
 
     let mut dom = VirtualDom::new(app3);
@@ -153,13 +153,13 @@ fn components_hydrate() {
     );
 
     fn app4() -> Element {
-        render! { Child4 {} }
+        rsx! { Child4 {} }
     }
 
     fn Child4() -> Element {
-        render! {
+        rsx! {
             for _ in 0..2 {
-                {render! { "{1}" }}
+                {rsx! { "{1}" }}
             }
         }
     }
@@ -180,7 +180,7 @@ fn hello_world_hydrates() {
     fn app() -> Element {
         let mut count = use_signal(|| 0);
 
-        render! {
+        rsx! {
             h1 { "High-Five counter: {count}" }
             button { onclick: move |_| count += 1, "Up high!" }
             button { onclick: move |_| count -= 1, "Down low!" }

packages/ssr/tests/inner_html.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[test]
 fn static_inner_html() {
     fn app() -> Element {
-        render! { div { dangerous_inner_html: "<div>1234</div>" } }
+        rsx! { div { dangerous_inner_html: "<div>1234</div>" } }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -16,7 +16,7 @@ fn static_inner_html() {
 fn dynamic_inner_html() {
     fn app() -> Element {
         let inner_html = "<div>1234</div>";
-        render! { div { dangerous_inner_html: "{inner_html}" } }
+        rsx! { div { dangerous_inner_html: "{inner_html}" } }
     }
 
     let mut dom = VirtualDom::new(app);

packages/ssr/tests/simple.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[test]
 fn simple() {
     fn App() -> Element {
-        render! { div { "hello!" } }
+        rsx! { div { "hello!" } }
     }
 
     let mut dom = VirtualDom::new(App);
@@ -12,7 +12,7 @@ fn simple() {
     assert_eq!(dioxus_ssr::render(&dom), "<div>hello!</div>");
 
     assert_eq!(
-        dioxus_ssr::render_element(render!( div {"hello!"} )),
+        dioxus_ssr::render_element(rsx!( div {"hello!"} )),
         "<div>hello!</div>"
     );
 }
@@ -20,10 +20,10 @@ fn simple() {
 #[test]
 fn lists() {
     assert_eq!(
-        dioxus_ssr::render_element(render! {
+        dioxus_ssr::render_element(rsx! {
             ul {
                 {
-                    (0..5).map(|i| render! {
+                    (0..5).map(|i| rsx! {
                         li { "item {i}" }
                     })
                 }
@@ -37,7 +37,7 @@ fn lists() {
 fn dynamic() {
     let dynamic = 123;
     assert_eq!(
-        dioxus_ssr::render_element(render! {
+        dioxus_ssr::render_element(rsx! {
             div { "Hello world 1 -->" "{dynamic}" "<-- Hello world 2" }
         }),
         "<div>Hello world 1 --&gt;123&lt;-- Hello world 2</div>"
@@ -52,14 +52,14 @@ fn components() {
     }
 
     fn MyComponent(MyComponentProps { name }: MyComponentProps) -> Element {
-        render! { div { "component {name}" } }
+        rsx! { div { "component {name}" } }
     }
 
     assert_eq!(
-        dioxus_ssr::render_element(render! {
+        dioxus_ssr::render_element(rsx! {
             div {
                 {
-                    (0..5).map(|name| render! {
+                    (0..5).map(|name| rsx! {
                         MyComponent { name: name }
                     })
                 }
@@ -72,10 +72,10 @@ fn components() {
 #[test]
 fn fragments() {
     assert_eq!(
-        dioxus_ssr::render_element(render! {
+        dioxus_ssr::render_element(rsx! {
             div {
                 {
-                    (0..5).map(|_| render! ({}))
+                    (0..5).map(|_| rsx! ({}))
                 }
             }
         }),

packages/ssr/tests/styles.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[test]
 fn static_styles() {
     fn app() -> Element {
-        render! { div { width: "100px" } }
+        rsx! { div { width: "100px" } }
     }
 
     let mut dom = VirtualDom::new(app);
@@ -20,7 +20,7 @@ fn partially_dynamic_styles() {
     let dynamic = 123;
 
     assert_eq!(
-        dioxus_ssr::render_element(render! {
+        dioxus_ssr::render_element(rsx! {
             div { width: "100px", height: "{dynamic}px" }
         }),
         r#"<div style="width:100px;height:123px;"></div>"#
@@ -32,7 +32,7 @@ fn dynamic_styles() {
     let dynamic = 123;
 
     assert_eq!(
-        dioxus_ssr::render_element(render! {
+        dioxus_ssr::render_element(rsx! {
             div { width: "{dynamic}px" }
         }),
         r#"<div style="width:123px;"></div>"#