remove cx.render
This commit is contained in:
159 files changed
+600
-658
No files matched your search
@@ -1,4 +1,4 @@
|
||||
fn it_works() {
|
||||
cx.render(rsx!({()}))
|
||||
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}
|
||||
|
||||
@@ -7,7 +7,7 @@ fn SaveClipboard() -> Element {
|
||||
}
|
||||
};
|
||||
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div { "hello world", "hello world", "hello world" }
|
||||
})
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
pub static Icon3: Component<()> = |cx| {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
svg {
|
||||
class: "w-6 h-6",
|
||||
stroke_linecap: "round",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
fn it_works() {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div {
|
||||
span { "Description: ", {package.description.as_deref().unwrap_or("❌❌❌❌ missing")} }
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
fn app() -> Element {
|
||||
cx.render(rsx! { div { "hello world" } })
|
||||
rsx! { div { "hello world" } })
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
fn app() -> Element {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div {"hello world" }
|
||||
})
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
fn app() -> Element {
|
||||
cx.render(rsx! { div { "hello world" } })
|
||||
rsx! { div { "hello world" } })
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
fn app() -> Element {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div {"hello world" }
|
||||
})
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
@@ -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} }
|
||||
})
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
@@ -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} }
|
||||
})
|
||||
}
|
||||
+25
-25
@@ -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);
|
||||
}
|
||||
"#};
|
||||
|
||||
|
||||
@@ -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 | });
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 }");
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -39,7 +39,7 @@ use dioxus::prelude::*;
|
||||
|
||||
// First, declare a root component
|
||||
fn app() -> Element {
|
||||
cx.render(rsx!{
|
||||
rsx!{
|
||||
div { "hello world" }
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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 {}" }
|
||||
/// })
|
||||
/// }
|
||||
|
||||
@@ -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),
|
||||
/// }
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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}!"}
|
||||
/// })
|
||||
/// }
|
||||
|
||||
@@ -35,7 +35,7 @@ fn main() {
|
||||
}
|
||||
|
||||
fn app() -> Element {
|
||||
cx.render(rsx!{
|
||||
rsx!{
|
||||
div {
|
||||
"hello world!"
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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} }
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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}"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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}%)"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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}" }
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -19,7 +19,7 @@ struct BoxProps {
|
||||
}
|
||||
#[allow(non_snake_case)]
|
||||
fn Box(cx: Scope<BoxProps>) -> Element {
|
||||
let count = use_state(|| 0);
|
||||
let count = use_signal(|| 0);
|
||||
|
||||
let x = cx.props.x * 2;
|
||||
let y = cx.props.y * 2;
|
||||
@@ -28,7 +28,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
|
||||
let count = count.get();
|
||||
let alpha = cx.props.alpha + (count % 100) as f32;
|
||||
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div {
|
||||
left: "{x}%",
|
||||
top: "{y}%",
|
||||
@@ -38,7 +38,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
|
||||
align_items: "center",
|
||||
p{"{display_hue:03}"}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Props, PartialEq)]
|
||||
@@ -48,8 +48,8 @@ struct GridProps {
|
||||
#[allow(non_snake_case)]
|
||||
fn Grid(cx: Scope<GridProps>) -> Element {
|
||||
let size = cx.props.size;
|
||||
let count = use_state(|| 0);
|
||||
let counts = use_ref(|| vec![0; size * size]);
|
||||
let count = use_signal(|| 0);
|
||||
let counts = use_signal(|| vec![0; size * size]);
|
||||
|
||||
let ctx: TuiContext = cx.consume_context().unwrap();
|
||||
if *count.get() + 1 >= (size * size) {
|
||||
@@ -98,7 +98,7 @@ fn Grid(cx: Scope<GridProps>) -> Element {
|
||||
}
|
||||
|
||||
fn app(cx: Scope<usize>) -> Element {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
@@ -106,5 +106,5 @@ fn app(cx: Scope<usize>) -> Element {
|
||||
size: *cx.props,
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,7 @@ struct QuadrentProps {
|
||||
}
|
||||
|
||||
fn Quadrant(cx: Scope<QuadrentProps>) -> Element {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div {
|
||||
border_width: "1px",
|
||||
width: "50%",
|
||||
@@ -25,11 +25,11 @@ fn Quadrant(cx: Scope<QuadrentProps>) -> Element {
|
||||
|
||||
"{cx.props.text}"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
fn app() -> Element {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
@@ -63,5 +63,5 @@ fn app() -> Element {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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!"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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}!"
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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%",
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
+10
-10
@@ -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<HeaderProps>) -> 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" }
|
||||
|
||||
@@ -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<i32> = Atom(|_| 0);
|
||||
fn Counter() -> Element {
|
||||
let mut count = use_atom_state(&COUNT);
|
||||
|
||||
cx.render(rsx!{
|
||||
rsx!{
|
||||
p {
|
||||
"{count}"
|
||||
}
|
||||
|
||||
@@ -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<T: 'static> AtomState<T> {
|
||||
///
|
||||
/// ```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<T: 'static> AtomState<T> {
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// fn component() -> Element {
|
||||
/// let value = use_state(|| 0);
|
||||
/// let value = use_signal(|| 0);
|
||||
///
|
||||
/// rsx!{
|
||||
/// Component {
|
||||
@@ -131,7 +131,7 @@ impl<T: 'static> AtomState<T> {
|
||||
/// # 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<T: 'static> AtomState<T> {
|
||||
/// # 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<T: 'static> AtomState<T> {
|
||||
///
|
||||
/// ```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<T: Clone> AtomState<T> {
|
||||
/// # Examples
|
||||
///
|
||||
/// ```ignore
|
||||
/// let val = use_state(|| 0);
|
||||
/// let val = use_signal(|| 0);
|
||||
///
|
||||
/// val.with_mut(|v| *v = 1);
|
||||
/// ```
|
||||
@@ -246,7 +246,7 @@ impl<T: Clone> AtomState<T> {
|
||||
/// # Examples
|
||||
///
|
||||
/// ```ignore
|
||||
/// let val = use_state(|| 0);
|
||||
/// let val = use_signal(|| 0);
|
||||
///
|
||||
/// *val.make_mut() += 1;
|
||||
/// ```
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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)]
|
||||
|
||||
@@ -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)]
|
||||
|
||||
@@ -22,11 +22,11 @@ fn app(cx: Scope<AppProps>) -> 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<AppProps>) -> Element {
|
||||
"Run a server function!"
|
||||
}
|
||||
"Server said: {text}"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[server]
|
||||
|
||||
@@ -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)]
|
||||
|
||||
@@ -19,10 +19,10 @@ fn app(cx: Scope<AppProps>) -> 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<AppProps>) -> Element {
|
||||
"Run a server function!"
|
||||
}
|
||||
"Server said: {text}"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[server(PostServerData)]
|
||||
|
||||
@@ -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!" }
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -19,10 +19,10 @@ fn app(cx: Scope<AppProps>) -> 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<AppProps>) -> Element {
|
||||
"Run a server function!"
|
||||
}
|
||||
"Server said: {text}"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[server(PostServerData)]
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -167,7 +167,7 @@ pub fn use_selector<I: 'static, O: Clone + PartialEq + 'static>
|
||||
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<T, I> PartialEq for Selector<T, I> {
|
||||
|
||||
impl<T: Clone + PartialEq, I> Selector<T, I> {
|
||||
/// 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);
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
/// # }
|
||||
/// # fn Component(cx: Scope<Props>) -> Element {
|
||||
///
|
||||
/// let (data) = use_ref(|| {});
|
||||
/// let (data) = use_signal(|| {});
|
||||
///
|
||||
/// let handle_thing = move |_| {
|
||||
/// to_owned![data, cx.props.prop];
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -14,7 +14,7 @@ use dioxus_core::prelude::*;
|
||||
/// fn Component() -> Element {
|
||||
/// let id = use_const(|| ComplexData(100));
|
||||
///
|
||||
/// cx.render(rsx! {
|
||||
/// rsx! {
|
||||
/// div { "{id.0}" }
|
||||
/// })
|
||||
/// }
|
||||
|
||||
@@ -56,7 +56,7 @@ use std::future::Future;
|
||||
/// });
|
||||
///
|
||||
///
|
||||
/// cx.render(rsx!{
|
||||
/// rsx!{
|
||||
/// button {
|
||||
/// onclick: move |_| chat_client.send(Action::Start),
|
||||
/// "Start Chat Service"
|
||||
|
||||
@@ -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,)| {
|
||||
|
||||
@@ -26,7 +26,7 @@ where
|
||||
F: Future<Output = T> + '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";
|
||||
});
|
||||
|
||||
@@ -16,7 +16,7 @@ pub fn use_on_unmount<D: FnOnce() + 'static>(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<D: FnOnce() + 'static>(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 {
|
||||
|
||||
@@ -17,7 +17,7 @@ use std::{
|
||||
/// that initialized the hook will be marked as "dirty".
|
||||
///
|
||||
/// ```rust, no_run
|
||||
/// let val = use_ref(|| HashMap::<u32, String>::new());
|
||||
/// let val = use_signal(|| HashMap::<u32, String>::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::<u32, String>::new());
|
||||
/// let val = use_signal(|| HashMap::<u32, String>::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::<u32, String>::new());
|
||||
/// let val2 = use_ref(|| HashMap::<u32, String>::new());
|
||||
/// let val3 = use_ref(|| HashMap::<u32, String>::new());
|
||||
/// let val1 = use_signal(|| HashMap::<u32, String>::new());
|
||||
/// let val2 = use_signal(|| HashMap::<u32, String>::new());
|
||||
/// let val3 = use_signal(|| HashMap::<u32, String>::new());
|
||||
///
|
||||
/// cx.spawn({
|
||||
/// to_owned![val1, val2, val3];
|
||||
@@ -111,7 +111,7 @@ use std::{
|
||||
/// })
|
||||
/// ```
|
||||
#[must_use]
|
||||
pub fn use_ref<T: 'static>(nitialize_refcell: impl FnOnce() -> T) -> &UseRef<T> {
|
||||
pub fn use_ref<T: 'static>(nitialize_refcell: impl FnOnce() -> T) -> Signal<T> {
|
||||
let hook = cx.use_hook(|| UseRef {
|
||||
update: cx.schedule_update(),
|
||||
value: Rc::new(RefCell::new(initialize_refcell())),
|
||||
@@ -196,7 +196,7 @@ impl<T> UseRef<T> {
|
||||
/// This method just does it for you automatically.
|
||||
///
|
||||
/// ```rust, no_run
|
||||
/// let val = use_ref(|| HashMap::<u32, String>::new());
|
||||
/// let val = use_signal(|| HashMap::<u32, String>::new());
|
||||
///
|
||||
///
|
||||
/// // use reborrowing
|
||||
@@ -216,7 +216,7 @@ impl<T> UseRef<T> {
|
||||
/// This method just does it for you automatically.
|
||||
///
|
||||
/// ```rust, no_run
|
||||
/// let val = use_ref(|| HashMap::<u32, String>::new());
|
||||
/// let val = use_signal(|| HashMap::<u32, String>::new());
|
||||
///
|
||||
///
|
||||
/// // use reborrowing
|
||||
|
||||
@@ -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<T: 'static> UseState<T> {
|
||||
///
|
||||
/// ```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<T: 'static> UseState<T> {
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// fn component() -> Element {
|
||||
/// let value = use_state(|| 0);
|
||||
/// let value = use_signal(|| 0);
|
||||
///
|
||||
/// rsx!{
|
||||
/// Component {
|
||||
@@ -144,7 +144,7 @@ impl<T: 'static> UseState<T> {
|
||||
/// # 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<T: 'static> UseState<T> {
|
||||
/// # 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<T: 'static> UseState<T> {
|
||||
///
|
||||
/// ```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<T: Clone> UseState<T> {
|
||||
/// # Examples
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// let val = use_state(|| 0);
|
||||
/// let val = use_signal(|| 0);
|
||||
///
|
||||
/// val.with_mut(|v| *v = 1);
|
||||
/// ```
|
||||
@@ -269,7 +269,7 @@ impl<T: Clone> UseState<T> {
|
||||
/// # Examples
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// let val = use_state(|| 0);
|
||||
/// let val = use_signal(|| 0);
|
||||
///
|
||||
/// *val.make_mut() += 1;
|
||||
/// ```
|
||||
@@ -493,7 +493,7 @@ impl<T: Div<Output = T> + Copy> std::ops::DivAssign<T> for UseState<T> {
|
||||
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);
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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<String> {
|
||||
@@ -57,7 +57,7 @@ fn ws(ws: WebSocket, pool: &State<LiveViewPool>) -> Channel<'static> {
|
||||
.await;
|
||||
Ok(())
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[tokio::main]
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -80,7 +80,7 @@ fn main() {
|
||||
}
|
||||
|
||||
fn app() -> Element {
|
||||
cx.render(rsx!{
|
||||
rsx!{
|
||||
div {
|
||||
"hello world!"
|
||||
}
|
||||
|
||||
@@ -227,5 +227,5 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
|
||||
// wait 1 second
|
||||
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -171,5 +171,5 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
|
||||
// wait 1 second
|
||||
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -218,5 +218,5 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
|
||||
// wait 1 second
|
||||
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -167,7 +167,7 @@ impl State for Border {
|
||||
|
||||
fn main() -> Result<(), Box<dyn std::error::Error>> {
|
||||
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<dyn std::error::Error>> {
|
||||
}
|
||||
});
|
||||
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div{
|
||||
color: "red",
|
||||
"{count}",
|
||||
@@ -186,7 +186,7 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
|
||||
}
|
||||
|
||||
fn Comp() -> Element {
|
||||
cx.render(rsx! {
|
||||
rsx! {
|
||||
div{
|
||||
border: "",
|
||||
"hello world"
|
||||
@@ -245,5 +245,5 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
|
||||
println!("{indent}{id:?} {color:?} {size:?} {border:?} {node_type:?}");
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
})
|
||||
|
||||
@@ -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 {}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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}%)",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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()
|
||||
});
|
||||
|
||||
@@ -35,7 +35,7 @@ pub fn use_selector<R: PartialEq>(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);
|
||||
///
|
||||
|
||||
@@ -33,7 +33,7 @@ use crate::{get_effect_stack, CopyValue, Effect, EffectStack};
|
||||
/// fn Child(state: Signal<u32>) -> 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<T> {
|
||||
/// fn Child(state: Signal<u32>) -> 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;
|
||||
/// });
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -127,7 +127,7 @@ pub fn launch(root_component: fn() -> Element) {
|
||||
/// }
|
||||
///
|
||||
/// fn app() -> Element {
|
||||
/// cx.render(rsx!{
|
||||
/// rsx!{
|
||||
/// h1 {"hello world!"}
|
||||
/// })
|
||||
/// }
|
||||
|
||||
@@ -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" }
|
||||
|
||||
Reference in new issue
Block a user