remove cx.render

packages/dioxus-tui/README.md

@@ -43,7 +43,7 @@ Leverage React-like patterns, CSS, HTML, and Rust to build beautiful, portable,
 
 ```rust
 fn app() -> Element {
-    cx.render(rsx!{
+    rsx!{
         div {
             width: "100%",
             height: "10px",

packages/dioxus-tui/benches/update.rs

@@ -66,7 +66,7 @@ struct BoxProps {
 }
 #[allow(non_snake_case)]
 fn Box(cx: Scope<BoxProps>) -> Element {
-    let count = use_state(|| 0);
+    let count = use_signal(|| 0);
 
     let x = cx.props.x * 2;
     let y = cx.props.y * 2;
@@ -75,7 +75,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
     let count = count.get();
     let alpha = cx.props.alpha + (count % 100) as f32;
 
-    cx.render(rsx! {
+    rsx! {
         div {
             left: "{x}%",
             top: "{y}%",
@@ -85,7 +85,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
             align_items: "center",
             p{"{display_hue:03}"}
         }
-    })
+    }
 }
 
 #[derive(Props, PartialEq)]
@@ -96,8 +96,8 @@ struct GridProps {
 #[allow(non_snake_case)]
 fn Grid(cx: Scope<GridProps>) -> Element {
     let size = cx.props.size;
-    let count = use_state(|| 0);
-    let counts = use_ref(|| vec![0; size * size]);
+    let count = use_signal(|| 0);
+    let counts = use_signal(|| vec![0; size * size]);
 
     let ctx: TuiContext = cx.consume_context().unwrap();
     if *count.get() + cx.props.update_count >= (size * size) {
@@ -152,7 +152,7 @@ fn Grid(cx: Scope<GridProps>) -> Element {
 }
 
 fn app(cx: Scope<GridProps>) -> Element {
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -161,5 +161,5 @@ fn app(cx: Scope<GridProps>) -> Element {
                 update_count: cx.props.update_count,
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/all_terminal_events.rs

@@ -27,7 +27,7 @@ enum Event {
 const MAX_EVENTS: usize = 8;
 
 fn app() -> Element {
-    let events = use_ref(Vec::new);
+    let events = use_signal(Vec::new);
 
     let events_lock = events.read();
     let first_index = events_lock.len().saturating_sub(MAX_EVENTS);
@@ -44,7 +44,7 @@ fn app() -> Element {
         events.write().push(event);
     };
 
-    cx.render(rsx! {
+    rsx! {
         div { width: "100%", height: "100%", flex_direction: "column",
             div {
                 width: "80%",
@@ -73,5 +73,5 @@ fn app() -> Element {
             }
             div { width: "80%", height: "50%", flex_direction: "column", {events_rendered} }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/border.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let radius = use_state(|| 0);
+    let radius = use_signal(|| 0);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -23,5 +23,5 @@ fn app() -> Element {
 
             "{radius}"
         }
-    })
+    }
 }

packages/dioxus-tui/examples/buttons.rs

@@ -13,15 +13,15 @@ struct ButtonProps {
 
 #[allow(non_snake_case)]
 fn Button(cx: Scope<ButtonProps>) -> Element {
-    let toggle = use_state(|| false);
-    let hovered = use_state(|| false);
+    let toggle = use_signal(|| false);
+    let hovered = use_signal(|| false);
 
     let hue = cx.props.color_offset % 255;
     let saturation = if *toggle.get() { 50 } else { 25 } + if *hovered.get() { 50 } else { 25 };
     let brightness = saturation / 2;
     let color = format!("hsl({hue}, {saturation}, {brightness})");
 
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -47,11 +47,11 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
             flex_direction: "column",
             p{ "tabindex: {cx.props.layer}" }
         }
-    })
+    }
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             display: "flex",
             flex_direction: "column",
@@ -80,5 +80,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/color_test.rs

@@ -9,7 +9,7 @@ fn main() {
 
 fn app() -> Element {
     let steps = 50;
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -34,5 +34,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/colorpicker.rs

@@ -9,12 +9,12 @@ fn main() {
 }
 
 fn app() -> Element {
-    let hue = use_state(|| 0.0);
-    let brightness = use_state(|| 0.0);
+    let hue = use_signal(|| 0.0);
+    let brightness = use_signal(|| 0.0);
     let tui_query: Query = cx.consume_context().unwrap();
     let mapping: DioxusElementToNodeId = cx.consume_context().unwrap();
     // disable templates so that every node has an id and can be queried
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             background_color: "hsl({hue}, 70%, {brightness}%)",
@@ -31,5 +31,5 @@ fn app() -> Element {
             },
             "hsl({hue}, 70%, {brightness}%)"
         }
-    })
+    }
 }

packages/dioxus-tui/examples/flex.rs

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

packages/dioxus-tui/examples/hover.rs

@@ -23,20 +23,20 @@ fn app() -> Element {
         127 * b
     }
 
-    let q1_color = use_state(|| [200; 3]);
-    let q2_color = use_state(|| [200; 3]);
-    let q3_color = use_state(|| [200; 3]);
-    let q4_color = use_state(|| [200; 3]);
+    let q1_color = use_signal(|| [200; 3]);
+    let q2_color = use_signal(|| [200; 3]);
+    let q3_color = use_signal(|| [200; 3]);
+    let q4_color = use_signal(|| [200; 3]);
 
     let q1_color_str = to_str(q1_color);
     let q2_color_str = to_str(q2_color);
     let q3_color_str = to_str(q3_color);
     let q4_color_str = to_str(q4_color);
 
-    let page_coordinates = use_state(|| "".to_string());
-    let element_coordinates = use_state(|| "".to_string());
-    let buttons = use_state(|| "".to_string());
-    let modifiers = use_state(|| "".to_string());
+    let page_coordinates = use_signal(|| "".to_string());
+    let element_coordinates = use_signal(|| "".to_string());
+    let buttons = use_signal(|| "".to_string());
+    let modifiers = use_signal(|| "".to_string());
 
     let update_data = move |event: Event<MouseData>| {
         let mouse_data = event.inner();
@@ -51,7 +51,7 @@ fn app() -> Element {
         modifiers.set(format!("{:?}", mouse_data.modifiers()));
     };
 
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -129,5 +129,5 @@ fn app() -> Element {
             div { "Buttons: {buttons}" }
             div { "Modifiers: {modifiers}" }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/list.rs

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

packages/dioxus-tui/examples/many_small_edit_stress.rs

@@ -19,7 +19,7 @@ struct BoxProps {
 }
 #[allow(non_snake_case)]
 fn Box(cx: Scope<BoxProps>) -> Element {
-    let count = use_state(|| 0);
+    let count = use_signal(|| 0);
 
     let x = cx.props.x * 2;
     let y = cx.props.y * 2;
@@ -28,7 +28,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
     let count = count.get();
     let alpha = cx.props.alpha + (count % 100) as f32;
 
-    cx.render(rsx! {
+    rsx! {
         div {
             left: "{x}%",
             top: "{y}%",
@@ -38,7 +38,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
             align_items: "center",
             p{"{display_hue:03}"}
         }
-    })
+    }
 }
 
 #[derive(Props, PartialEq)]
@@ -48,8 +48,8 @@ struct GridProps {
 #[allow(non_snake_case)]
 fn Grid(cx: Scope<GridProps>) -> Element {
     let size = cx.props.size;
-    let count = use_state(|| 0);
-    let counts = use_ref(|| vec![0; size * size]);
+    let count = use_signal(|| 0);
+    let counts = use_signal(|| vec![0; size * size]);
 
     let ctx: TuiContext = cx.consume_context().unwrap();
     if *count.get() + 1 >= (size * size) {
@@ -98,7 +98,7 @@ fn Grid(cx: Scope<GridProps>) -> Element {
 }
 
 fn app(cx: Scope<usize>) -> Element {
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -106,5 +106,5 @@ fn app(cx: Scope<usize>) -> Element {
                 size: *cx.props,
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/margin.rs

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

packages/dioxus-tui/examples/quadrants.rs

@@ -14,7 +14,7 @@ struct QuadrentProps {
 }
 
 fn Quadrant(cx: Scope<QuadrentProps>) -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             border_width: "1px",
             width: "50%",
@@ -25,11 +25,11 @@ fn Quadrant(cx: Scope<QuadrentProps>) -> Element {
 
             "{cx.props.text}"
         }
-    })
+    }
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -63,5 +63,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/readme_hello_world.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "10px",
@@ -15,5 +15,5 @@ fn app() -> Element {
 
             "Hello world!"
         }
-    })
+    }
 }

packages/dioxus-tui/examples/task.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let count = use_state(|| 0);
+    let count = use_signal(|| 0);
 
-    use_future((), move |_| {
+    use_future(move |_| {
         let count = count.to_owned();
         let update = cx.schedule_update();
         async move {
@@ -19,7 +19,7 @@ fn app() -> Element {
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         div { width: "100%",
             div { width: "50%", height: "5px", background_color: "blue", justify_content: "center", align_items: "center",
                 "Hello {count}!"
@@ -28,5 +28,5 @@ fn app() -> Element {
                 "Hello {count}!"
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/text.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let alpha = use_state(|| 100);
+    let alpha = use_signal(|| 100);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -109,5 +109,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/widgets.rs

@@ -6,10 +6,10 @@ fn main() {
 }
 
 fn app() -> Element {
-    let bg_green = use_state(|| false);
+    let bg_green = use_signal(|| false);
 
     let color = if *bg_green.get() { "green" } else { "red" };
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             background_color: "{color}",
@@ -89,5 +89,5 @@ fn app() -> Element {
                 height: "10%",
             }
         }
-    })
+    }
 }

packages/dioxus-tui/tests/events.rs

@@ -33,7 +33,7 @@ fn key_down() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -56,7 +56,7 @@ fn key_down() {
             kind: crossterm::event::KeyEventKind::Press,
             state: crossterm::event::KeyEventState::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "100%",
                 height: "100%",
@@ -65,7 +65,7 @@ fn key_down() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -74,7 +74,7 @@ fn mouse_down() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -90,7 +90,7 @@ fn mouse_down() {
             kind: crossterm::event::MouseEventKind::Down(MouseButton::Left),
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "100%",
                 height: "100%",
@@ -101,7 +101,7 @@ fn mouse_down() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -110,7 +110,7 @@ fn mouse_up() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -132,7 +132,7 @@ fn mouse_up() {
             kind: crossterm::event::MouseEventKind::Up(MouseButton::Left),
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "100%",
                 height: "100%",
@@ -140,7 +140,7 @@ fn mouse_up() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -149,7 +149,7 @@ fn mouse_enter() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -171,7 +171,7 @@ fn mouse_enter() {
             kind: crossterm::event::MouseEventKind::Moved,
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "50%",
                 height: "50%",
@@ -179,7 +179,7 @@ fn mouse_enter() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -188,7 +188,7 @@ fn mouse_exit() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -210,7 +210,7 @@ fn mouse_exit() {
             kind: crossterm::event::MouseEventKind::Moved,
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "50%",
                 height: "50%",
@@ -218,7 +218,7 @@ fn mouse_exit() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -227,7 +227,7 @@ fn mouse_move() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -249,7 +249,7 @@ fn mouse_move() {
             kind: crossterm::event::MouseEventKind::Moved,
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "100%",
                 height: "100%",
@@ -257,7 +257,7 @@ fn mouse_move() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -266,7 +266,7 @@ fn wheel() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -288,7 +288,7 @@ fn wheel() {
             kind: crossterm::event::MouseEventKind::ScrollDown,
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "100%",
                 height: "100%",
@@ -297,7 +297,7 @@ fn wheel() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -306,7 +306,7 @@ fn click() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -328,7 +328,7 @@ fn click() {
             kind: crossterm::event::MouseEventKind::Up(MouseButton::Left),
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "100%",
                 height: "100%",
@@ -336,7 +336,7 @@ fn click() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }
 
@@ -345,7 +345,7 @@ fn context_menu() {
     dioxus_tui::launch_cfg(app, dioxus_tui::Config::new().with_headless());
 
     fn app() -> Element {
-        let render_count = use_state(|| 0);
+        let render_count = use_signal(|| 0);
         let tui_ctx: TuiContext = cx.consume_context().unwrap();
         let render_count_handle = render_count.clone();
         cx.spawn(async move {
@@ -367,7 +367,7 @@ fn context_menu() {
             kind: crossterm::event::MouseEventKind::Up(MouseButton::Right),
             modifiers: KeyModifiers::NONE,
         }));
-        cx.render(rsx! {
+        rsx! {
             div {
                 width: "100%",
                 height: "100%",
@@ -375,6 +375,6 @@ fn context_menu() {
                     tui_ctx.quit();
                 }
             }
-        })
+        }
     }
 }