diff --git a/README.md b/README.md index cc23729fa..6017da7cb 100644 --- a/README.md +++ b/README.md @@ -56,13 +56,13 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla ```rust fn app() -> Element { - let mut count = use_state(|| 0); + let mut count = use_signal(|| 0); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } - }) + } } ``` diff --git a/examples/PWA-example/src/main.rs b/examples/PWA-example/src/main.rs index 834ccfe85..04053415c 100644 --- a/examples/PWA-example/src/main.rs +++ b/examples/PWA-example/src/main.rs @@ -9,7 +9,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx! ( + rsx! ( div { style: "text-align: center;", h1 { "🌗 Dioxus 🚀" } diff --git a/examples/all_css.rs b/examples/all_css.rs index a468e0d41..b4a854751 100644 --- a/examples/all_css.rs +++ b/examples/all_css.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { align_content: "a", align_items: "a", @@ -409,5 +409,5 @@ fn app() -> Element { "This example isn't quite useful yet" } - }) + } } diff --git a/examples/all_events.rs b/examples/all_events.rs index 323fe95fe..d3db35877 100644 --- a/examples/all_events.rs +++ b/examples/all_events.rs @@ -41,7 +41,7 @@ const RECT_STYLE: &str = r#" "#; fn app() -> Element { - let events = use_ref(std::collections::VecDeque::new); + let events = use_signal(std::collections::VecDeque::new); let log_event = move |event: Event| { let mut events = events.write(); @@ -52,7 +52,7 @@ fn app() -> Element { events.push_back(event); }; - cx.render(rsx! ( + rsx! { div { style: "{CONTAINER_STYLE}", div { style: "{RECT_STYLE}", @@ -82,5 +82,5 @@ fn app() -> Element { } } } - )) + } } diff --git a/examples/calculator.rs b/examples/calculator.rs index 41bb1fd49..9cb3c957f 100644 --- a/examples/calculator.rs +++ b/examples/calculator.rs @@ -19,7 +19,7 @@ fn main() { } fn app() -> Element { - let val = use_state(|| String::from("0")); + let val = use_signal(|| String::from("0")); let input_digit = move |num: u8| { if val.get() == "0" { @@ -57,7 +57,7 @@ fn app() -> Element { _ => {} }; - cx.render(rsx!( + rsx! { style { {include_str!("./assets/calculator.css")} } div { id: "wrapper", div { class: "app", @@ -128,8 +128,7 @@ fn app() -> Element { } } } - - )) + } } fn calc_val(val: &str) -> f64 { diff --git a/examples/callback.rs b/examples/callback.rs index 32e0c9583..2975d8305 100644 --- a/examples/callback.rs +++ b/examples/callback.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - let login = use_callback!(move |_| async move { + let onclick = use_callback!(move |_| async move { let res = reqwest::get("https://dog.ceo/api/breeds/list/all") .await .unwrap() @@ -16,7 +16,7 @@ fn app() -> Element { println!("{res:#?}, "); }); - cx.render(rsx! { - button { onclick: login, "Click me!" } - }) + rsx! { + button { onclick, "Click me!" } + } } diff --git a/examples/clock.rs b/examples/clock.rs index 9574b0e73..cab1db310 100644 --- a/examples/clock.rs +++ b/examples/clock.rs @@ -8,7 +8,7 @@ fn main() { fn app() -> Element { let mut count = use_signal(|| 0); - use_future!(|| async move { + use_future(|| async move { loop { tokio::time::sleep(std::time::Duration::from_millis(10)).await; count += 1; @@ -16,7 +16,7 @@ fn app() -> Element { } }); - cx.render(rsx! { + rsx! { div { "High-Five counter: {count}" } - }) + } } diff --git a/examples/compose.rs b/examples/compose.rs index 4e7f96e84..dc947c208 100644 --- a/examples/compose.rs +++ b/examples/compose.rs @@ -8,7 +8,7 @@ fn main() { } fn app() -> Element { - let emails_sent = use_ref(Vec::new); + let emails_sent = use_signal(Vec::new); let tx = use_coroutine(|mut rx: UnboundedReceiver| { to_owned![emails_sent]; @@ -19,7 +19,7 @@ fn app() -> Element { } }); - cx.render(rsx! { + rsx! { div { h1 { "This is your email" } @@ -40,7 +40,7 @@ fn app() -> Element { } } } - }) + } } struct ComposeProps { @@ -48,9 +48,9 @@ struct ComposeProps { } fn compose(cx: Scope) -> Element { - let user_input = use_state(String::new); + let user_input = use_signal(String::new); - cx.render(rsx! { + rsx! { div { h1 { "Compose a new email" } @@ -64,5 +64,5 @@ fn compose(cx: Scope) -> Element { input { oninput: move |e| user_input.set(e.value()), value: "{user_input}" } } - }) + } } diff --git a/examples/control_focus.rs b/examples/control_focus.rs index 7ac955be2..9d1999ca7 100644 --- a/examples/control_focus.rs +++ b/examples/control_focus.rs @@ -7,10 +7,10 @@ fn main() { } fn app() -> Element { - let elements: &UseRef>> = use_ref(Vec::new); - let running = use_state(|| true); + let elements = use_signal(Vec::>::new); + let running = use_signal(|| true); - use_future!(|(elements, running)| async move { + use_future(|| async move { let mut focused = 0; if *running.current() { loop { @@ -25,7 +25,7 @@ fn app() -> Element { } }); - cx.render(rsx!( + rsx! { div { h1 { "Input Roulette" } for i in 0..100 { @@ -40,5 +40,5 @@ fn app() -> Element { } } } - )) + } } diff --git a/examples/counter.rs b/examples/counter.rs index 6c8b3c83c..d1c5771c5 100644 --- a/examples/counter.rs +++ b/examples/counter.rs @@ -8,7 +8,7 @@ fn main() { } fn app() -> Element { - let counters = use_state(|| vec![0, 0, 0]); + let counters = use_signal(|| vec![0, 0, 0]); let sum: usize = counters.iter().copied().sum(); render! { diff --git a/examples/crm.rs b/examples/crm.rs index 312aee415..cbaa73e7f 100644 --- a/examples/crm.rs +++ b/examples/crm.rs @@ -27,7 +27,7 @@ pub struct Client { type ClientContext = Vec; #[component] -fn App() -> Element { +fn App(props: ()) -> Element { use_shared_state_provider::(Default::default); render! { @@ -56,7 +56,7 @@ fn App() -> Element { fn ClientList() -> Element { let clients = use_shared_state::().unwrap(); - cx.render(rsx! { + rsx! { h2 { "List of Clients" } Link { to: Route::ClientAdd {}, class: "pure-button pure-button-primary", "Add Client" } @@ -71,17 +71,17 @@ fn ClientList() -> Element { p { "Description: {client.description}" } } } - }) + } } #[component] -fn ClientAdd() -> Element { +fn ClientAdd(props: ()) -> Element { let clients = use_shared_state::().unwrap(); - let first_name = use_state(String::new); - let last_name = use_state(String::new); - let description = use_state(String::new); + let first_name = use_signal(String::new); + let last_name = use_signal(String::new); + let description = use_signal(String::new); - cx.render(rsx! { + rsx! { h2 { "Add new Client" } form { @@ -138,14 +138,14 @@ fn ClientAdd() -> Element { } } } - }) + } } #[component] -fn Settings() -> Element { +fn Settings(props: ()) -> Element { let clients = use_shared_state::().unwrap(); - cx.render(rsx! { + rsx! { h2 { "Settings" } button { @@ -158,5 +158,5 @@ fn Settings() -> Element { } Link { to: Route::ClientList {}, class: "pure-button", "Go back" } - }) + } } diff --git a/examples/custom_assets.rs b/examples/custom_assets.rs index c4e4b70d7..bf33e948a 100644 --- a/examples/custom_assets.rs +++ b/examples/custom_assets.rs @@ -5,12 +5,12 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { p { "This should show an image:" } img { src: manganis::mg!(image("examples/assets/logo.png").format(ImageType::Avif)).to_string() } } - }) + } } diff --git a/examples/custom_html.rs b/examples/custom_html.rs index ed7d60505..47c13181c 100644 --- a/examples/custom_html.rs +++ b/examples/custom_html.rs @@ -32,9 +32,9 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { h1 {"hello world!"} } - }) + } } diff --git a/examples/disabled.rs b/examples/disabled.rs index 22a70f006..a639c43c0 100644 --- a/examples/disabled.rs +++ b/examples/disabled.rs @@ -5,9 +5,9 @@ fn main() { } fn app() -> Element { - let disabled = use_state(|| false); + let disabled = use_signal(|| false); - cx.render(rsx! { + rsx! { div { button { onclick: move |_| disabled.set(!disabled), @@ -21,5 +21,5 @@ fn app() -> Element { "lower button" } } - }) + } } diff --git a/examples/dog_app.rs b/examples/dog_app.rs index 07cc865d2..766730f79 100644 --- a/examples/dog_app.rs +++ b/examples/dog_app.rs @@ -11,10 +11,10 @@ struct ListBreeds { } #[component] -fn AppRoot(cx: Scope<'_>) -> Element { - let breed = use_state(|| "deerhound".to_string()); +fn AppRoot(_: ()) -> Element { + let breed = use_signal(|| "deerhound".to_string()); - let breeds = use_future!(|| async move { + let breeds = use_future(|| async move { reqwest::get("https://dog.ceo/api/breeds/list/all") .await .unwrap() @@ -23,7 +23,7 @@ fn AppRoot(cx: Scope<'_>) -> Element { }); match breeds.value()? { - Ok(breed_list) => cx.render(rsx! { + Ok(breed_list) => rsx! { div { height: "500px", h1 { "Select a dog breed!" } div { display: "flex", @@ -40,8 +40,8 @@ fn AppRoot(cx: Scope<'_>) -> Element { div { flex: "50%", BreedPic { breed: breed.to_string() } } } } - }), - Err(_e) => cx.render(rsx! { div { "Error fetching breeds" } }), + }, + Err(_e) => rsx! { div { "Error fetching breeds" } }, } } @@ -52,7 +52,7 @@ struct DogApi { #[component] fn BreedPic(breed: String) -> Element { - let fut = use_future!(|breed| async move { + let fut = use_future(|breed| async move { reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random")) .await .unwrap() diff --git a/examples/error_handle.rs b/examples/error_handle.rs index abfab049d..2ed97ae62 100644 --- a/examples/error_handle.rs +++ b/examples/error_handle.rs @@ -5,15 +5,13 @@ fn main() { } #[component] -fn App() -> Element { - cx.render(rsx! { +fn App(_: ()) -> Element { + rsx! { ErrorBoundary { handle_error: |error: CapturedError| rsx! {"Found error {error}"}, - DemoC { - x: 1 - } + DemoC { x: 1 } } - }) + } } #[component] diff --git a/examples/eval.rs b/examples/eval.rs index cd3f43810..47a35c81a 100644 --- a/examples/eval.rs +++ b/examples/eval.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - let future = use_future((), |_| async move { + let future = use_future(|_| async move { let eval = eval( r#" dioxus.send("Hi from JS!"); @@ -23,11 +23,11 @@ fn app() -> Element { }); match future.value() { - Some(v) => cx.render(rsx!( + Some(v) => rsx!( p { "{v}" } - )), - _ => cx.render(rsx!( + ), + _ => rsx!( p { "hello" } - )), + ), } } diff --git a/examples/fermi.rs b/examples/fermi.rs index 8423d66d8..a45f52f00 100644 --- a/examples/fermi.rs +++ b/examples/fermi.rs @@ -13,22 +13,22 @@ fn app() -> Element { use_init_atom_root(cx); let name = use_read(&NAME); - cx.render(rsx! { + rsx! { div { "hello {name}!" } Child {} ChildWithRef {} - }) + } } fn Child() -> Element { let set_name = use_set(&NAME); - cx.render(rsx! { + rsx! { button { onclick: move |_| set_name("dioxus".to_string()), "reset name" } - }) + } } static NAMES: AtomRef> = AtomRef(|_| vec!["world".to_string()]); @@ -36,7 +36,7 @@ static NAMES: AtomRef> = AtomRef(|_| vec!["world".to_string()]); fn ChildWithRef() -> Element { let names = use_atom_ref(&NAMES); - cx.render(rsx! { + rsx! { div { ul { for name in names.read().iter() { @@ -53,5 +53,5 @@ fn ChildWithRef() -> Element { "Add name" } } - }) + } } diff --git a/examples/file_explorer.rs b/examples/file_explorer.rs index 90f388ba2..5399aec44 100644 --- a/examples/file_explorer.rs +++ b/examples/file_explorer.rs @@ -21,9 +21,9 @@ fn main() { const _STYLE: &str = manganis::mg!(file("./examples/assets/fileexplorer.css")); fn app() -> Element { - let files = use_ref(Files::new); + let files = use_signal(Files::new); - cx.render(rsx! { + rsx! { div { link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", } header { @@ -60,7 +60,7 @@ fn app() -> Element { } } } - }) + } } struct Files { diff --git a/examples/file_upload.rs b/examples/file_upload.rs index 8b250f644..b5fe38bb0 100644 --- a/examples/file_upload.rs +++ b/examples/file_upload.rs @@ -8,10 +8,10 @@ fn main() { } fn App() -> Element { - let enable_directory_upload = use_state(|| false); - let files_uploaded: &UseRef> = use_ref(Vec::new); + let enable_directory_upload = use_signal(|| false); + let files_uploaded: Signal> = use_signal(Vec::new); - cx.render(rsx! { + rsx! { label { input { r#type: "checkbox", @@ -70,5 +70,5 @@ fn App() -> Element { li { "{file}" } } } - }) + } } diff --git a/examples/filedragdrop.rs b/examples/filedragdrop.rs index 230aaf4db..ba39f38f6 100644 --- a/examples/filedragdrop.rs +++ b/examples/filedragdrop.rs @@ -11,9 +11,9 @@ fn main() { } fn app() -> Element { - cx.render(rsx!( + rsx!( div { h1 { "drag a file here and check your console" } } - )) + ) } diff --git a/examples/form.rs b/examples/form.rs index d5c02929e..820279776 100644 --- a/examples/form.rs +++ b/examples/form.rs @@ -10,7 +10,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { h1 { "Form" } form { @@ -24,5 +24,5 @@ fn app() -> Element { button { r#type: "submit", value: "Submit", "Submit the form" } } } - }) + } } diff --git a/examples/framework_benchmark.rs b/examples/framework_benchmark.rs index b9deca82b..5f01a885f 100644 --- a/examples/framework_benchmark.rs +++ b/examples/framework_benchmark.rs @@ -32,10 +32,10 @@ impl Label { } fn app() -> Element { - let items = use_ref(Vec::new); - let selected = use_state(|| None); + let items = use_signal(Vec::new); + let selected = use_signal(|| None); - cx.render(rsx! { + rsx! { div { class: "container", div { class: "jumbotron", div { class: "row", @@ -87,7 +87,7 @@ fn app() -> Element { } span { class: "preloadicon glyphicon glyphicon-remove", aria_hidden: "true" } } - }) + } } #[derive(Props)] @@ -98,7 +98,7 @@ struct ActionButtonProps<'a> { } fn ActionButton(props: ActionButtonProps) -> Element { - cx.render(rsx! { + rsx! { div { class: "col-sm-6 smallpad", button { @@ -110,7 +110,7 @@ fn ActionButton(props: ActionButtonProps) -> Element { "{cx.props.name}" } } - }) + } } static ADJECTIVES: &[&str] = &[ diff --git a/examples/heavy_compute.rs b/examples/heavy_compute.rs index 158379532..7ea2b0650 100644 --- a/examples/heavy_compute.rs +++ b/examples/heavy_compute.rs @@ -22,7 +22,7 @@ fn app() -> Element { std::thread::sleep(std::time::Duration::from_millis(2_000)); }); - cx.render(rsx! { + rsx! { div { "Hello, world!" } - }) + } } diff --git a/examples/hydration.rs b/examples/hydration.rs index 2b2450099..e3377a8b1 100644 --- a/examples/hydration.rs +++ b/examples/hydration.rs @@ -21,9 +21,9 @@ fn main() { } fn app() -> Element { - let val = use_state(|| 0); + let val = use_signal(|| 0); - cx.render(rsx! { + rsx! { div { h1 { "hello world. Count: {val}" } button { @@ -31,5 +31,5 @@ fn app() -> Element { "click to increment" } } - }) + } } diff --git a/examples/inlineprops.rs b/examples/inlineprops.rs deleted file mode 100644 index 3f3a2d8e9..000000000 --- a/examples/inlineprops.rs +++ /dev/null @@ -1,43 +0,0 @@ -//! Run with `cargo-expand` to see what each one expands to. -//! This file is named `inlineprops.rs`, because there used to be a `#[inline_props]` macro to -//! do this. However, it's now deprecated (and will likely be removed in a future major version), -//! so please use `#[component]` instead! -use dioxus::prelude::*; - -#[component] -fn Thing1(_a: T) -> Element { - cx.render(rsx! { "" }) -} - -#[component] -fn Thing2(_a: u32) -> Element { - cx.render(rsx! { "" }) -} - -#[component] -fn Thing3<'a, T>(cx: Scope<'a>, _a: &'a T) -> Element { - cx.render(rsx! { "" }) -} - -#[component] -fn Thing4<'a>(cx: Scope<'a>, _a: &'a u32) -> Element { - cx.render(rsx! { "" }) -} - -fn main() { - dioxus_desktop::launch(App); -} - -#[component] -fn App() -> Element { - let state = use_state(|| 1); - - cx.render(rsx! { - div { - Thing1 { _a: 1 }, - Thing2 { _a: 1 }, - Thing3 { _a: state }, - Thing4 { _a: state }, - } - }) -} diff --git a/examples/inputs.rs b/examples/inputs.rs index dee83433d..4268797ce 100644 --- a/examples/inputs.rs +++ b/examples/inputs.rs @@ -35,9 +35,9 @@ const FIELDS: &[(&str, &str)] = &[ ]; fn app() -> Element { - cx.render(rsx! { + rsx! { div { margin_left: "30px", - {select_example(cx)}, + {select_example()}, div { // handling inputs on divs will catch all input events below // so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe) @@ -133,36 +133,35 @@ fn app() -> Element { } } } - }) + } } fn select_example() -> Element { - cx.render(rsx! { - div { - select { - id: "selection", - name: "selection", - multiple: true, - oninput: move |evt| { - println!("{evt:?}"); - }, - option { - value : "Option 1", - label : "Option 1", + rsx! { + div { + select { + id: "selection", + name: "selection", + multiple: true, + oninput: move |evt| println!("{evt:?}"), + option { + value: "Option 1", + label: "Option 1", + } + option { + value: "Option 2", + label: "Option 2", + selected: true, + }, + option { + value: "Option 3", + label: "Option 3", + } } - option { - value : "Option 2", - label : "Option 2", - selected : true, - }, - option { - value : "Option 3", - label : "Option 3", + label { + r#for: "selection", + "select element" } } - label { - r#for: "selection", - "select element" - } - }}) + } } diff --git a/examples/link.rs b/examples/link.rs index 023f6d663..fd859188b 100644 --- a/examples/link.rs +++ b/examples/link.rs @@ -7,7 +7,7 @@ fn main() { #[component] fn App() -> Element { - cx.render(rsx! ( + rsx! ( div { p { a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" } @@ -24,7 +24,7 @@ fn App() -> Element { div { Router:: {} } - )) + ) } #[derive(Routable, Clone)] diff --git a/examples/login_form.rs b/examples/login_form.rs index b4f0c704c..5fec39760 100644 --- a/examples/login_form.rs +++ b/examples/login_form.rs @@ -29,7 +29,7 @@ fn app() -> Element { } }; - cx.render(rsx! { + rsx! { h1 { "Login" } form { onsubmit: onsubmit, input { r#type: "text", id: "username", name: "username" } @@ -40,5 +40,5 @@ fn app() -> Element { br {} button { "Login" } } - }) + } } diff --git a/examples/multiwindow.rs b/examples/multiwindow.rs index 4637268d3..5ba22ba7a 100644 --- a/examples/multiwindow.rs +++ b/examples/multiwindow.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { button { onclick: move |_| { @@ -15,11 +15,11 @@ fn app() -> Element { "New Window" } } - }) + } } fn popup() -> Element { - cx.render(rsx! { + rsx! { div { "This is a popup!" } - }) + } } diff --git a/examples/nested_listeners.rs b/examples/nested_listeners.rs index 76f253312..a78f3cc8b 100644 --- a/examples/nested_listeners.rs +++ b/examples/nested_listeners.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { onclick: move |_| println!("clicked! top"), "- div" @@ -30,5 +30,5 @@ fn app() -> Element { "Does not handle clicks - only propagate" } } - }) + } } diff --git a/examples/openid_connect_demo/src/views/header.rs b/examples/openid_connect_demo/src/views/header.rs index d44c7f56f..366d5e03f 100644 --- a/examples/openid_connect_demo/src/views/header.rs +++ b/examples/openid_connect_demo/src/views/header.rs @@ -17,7 +17,7 @@ use openidconnect::{url::Url, OAuth2TokenResponse, TokenResponse}; pub fn LogOut(cx: Scope) -> Element { let fermi_auth_token = use_atom_ref(&FERMI_AUTH_TOKEN); let fermi_auth_token_read = fermi_auth_token.read().clone(); - let log_out_url_state = use_state(|| None::>>); + let log_out_url_state = use_signal(|| None::>>); cx.render(match fermi_auth_token_read { Some(fermi_auth_token_read) => match fermi_auth_token_read.id_token.clone() { Some(id_token) => match log_out_url_state.get() { @@ -129,7 +129,7 @@ pub fn RefreshToken(cx: Scope) -> Element { #[component] pub fn LoadClient() -> Element { - let init_client_future = use_future((), |_| async move { init_oidc_client().await }); + let init_client_future = use_future(|_| async move { init_oidc_client().await }); let fermi_client: &UseAtomRef = use_atom_ref(&FERMI_CLIENT); cx.render(match init_client_future.value() { Some(client_props) => match client_props { diff --git a/examples/optional_props.rs b/examples/optional_props.rs index c006b0649..1e87230a7 100644 --- a/examples/optional_props.rs +++ b/examples/optional_props.rs @@ -11,7 +11,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { Button { a: "asd".to_string(), c: "asd".to_string(), @@ -30,7 +30,7 @@ fn app() -> Element { c: "asd".to_string(), d: Some("asd".to_string()), } - }) + } } type SthElse = Option; @@ -52,7 +52,7 @@ struct ButtonProps { } fn Button(cx: Scope) -> Element { - cx.render(rsx! { + rsx! { button { "{cx.props.a} | " "{cx.props.b:?} | " @@ -60,5 +60,5 @@ fn Button(cx: Scope) -> Element { "{cx.props.d:?} | " "{cx.props.e:?}" } - }) + } } diff --git a/examples/overlay.rs b/examples/overlay.rs index 4bd26b124..eebbcd411 100644 --- a/examples/overlay.rs +++ b/examples/overlay.rs @@ -6,7 +6,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { width: "100%", height: "100%", @@ -22,7 +22,7 @@ fn app() -> Element { "This is an overlay!" } - }) + } } fn make_config() -> dioxus_desktop::Config { diff --git a/examples/pattern_model.rs b/examples/pattern_model.rs index 25bcd5231..ca2e967d5 100644 --- a/examples/pattern_model.rs +++ b/examples/pattern_model.rs @@ -38,9 +38,9 @@ fn main() { const STYLE: &str = include_str!("./assets/calculator.css"); fn app() -> Element { - let state = use_ref(Calculator::new); + let state = use_signal(Calculator::new); - cx.render(rsx! { + rsx! { style { {STYLE} } div { id: "wrapper", div { class: "app", @@ -117,24 +117,25 @@ fn app() -> Element { } } } - }) + } } #[derive(Props)] struct CalculatorKeyProps { + #[props(into)] name: String, onclick: EventHandler, children: Element, } fn CalculatorKey(props: CalculatorKeyProps) -> Element { - cx.render(rsx! { + rsx! { button { class: "calculator-key {cx.props.name}", onclick: move |e| cx.props.onclick.call(e), {&cx.props.children} } - }) + } } struct Calculator { diff --git a/examples/pattern_reducer.rs b/examples/pattern_reducer.rs index 125154b51..55a69b006 100644 --- a/examples/pattern_reducer.rs +++ b/examples/pattern_reducer.rs @@ -15,9 +15,9 @@ fn main() { } fn app() -> Element { - let state = use_state(PlayerState::new); + let state = use_signal(PlayerState::new); - cx.render(rsx!( + rsx!( div { h1 {"Select an option"} h3 { "The radio is... ", {state.is_playing()}, "!" } @@ -28,7 +28,7 @@ fn app() -> Element { "Play" } } - )) + ) } enum PlayerAction { diff --git a/examples/read_size.rs b/examples/read_size.rs index 282f9b208..d6afb375f 100644 --- a/examples/read_size.rs +++ b/examples/read_size.rs @@ -26,11 +26,11 @@ fn main() { } fn app() -> Element { - let div_element: &UseRef>> = use_ref(|| None); + let div_element: Signal>> = use_signal(|| None); - let dimentions = use_ref(Rect::zero); + let dimentions = use_signal(Rect::zero); - cx.render(rsx!( + rsx!( div { width: "50%", height: "50%", @@ -56,5 +56,5 @@ fn app() -> Element { }, "Read dimentions" } - )) + ) } diff --git a/examples/readme.rs b/examples/readme.rs index 8dae208f3..97ae3d9ab 100644 --- a/examples/readme.rs +++ b/examples/readme.rs @@ -9,11 +9,11 @@ fn main() { } fn app() -> Element { - let mut count = use_state(|| 0); + let mut count = use_signal(|| 0); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } - }) + } } diff --git a/examples/rsx_compile_fail.rs b/examples/rsx_compile_fail.rs index aacea5ec8..fa1407c24 100644 --- a/examples/rsx_compile_fail.rs +++ b/examples/rsx_compile_fail.rs @@ -13,14 +13,14 @@ fn main() { } fn example() -> Element { - let items = use_state(|| { + let items = use_signal(|| { vec![Thing { a: "asd".to_string(), b: 10, }] }); - let things = use_ref(|| { + let things = use_signal(|| { vec![Thing { a: "asd".to_string(), b: 10, @@ -28,10 +28,10 @@ fn example() -> Element { }); let things_list = things.read(); - let mything = use_ref(|| Some(String::from("asd"))); + let mything = use_signal(|| Some(String::from("asd"))); let mything_read = mything.read(); - cx.render(rsx!( + rsx!( div { div { id: "asd", "your neighborhood spiderman" diff --git a/examples/rsx_usage.rs b/examples/rsx_usage.rs index a57f0cb81..1e450bb87 100644 --- a/examples/rsx_usage.rs +++ b/examples/rsx_usage.rs @@ -54,7 +54,7 @@ fn App() -> Element { let formatting_tuple = ("a", "b"); let lazy_fmt = format_args!("lazily formatted text"); let asd = 123; - cx.render(rsx! { + rsx! { div { // Elements div {} @@ -216,7 +216,7 @@ fn App() -> Element { // Or we can shell out to a helper function {format_dollars(10, 50)} } - }) + } } fn format_dollars(dollars: u32, cents: u32) -> String { @@ -224,9 +224,9 @@ fn format_dollars(dollars: u32, cents: u32) -> String { } fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element { - cx.render(rsx! { + rsx! { p { "{text}" } - }) + } } // no_case_check disables PascalCase checking if you *really* want a snake_case component. @@ -234,9 +234,9 @@ fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element { // something like Clippy. #[component(no_case_check)] fn lowercase_helper() -> Element { - cx.render(rsx! { + rsx! { "asd" - }) + } } mod baller { @@ -246,7 +246,7 @@ mod baller { #[component] /// This component totally balls - pub fn Baller(_cx: Scope) -> Element { + pub fn Baller(props: BallerProps) -> Element { todo!() } @@ -255,7 +255,7 @@ mod baller { // something like Clippy. #[component(no_case_check)] pub fn lowercase_component() -> Element { - cx.render(rsx! { "look ma, no uppercase" }) + rsx! { "look ma, no uppercase" } } } @@ -268,10 +268,10 @@ pub struct TallerProps<'a> { /// Documention for this component is visible within the rsx macro #[component] -pub fn Taller(props: TallerProps -> Element { - cx.render(rsx! { +pub fn Taller(props: TallerProps) -> Element { + rsx! { {&cx.props.children} - }) + } } #[derive(Props, PartialEq, Eq)] @@ -291,9 +291,9 @@ where #[component] fn WithInline<'a>(cx: Scope<'a>, text: &'a str) -> Element { - cx.render(rsx! { + rsx! { p { "{text}" } - }) + } } #[component] @@ -301,7 +301,7 @@ fn Label(text: T) -> Element where T: Display, { - cx.render(rsx! { + rsx! { p { "{text}" } - }) + } } diff --git a/examples/scroll_to_top.rs b/examples/scroll_to_top.rs index 88ee1b5d8..a27445508 100644 --- a/examples/scroll_to_top.rs +++ b/examples/scroll_to_top.rs @@ -5,14 +5,12 @@ fn main() { } fn app() -> Element { - let header_element = use_ref(|| None); + let header_element = use_signal(|| None); - cx.render(rsx!( + rsx! { div { h1 { - onmounted: move |cx| { - header_element.set(Some(cx.inner().clone())); - }, + onmounted: move |cx| header_element.set(Some(cx.inner().clone())), "Scroll to top example" } @@ -21,15 +19,13 @@ fn app() -> Element { } button { - onclick: move |_| { + onclick: async move |_| move { if let Some(header) = header_element.read().as_ref().cloned() { - cx.spawn(async move { - let _ = header.scroll_to(ScrollBehavior::Smooth).await; - }); + let _ = header.scroll_to(ScrollBehavior::Smooth).await; } }, "Scroll to top" } } - )) + } } diff --git a/examples/shortcut.rs b/examples/shortcut.rs index 64e47d2aa..d671e62a0 100644 --- a/examples/shortcut.rs +++ b/examples/shortcut.rs @@ -6,12 +6,12 @@ fn main() { } fn app() -> Element { - let toggled = use_state(|| false); + let toggled = use_signal(|| false); use_global_shortcut("ctrl+s", { to_owned![toggled]; move || toggled.modify(|t| !*t) }); - cx.render(rsx!("toggle: {toggled.get()}")) + rsx!("toggle: {toggled.get()}") } diff --git a/examples/shorthand.rs b/examples/shorthand.rs index baaaed16e..42a3be825 100644 --- a/examples/shorthand.rs +++ b/examples/shorthand.rs @@ -25,14 +25,7 @@ fn app() -> Element { } #[component] -fn Component<'a>( - cx: Scope<'a>, - a: i32, - b: i32, - c: i32, - children: Element, - onclick: EventHandler<'a, ()>, -) -> Element { +fn Component(a: i32, b: i32, c: i32, children: Element, onclick: EventHandler<()>) -> Element { render! { div { "{a}" } div { "{b}" } diff --git a/examples/signals.rs b/examples/signals.rs index 5e6e2584b..1235f3651 100644 --- a/examples/signals.rs +++ b/examples/signals.rs @@ -12,7 +12,7 @@ fn app() -> Element { // Signals can be used in async functions without an explicit clone since they're 'static and Copy // Signals are backed by a runtime that is designed to deeply integrate with Dioxus apps - use_future!(|| async move { + use_future(|| async move { loop { if running.value() { count += 1; @@ -21,7 +21,7 @@ fn app() -> Element { } }); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } @@ -45,5 +45,5 @@ fn app() -> Element { } else { "No saved values" } - }) + } } diff --git a/examples/simple_list.rs b/examples/simple_list.rs index f5a2dd48c..1e7e6ac1c 100644 --- a/examples/simple_list.rs +++ b/examples/simple_list.rs @@ -5,7 +5,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx!( + rsx!( div { // Use Map directly to lazily pull elements {(0..10).map(|f| rsx! { "{f}" })}, @@ -30,5 +30,5 @@ fn app() -> Element { "hello world!" } } - )) + ) } diff --git a/examples/spread.rs b/examples/spread.rs index d33129d9f..beb8ee2d3 100644 --- a/examples/spread.rs +++ b/examples/spread.rs @@ -21,7 +21,7 @@ fn app() -> Element { } #[component] -fn Component(props: Props -> Element { +fn Component(props: Props) -> Element { render! { audio { ..cx.props.attributes, "1: {cx.props.extra_data}\n2: {cx.props.extra_data2}" } } diff --git a/examples/ssr.rs b/examples/ssr.rs index 29aafd920..333f2b51b 100644 --- a/examples/ssr.rs +++ b/examples/ssr.rs @@ -31,7 +31,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx!( + rsx!( div { h1 { "Title" } p { "Body" } diff --git a/examples/streams.rs b/examples/streams.rs index ee59ec5dd..b5b66e541 100644 --- a/examples/streams.rs +++ b/examples/streams.rs @@ -10,7 +10,7 @@ fn main() { fn app() -> Element { let count = use_signal(|| 10); - use_future((), |_| async move { + use_future(|_| async move { let mut stream = some_stream(); while let Some(second) = stream.next().await { @@ -18,9 +18,9 @@ fn app() -> Element { } }); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } - }) + } } fn some_stream() -> std::pin::Pin>> { diff --git a/examples/suspense.rs b/examples/suspense.rs index a85d1d98e..045bd770c 100644 --- a/examples/suspense.rs +++ b/examples/suspense.rs @@ -32,7 +32,7 @@ struct DogApi { } fn app() -> Element { - cx.render(rsx! { + rsx! { div { h1 {"Dogs are very important"} p { @@ -46,14 +46,14 @@ fn app() -> Element { h3 { "Illustrious Dog Photo" } Doggo { } } - }) + } } /// This component will re-render when the future has finished /// Suspense is achieved my moving the future into only the component that /// actually renders the data. fn Doggo() -> Element { - let fut = use_future((), |_| async move { + let fut = use_future(|_| async move { reqwest::get("https://dog.ceo/api/breeds/image/random/") .await .unwrap() @@ -77,5 +77,5 @@ fn Doggo() -> Element { }, Some(Err(_)) => rsx! { div { "loading dogs failed" } }, None => rsx! { div { "loading dogs..." } }, - }) + } } diff --git a/examples/svg.rs b/examples/svg.rs index aad751451..df69b7ad2 100644 --- a/examples/svg.rs +++ b/examples/svg.rs @@ -7,9 +7,9 @@ fn main() { } fn app() -> Element { - let val = use_state(|| 5); + let val = use_signal(|| 5); - cx.render(rsx! { + rsx! { div { user_select: "none", webkit_user_select: "none", @@ -31,7 +31,7 @@ fn app() -> Element { } } } - }) + } } #[derive(Props)] @@ -58,7 +58,7 @@ const UNHELD_COLOR: &str = "#ddd"; // A six-sided die (D6) with dots. #[allow(non_snake_case)] -pub fn Die(props: DieProps -> Element { +pub fn Die(props: DieProps) -> Element { let &DieProps { value, keep, .. } = cx.props; let active_dots = &DOTS_FOR_VALUE[(value - 1) as usize]; @@ -81,7 +81,7 @@ pub fn Die(props: DieProps -> Element { } }); - cx.render(rsx! { + rsx! { svg { onclick: move |e| cx.props.onclick.call(e), prevent_default: "onclick", @@ -99,5 +99,5 @@ pub fn Die(props: DieProps -> Element { {dots} } - }) + } } diff --git a/examples/svg_basic.rs b/examples/svg_basic.rs index 01759e1d2..9a53539dd 100644 --- a/examples/svg_basic.rs +++ b/examples/svg_basic.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; fn app() -> Element { - cx.render(rsx!( svg { + rsx!( svg { width: "200", height: "250", xmlns: "http://www.w3.org/2000/svg", @@ -73,7 +73,7 @@ fn app() -> Element { "stroke-linecap": "square", "stroke-width": "square", } - })) + } } fn main() { diff --git a/examples/tailwind/src/main.rs b/examples/tailwind/src/main.rs index 5aca102d3..75dfc231d 100644 --- a/examples/tailwind/src/main.rs +++ b/examples/tailwind/src/main.rs @@ -13,7 +13,7 @@ fn main() { pub fn app() -> Element { let grey_background = true; - cx.render(rsx!( + rsx!( div { header { class: "text-gray-400 body-font", @@ -79,7 +79,7 @@ pub fn app() -> Element { } pub fn StacksIcon() -> Element { - cx.render(rsx!( + rsx!( svg { fill: "none", stroke: "currentColor", @@ -94,7 +94,7 @@ pub fn StacksIcon() -> Element { } pub fn RightArrowIcon() -> Element { - cx.render(rsx!( + rsx!( svg { fill: "none", stroke: "currentColor", diff --git a/examples/tasks.rs b/examples/tasks.rs index 00fdd8f79..0eb60a10a 100644 --- a/examples/tasks.rs +++ b/examples/tasks.rs @@ -10,19 +10,16 @@ fn main() { } fn app() -> Element { - let count = use_state(|| 0); + let mut count = use_signal(|| 0); - use_future((), move |_| { - let mut count = count.clone(); - async move { - loop { - tokio::time::sleep(Duration::from_millis(1000)).await; - count += 1; - } + use_future(move |_| async move { + loop { + tokio::time::sleep(Duration::from_millis(1000)).await; + count += 1; } }); - cx.render(rsx! { + rsx! { div { h1 { "Current count: {count}" } button { @@ -30,5 +27,5 @@ fn app() -> Element { "Reset the count" } } - }) + } } diff --git a/examples/textarea.rs b/examples/textarea.rs index 0ff08b2e4..43f837ea2 100644 --- a/examples/textarea.rs +++ b/examples/textarea.rs @@ -7,11 +7,11 @@ fn main() { } fn app() -> Element { - let model = use_state(|| String::from("asd")); + let model = use_signal(|| String::from("asd")); println!("{model}"); - cx.render(rsx! { + rsx! { textarea { class: "border", rows: "10", @@ -19,5 +19,5 @@ fn app() -> Element { value: "{model}", oninput: move |e| model.set(e.value().clone()), } - }) + } } diff --git a/examples/todomvc.rs b/examples/todomvc.rs index 3913c5f7f..4bb6fe05d 100644 --- a/examples/todomvc.rs +++ b/examples/todomvc.rs @@ -22,8 +22,8 @@ pub struct TodoItem { } pub fn app(cx: Scope<()>) -> Element { - let todos = use_state(im_rc::HashMap::::default); - let filter = use_state(|| FilterState::All); + let todos = use_signal(im_rc::HashMap::::default); + let filter = use_signal(|| FilterState::All); // Filter the todos based on the filter state let mut filtered_todos = todos @@ -45,7 +45,7 @@ pub fn app(cx: Scope<()>) -> Element { let show_clear_completed = todos.values().any(|todo| todo.checked); - cx.render(rsx! { + rsx! { section { class: "todoapp", style { {include_str!("./assets/todomvc.css")} } TodoHeader { todos: todos } @@ -86,7 +86,7 @@ pub fn app(cx: Scope<()>) -> Element { } } PageFooter {} - }) + } } #[derive(Props)] @@ -94,11 +94,11 @@ pub struct TodoHeaderProps<'a> { todos: &'a UseState>, } -pub fn TodoHeader(props: TodoHeaderProps -> Element { - let draft = use_state(|| "".to_string()); - let todo_id = use_state(|| 0); +pub fn TodoHeader(props: TodoHeaderProps) -> Element { + let draft = use_signal(|| "".to_string()); + let todo_id = use_signal(|| 0); - cx.render(rsx! { + rsx! { header { class: "header", h1 { "todos" } input { @@ -128,7 +128,7 @@ pub fn TodoHeader(props: TodoHeaderProps -> Element { } } } - }) + } } #[derive(Props)] @@ -137,15 +137,15 @@ pub struct TodoEntryProps<'a> { id: u32, } -pub fn TodoEntry(props: TodoEntryProps -> Element { - let is_editing = use_state(|| false); +pub fn TodoEntry(props: TodoEntryProps) -> Element { + let is_editing = use_signal(|| false); let todos = cx.props.todos.get(); let todo = &todos[&cx.props.id]; let completed = if todo.checked { "completed" } else { "" }; let editing = if **is_editing { "editing" } else { "" }; - cx.render(rsx!{ + rsx! { li { class: "{completed} {editing}", div { class: "view", input { @@ -187,7 +187,7 @@ pub fn TodoEntry(props: TodoEntryProps -> Element { } } } - }) + } } #[derive(Props)] @@ -199,7 +199,7 @@ pub struct ListFooterProps<'a> { filter: &'a UseState, } -pub fn ListFooter(props: ListFooterProps -> Element { +pub fn ListFooter(props: ListFooterProps) -> Element { let active_todo_count = cx.props.active_todo_count; let active_todo_text = cx.props.active_todo_text; @@ -211,7 +211,7 @@ pub fn ListFooter(props: ListFooterProps -> Element { } }; - cx.render(rsx! { + rsx! { footer { class: "footer", span { class: "todo-count", strong { "{active_todo_count} " } @@ -242,11 +242,11 @@ pub fn ListFooter(props: ListFooterProps -> Element { } } } - }) + } } pub fn PageFooter() -> Element { - cx.render(rsx! { + rsx! { footer { class: "info", p { "Double-click to edit a todo" } p { @@ -258,5 +258,5 @@ pub fn PageFooter() -> Element { a { href: "http://todomvc.com", "TodoMVC" } } } - }) + } } diff --git a/examples/web_component.rs b/examples/web_component.rs index 37e1bdfdf..bee88b3b1 100644 --- a/examples/web_component.rs +++ b/examples/web_component.rs @@ -5,9 +5,9 @@ fn main() { } fn app() -> Element { - cx.render(rsx! { + rsx! { web-component { "my-prop": "5%", } - }) + } } diff --git a/examples/window_event.rs b/examples/window_event.rs index 6c1bae47d..aa995647b 100644 --- a/examples/window_event.rs +++ b/examples/window_event.rs @@ -18,11 +18,11 @@ fn app() -> Element { // window.set_fullscreen(true); // window.set_resizable(false); - let fullscreen = use_state(|| false); - let always_on_top = use_state(|| false); - let decorations = use_state(|| false); + let fullscreen = use_signal(|| false); + let always_on_top = use_signal(|| false); + let decorations = use_signal(|| false); - cx.render(rsx!( + rsx!( link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel:"stylesheet" } header { class: "text-gray-400 bg-gray-900 body-font", @@ -95,5 +95,5 @@ fn app() -> Element { } } } - )) + ) } diff --git a/examples/window_focus.rs b/examples/window_focus.rs index 98ccd318f..6fb07e001 100644 --- a/examples/window_focus.rs +++ b/examples/window_focus.rs @@ -11,22 +11,19 @@ fn main() { } fn app() -> Element { - let focused = use_state(|| false); + let focused = use_signal(|| false); - use_wry_event_handler({ - to_owned![focused]; - move |event, _| { - if let WryEvent::WindowEvent { - event: WindowEvent::Focused(new_focused), - .. - } = event - { - focused.set(*new_focused); - } + use_wry_event_handler(move |event, _| { + if let WryEvent::WindowEvent { + event: WindowEvent::Focused(new_focused), + .. + } = event + { + focused.set(*new_focused); } }); - cx.render(rsx! { + rsx! { div{ width: "100%", height: "100%", @@ -41,5 +38,5 @@ fn app() -> Element { } } } - }) + } } diff --git a/examples/window_zoom.rs b/examples/window_zoom.rs index d647a5672..d58ab76fd 100644 --- a/examples/window_zoom.rs +++ b/examples/window_zoom.rs @@ -5,9 +5,9 @@ fn main() { } fn app() -> Element { - let level = use_state(|| 1.0); + let level = use_signal(|| 1.0); - cx.render(rsx! { + rsx! { input { r#type: "number", value: "{level}", @@ -18,5 +18,5 @@ fn app() -> Element { } } } - }) + } } diff --git a/examples/xss_safety.rs b/examples/xss_safety.rs index 4469b55c2..7407b7227 100644 --- a/examples/xss_safety.rs +++ b/examples/xss_safety.rs @@ -9,9 +9,9 @@ fn main() { } fn app() -> Element { - let contents = use_state(|| String::from("")); + let contents = use_signal(|| String::from("")); - cx.render(rsx! { + rsx! { div { h1 {"Dioxus is XSS-Safe"} h3 { "{contents}" } @@ -21,5 +21,5 @@ fn app() -> Element { oninput: move |e| contents.set(e.value()), } } - }) + } } diff --git a/notes/README/ZH_CN.md b/notes/README/ZH_CN.md index e2984e24a..05c8f7f40 100644 --- a/notes/README/ZH_CN.md +++ b/notes/README/ZH_CN.md @@ -56,9 +56,9 @@ Dioxus 是一个可移植的、高性能的、符合人体工程学的框架， ```rust fn app() -> Element { - let mut count = use_state(|| 0); + let mut count = use_signal(|| 0); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } diff --git a/packages/autofmt/tests/samples/immediate_expr.rsx b/packages/autofmt/tests/samples/immediate_expr.rsx index cea8dc7db..62b97a747 100644 --- a/packages/autofmt/tests/samples/immediate_expr.rsx +++ b/packages/autofmt/tests/samples/immediate_expr.rsx @@ -1,4 +1,4 @@ fn it_works() { - cx.render(rsx!({()})) + rsx!({()})) } diff --git a/packages/autofmt/tests/samples/long.rsx b/packages/autofmt/tests/samples/long.rsx index b81e08c23..53550d557 100644 --- a/packages/autofmt/tests/samples/long.rsx +++ b/packages/autofmt/tests/samples/long.rsx @@ -32,7 +32,7 @@ pub fn Explainer<'a>( std::mem::swap(&mut left, &mut right); } - cx.render(rsx! { + rsx! { div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light", {left}, {right} diff --git a/packages/autofmt/tests/samples/messy_indent.rsx b/packages/autofmt/tests/samples/messy_indent.rsx index 8882e8edf..9d468cc68 100644 --- a/packages/autofmt/tests/samples/messy_indent.rsx +++ b/packages/autofmt/tests/samples/messy_indent.rsx @@ -7,7 +7,7 @@ fn SaveClipboard() -> Element { } }; - cx.render(rsx! { + rsx! { div { "hello world", "hello world", "hello world" } }) } diff --git a/packages/autofmt/tests/samples/reallylong.rsx b/packages/autofmt/tests/samples/reallylong.rsx index 98e9765ae..ada344848 100644 --- a/packages/autofmt/tests/samples/reallylong.rsx +++ b/packages/autofmt/tests/samples/reallylong.rsx @@ -1,5 +1,5 @@ pub static Icon3: Component<()> = |cx| { - cx.render(rsx! { + rsx! { svg { class: "w-6 h-6", stroke_linecap: "round", diff --git a/packages/autofmt/tests/samples/trailing_expr.rsx b/packages/autofmt/tests/samples/trailing_expr.rsx index a57a822ab..0b0e94398 100644 --- a/packages/autofmt/tests/samples/trailing_expr.rsx +++ b/packages/autofmt/tests/samples/trailing_expr.rsx @@ -1,5 +1,5 @@ fn it_works() { - cx.render(rsx! { + rsx! { div { span { "Description: ", {package.description.as_deref().unwrap_or("❌❌❌❌ missing")} } } diff --git a/packages/autofmt/tests/wrong/multi-4sp.rsx b/packages/autofmt/tests/wrong/multi-4sp.rsx index 2a89c8bca..01fb8f073 100644 --- a/packages/autofmt/tests/wrong/multi-4sp.rsx +++ b/packages/autofmt/tests/wrong/multi-4sp.rsx @@ -1,3 +1,3 @@ fn app() -> Element { - cx.render(rsx! { div { "hello world" } }) + rsx! { div { "hello world" } }) } diff --git a/packages/autofmt/tests/wrong/multi-4sp.wrong.rsx b/packages/autofmt/tests/wrong/multi-4sp.wrong.rsx index c58158dee..7a467c291 100644 --- a/packages/autofmt/tests/wrong/multi-4sp.wrong.rsx +++ b/packages/autofmt/tests/wrong/multi-4sp.wrong.rsx @@ -1,5 +1,5 @@ fn app() -> Element { - cx.render(rsx! { + rsx! { div {"hello world" } }) } diff --git a/packages/autofmt/tests/wrong/multi-tab.rsx b/packages/autofmt/tests/wrong/multi-tab.rsx index d4b23884c..cb0057cd6 100644 --- a/packages/autofmt/tests/wrong/multi-tab.rsx +++ b/packages/autofmt/tests/wrong/multi-tab.rsx @@ -1,3 +1,3 @@ fn app() -> Element { - cx.render(rsx! { div { "hello world" } }) + rsx! { div { "hello world" } }) } diff --git a/packages/autofmt/tests/wrong/multi-tab.wrong.rsx b/packages/autofmt/tests/wrong/multi-tab.wrong.rsx index 5d1170331..6eb2f0fb6 100644 --- a/packages/autofmt/tests/wrong/multi-tab.wrong.rsx +++ b/packages/autofmt/tests/wrong/multi-tab.wrong.rsx @@ -1,5 +1,5 @@ fn app() -> Element { - cx.render(rsx! { + rsx! { div {"hello world" } }) } diff --git a/packages/autofmt/tests/wrong/multiexpr-4sp.rsx b/packages/autofmt/tests/wrong/multiexpr-4sp.rsx index ecb2f8bdc..9f9736193 100644 --- a/packages/autofmt/tests/wrong/multiexpr-4sp.rsx +++ b/packages/autofmt/tests/wrong/multiexpr-4sp.rsx @@ -1,5 +1,5 @@ fn ItWroks() { - cx.render(rsx! { + rsx! { div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light", {left}, {right} diff --git a/packages/autofmt/tests/wrong/multiexpr-4sp.wrong.rsx b/packages/autofmt/tests/wrong/multiexpr-4sp.wrong.rsx index 15752f172..488e8efdb 100644 --- a/packages/autofmt/tests/wrong/multiexpr-4sp.wrong.rsx +++ b/packages/autofmt/tests/wrong/multiexpr-4sp.wrong.rsx @@ -1,5 +1,5 @@ fn ItWroks() { - cx.render(rsx! { + rsx! { div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light", {left}, {right} } }) } diff --git a/packages/autofmt/tests/wrong/multiexpr-tab.rsx b/packages/autofmt/tests/wrong/multiexpr-tab.rsx index 85f2216a1..09bb0432c 100644 --- a/packages/autofmt/tests/wrong/multiexpr-tab.rsx +++ b/packages/autofmt/tests/wrong/multiexpr-tab.rsx @@ -1,5 +1,5 @@ fn ItWroks() { - cx.render(rsx! { + rsx! { div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light", {left}, {right} diff --git a/packages/autofmt/tests/wrong/multiexpr-tab.wrong.rsx b/packages/autofmt/tests/wrong/multiexpr-tab.wrong.rsx index 6872d0b43..d91b569d7 100644 --- a/packages/autofmt/tests/wrong/multiexpr-tab.wrong.rsx +++ b/packages/autofmt/tests/wrong/multiexpr-tab.wrong.rsx @@ -1,5 +1,5 @@ fn ItWroks() { - cx.render(rsx! { + rsx! { div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light", {left}, {right} } }) } diff --git a/packages/check/src/check.rs b/packages/check/src/check.rs index 187643dc8..249340bd7 100644 --- a/packages/check/src/check.rs +++ b/packages/check/src/check.rs @@ -295,7 +295,7 @@ mod tests { fn test_hook_correctly_used_inside_component() { let contents = indoc! {r#" fn App() -> Element { - let count = use_state(|| 0); + let count = use_signal(|| 0); rsx! { p { "Hello World: {count}" } } @@ -311,7 +311,7 @@ mod tests { fn test_hook_correctly_used_inside_hook_fn() { let contents = indoc! {r#" fn use_thing() -> UseState { - use_state(|| 0) + use_signal(|| 0) } "#}; @@ -325,7 +325,7 @@ mod tests { let contents = indoc! {r#" fn App() -> Element { let use_thing = || { - use_state(|| 0) + use_signal(|| 0) }; let count = use_thing(); rsx! { @@ -344,7 +344,7 @@ mod tests { let contents = indoc! {r#" fn App() -> Element { if you_are_happy && you_know_it { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } } @@ -357,7 +357,7 @@ mod tests { vec![Issue::HookInsideConditional( HookInfo::new( Span::new_from_str( - r#"use_state(|| "hands")"#, + r#"use_signal(|| "hands")"#, LineColumn { line: 3, column: 24 }, ), Span::new_from_str( @@ -368,7 +368,7 @@ mod tests { ), ConditionalInfo::If(IfInfo::new( Span::new_from_str( - "if you_are_happy && you_know_it {\n let something = use_state(|| \"hands\");\n println!(\"clap your {something}\")\n }", + "if you_are_happy && you_know_it {\n let something = use_signal(|| \"hands\");\n println!(\"clap your {something}\")\n }", LineColumn { line: 2, column: 4 }, ), Span::new_from_str( @@ -386,7 +386,7 @@ mod tests { fn App() -> Element { match you_are_happy && you_know_it { true => { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } false => {} @@ -400,13 +400,13 @@ mod tests { report.issues, vec![Issue::HookInsideConditional( HookInfo::new( - Span::new_from_str(r#"use_state(|| "hands")"#, LineColumn { line: 4, column: 28 }), + Span::new_from_str(r#"use_signal(|| "hands")"#, LineColumn { line: 4, column: 28 }), Span::new_from_str(r#"use_state"#, LineColumn { line: 4, column: 28 }), "use_state".to_string() ), ConditionalInfo::Match(MatchInfo::new( Span::new_from_str( - "match you_are_happy && you_know_it {\n true => {\n let something = use_state(|| \"hands\");\n println!(\"clap your {something}\")\n }\n false => {}\n }", + "match you_are_happy && you_know_it {\n true => {\n let something = use_signal(|| \"hands\");\n println!(\"clap your {something}\")\n }\n false => {}\n }", LineColumn { line: 2, column: 4 }, ), Span::new_from_str("match you_are_happy && you_know_it", LineColumn { line: 2, column: 4 }) @@ -420,7 +420,7 @@ mod tests { let contents = indoc! {r#" fn App() -> Element { for _name in &names { - let is_selected = use_state(|| false); + let is_selected = use_signal(|| false); println!("selected: {is_selected}"); } } @@ -433,7 +433,7 @@ mod tests { vec![Issue::HookInsideLoop( HookInfo::new( Span::new_from_str( - "use_state(|| false)", + "use_signal(|| false)", LineColumn { line: 3, column: 26 }, ), Span::new_from_str( @@ -444,7 +444,7 @@ mod tests { ), AnyLoopInfo::For(ForInfo::new( Span::new_from_str( - "for _name in &names {\n let is_selected = use_state(|| false);\n println!(\"selected: {is_selected}\");\n }", + "for _name in &names {\n let is_selected = use_signal(|| false);\n println!(\"selected: {is_selected}\");\n }", LineColumn { line: 2, column: 4 }, ), Span::new_from_str( @@ -461,7 +461,7 @@ mod tests { let contents = indoc! {r#" fn App() -> Element { while true { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } } @@ -474,7 +474,7 @@ mod tests { vec![Issue::HookInsideLoop( HookInfo::new( Span::new_from_str( - r#"use_state(|| "hands")"#, + r#"use_signal(|| "hands")"#, LineColumn { line: 3, column: 24 }, ), Span::new_from_str( @@ -485,7 +485,7 @@ mod tests { ), AnyLoopInfo::While(WhileInfo::new( Span::new_from_str( - "while true {\n let something = use_state(|| \"hands\");\n println!(\"clap your {something}\")\n }", + "while true {\n let something = use_signal(|| \"hands\");\n println!(\"clap your {something}\")\n }", LineColumn { line: 2, column: 4 }, ), Span::new_from_str( @@ -502,7 +502,7 @@ mod tests { let contents = indoc! {r#" fn App() -> Element { loop { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } } @@ -515,7 +515,7 @@ mod tests { vec![Issue::HookInsideLoop( HookInfo::new( Span::new_from_str( - r#"use_state(|| "hands")"#, + r#"use_signal(|| "hands")"#, LineColumn { line: 3, column: 24 }, ), Span::new_from_str( @@ -525,7 +525,7 @@ mod tests { "use_state".to_string() ), AnyLoopInfo::Loop(LoopInfo::new(Span::new_from_str( - "loop {\n let something = use_state(|| \"hands\");\n println!(\"clap your {something}\")\n }", + "loop {\n let something = use_signal(|| \"hands\");\n println!(\"clap your {something}\")\n }", LineColumn { line: 2, column: 4 }, ))) )], @@ -536,7 +536,7 @@ mod tests { fn test_conditional_okay() { let contents = indoc! {r#" fn App() -> Element { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); if you_are_happy && you_know_it { println!("clap your {something}") } @@ -553,7 +553,7 @@ mod tests { let contents = indoc! {r#" fn App() -> Element { let _a = || { - let b = use_state(|| 0); + let b = use_signal(|| 0); b.get() }; } @@ -566,7 +566,7 @@ mod tests { vec![Issue::HookInsideClosure( HookInfo::new( Span::new_from_str( - "use_state(|| 0)", + "use_signal(|| 0)", LineColumn { line: 3, column: 16 @@ -582,7 +582,7 @@ mod tests { "use_state".to_string() ), ClosureInfo::new(Span::new_from_str( - "|| {\n let b = use_state(|| 0);\n b.get()\n }", + "|| {\n let b = use_signal(|| 0);\n b.get()\n }", LineColumn { line: 2, column: 13 @@ -596,7 +596,7 @@ mod tests { fn test_hook_outside_component() { let contents = indoc! {r#" fn not_component_or_hook() { - let _a = use_state(|| 0); + let _a = use_signal(|| 0); } "#}; @@ -606,7 +606,7 @@ mod tests { report.issues, vec![Issue::HookOutsideComponent(HookInfo::new( Span::new_from_str( - "use_state(|| 0)", + "use_signal(|| 0)", LineColumn { line: 2, column: 13 @@ -628,7 +628,7 @@ mod tests { fn test_hook_inside_hook() { let contents = indoc! {r#" fn use_thing() { - let _a = use_state(|| 0); + let _a = use_signal(|| 0); } "#}; diff --git a/packages/check/src/issues.rs b/packages/check/src/issues.rs index 0369f1b94..cca15f21b 100644 --- a/packages/check/src/issues.rs +++ b/packages/check/src/issues.rs @@ -232,7 +232,7 @@ mod tests { indoc! {r#" fn App() -> Element { if you_are_happy && you_know_it { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } } @@ -243,7 +243,7 @@ mod tests { error: hook called conditionally: `use_state` (inside `if`) --> src/main.rs:3:25 | - 3 | let something = use_state(|| "hands"); + 3 | let something = use_signal(|| "hands"); | ^^^^^^^^^ | = note: `if you_are_happy && you_know_it { … }` is the conditional @@ -261,7 +261,7 @@ mod tests { fn App() -> Element { match you_are_happy && you_know_it { true => { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } _ => {} @@ -274,7 +274,7 @@ mod tests { error: hook called conditionally: `use_state` (inside `match`) --> src/main.rs:4:29 | - 4 | let something = use_state(|| "hands"); + 4 | let something = use_signal(|| "hands"); | ^^^^^^^^^ | = note: `match you_are_happy && you_know_it { … }` is the conditional @@ -291,7 +291,7 @@ mod tests { indoc! {r#" fn App() -> Element { for i in 0..10 { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } } @@ -302,7 +302,7 @@ mod tests { error: hook called in a loop: `use_state` (inside `for` loop) --> src/main.rs:3:25 | - 3 | let something = use_state(|| "hands"); + 3 | let something = use_signal(|| "hands"); | ^^^^^^^^^ | = note: `for i in 0..10 { … }` is the loop @@ -319,7 +319,7 @@ mod tests { indoc! {r#" fn App() -> Element { while check_thing() { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } } @@ -330,7 +330,7 @@ mod tests { error: hook called in a loop: `use_state` (inside `while` loop) --> src/main.rs:3:25 | - 3 | let something = use_state(|| "hands"); + 3 | let something = use_signal(|| "hands"); | ^^^^^^^^^ | = note: `while check_thing() { … }` is the loop @@ -347,7 +347,7 @@ mod tests { indoc! {r#" fn App() -> Element { loop { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") } } @@ -358,7 +358,7 @@ mod tests { error: hook called in a loop: `use_state` (inside `loop`) --> src/main.rs:3:25 | - 3 | let something = use_state(|| "hands"); + 3 | let something = use_signal(|| "hands"); | ^^^^^^^^^ | = note: `loop { … }` is the loop @@ -375,7 +375,7 @@ mod tests { indoc! {r#" fn App() -> Element { let something = || { - let something = use_state(|| "hands"); + let something = use_signal(|| "hands"); println!("clap your {something}") }; } @@ -386,7 +386,7 @@ mod tests { error: hook called in a closure: `use_state` --> src/main.rs:3:25 | - 3 | let something = use_state(|| "hands"); + 3 | let something = use_signal(|| "hands"); | ^^^^^^^^^ "#}; @@ -401,7 +401,7 @@ mod tests { indoc! {r#" fn App() -> Element { if you_are_happy && you_know_it { - let something = use_state(|| { + let something = use_signal(|| { "hands" }); println!("clap your {something}") @@ -414,7 +414,7 @@ mod tests { error: hook called conditionally: `use_state` (inside `if`) --> src/main.rs:3:25 | - 3 | let something = use_state(|| { + 3 | let something = use_signal(|| { | ^^^^^^^^^ 4 | "hands" 5 | }); diff --git a/packages/check/src/metadata.rs b/packages/check/src/metadata.rs index b82bc3410..19c3b7f7b 100644 --- a/packages/check/src/metadata.rs +++ b/packages/check/src/metadata.rs @@ -3,7 +3,7 @@ pub struct HookInfo { /// The name of the hook, e.g. `use_state`. pub name: String, - /// The span of the hook, e.g. `use_state(|| 0)`. + /// The span of the hook, e.g. `use_signal(|| 0)`. pub span: Span, /// The span of the name, e.g. `use_state`. pub name_span: Span, diff --git a/packages/cli/src/cli/translate.rs b/packages/cli/src/cli/translate.rs index ee37917a8..2dfbfe8c2 100644 --- a/packages/cli/src/cli/translate.rs +++ b/packages/cli/src/cli/translate.rs @@ -71,7 +71,7 @@ fn write_callbody_with_icon_section(mut callbody: CallBody) -> String { } fn write_component_body(raw: String) -> String { - let mut out = String::from("fn component() -> Element {\n cx.render(rsx! {"); + let mut out = String::from("fn component() -> Element {\n rsx! {"); indent_and_write(&raw, 1, &mut out); out.push_str(" })\n}"); out @@ -84,7 +84,7 @@ fn write_svg_section(out: &mut String, svgs: Vec) { let raw = dioxus_autofmt::write_block_out(CallBody { roots: vec![icon] }).unwrap(); out.push_str("\n\n pub fn icon_"); out.push_str(&idx.to_string()); - out.push_str("() -> Element {\n cx.render(rsx! {"); + out.push_str("() -> Element {\n rsx! {"); indent_and_write(&raw, 2, out); out.push_str(" })\n }"); } diff --git a/packages/core-macro/src/component_body_deserializers/component.rs b/packages/core-macro/src/component_body_deserializers/component.rs index 429a9f440..b6be85c9b 100644 --- a/packages/core-macro/src/component_body_deserializers/component.rs +++ b/packages/core-macro/src/component_body_deserializers/component.rs @@ -27,6 +27,11 @@ fn get_out_comp_fn(orig_comp_fn: &ItemFn) -> ItemFn { ..orig_comp_fn.clone() }; + let props_ident = match orig_comp_fn.sig.inputs.is_empty() { + true => quote! {}, + false => quote! { __props }, + }; + ItemFn { block: parse_quote! { { @@ -34,7 +39,7 @@ fn get_out_comp_fn(orig_comp_fn: &ItemFn) -> ItemFn { #[allow(clippy::inline_always)] #[inline(always)] #inner_comp_fn - #inner_comp_ident(__props) + #inner_comp_ident(#props_ident) } }, ..orig_comp_fn.clone() diff --git a/packages/core-macro/src/lib.rs b/packages/core-macro/src/lib.rs index 8bafc22eb..116bc91db 100644 --- a/packages/core-macro/src/lib.rs +++ b/packages/core-macro/src/lib.rs @@ -66,7 +66,7 @@ pub fn render(s: TokenStream) -> TokenStream { /// ```rust,ignore /// #[inline_props] /// fn app(bob: String) -> Element { -/// cx.render(rsx!("hello, {bob}")) +/// rsx!("hello, {bob}")) /// } /// /// // is equivalent to @@ -77,7 +77,7 @@ pub fn render(s: TokenStream) -> TokenStream { /// } /// /// fn app(cx: Scope) -> Element { -/// cx.render(rsx!("hello, {bob}")) +/// rsx!("hello, {bob}")) /// } /// ``` #[proc_macro_attribute] diff --git a/packages/core/README.md b/packages/core/README.md index 55a717d81..38f1090be 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -39,7 +39,7 @@ use dioxus::prelude::*; // First, declare a root component fn app() -> Element { - cx.render(rsx!{ + rsx!{ div { "hello world" } }) } diff --git a/packages/core/src/error_boundary.rs b/packages/core/src/error_boundary.rs index e515cbb52..51544377c 100644 --- a/packages/core/src/error_boundary.rs +++ b/packages/core/src/error_boundary.rs @@ -143,7 +143,7 @@ impl ErrorBoundary { /// fn app( count: String) -> Element { /// let id: i32 = count.parse().throw()?; /// -/// cx.render(rsx! { +/// rsx! { /// div { "Count {}" } /// }) /// } @@ -168,7 +168,7 @@ pub trait Throw: Sized { /// fn app( count: String) -> Element { /// let id: i32 = count.parse().throw()?; /// - /// cx.render(rsx! { + /// rsx! { /// div { "Count {}" } /// }) /// } @@ -191,7 +191,7 @@ pub trait Throw: Sized { /// fn app( count: String) -> Element { /// let id: i32 = count.parse().throw()?; /// - /// cx.render(rsx! { + /// rsx! { /// div { "Count {}" } /// }) /// } diff --git a/packages/core/src/events.rs b/packages/core/src/events.rs index e04c4df6f..e948f4e37 100644 --- a/packages/core/src/events.rs +++ b/packages/core/src/events.rs @@ -146,7 +146,7 @@ impl std::fmt::Debug for Event { /// } /// /// fn MyComponent(cx: MyProps) -> Element { -/// cx.render(rsx!{ +/// rsx!{ /// button { /// onclick: move |evt| cx.onclick.call(evt), /// } diff --git a/packages/core/src/fragment.rs b/packages/core/src/fragment.rs index 91a034f07..22e98b692 100644 --- a/packages/core/src/fragment.rs +++ b/packages/core/src/fragment.rs @@ -63,7 +63,7 @@ impl FragmentBuilder { /// /// ```rust, ignore /// fn app() -> Element { -/// cx.render(rsx!{ +/// rsx!{ /// CustomCard { /// h1 {} /// p {} @@ -77,7 +77,7 @@ impl FragmentBuilder { /// } /// /// fn CustomCard(cx: CardProps) -> Element { -/// cx.render(rsx!{ +/// rsx!{ /// div { /// h1 {"Title card"} /// {cx.children} diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index b6be00c0b..2ed432a1e 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -35,7 +35,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc}; /// } /// /// fn app(cx: AppProps) -> Element { -/// cx.render(rsx!( +/// rsx!( /// div {"hello, {cx.title}"} /// )) /// } @@ -56,7 +56,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc}; /// /// #[component] /// fn app(cx: AppProps) -> Element { -/// cx.render(rsx!( +/// rsx!( /// NavBar { routes: ROUTES } /// Title { "{cx.title}" } /// Footer {} @@ -65,19 +65,19 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc}; /// /// #[component] /// fn NavBar( routes: &'static str) -> Element { -/// cx.render(rsx! { +/// rsx! { /// div { "Routes: {routes}" } /// }) /// } /// /// #[component] /// fn Footer() -> Element { -/// cx.render(rsx! { div { "Footer" } }) +/// rsx! { div { "Footer" } }) /// } /// /// #[component] /// fn Title<'a>( children: Element) -> Element { -/// cx.render(rsx! { +/// rsx! { /// div { id: "title", {children} } /// }) /// } @@ -88,7 +88,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc}; /// /// ```rust /// # use dioxus::prelude::*; -/// # fn app() -> Element { cx.render(rsx! { div {} }) } +/// # fn app() -> Element { rsx! { div {} }) } /// /// let mut vdom = VirtualDom::new(app); /// let edits = vdom.rebuild(); @@ -128,7 +128,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc}; /// ```rust, ignore /// #[component] /// fn app() -> Element { -/// cx.render(rsx! { +/// rsx! { /// div { "Hello World" } /// }) /// } @@ -219,7 +219,7 @@ impl VirtualDom { /// # Example /// ```rust, ignore /// fn Example() -> Element { - /// cx.render(rsx!( div { "hello world" } )) + /// rsx!( div { "hello world" } )) /// } /// /// let dom = VirtualDom::new(Example); @@ -248,7 +248,7 @@ impl VirtualDom { /// } /// /// fn Example(cx: SomeProps) -> Element { - /// cx.render(rsx!{ div{ "hello {cx.name}" } }) + /// rsx!{ div{ "hello {cx.name}" } }) /// } /// /// let dom = VirtualDom::new(Example); @@ -546,7 +546,7 @@ impl VirtualDom { /// /// # Example /// ```rust, ignore - /// static app: Component = |cx| cx.render(rsx!{ "hello world" }); + /// static app: Component = |cx| rsx!{ "hello world" }); /// /// let mut dom = VirtualDom::new(); /// let edits = dom.rebuild(); diff --git a/packages/desktop/examples/stress.rs b/packages/desktop/examples/stress.rs index bde76b831..0d7e27b2b 100644 --- a/packages/desktop/examples/stress.rs +++ b/packages/desktop/examples/stress.rs @@ -1,8 +1,8 @@ use dioxus::prelude::*; fn app() -> Element { - let state = use_state(|| 0); - use_future((), |_| { + let state = use_signal(|| 0); + use_future(|_| { to_owned![state]; async move { loop { @@ -12,7 +12,7 @@ fn app() -> Element { } }); - cx.render(rsx! { + rsx! { button { onclick: move |_| { state.set(0); @@ -24,7 +24,7 @@ fn app() -> Element { "hello desktop! {state}" } } - }) + } } fn main() { diff --git a/packages/desktop/headless_tests/events.rs b/packages/desktop/headless_tests/events.rs index ee3a9d0ab..a473611bb 100644 --- a/packages/desktop/headless_tests/events.rs +++ b/packages/desktop/headless_tests/events.rs @@ -52,7 +52,7 @@ fn mock_event(id: &'static str, value: &'static str) { #[allow(deprecated)] fn app() -> Element { let desktop_context: DesktopContext = cx.consume_context().unwrap(); - let received_events = use_state(|| 0); + let received_events = use_signal(|| 0); // button mock_event( diff --git a/packages/desktop/headless_tests/rendering.rs b/packages/desktop/headless_tests/rendering.rs index 41337c088..1fbc36e3f 100644 --- a/packages/desktop/headless_tests/rendering.rs +++ b/packages/desktop/headless_tests/rendering.rs @@ -29,7 +29,7 @@ fn main() { fn use_inner_html(d: &'static str) -> Option { let eval_provider = use_eval(cx); - let value: &UseRef> = use_ref(|| None); + let value: Signal> = use_signal(|| None); use_effect((), |_| { to_owned![value, eval_provider]; async move { diff --git a/packages/desktop/src/launch.rs b/packages/desktop/src/launch.rs index 77dced506..37f85b630 100644 --- a/packages/desktop/src/launch.rs +++ b/packages/desktop/src/launch.rs @@ -18,7 +18,7 @@ use tao::event::{Event, StartCause, WindowEvent}; /// } /// /// fn app() -> Element { -/// cx.render(rsx!{ +/// rsx!{ /// h1 {"hello world!"} /// }) /// } @@ -42,7 +42,7 @@ pub fn launch(root: Component) { /// } /// /// fn app() -> Element { -/// cx.render(rsx!{ +/// rsx!{ /// h1 {"hello world!"} /// }) /// } @@ -71,7 +71,7 @@ pub fn launch_cfg(root: Component, config_builder: Config) { /// } /// /// fn app(cx: Scope) -> Element { -/// cx.render(rsx!{ +/// rsx!{ /// h1 {"hello {cx.props.name}!"} /// }) /// } diff --git a/packages/desktop/src/readme.md b/packages/desktop/src/readme.md index f5dc1be75..f42276d38 100644 --- a/packages/desktop/src/readme.md +++ b/packages/desktop/src/readme.md @@ -35,7 +35,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx!{ + rsx!{ div { "hello world!" } diff --git a/packages/dioxus-tui/README.md b/packages/dioxus-tui/README.md index fe9c5d143..19bac2219 100644 --- a/packages/dioxus-tui/README.md +++ b/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", diff --git a/packages/dioxus-tui/benches/update.rs b/packages/dioxus-tui/benches/update.rs index 35c58eb75..a70565adb 100644 --- a/packages/dioxus-tui/benches/update.rs +++ b/packages/dioxus-tui/benches/update.rs @@ -66,7 +66,7 @@ struct BoxProps { } #[allow(non_snake_case)] fn Box(cx: Scope) -> 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) -> 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) -> 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) -> 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) -> Element { } fn app(cx: Scope) -> Element { - cx.render(rsx! { + rsx! { div{ width: "100%", height: "100%", @@ -161,5 +161,5 @@ fn app(cx: Scope) -> Element { update_count: cx.props.update_count, } } - }) + } } diff --git a/packages/dioxus-tui/examples/all_terminal_events.rs b/packages/dioxus-tui/examples/all_terminal_events.rs index 922fe982c..cdce05d22 100644 --- a/packages/dioxus-tui/examples/all_terminal_events.rs +++ b/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} } } - }) + } } diff --git a/packages/dioxus-tui/examples/border.rs b/packages/dioxus-tui/examples/border.rs index f99b7d3f2..be8d2cca9 100644 --- a/packages/dioxus-tui/examples/border.rs +++ b/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}" } - }) + } } diff --git a/packages/dioxus-tui/examples/buttons.rs b/packages/dioxus-tui/examples/buttons.rs index 9bbde0464..5d63df120 100644 --- a/packages/dioxus-tui/examples/buttons.rs +++ b/packages/dioxus-tui/examples/buttons.rs @@ -13,15 +13,15 @@ struct ButtonProps { #[allow(non_snake_case)] fn Button(cx: Scope) -> 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) -> 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 { } } } - }) + } } diff --git a/packages/dioxus-tui/examples/color_test.rs b/packages/dioxus-tui/examples/color_test.rs index b70048e31..72fa5b44a 100644 --- a/packages/dioxus-tui/examples/color_test.rs +++ b/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 { } } } - }) + } } diff --git a/packages/dioxus-tui/examples/colorpicker.rs b/packages/dioxus-tui/examples/colorpicker.rs index a5d9a5c84..a06c844ab 100644 --- a/packages/dioxus-tui/examples/colorpicker.rs +++ b/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}%)" } - }) + } } diff --git a/packages/dioxus-tui/examples/flex.rs b/packages/dioxus-tui/examples/flex.rs index e4f730413..bbe6df055 100644 --- a/packages/dioxus-tui/examples/flex.rs +++ b/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" } } - }) + } } diff --git a/packages/dioxus-tui/examples/hover.rs b/packages/dioxus-tui/examples/hover.rs index a77a18da2..ae7e1f2c1 100644 --- a/packages/dioxus-tui/examples/hover.rs +++ b/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| { 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}" } } - }) + } } diff --git a/packages/dioxus-tui/examples/list.rs b/packages/dioxus-tui/examples/list.rs index cf091cd8b..156e83550 100644 --- a/packages/dioxus-tui/examples/list.rs +++ b/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 { } } } - }) + } } diff --git a/packages/dioxus-tui/examples/many_small_edit_stress.rs b/packages/dioxus-tui/examples/many_small_edit_stress.rs index 96b0b02c1..6351097eb 100644 --- a/packages/dioxus-tui/examples/many_small_edit_stress.rs +++ b/packages/dioxus-tui/examples/many_small_edit_stress.rs @@ -19,7 +19,7 @@ struct BoxProps { } #[allow(non_snake_case)] fn Box(cx: Scope) -> 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) -> 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) -> 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) -> 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) -> Element { } fn app(cx: Scope) -> Element { - cx.render(rsx! { + rsx! { div{ width: "100%", height: "100%", @@ -106,5 +106,5 @@ fn app(cx: Scope) -> Element { size: *cx.props, } } - }) + } } diff --git a/packages/dioxus-tui/examples/margin.rs b/packages/dioxus-tui/examples/margin.rs index b4b821b7f..20ce9a8e1 100644 --- a/packages/dioxus-tui/examples/margin.rs +++ b/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 { } } } - }) + } } diff --git a/packages/dioxus-tui/examples/quadrants.rs b/packages/dioxus-tui/examples/quadrants.rs index 43eca984b..04426749d 100644 --- a/packages/dioxus-tui/examples/quadrants.rs +++ b/packages/dioxus-tui/examples/quadrants.rs @@ -14,7 +14,7 @@ struct QuadrentProps { } fn Quadrant(cx: Scope) -> Element { - cx.render(rsx! { + rsx! { div { border_width: "1px", width: "50%", @@ -25,11 +25,11 @@ fn Quadrant(cx: Scope) -> Element { "{cx.props.text}" } - }) + } } fn app() -> Element { - cx.render(rsx! { + rsx! { div { width: "100%", height: "100%", @@ -63,5 +63,5 @@ fn app() -> Element { } } } - }) + } } diff --git a/packages/dioxus-tui/examples/readme_hello_world.rs b/packages/dioxus-tui/examples/readme_hello_world.rs index 2dcd80fad..c17869596 100644 --- a/packages/dioxus-tui/examples/readme_hello_world.rs +++ b/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!" } - }) + } } diff --git a/packages/dioxus-tui/examples/task.rs b/packages/dioxus-tui/examples/task.rs index 538188514..68e7c12f2 100644 --- a/packages/dioxus-tui/examples/task.rs +++ b/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}!" } } - }) + } } diff --git a/packages/dioxus-tui/examples/text.rs b/packages/dioxus-tui/examples/text.rs index 4a68cb003..a0b0ef27d 100644 --- a/packages/dioxus-tui/examples/text.rs +++ b/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 { } } } - }) + } } diff --git a/packages/dioxus-tui/examples/widgets.rs b/packages/dioxus-tui/examples/widgets.rs index 85e684afa..699cd45ef 100644 --- a/packages/dioxus-tui/examples/widgets.rs +++ b/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%", } } - }) + } } diff --git a/packages/dioxus-tui/tests/events.rs b/packages/dioxus-tui/tests/events.rs index aaf6a20a6..ea227f99b 100644 --- a/packages/dioxus-tui/tests/events.rs +++ b/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(); } } - }) + } } } diff --git a/packages/dioxus/README.md b/packages/dioxus/README.md index 7c39ec8c0..f1493b021 100644 --- a/packages/dioxus/README.md +++ b/packages/dioxus/README.md @@ -50,7 +50,7 @@ fn main() { // It's not required, but highly recommended. For example, UpperCamelCase components will not generate a warning. #[component] fn App() -> Element { - cx.render(rsx!("hello world!")) + rsx!("hello world!")) } ``` @@ -101,7 +101,7 @@ render nodes in match statements. fn Example() -> Element { // both of these are equivalent - cx.render(rsx!("hello world")) + rsx!("hello world")) render!("hello world!") } @@ -114,7 +114,7 @@ elements: #[component] fn App() -> Element { let name = "dave"; - cx.render(rsx!( + rsx!( h1 { "Hello, {name}!" } div { class: "my-class", @@ -142,7 +142,7 @@ In Dioxus, all properties are memoized by default! ```rust, ignore #[component] fn App() -> Element { - cx.render(rsx!( + rsx!( Header { title: "My App", color: "red", @@ -164,7 +164,7 @@ struct HeaderProps { #[component] fn Header(cx: Scope) -> Element { - cx.render(rsx!( + rsx!( div { background_color: "{cx.props.color}" h1 { "{cx.props.title}" } @@ -179,7 +179,7 @@ struct from function arguments: ```rust, ignore #[component] fn Header(title: String, color: String) -> Element { - cx.render(rsx!( + rsx!( div { background_color: "{color}" h1 { "{title}" } @@ -202,7 +202,7 @@ struct HeaderProps<'a> { #[component] fn Header(props: HeaderProps -> Element { - cx.render(rsx!( + rsx!( div { background_color: "{cx.props.color}" h1 { "{cx.props.title}" } @@ -244,7 +244,7 @@ use hooks to define the state and modify it from within listeners. ```rust, ignore #[component] fn App() -> Element { - let name = use_state(|| "world"); + let name = use_signal(|| "world"); render!("hello {name}!") } @@ -293,9 +293,9 @@ fn main() { #[component] fn App() -> Element { - let count = use_state(|| 0); + let count = use_signal(|| 0); - cx.render(rsx!( + rsx!( div { "Count: {count}" } button { onclick: move |_| count.set(count + 1), "Increment" } button { onclick: move |_| count.set(count - 1), "Decrement" } diff --git a/packages/fermi/README.md b/packages/fermi/README.md index 19255d13a..1d9c055db 100644 --- a/packages/fermi/README.md +++ b/packages/fermi/README.md @@ -43,7 +43,7 @@ From anywhere in our app, we can read the value of our atom: ```rust, ignore fn NameCard() -> Element { let name = use_read(&NAME); - cx.render(rsx!{ h1 { "Hello, {name}"} }) + rsx!{ h1 { "Hello, {name}"} }) } ``` @@ -52,7 +52,7 @@ We can also set the value of our atom, also from anywhere in our app: ```rust, ignore fn NameCard() -> Element { let set_name = use_set(&NAME); - cx.render(rsx!{ + rsx!{ button { onclick: move |_| set_name("Fermi"), "Set name to fermi" @@ -69,7 +69,7 @@ static COUNT: Atom = Atom(|_| 0); fn Counter() -> Element { let mut count = use_atom_state(&COUNT); - cx.render(rsx!{ + rsx!{ p { "{count}" } diff --git a/packages/fermi/src/hooks/state.rs b/packages/fermi/src/hooks/state.rs index 67988f623..6434da0a9 100644 --- a/packages/fermi/src/hooks/state.rs +++ b/packages/fermi/src/hooks/state.rs @@ -21,7 +21,7 @@ use std::{ /// fn Example() -> Element { /// let mut count = use_atom_state(&COUNT); /// -/// cx.render(rsx! { +/// rsx! { /// div { /// h1 { "Count: {count}" } /// button { onclick: move |_| count += 1, "Increment" } @@ -75,7 +75,7 @@ impl AtomState { /// /// ```rust, ignore /// fn component() -> Element { - /// let count = use_state(|| 0); + /// let count = use_signal(|| 0); /// cx.spawn({ /// let set_count = count.to_owned(); /// async move { @@ -104,7 +104,7 @@ impl AtomState { /// /// ```rust, ignore /// fn component() -> Element { - /// let value = use_state(|| 0); + /// let value = use_signal(|| 0); /// /// rsx!{ /// Component { @@ -131,7 +131,7 @@ impl AtomState { /// # use dioxus_core::prelude::*; /// # use dioxus_hooks::*; /// fn component() -> Element { - /// let value = use_state(|| 0); + /// let value = use_signal(|| 0); /// /// // to increment the value /// value.modify(|v| v + 1); @@ -171,7 +171,7 @@ impl AtomState { /// # use dioxus_core::prelude::*; /// # use dioxus_hooks::*; /// fn component() -> Element { - /// let value = use_state(|| 0); + /// let value = use_signal(|| 0); /// /// let as_rc = value.get(); /// assert_eq!(as_rc.as_ref(), &0); @@ -193,7 +193,7 @@ impl AtomState { /// /// ```rust, ignore /// fn component() -> Element { - /// let count = use_state(|| 0); + /// let count = use_signal(|| 0); /// cx.spawn({ /// let count = count.to_owned(); /// async move { @@ -223,7 +223,7 @@ impl AtomState { /// # Examples /// /// ```ignore - /// let val = use_state(|| 0); + /// let val = use_signal(|| 0); /// /// val.with_mut(|v| *v = 1); /// ``` @@ -246,7 +246,7 @@ impl AtomState { /// # Examples /// /// ```ignore - /// let val = use_state(|| 0); + /// let val = use_signal(|| 0); /// /// *val.make_mut() += 1; /// ``` diff --git a/packages/fullstack/README.md b/packages/fullstack/README.md index 79863f6a5..9d95a362a 100644 --- a/packages/fullstack/README.md +++ b/packages/fullstack/README.md @@ -63,8 +63,8 @@ fn main() { } fn app() -> Element { - let meaning = use_state(|| None); - cx.render(rsx! { + let meaning = use_signal(|| None); + rsx! { button { onclick: move |_| { to_owned![meaning]; diff --git a/packages/fullstack/examples/axum-auth/src/main.rs b/packages/fullstack/examples/axum-auth/src/main.rs index a04e857cb..4380691ec 100644 --- a/packages/fullstack/examples/axum-auth/src/main.rs +++ b/packages/fullstack/examples/axum-auth/src/main.rs @@ -75,10 +75,10 @@ fn main() { } // fn app() -> Element { - let user_name = use_state(|| "?".to_string()); - let permissions = use_state(|| "?".to_string()); + let user_name = use_signal(|| "?".to_string()); + let permissions = use_signal(|| "?".to_string()); - cx.render(rsx! { + rsx! { div { button { onclick: move |_| { @@ -117,7 +117,7 @@ fn app() -> Element { } "Permissions: {permissions}" } - }) + } } #[server(GetUserName)] diff --git a/packages/fullstack/examples/axum-desktop/src/lib.rs b/packages/fullstack/examples/axum-desktop/src/lib.rs index d4ff12532..f9b17f2fb 100644 --- a/packages/fullstack/examples/axum-desktop/src/lib.rs +++ b/packages/fullstack/examples/axum-desktop/src/lib.rs @@ -3,10 +3,10 @@ use dioxus::prelude::*; use dioxus_fullstack::prelude::*; pub fn app() -> Element { - let mut count = use_state(|| 0); - let text = use_state(|| "...".to_string()); + let mut count = use_signal(|| 0); + let text = use_signal(|| "...".to_string()); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } @@ -24,7 +24,7 @@ pub fn app() -> Element { "Run a server function" } "Server said: {text}" - }) + } } #[server(PostServerData)] diff --git a/packages/fullstack/examples/axum-hello-world/src/main.rs b/packages/fullstack/examples/axum-hello-world/src/main.rs index e7cc2abb2..a6bd8f321 100644 --- a/packages/fullstack/examples/axum-hello-world/src/main.rs +++ b/packages/fullstack/examples/axum-hello-world/src/main.rs @@ -22,11 +22,11 @@ fn app(cx: Scope) -> Element { let state = use_server_future((), |()| async move { get_server_data().await.unwrap() })?.value(); - let mut count = use_state(|| 0); - let text = use_state(|| "...".to_string()); + let mut count = use_signal(|| 0); + let text = use_signal(|| "...".to_string()); let eval = use_eval(cx); - cx.render(rsx! { + rsx! { div { "Server state: {state}" } h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } @@ -45,7 +45,7 @@ fn app(cx: Scope) -> Element { "Run a server function!" } "Server said: {text}" - }) + } } #[server] diff --git a/packages/fullstack/examples/axum-router/src/main.rs b/packages/fullstack/examples/axum-router/src/main.rs index 09ffba98d..ba55570ff 100644 --- a/packages/fullstack/examples/axum-router/src/main.rs +++ b/packages/fullstack/examples/axum-router/src/main.rs @@ -51,10 +51,10 @@ fn Blog(id: i32) -> Element { #[component] fn Home() -> Element { - let mut count = use_state(|| 0); - let text = use_state(|| "...".to_string()); + let mut count = use_signal(|| 0); + let text = use_signal(|| "...".to_string()); - cx.render(rsx! { + rsx! { Link { to: Route::Blog { id: *count.get() @@ -80,7 +80,7 @@ fn Home() -> Element { } "Server said: {text}" } - }) + } } #[server(PostServerData)] diff --git a/packages/fullstack/examples/salvo-hello-world/src/main.rs b/packages/fullstack/examples/salvo-hello-world/src/main.rs index 7c909cd53..51186e442 100644 --- a/packages/fullstack/examples/salvo-hello-world/src/main.rs +++ b/packages/fullstack/examples/salvo-hello-world/src/main.rs @@ -19,10 +19,10 @@ fn app(cx: Scope) -> Element { let state = use_server_future((), |()| async move { get_server_data().await.unwrap() })?.value(); - let mut count = use_state(|| 0); - let text = use_state(|| "...".to_string()); + let mut count = use_signal(|| 0); + let text = use_signal(|| "...".to_string()); - cx.render(rsx! { + rsx! { div { "Server state: {state}" } @@ -43,7 +43,7 @@ fn app(cx: Scope) -> Element { "Run a server function!" } "Server said: {text}" - }) + } } #[server(PostServerData)] diff --git a/packages/fullstack/examples/static-hydrated/src/main.rs b/packages/fullstack/examples/static-hydrated/src/main.rs index 9a960769d..854c645b9 100644 --- a/packages/fullstack/examples/static-hydrated/src/main.rs +++ b/packages/fullstack/examples/static-hydrated/src/main.rs @@ -69,10 +69,10 @@ fn Blog() -> Element { #[component] fn Home() -> Element { - let mut count = use_state(|| 0); - let text = use_state(|| "...".to_string()); + let mut count = use_signal(|| 0); + let text = use_signal(|| "...".to_string()); - cx.render(rsx! { + rsx! { Link { to: Route::Blog {}, "Go to blog" @@ -82,5 +82,5 @@ fn Home() -> Element { button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } } - }) + } } diff --git a/packages/fullstack/examples/warp-hello-world/src/main.rs b/packages/fullstack/examples/warp-hello-world/src/main.rs index 7c909cd53..51186e442 100644 --- a/packages/fullstack/examples/warp-hello-world/src/main.rs +++ b/packages/fullstack/examples/warp-hello-world/src/main.rs @@ -19,10 +19,10 @@ fn app(cx: Scope) -> Element { let state = use_server_future((), |()| async move { get_server_data().await.unwrap() })?.value(); - let mut count = use_state(|| 0); - let text = use_state(|| "...".to_string()); + let mut count = use_signal(|| 0); + let text = use_signal(|| "...".to_string()); - cx.render(rsx! { + rsx! { div { "Server state: {state}" } @@ -43,7 +43,7 @@ fn app(cx: Scope) -> Element { "Run a server function!" } "Server said: {text}" - }) + } } #[server(PostServerData)] diff --git a/packages/fullstack/src/adapters/axum_adapter.rs b/packages/fullstack/src/adapters/axum_adapter.rs index a7d235a65..867a9d94d 100644 --- a/packages/fullstack/src/adapters/axum_adapter.rs +++ b/packages/fullstack/src/adapters/axum_adapter.rs @@ -30,9 +30,9 @@ //! } //! //! fn app() -> Element { -//! let text = use_state(|| "...".to_string()); +//! let text = use_signal(|| "...".to_string()); //! -//! cx.render(rsx! { +//! rsx! { //! button { //! onclick: move |_| { //! to_owned![text]; diff --git a/packages/fullstack/src/adapters/salvo_adapter.rs b/packages/fullstack/src/adapters/salvo_adapter.rs index 6535e6067..2fcf2951b 100644 --- a/packages/fullstack/src/adapters/salvo_adapter.rs +++ b/packages/fullstack/src/adapters/salvo_adapter.rs @@ -25,9 +25,9 @@ //! } //! //! fn app() -> Element { -//! let text = use_state(|| "...".to_string()); +//! let text = use_signal(|| "...".to_string()); //! -//! cx.render(rsx! { +//! rsx! { //! button { //! onclick: move |_| { //! to_owned![text]; diff --git a/packages/fullstack/src/adapters/warp_adapter.rs b/packages/fullstack/src/adapters/warp_adapter.rs index 3ddb99726..863ae12ca 100644 --- a/packages/fullstack/src/adapters/warp_adapter.rs +++ b/packages/fullstack/src/adapters/warp_adapter.rs @@ -21,9 +21,9 @@ //! } //! //! fn app() -> Element { -//! let text = use_state(|| "...".to_string()); +//! let text = use_signal(|| "...".to_string()); //! -//! cx.render(rsx! { +//! rsx! { //! button { //! onclick: move |_| { //! to_owned![text]; diff --git a/packages/hooks/README.md b/packages/hooks/README.md index 932847b53..5cb908ff6 100644 --- a/packages/hooks/README.md +++ b/packages/hooks/README.md @@ -34,7 +34,7 @@ Unlike React, none of these hooks are foundational since they all build off the This crate also provides a few helpful macros to get around some Rust lifetime management issues in async. - `to_owned![]` -- `use_future!()` +- `use_future()` - `use_callback!()` ## Contributing diff --git a/packages/hooks/src/computed.rs b/packages/hooks/src/computed.rs index 398517c2e..e01168411 100644 --- a/packages/hooks/src/computed.rs +++ b/packages/hooks/src/computed.rs @@ -167,7 +167,7 @@ pub fn use_selector init: impl FnMut(&I) -> O + 'static, ) -> O { let selector = cx.use_hook(|| tracked.compute(init)); - selector.use_state(cx) + selector.use_signal(cx) } /// Selector state is state that is derived from tracked state @@ -188,7 +188,7 @@ impl PartialEq for Selector { impl Selector { /// Read the Selector state and subscribe to updates - pub fn use_state(&self, ) -> T { + pub fn use_signal(&self, ) -> T { cx.use_hook(|| { let id = cx.scope_id(); self.subscribers.borrow_mut().insert(id); diff --git a/packages/hooks/src/lib.rs b/packages/hooks/src/lib.rs index 007064432..18c7283b0 100644 --- a/packages/hooks/src/lib.rs +++ b/packages/hooks/src/lib.rs @@ -18,7 +18,7 @@ /// # } /// # fn Component(cx: Scope) -> Element { /// -/// let (data) = use_ref(|| {}); +/// let (data) = use_signal(|| {}); /// /// let handle_thing = move |_| { /// to_owned![data, cx.props.prop]; diff --git a/packages/hooks/src/use_collection.rs b/packages/hooks/src/use_collection.rs index 4ae9b758d..c626eebcd 100644 --- a/packages/hooks/src/use_collection.rs +++ b/packages/hooks/src/use_collection.rs @@ -16,7 +16,7 @@ This is moderately efficient because the fields of the map are moved, but the da However, if you used similar approach with Dioxus: ```rust -let (map, set_map) = use_state(|| HashMap::new()); +let (map, set_map) = use_signal(|| HashMap::new()); set_map({ let mut newmap = map.clone(); newmap.set(key, value); @@ -38,9 +38,9 @@ Here's a fully-functional todo app using the use_map API: ```rust static TodoList: Component = |cx| { let todos = use_map(|| HashMap::new()); - let input = use_ref(|| None); + let input = use_signal(|| None); - cx.render(rsx!{ + rsx!{ div { button { "Add todo" diff --git a/packages/hooks/src/use_const.rs b/packages/hooks/src/use_const.rs index 67891e8d9..f3c6cfb03 100644 --- a/packages/hooks/src/use_const.rs +++ b/packages/hooks/src/use_const.rs @@ -14,7 +14,7 @@ use dioxus_core::prelude::*; /// fn Component() -> Element { /// let id = use_const(|| ComplexData(100)); /// -/// cx.render(rsx! { +/// rsx! { /// div { "{id.0}" } /// }) /// } diff --git a/packages/hooks/src/use_coroutine.rs b/packages/hooks/src/use_coroutine.rs index 80d43c1b5..27144ce2b 100644 --- a/packages/hooks/src/use_coroutine.rs +++ b/packages/hooks/src/use_coroutine.rs @@ -56,7 +56,7 @@ use std::future::Future; /// }); /// /// -/// cx.render(rsx!{ +/// rsx!{ /// button { /// onclick: move |_| chat_client.send(Action::Start), /// "Start Chat Service" diff --git a/packages/hooks/src/use_effect.rs b/packages/hooks/src/use_effect.rs index 03b0bd0dd..b983fa320 100644 --- a/packages/hooks/src/use_effect.rs +++ b/packages/hooks/src/use_effect.rs @@ -27,7 +27,7 @@ use crate::UseFutureDep; /// # use dioxus::prelude::*; /// #[component] /// fn Profile(id: usize) -> Element { -/// let name = use_state(|| None); +/// let name = use_signal(|| None); /// /// // Only fetch the user data when the id changes. /// use_effect((id,), |(id,)| { diff --git a/packages/hooks/src/use_future.rs b/packages/hooks/src/use_future.rs index a349b034b..06a61ad14 100644 --- a/packages/hooks/src/use_future.rs +++ b/packages/hooks/src/use_future.rs @@ -26,7 +26,7 @@ where F: Future + 'static, D: UseFutureDep, { - let val = use_state(|| None); + let val = use_signal(|| None); let state = cx.use_hook(move || UseFuture { update: cx.schedule_update(), @@ -260,7 +260,7 @@ mod tests { async fn app(cx: Scope<'_, MyProps>) -> Element { // should only ever run once - let fut = use_future((), |_| async move {}); + let fut = use_future(|_| async move {}); // runs when a is changed let fut = use_future((&cx.props.a,), |(a,)| async move {}); @@ -268,14 +268,14 @@ mod tests { // runs when a or b is changed let fut = use_future((&cx.props.a, &cx.props.b), |(a, b)| async move { 123 }); - let a = use_future!(|| async move { + let a = use_future(|| async move { // do the thing! }); let b = &123; let c = &123; - let a = use_future!(|b, c| async move { + let a = use_future(|b, c| async move { let a = b + c; let blah = "asd"; }); diff --git a/packages/hooks/src/use_on_destroy.rs b/packages/hooks/src/use_on_destroy.rs index dc8caf91b..8c180a324 100644 --- a/packages/hooks/src/use_on_destroy.rs +++ b/packages/hooks/src/use_on_destroy.rs @@ -16,7 +16,7 @@ pub fn use_on_unmount(cx: &dioxus_core::ScopeState, destr /// use dioxus::prelude::*; /// /// fn app() -> Element { -/// let state = use_state(|| true); +/// let state = use_signal(|| true); /// render! { /// for _ in 0..100 { /// h1 { @@ -38,7 +38,7 @@ pub fn use_on_unmount(cx: &dioxus_core::ScopeState, destr /// } /// /// fn child_component() -> Element { -/// let original_scroll_position = use_state(|| 0.0); +/// let original_scroll_position = use_signal(|| 0.0); /// use_effect((), move |_| { /// to_owned![original_scroll_position]; /// async move { diff --git a/packages/hooks/src/use_ref.rs b/packages/hooks/src/use_ref.rs index c81c3b31e..97659860e 100644 --- a/packages/hooks/src/use_ref.rs +++ b/packages/hooks/src/use_ref.rs @@ -17,7 +17,7 @@ use std::{ /// that initialized the hook will be marked as "dirty". /// /// ```rust, no_run -/// let val = use_ref(|| HashMap::::new()); +/// let val = use_signal(|| HashMap::::new()); /// /// // using `write` will give us a `RefMut` to the inner value, which we can call methods on /// // This marks the component as "dirty" @@ -68,7 +68,7 @@ use std::{ /// /// ```rust, no_run /// let items = val.read().iter().map(|(k, v)| { -/// cx.render(rsx!{ key: "{k}", "{v}" }) +/// rsx!{ key: "{k}", "{v}" }) /// }); /// /// // collect into a Vec @@ -83,7 +83,7 @@ use std::{ /// by simply calling `to_owned` or `clone`. /// /// ```rust, no_run -/// let val = use_ref(|| HashMap::::new()); +/// let val = use_signal(|| HashMap::::new()); /// /// cx.spawn({ /// let val = val.clone(); @@ -98,9 +98,9 @@ use std::{ /// `to_owned!` macro to make it easier to write the above code. /// /// ```rust, no_run -/// let val1 = use_ref(|| HashMap::::new()); -/// let val2 = use_ref(|| HashMap::::new()); -/// let val3 = use_ref(|| HashMap::::new()); +/// let val1 = use_signal(|| HashMap::::new()); +/// let val2 = use_signal(|| HashMap::::new()); +/// let val3 = use_signal(|| HashMap::::new()); /// /// cx.spawn({ /// to_owned![val1, val2, val3]; @@ -111,7 +111,7 @@ use std::{ /// }) /// ``` #[must_use] -pub fn use_ref(nitialize_refcell: impl FnOnce() -> T) -> &UseRef { +pub fn use_ref(nitialize_refcell: impl FnOnce() -> T) -> Signal { let hook = cx.use_hook(|| UseRef { update: cx.schedule_update(), value: Rc::new(RefCell::new(initialize_refcell())), @@ -196,7 +196,7 @@ impl UseRef { /// This method just does it for you automatically. /// /// ```rust, no_run - /// let val = use_ref(|| HashMap::::new()); + /// let val = use_signal(|| HashMap::::new()); /// /// /// // use reborrowing @@ -216,7 +216,7 @@ impl UseRef { /// This method just does it for you automatically. /// /// ```rust, no_run - /// let val = use_ref(|| HashMap::::new()); + /// let val = use_signal(|| HashMap::::new()); /// /// /// // use reborrowing diff --git a/packages/hooks/src/use_state.rs b/packages/hooks/src/use_state.rs index a7f383208..6e01df988 100644 --- a/packages/hooks/src/use_state.rs +++ b/packages/hooks/src/use_state.rs @@ -19,9 +19,9 @@ use std::{ /// /// ```ignore /// const Example: Component = |cx| { -/// let count = use_state(|| 0); +/// let count = use_signal(|| 0); /// -/// cx.render(rsx! { +/// rsx! { /// div { /// h1 { "Count: {count}" } /// button { onclick: move |_| *count.modify() += 1, "Increment" } @@ -92,7 +92,7 @@ impl UseState { /// /// ```rust, ignore /// fn component() -> Element { - /// let count = use_state(|| 0); + /// let count = use_signal(|| 0); /// cx.spawn({ /// let set_count = count.to_owned(); /// async move { @@ -119,7 +119,7 @@ impl UseState { /// /// ```rust, ignore /// fn component() -> Element { - /// let value = use_state(|| 0); + /// let value = use_signal(|| 0); /// /// rsx!{ /// Component { @@ -144,7 +144,7 @@ impl UseState { /// # use dioxus_core::prelude::*; /// # use dioxus_hooks::*; /// fn component() -> Element { - /// let value = use_state(|| 0); + /// let value = use_signal(|| 0); /// /// // to increment the value /// value.modify(|v| v + 1); @@ -185,7 +185,7 @@ impl UseState { /// # use dioxus_core::prelude::*; /// # use dioxus_hooks::*; /// fn component() -> Element { - /// let value = use_state(|| 0); + /// let value = use_signal(|| 0); /// /// let as_rc = value.get(); /// assert_eq!(as_rc.as_ref(), &0); @@ -207,7 +207,7 @@ impl UseState { /// /// ```rust, ignore /// fn component() -> Element { - /// let count = use_state(|| 0); + /// let count = use_signal(|| 0); /// cx.spawn({ /// let count = count.to_owned(); /// async move { @@ -237,7 +237,7 @@ impl UseState { /// # Examples /// /// ```rust, ignore - /// let val = use_state(|| 0); + /// let val = use_signal(|| 0); /// /// val.with_mut(|v| *v = 1); /// ``` @@ -269,7 +269,7 @@ impl UseState { /// # Examples /// /// ```rust, ignore - /// let val = use_state(|| 0); + /// let val = use_signal(|| 0); /// /// *val.make_mut() += 1; /// ``` @@ -493,7 +493,7 @@ impl + Copy> std::ops::DivAssign for UseState { fn api_makes_sense() { #[allow(unused)] fn app() -> Element { - let val = use_state(|| 0); + let val = use_signal(|| 0); val.set(0); val.modify(|v| v + 1); diff --git a/packages/liveview/examples/axum.rs b/packages/liveview/examples/axum.rs index 2a51296ce..89bb988b0 100644 --- a/packages/liveview/examples/axum.rs +++ b/packages/liveview/examples/axum.rs @@ -2,14 +2,14 @@ use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router}; use dioxus::prelude::*; fn app() -> Element { - let mut num = use_state(|| 0); + let mut num = use_signal(|| 0); - cx.render(rsx! { + rsx! { div { "hello axum! {num}" button { onclick: move |_| num += 1, "Increment" } } - }) + } } #[tokio::main] diff --git a/packages/liveview/examples/axum_stress.rs b/packages/liveview/examples/axum_stress.rs index 2763c9485..49a0854b5 100644 --- a/packages/liveview/examples/axum_stress.rs +++ b/packages/liveview/examples/axum_stress.rs @@ -2,8 +2,8 @@ use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router}; use dioxus::prelude::*; fn app() -> Element { - let state = use_state(|| 0); - use_future((), |_| { + let state = use_signal(|| 0); + use_future(|_| { to_owned![state]; async move { loop { @@ -13,13 +13,13 @@ fn app() -> Element { } }); - cx.render(rsx! { + rsx! { for _ in 0..10000 { div { "hello axum! {state}" } } - }) + } } #[tokio::main] diff --git a/packages/liveview/examples/rocket.rs b/packages/liveview/examples/rocket.rs index a29f73a6d..c597957fd 100644 --- a/packages/liveview/examples/rocket.rs +++ b/packages/liveview/examples/rocket.rs @@ -8,14 +8,14 @@ use rocket::{Config, Rocket, State}; use rocket_ws::{Channel, WebSocket}; fn app() -> Element { - let mut num = use_state(|| 0); + let mut num = use_signal(|| 0); - cx.render(rsx! { + rsx! { div { "hello Rocket! {num}" button { onclick: move |_| num += 1, "Increment" } } - }) + } } fn index_page_with_glue(glue: &str) -> RawHtml { @@ -57,7 +57,7 @@ fn ws(ws: WebSocket, pool: &State) -> Channel<'static> { .await; Ok(()) }) - }) + } } #[tokio::main] diff --git a/packages/liveview/examples/salvo.rs b/packages/liveview/examples/salvo.rs index f402b9323..11ac3db48 100644 --- a/packages/liveview/examples/salvo.rs +++ b/packages/liveview/examples/salvo.rs @@ -6,14 +6,14 @@ use std::net::SocketAddr; use std::sync::Arc; fn app() -> Element { - let mut num = use_state(|| 0); + let mut num = use_signal(|| 0); - cx.render(rsx! { + rsx! { div { "hello salvo! {num}" button { onclick: move |_| num += 1, "Increment" } } - }) + } } #[tokio::main] diff --git a/packages/liveview/examples/warp.rs b/packages/liveview/examples/warp.rs index a03857f40..6a8dbc339 100644 --- a/packages/liveview/examples/warp.rs +++ b/packages/liveview/examples/warp.rs @@ -6,9 +6,9 @@ use warp::ws::Ws; use warp::Filter; fn app() -> Element { - let mut num = use_state(|| 0); + let mut num = use_signal(|| 0); - cx.render(rsx! { + rsx! { div { "hello warp! {num}" button { @@ -16,7 +16,7 @@ fn app() -> Element { "Increment" } } - }) + } } #[tokio::main] diff --git a/packages/mobile/README.md b/packages/mobile/README.md index c0db51637..425b69abb 100644 --- a/packages/mobile/README.md +++ b/packages/mobile/README.md @@ -80,7 +80,7 @@ fn main() { } fn app() -> Element { - cx.render(rsx!{ + rsx!{ div { "hello world!" } diff --git a/packages/native-core/examples/custom_attr.rs b/packages/native-core/examples/custom_attr.rs index e7bbb36ea..ccd46a745 100644 --- a/packages/native-core/examples/custom_attr.rs +++ b/packages/native-core/examples/custom_attr.rs @@ -227,5 +227,5 @@ fn main() -> Result<(), Box> { // wait 1 second tokio::time::sleep(std::time::Duration::from_secs(1)).await; } - }) + } } diff --git a/packages/native-core/examples/font_size.rs b/packages/native-core/examples/font_size.rs index 40261baa2..2e1b56067 100644 --- a/packages/native-core/examples/font_size.rs +++ b/packages/native-core/examples/font_size.rs @@ -171,5 +171,5 @@ fn main() -> Result<(), Box> { // wait 1 second tokio::time::sleep(std::time::Duration::from_secs(1)).await; } - }) + } } diff --git a/packages/native-core/examples/simple.rs b/packages/native-core/examples/simple.rs index 276d06d08..e26bc0718 100644 --- a/packages/native-core/examples/simple.rs +++ b/packages/native-core/examples/simple.rs @@ -218,5 +218,5 @@ fn main() -> Result<(), Box> { // wait 1 second tokio::time::sleep(std::time::Duration::from_secs(1)).await; } - }) + } } diff --git a/packages/native-core/examples/simple_dioxus.rs b/packages/native-core/examples/simple_dioxus.rs index b02b6c049..c84d21e40 100644 --- a/packages/native-core/examples/simple_dioxus.rs +++ b/packages/native-core/examples/simple_dioxus.rs @@ -167,7 +167,7 @@ impl State for Border { fn main() -> Result<(), Box> { fn app() -> Element { - let count = use_state(|| 0); + let count = use_signal(|| 0); use_future((count,), |(count,)| async move { loop { @@ -176,7 +176,7 @@ fn main() -> Result<(), Box> { } }); - cx.render(rsx! { + rsx! { div{ color: "red", "{count}", @@ -186,7 +186,7 @@ fn main() -> Result<(), Box> { } fn Comp() -> Element { - cx.render(rsx! { + rsx! { div{ border: "", "hello world" @@ -245,5 +245,5 @@ fn main() -> Result<(), Box> { println!("{indent}{id:?} {color:?} {size:?} {border:?} {node_type:?}"); }); } - }) + } } diff --git a/packages/native-core/tests/custom_element.rs b/packages/native-core/tests/custom_element.rs index d4e939069..21245cf29 100644 --- a/packages/native-core/tests/custom_element.rs +++ b/packages/native-core/tests/custom_element.rs @@ -257,13 +257,13 @@ impl CustomElement for CustomElementWithNoSlot { #[test] fn custom_elements_work() { fn app() -> Element { - let count = use_state(|| 0); + let count = use_signal(|| 0); - use_future!(|count| async move { + use_future(|count| async move { count.with_mut(|count| *count += 1); }); - cx.render(rsx! { + rsx! { customelementslot { size: "{count}", color: "1", @@ -334,7 +334,7 @@ fn custom_elements_work() { #[should_panic] fn slotless_custom_element_cant_have_children() { fn app() -> Element { - cx.render(rsx! { + rsx! { customelementnoslot { testing132 {} } @@ -363,7 +363,7 @@ fn slotless_custom_element_cant_have_children() { #[test] fn slotless_custom_element() { fn app() -> Element { - cx.render(rsx! { + rsx! { customelementnoslot { } }) diff --git a/packages/native-core/tests/miri_native.rs b/packages/native-core/tests/miri_native.rs index 5fa970228..280824123 100644 --- a/packages/native-core/tests/miri_native.rs +++ b/packages/native-core/tests/miri_native.rs @@ -97,8 +97,8 @@ fn native_core_is_okay() { use std::time::Duration; fn app() -> Element { - let colors = use_state(|| vec!["green", "blue", "red"]); - let padding = use_state(|| 10); + let colors = use_signal(|| vec!["green", "blue", "red"]); + let padding = use_signal(|| 10); use_effect(colors, |colors| async move { sleep(Duration::from_millis(1000)).await; @@ -120,7 +120,7 @@ fn native_core_is_okay() { let _mid = colors[1]; let _small = colors[2]; - cx.render(rsx! { + rsx! { blabla {} }) } diff --git a/packages/rink/src/query.rs b/packages/rink/src/query.rs index 9827738da..685d454d8 100644 --- a/packages/rink/src/query.rs +++ b/packages/rink/src/query.rs @@ -23,10 +23,10 @@ use crate::{get_abs_layout, layout_to_screen_space}; /// } /// /// 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(); -/// cx.render(rsx! { +/// rsx! { /// div{ /// width: "100%", /// background_color: "hsl({hue}, 70%, {brightness}%)", diff --git a/packages/router/examples/simple_routes.rs b/packages/router/examples/simple_routes.rs index a5b96f47b..d810cc07f 100644 --- a/packages/router/examples/simple_routes.rs +++ b/packages/router/examples/simple_routes.rs @@ -117,7 +117,7 @@ fn Route2(user_id: usize) -> Element { #[component] fn Route3(dynamic: String) -> Element { let current_route = use_route()?; - let current_route_str = use_ref(String::new); + let current_route_str = use_signal(String::new); let parsed = Route::from_str(¤t_route_str.read()); let site_map = Route::SITE_MAP diff --git a/packages/signals/examples/dependancies.rs b/packages/signals/examples/dependancies.rs index de2a921c8..35182e416 100644 --- a/packages/signals/examples/dependancies.rs +++ b/packages/signals/examples/dependancies.rs @@ -10,14 +10,14 @@ fn main() { fn app() -> Element { let signal = use_signal(|| 0); - use_future!(|| async move { + use_future(|| async move { loop { tokio::time::sleep(std::time::Duration::from_secs(1)).await; *signal.write() += 1; } }); - let local_state = use_state(|| 0); + let local_state = use_signal(|| 0); let computed = use_selector_with_dependencies((local_state.get(),), move |(local_state,)| { local_state * 2 + signal.value() }); diff --git a/packages/signals/src/selector.rs b/packages/signals/src/selector.rs index 0248a8b60..9ec7f782f 100644 --- a/packages/signals/src/selector.rs +++ b/packages/signals/src/selector.rs @@ -35,7 +35,7 @@ pub fn use_selector(f: impl FnMut() -> R + 'static) -> ReadOnlySig /// use dioxus_signals::*; /// /// fn App() -> Element { -/// let mut local_state = use_state(|| 0); +/// let mut local_state = use_signal(|| 0); /// let double = use_selector_with_dependencies((local_state.get(),), move |(local_state,)| local_state * 2); /// local_state.set(1); /// diff --git a/packages/signals/src/signal.rs b/packages/signals/src/signal.rs index 75c636819..5d2d76056 100644 --- a/packages/signals/src/signal.rs +++ b/packages/signals/src/signal.rs @@ -33,7 +33,7 @@ use crate::{get_effect_stack, CopyValue, Effect, EffectStack}; /// fn Child(state: Signal) -> Element { /// let state = *state; /// -/// use_future!( |()| async move { +/// use_future( |()| async move { /// // Because the signal is a Copy type, we can use it in an async block without cloning it. /// *state.write() += 1; /// }); @@ -117,7 +117,7 @@ pub(crate) struct SignalData { /// fn Child(state: Signal) -> Element { /// let state = *state; /// -/// use_future!( |()| async move { +/// use_future( |()| async move { /// // Because the signal is a Copy type, we can use it in an async block without cloning it. /// *state.write() += 1; /// }); diff --git a/packages/web/examples/hydrate.rs b/packages/web/examples/hydrate.rs index dd37824cb..5d3725b88 100644 --- a/packages/web/examples/hydrate.rs +++ b/packages/web/examples/hydrate.rs @@ -3,7 +3,7 @@ use dioxus_web::Config; use web_sys::window; fn app() -> Element { - cx.render(rsx! { + rsx! { div { h1 { "thing 1" } } div { h2 { "thing 2" } } div { @@ -17,12 +17,12 @@ fn app() -> Element { "thing {f}" } })} - }) + } } #[allow(non_snake_case)] fn Bapp() -> Element { - cx.render(rsx! { + rsx! { div { h1 { "thing 1" } } div { h2 { "thing 2" } } div { @@ -30,7 +30,7 @@ fn Bapp() -> Element { "asd" "asd" } - }) + } } fn main() { diff --git a/packages/web/examples/timeout_count.rs b/packages/web/examples/timeout_count.rs index b77d8803f..76f656030 100644 --- a/packages/web/examples/timeout_count.rs +++ b/packages/web/examples/timeout_count.rs @@ -6,8 +6,8 @@ fn main() { } fn app() -> Element { - let count = use_ref(|| 0); - let started = use_state(|| false); + let count = use_signal(|| 0); + let started = use_signal(|| false); let start = move || { if !*started.get() { @@ -18,7 +18,7 @@ fn app() -> Element { started.set(true); // this cannot be done inside condition or infinite loop }; - cx.render(rsx! { + rsx! { button { onclick: move |_event| { start(); @@ -30,5 +30,5 @@ fn app() -> Element { "Start" } } - }) + } } diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs index dd86afd95..352ad46b4 100644 --- a/packages/web/src/lib.rs +++ b/packages/web/src/lib.rs @@ -127,7 +127,7 @@ pub fn launch(root_component: fn() -> Element) { /// } /// /// fn app() -> Element { -/// cx.render(rsx!{ +/// rsx!{ /// h1 {"hello world!"} /// }) /// } diff --git a/packages/web/tests/hydrate.rs b/packages/web/tests/hydrate.rs index 0854ccf62..0fc95a971 100644 --- a/packages/web/tests/hydrate.rs +++ b/packages/web/tests/hydrate.rs @@ -8,7 +8,7 @@ wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser); #[test] fn makes_tree() { fn app() -> Element { - cx.render(rsx! { + rsx! { div { div { h1 {} @@ -29,7 +29,7 @@ fn makes_tree() { #[wasm_bindgen_test] fn rehydrates() { fn app() -> Element { - cx.render(rsx! { + rsx! { div { div { h1 { "h1" } diff --git a/playwright-tests/fullstack/src/main.rs b/playwright-tests/fullstack/src/main.rs index d847faba4..e8ea05176 100644 --- a/playwright-tests/fullstack/src/main.rs +++ b/playwright-tests/fullstack/src/main.rs @@ -55,10 +55,10 @@ struct AppProps { #[allow(unused)] fn app(cx: Scope) -> Element { - let mut count = use_state(|| cx.props.count); - let text = use_state(|| "...".to_string()); + let mut count = use_signal(|| cx.props.count); + let text = use_signal(|| "...".to_string()); - cx.render(rsx! { + rsx! { h1 { "hello axum! {count}" } button { class: "increment-button", diff --git a/playwright-tests/liveview/src/main.rs b/playwright-tests/liveview/src/main.rs index 85db11c07..e6fb46955 100644 --- a/playwright-tests/liveview/src/main.rs +++ b/playwright-tests/liveview/src/main.rs @@ -4,9 +4,9 @@ use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router}; use dioxus::prelude::*; fn app() -> Element { - let mut num = use_state(|| 0); + let mut num = use_signal(|| 0); - cx.render(rsx! { + rsx! { div { "hello axum! {num}" button { onclick: move |_| num += 1, "Increment" } diff --git a/playwright-tests/web/src/main.rs b/playwright-tests/web/src/main.rs index ccae53b11..2e7126ad3 100644 --- a/playwright-tests/web/src/main.rs +++ b/playwright-tests/web/src/main.rs @@ -3,12 +3,12 @@ use dioxus::prelude::*; fn app() -> Element { - let mut num = use_state(|| 0); - let eval_result = use_state(String::new); + let mut num = use_signal(|| 0); + let eval_result = use_signal(String::new); let eval_provider = dioxus_html::prelude::use_eval(cx); - cx.render(rsx! { + rsx! { div { "hello axum! {num}" button { diff --git a/translations/ja-jp/README.md b/translations/ja-jp/README.md index 9a9d064ea..aa878dede 100644 --- a/translations/ja-jp/README.md +++ b/translations/ja-jp/README.md @@ -54,9 +54,9 @@ Dioxus は、Rust でクロスプラットフォームのユーザー・イン ```rust fn app() -> Element { - let mut count = use_state(|| 0); + let mut count = use_signal(|| 0); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } diff --git a/translations/pt-br/README.md b/translations/pt-br/README.md index c38fd34ea..1d2967e23 100644 --- a/translations/pt-br/README.md +++ b/translations/pt-br/README.md @@ -58,9 +58,9 @@ ```rust fn app() -> Element { - let mut count = use_state(|| 0); + let mut count = use_signal(|| 0); - cx.render(rsx! { + rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" }