remove cx.render

This commit is contained in:
Jonathan Kelley committed 2024-01-13 21:12:21 -08:00
1 parent fae0b08e61
commit 1dde044697
159 files changed
+600 -658

No files matched your search

@@ -1,4 +1,4 @@
fn it_works() {
cx.render(rsx!({()}))
rsx!({()}))
}
+1 -1
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}
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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
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);
}
"#};
+14 -14
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 | });
+1 -1
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,
+2 -2
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 }");
}
@@ -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()
+2 -2
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]
+1 -1
View File
@@ -39,7 +39,7 @@ use dioxus::prelude::*;
// First, declare a root component
fn app() -> Element {
cx.render(rsx!{
rsx!{
div { "hello world" }
})
}
+3 -3
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 {}" }
/// })
/// }
+1 -1
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),
/// }
+2 -2
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}
+10 -10
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();
+4 -4
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() {
+1 -1
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(
+1 -1
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 {
+3 -3
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}!"}
/// })
/// }
+1 -1
View File
@@ -35,7 +35,7 @@ fn main() {
}
fn app() -> Element {
cx.render(rsx!{
rsx!{
div {
"hello world!"
}
+1 -1
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",
+7 -7
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,
}
}
})
}
}
@@ -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} }
}
})
}
}
+3 -3
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}"
}
})
}
}
+6 -6
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 {
}
}
}
})
}
}
+2 -2
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 {
}
}
}
})
}
}
+4 -4
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}%)"
}
})
}
}
+2 -2
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"
}
}
})
}
}
+10 -10
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}" }
}
})
}
}
+2 -2
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 {
}
}
}
})
}
}
@@ -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,
}
}
})
}
}
+2 -2
View File
@@ -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 {
}
}
}
})
}
}
+4 -4
View File
@@ -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!"
}
})
}
}
+4 -4
View File
@@ -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}!"
}
}
})
}
}
+3 -3
View File
@@ -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 {
}
}
}
})
}
}
+3 -3
View File
@@ -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%",
}
}
})
}
}
+27 -27
View File
@@ -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
View File
@@ -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" }
+3 -3
View File
@@ -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}"
}
+8 -8
View File
@@ -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;
/// ```
+2 -2
View File
@@ -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];
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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);
+1 -1
View File
@@ -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];
+3 -3
View File
@@ -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"
+1 -1
View File
@@ -14,7 +14,7 @@ use dioxus_core::prelude::*;
/// fn Component() -> Element {
/// let id = use_const(|| ComplexData(100));
///
/// cx.render(rsx! {
/// rsx! {
/// div { "{id.0}" }
/// })
/// }
+1 -1
View File
@@ -56,7 +56,7 @@ use std::future::Future;
/// });
///
///
/// cx.render(rsx!{
/// rsx!{
/// button {
/// onclick: move |_| chat_client.send(Action::Start),
/// "Start Chat Service"
+1 -1
View File
@@ -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,)| {
+4 -4
View File
@@ -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";
});
+2 -2
View File
@@ -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 {
+9 -9
View File
@@ -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
+10 -10
View File
@@ -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);
+3 -3
View File
@@ -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]
+4 -4
View File
@@ -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]
+4 -4
View File
@@ -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]
+3 -3
View File
@@ -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]
+3 -3
View File
@@ -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]
+1 -1
View File
@@ -80,7 +80,7 @@ fn main() {
}
fn app() -> Element {
cx.render(rsx!{
rsx!{
div {
"hello world!"
}
+1 -1
View File
@@ -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;
}
})
}
}
+1 -1
View File
@@ -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;
}
})
}
}
+1 -1
View File
@@ -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:?}");
});
}
})
}
}
+5 -5
View File
@@ -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 {
}
})
+3 -3
View File
@@ -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 {}
})
}
+3 -3
View File
@@ -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}%)",
+1 -1
View File
@@ -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(&current_route_str.read());
let site_map = Route::SITE_MAP
+2 -2
View File
@@ -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()
});
+1 -1
View File
@@ -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);
///
+2 -2
View File
@@ -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;
/// });
+4 -4
View File
@@ -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() {
+4 -4
View File
@@ -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"
}
}
})
}
}
+1 -1
View File
@@ -127,7 +127,7 @@ pub fn launch(root_component: fn() -> Element) {
/// }
///
/// fn app() -> Element {
/// cx.render(rsx!{
/// rsx!{
/// h1 {"hello world!"}
/// })
/// }
+2 -2
View File
@@ -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" }