Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-10 06:34:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

remove cx.render

Browse source
This commit is contained in:
Jonathan Kelley 2024-01-13 21:12:21 -08:00
parent fae0b08e61
commit 1dde044697
No known key found for this signature in database
GPG key ID: 1FBB50F7EB0A08BE
159 changed files with 600 additions and 658 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -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!" }
})
}
}
```

2
examples/PWA-example/src/main.rs
View file

@ -9,7 +9,7 @@ fn main() {
}
fn app() -> Element {
cx.render(rsx! (
rsx! (
div {
style: "text-align: center;",
h1 { "🌗 Dioxus 🚀" }

4
examples/all_css.rs
View file

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

6
examples/all_events.rs
View file

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

7
examples/calculator.rs
View file

@ -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 {

8
examples/callback.rs
View file

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

6
examples/clock.rs
View file

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

12
examples/compose.rs
View file

@ -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<String>| {
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<ComposeProps>) -> 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<ComposeProps>) -> Element {
input { oninput: move |e| user_input.set(e.value()), value: "{user_input}" }
}
})
}
}

10
examples/control_focus.rs
View file

@ -7,10 +7,10 @@ fn main() {
}
fn app() -> Element {
let elements: &UseRef<Vec<Rc<MountedData>>> = use_ref(Vec::new);
let running = use_state(|| true);
let elements = use_signal(Vec::<Rc<MountedData>>::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 {
}
}
}
))
}
}

2
examples/counter.rs
View file

@ -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! {

24
examples/crm.rs
View file

@ -27,7 +27,7 @@ pub struct Client {
type ClientContext = Vec<Client>;
#[component]
fn App() -> Element {
fn App(props: ()) -> Element {
use_shared_state_provider::<ClientContext>(Default::default);
render! {
@ -56,7 +56,7 @@ fn App() -> Element {
fn ClientList() -> Element {
let clients = use_shared_state::<ClientContext>().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::<ClientContext>().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::<ClientContext>().unwrap();
cx.render(rsx! {
rsx! {
h2 { "Settings" }
button {
@ -158,5 +158,5 @@ fn Settings() -> Element {
}
Link { to: Route::ClientList {}, class: "pure-button", "Go back" }
})
}
}

4
examples/custom_assets.rs
View file

@ -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() }
}
})
}
}

4
examples/custom_html.rs
View file

@ -32,9 +32,9 @@ fn main() {
}
fn app() -> Element {
cx.render(rsx! {
rsx! {
div {
h1 {"hello world!"}
}
})
}
}

6
examples/disabled.rs
View file

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

14
examples/dog_app.rs
View file

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

10
examples/error_handle.rs
View file

@ -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]

10
examples/eval.rs
View file

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

12
examples/fermi.rs
View file

@ -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<Vec<String>> = AtomRef(|_| vec!["world".to_string()]);
@ -36,7 +36,7 @@ static NAMES: AtomRef<Vec<String>> = 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"
}
}
})
}
}

6
examples/file_explorer.rs
View file

@ -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 {

8
examples/file_upload.rs
View file

@ -8,10 +8,10 @@ fn main() {
}
fn App() -> Element {
let enable_directory_upload = use_state(|| false);
let files_uploaded: &UseRef<Vec<String>> = use_ref(Vec::new);
let enable_directory_upload = use_signal(|| false);
let files_uploaded: Signal<Vec<String>> = use_signal(Vec::new);
cx.render(rsx! {
rsx! {
label {
input {
r#type: "checkbox",
@ -70,5 +70,5 @@ fn App() -> Element {
li { "{file}" }
}
}
})
}
}

4
examples/filedragdrop.rs
View file

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

4
examples/form.rs
View file

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

12
examples/framework_benchmark.rs
View file

@ -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] = &[

4
examples/heavy_compute.rs
View file

@ -22,7 +22,7 @@ fn app() -> Element {
std::thread::sleep(std::time::Duration::from_millis(2_000));
});
cx.render(rsx! {
rsx! {
div { "Hello, world!" }
})
}
}

6
examples/hydration.rs
View file

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

43
examples/inlineprops.rs
View file

@ -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<T>(_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 },
}
})
}

55
examples/inputs.rs
View file

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

4
examples/link.rs
View file

@ -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::<Route> {}
}
))
)
}
#[derive(Routable, Clone)]

4
examples/login_form.rs
View file

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

8
examples/multiwindow.rs
View file

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

4
examples/nested_listeners.rs
View file

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

4
examples/openid_connect_demo/src/views/header.rs
View file

@ -17,7 +17,7 @@ use openidconnect::{url::Url, OAuth2TokenResponse, TokenResponse};
pub fn LogOut(cx: Scope<ClientProps>) -> 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::<Option<Result<Url, crate::errors::Error>>>);
let log_out_url_state = use_signal(|| None::<Option<Result<Url, crate::errors::Error>>>);
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<ClientProps>) -> 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<ClientState> = use_atom_ref(&FERMI_CLIENT);
cx.render(match init_client_future.value() {
Some(client_props) => match client_props {

8
examples/optional_props.rs
View file

@ -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<T> = Option<T>;
@ -52,7 +52,7 @@ struct ButtonProps {
}
fn Button(cx: Scope<ButtonProps>) -> Element {
cx.render(rsx! {
rsx! {
button {
"{cx.props.a} | "
"{cx.props.b:?} | "
@ -60,5 +60,5 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
"{cx.props.d:?} | "
"{cx.props.e:?}"
}
})
}
}

4
examples/overlay.rs
View file

@ -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 {

11
examples/pattern_model.rs
View file

@ -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<MouseEvent>,
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 {

6
examples/pattern_reducer.rs
View file

@ -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 {

8
examples/read_size.rs
View file

@ -26,11 +26,11 @@ fn main() {
}
fn app() -> Element {
let div_element: &UseRef<Option<Rc<MountedData>>> = use_ref(|| None);
let div_element: Signal<Option<Rc<MountedData>>> = 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"
}
))
)
}

6
examples/readme.rs
View file

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

8
examples/rsx_compile_fail.rs
View file

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

30
examples/rsx_usage.rs
View file

@ -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<BallerProps>) -> 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<T>(text: T) -> Element
where
T: Display,
{
cx.render(rsx! {
rsx! {
p { "{text}" }
})
}
}

16
examples/scroll_to_top.rs
View file

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

4
examples/shortcut.rs
View file

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

9
examples/shorthand.rs
View file

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

6
examples/signals.rs
View file

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

4
examples/simple_list.rs
View file

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

2
examples/spread.rs
View file

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

2
examples/ssr.rs
View file

@ -31,7 +31,7 @@ fn main() {
}
fn app() -> Element {
cx.render(rsx!(
rsx!(
div {
h1 { "Title" }
p { "Body" }

6
examples/streams.rs
View file

@ -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<Box<dyn Stream<Item = i32>>> {

8
examples/suspense.rs
View file

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

12
examples/svg.rs
View file

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

4
examples/svg_basic.rs
View file

@ -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() {

6
examples/tailwind/src/main.rs
View file

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

17
examples/tasks.rs
View file

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

6
examples/textarea.rs
View file

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

36
examples/todomvc.rs
View file

@ -22,8 +22,8 @@ pub struct TodoItem {
}
pub fn app(cx: Scope<()>) -> Element {
let todos = use_state(im_rc::HashMap::<u32, TodoItem>::default);
let filter = use_state(|| FilterState::All);
let todos = use_signal(im_rc::HashMap::<u32, TodoItem>::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<im_rc::HashMap<u32, TodoItem>>,
}
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<FilterState>,
}
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" }
}
}
})
}
}

4
examples/web_component.rs
View file

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

10
examples/window_event.rs
View file

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

23
examples/window_focus.rs
View file

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

6
examples/window_zoom.rs
View file

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

6
examples/xss_safety.rs
View file

@ -9,9 +9,9 @@ fn main() {
}
fn app() -> Element {
let contents = use_state(|| String::from("<script>alert(\"hello world\")</script>"));
let contents = use_signal(|| String::from("<script>alert(\"hello world\")</script>"));
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()),
}
}
})
}
}

4
notes/README/ZH_CN.md
View file

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

2
packages/autofmt/tests/samples/immediate_expr.rsx
View file

@ -1,4 +1,4 @@
fn it_works() {
cx.render(rsx!({()}))
rsx!({()}))
}

2
packages/autofmt/tests/samples/long.rsx
View file

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

2
packages/autofmt/tests/samples/messy_indent.rsx
View file

@ -7,7 +7,7 @@ fn SaveClipboard() -> Element {
}
};
cx.render(rsx! {
rsx! {
div { "hello world", "hello world", "hello world" }
})
}

2
packages/autofmt/tests/samples/reallylong.rsx
View file

@ -1,5 +1,5 @@
pub static Icon3: Component<()> = |cx| {
cx.render(rsx! {
rsx! {
svg {
class: "w-6 h-6",
stroke_linecap: "round",

2
packages/autofmt/tests/samples/trailing_expr.rsx
View file

@ -1,5 +1,5 @@
fn it_works() {
cx.render(rsx! {
rsx! {
div {
span { "Description: ", {package.description.as_deref().unwrap_or("❌❌❌❌ missing")} }
}

2
packages/autofmt/tests/wrong/multi-4sp.rsx
View file

@ -1,3 +1,3 @@
fn app() -> Element {
cx.render(rsx! { div { "hello world" } })
rsx! { div { "hello world" } })
}

2
packages/autofmt/tests/wrong/multi-4sp.wrong.rsx
View file

@ -1,5 +1,5 @@
fn app() -> Element {
cx.render(rsx! {
rsx! {
div {"hello world" }
})
}

2
packages/autofmt/tests/wrong/multi-tab.rsx
View file

@ -1,3 +1,3 @@
fn app() -> Element {
cx.render(rsx! { div { "hello world" } })
rsx! { div { "hello world" } })
}

2
packages/autofmt/tests/wrong/multi-tab.wrong.rsx
View file

@ -1,5 +1,5 @@
fn app() -> Element {
cx.render(rsx! {
rsx! {
div {"hello world" }
})
}

2
packages/autofmt/tests/wrong/multiexpr-4sp.rsx
View file

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

2
packages/autofmt/tests/wrong/multiexpr-4sp.wrong.rsx
View file

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

2
packages/autofmt/tests/wrong/multiexpr-tab.rsx
View file

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

2
packages/autofmt/tests/wrong/multiexpr-tab.wrong.rsx
View file

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

50
packages/check/src/check.rs
View file

@ -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<i32> {
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);
}
"#};

28
packages/check/src/issues.rs
View file

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

2
packages/check/src/metadata.rs
View file

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

4
packages/cli/src/cli/translate.rs
View file

@ -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<BodyNode>) {
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 }");
}

7
packages/core-macro/src/component_body_deserializers/component.rs
View file

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

4
packages/core-macro/src/lib.rs
View file

@ -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<AppProps>) -> Element {
/// cx.render(rsx!("hello, {bob}"))
/// rsx!("hello, {bob}"))
/// }
/// ```
#[proc_macro_attribute]

2
packages/core/README.md
View file

@ -39,7 +39,7 @@ use dioxus::prelude::*;
// First, declare a root component
fn app() -> Element {
cx.render(rsx!{
rsx!{
div { "hello world" }
})
}

6
packages/core/src/error_boundary.rs
View file

@ -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<S = ()>: 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<S = ()>: Sized {
/// fn app( count: String) -> Element {
/// let id: i32 = count.parse().throw()?;
///
/// cx.render(rsx! {
/// rsx! {
/// div { "Count {}" }
/// })
/// }

2
packages/core/src/events.rs
View file

@ -146,7 +146,7 @@ impl<T: std::fmt::Debug> std::fmt::Debug for Event<T> {
/// }
///
/// fn MyComponent(cx: MyProps) -> Element {
/// cx.render(rsx!{
/// rsx!{
/// button {
/// onclick: move |evt| cx.onclick.call(evt),
/// }

4
packages/core/src/fragment.rs
View file

@ -63,7 +63,7 @@ impl<const A: bool> FragmentBuilder<A> {
///
/// ```rust, ignore
/// fn app() -> Element {
/// cx.render(rsx!{
/// rsx!{
/// CustomCard {
/// h1 {}
/// p {}
@ -77,7 +77,7 @@ impl<const A: bool> FragmentBuilder<A> {
/// }
///
/// fn CustomCard(cx: CardProps) -> Element {
/// cx.render(rsx!{
/// rsx!{
/// div {
/// h1 {"Title card"}
/// {cx.children}

20
packages/core/src/virtual_dom.rs
View file

@ -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();

8
packages/desktop/examples/stress.rs
View file

@ -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() {

2
packages/desktop/headless_tests/events.rs
View file

@ -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(

2
packages/desktop/headless_tests/rendering.rs
View file

@ -29,7 +29,7 @@ fn main() {
fn use_inner_html(d: &'static str) -> Option<String> {
let eval_provider = use_eval(cx);
let value: &UseRef<Option<String>> = use_ref(|| None);
let value: Signal<Option<String>> = use_signal(|| None);
use_effect((), |_| {
to_owned![value, eval_provider];
async move {

6
packages/desktop/src/launch.rs
View file

@ -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<AppProps>) -> Element {
/// cx.render(rsx!{
/// rsx!{
/// h1 {"hello {cx.props.name}!"}
/// })
/// }

2
packages/desktop/src/readme.md
View file

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

2
packages/dioxus-tui/README.md
View file

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

14
packages/dioxus-tui/benches/update.rs
View file

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

6
packages/dioxus-tui/examples/all_terminal_events.rs
View file

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

6
packages/dioxus-tui/examples/border.rs
View file

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

12
packages/dioxus-tui/examples/buttons.rs
View file

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

4
packages/dioxus-tui/examples/color_test.rs
View file

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

8
packages/dioxus-tui/examples/colorpicker.rs
View file

@ -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}%)"
}
})
}
}

4
packages/dioxus-tui/examples/flex.rs
View file

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

20
packages/dioxus-tui/examples/hover.rs
View file

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

4
packages/dioxus-tui/examples/list.rs
View file

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

Some files were not shown because too many files have changed in this diff Show more