Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-14 16:37:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #129 from DioxusLabs/jk/update-hooks

Browse source 
Hooks: Change UseState to be like react's use_state
This commit is contained in:
Jonathan Kelley 2022-01-27 15:51:16 -05:00 committed by GitHub
commit 75b1cff915
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 450 additions and 515 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
examples/calculator.rs
View file

@ -18,17 +18,19 @@ fn main() {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let display_value: UseState<String> = use_state(&cx, || String::from("0")); let (display_value, set_display_value) = use_state(&cx, || String::from("0"));
let input_digit = move |num: u8| { let input_digit = move |num: u8| {
if display_value.get() == "0" { if display_value == "0" {
display_value.set(String::new()); set_display_value(String::new());
} }
display_value.modify().push_str(num.to_string().as_str()); set_display_value
.make_mut()
.push_str(num.to_string().as_str());
}; };
let input_operator = move |key: &str| { let input_operator = move |key: &str| {
display_value.modify().push_str(key); set_display_value.make_mut().push_str(key);
}; };
cx.render(rsx!( cx.render(rsx!(
@ -53,7 +55,7 @@ fn app(cx: Scope) -> Element {
KeyCode::Num9 => input_digit(9), KeyCode::Num9 => input_digit(9),
KeyCode::Backspace => { KeyCode::Backspace => {
if !display_value.len() != 0 { if !display_value.len() != 0 {
display_value.modify().pop(); set_display_value.make_mut().pop();
} }
} }
_ => {} _ => {}
@ -65,21 +67,21 @@ fn app(cx: Scope) -> Element {
button { button {
class: "calculator-key key-clear", class: "calculator-key key-clear",
onclick: move |_| { onclick: move |_| {
display_value.set(String::new()); set_display_value(String::new());
if display_value != "" { if !display_value.is_empty(){
display_value.set("0".into()); set_display_value("0".into());
} }
}, },
[if display_value == "" { "C" } else { "AC" }] [if display_value.is_empty() { "C" } else { "AC" }]
} }
button { button {
class: "calculator-key key-sign", class: "calculator-key key-sign",
onclick: move |_| { onclick: move |_| {
let temp = calc_val(display_value.get().clone()); let temp = calc_val(display_value.clone());
if temp > 0.0 { if temp > 0.0 {
display_value.set(format!("-{}", temp)); set_display_value(format!("-{}", temp));
} else { } else {
display_value.set(format!("{}", temp.abs())); set_display_value(format!("{}", temp.abs()));
} }
}, },
"±" "±"
@ -87,8 +89,8 @@ fn app(cx: Scope) -> Element {
button { button {
class: "calculator-key key-percent", class: "calculator-key key-percent",
onclick: move |_| { onclick: move |_| {
display_value.set( set_display_value(
format!("{}", calc_val(display_value.get().clone()) / 100.0) format!("{}", calc_val(display_value.clone()) / 100.0)
); );
}, },
"%" "%"
@ -98,7 +100,7 @@ fn app(cx: Scope) -> Element {
button { class: "calculator-key key-0", onclick: move |_| input_digit(0), button { class: "calculator-key key-0", onclick: move |_| input_digit(0),
"0" "0"
} }
button { class: "calculator-key key-dot", onclick: move |_| display_value.modify().push('.'), button { class: "calculator-key key-dot", onclick: move |_| set_display_value.make_mut().push('.'),
"●" "●"
} }
(1..10).map(|k| rsx!{ (1..10).map(|k| rsx!{
@ -130,7 +132,7 @@ fn app(cx: Scope) -> Element {
} }
button { class: "calculator-key key-equals", button { class: "calculator-key key-equals",
onclick: move |_| { onclick: move |_| {
display_value.set(format!("{}", calc_val(display_value.get().clone()))); set_display_value(format!("{}", calc_val(display_value.clone())));
}, },
"=" "="
} }

30
examples/crm.rs
View file

@ -20,11 +20,11 @@ pub struct Client {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let scene = use_state(&cx, || Scene::ClientsList);
let clients = use_ref(&cx, || vec![] as Vec<Client>); let clients = use_ref(&cx, || vec![] as Vec<Client>);
let firstname = use_state(&cx, String::new); let (scene, set_scene) = use_state(&cx, || Scene::ClientsList);
let lastname = use_state(&cx, String::new); let (firstname, set_firstname) = use_state(&cx, String::new);
let description = use_state(&cx, String::new); let (lastname, set_lastname) = use_state(&cx, String::new);
let (description, set_description) = use_state(&cx, String::new);
cx.render(rsx!( cx.render(rsx!(
body { body {
@ -38,7 +38,7 @@ fn app(cx: Scope) -> Element {
h1 {"Dioxus CRM Example"} h1 {"Dioxus CRM Example"}
match *scene { match scene {
Scene::ClientsList => rsx!( Scene::ClientsList => rsx!(
div { class: "crm", div { class: "crm",
h2 { margin_bottom: "10px", "List of clients" } h2 { margin_bottom: "10px", "List of clients" }
@ -51,8 +51,8 @@ fn app(cx: Scope) -> Element {
}) })
) )
} }
button { class: "pure-button pure-button-primary", onclick: move |_| scene.set(Scene::NewClientForm), "Add New" } button { class: "pure-button pure-button-primary", onclick: move |_| set_scene(Scene::NewClientForm), "Add New" }
button { class: "pure-button", onclick: move |_| scene.set(Scene::Settings), "Settings" } button { class: "pure-button", onclick: move |_| set_scene(Scene::Settings), "Settings" }
} }
), ),
Scene::NewClientForm => rsx!( Scene::NewClientForm => rsx!(
@ -63,19 +63,19 @@ fn app(cx: Scope) -> Element {
class: "new-client firstname", class: "new-client firstname",
placeholder: "First name", placeholder: "First name",
value: "{firstname}", value: "{firstname}",
oninput: move |e| firstname.set(e.value.clone()) oninput: move |e| set_firstname(e.value.clone())
} }
input { input {
class: "new-client lastname", class: "new-client lastname",
placeholder: "Last name", placeholder: "Last name",
value: "{lastname}", value: "{lastname}",
oninput: move |e| lastname.set(e.value.clone()) oninput: move |e| set_lastname(e.value.clone())
} }
textarea { textarea {
class: "new-client description", class: "new-client description",
placeholder: "Description", placeholder: "Description",
value: "{description}", value: "{description}",
oninput: move |e| description.set(e.value.clone()) oninput: move |e| set_description(e.value.clone())
} }
} }
button { button {
@ -86,13 +86,13 @@ fn app(cx: Scope) -> Element {
first_name: (*firstname).clone(), first_name: (*firstname).clone(),
last_name: (*lastname).clone(), last_name: (*lastname).clone(),
}); });
description.set(String::new()); set_description(String::new());
firstname.set(String::new()); set_firstname(String::new());
lastname.set(String::new()); set_lastname(String::new());
}, },
"Add New" "Add New"
} }
button { class: "pure-button", onclick: move |_| scene.set(Scene::ClientsList), button { class: "pure-button", onclick: move |_| set_scene(Scene::ClientsList),
"Go Back" "Go Back"
} }
} }
@ -108,7 +108,7 @@ fn app(cx: Scope) -> Element {
} }
button { button {
class: "pure-button pure-button-primary", class: "pure-button pure-button-primary",
onclick: move |_| scene.set(Scene::ClientsList), onclick: move |_| set_scene(Scene::ClientsList),
"Go Back" "Go Back"
} }
} }

4
examples/disabled.rs
View file

@ -5,12 +5,12 @@ fn main() {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let disabled = use_state(&cx, || false); let (disabled, set_disabled) = use_state(&cx, || false);
cx.render(rsx! { cx.render(rsx! {
div { div {
button { button {
onclick: move |_| disabled.set(!disabled.get()), onclick: move |_| set_disabled(!disabled),
"click to " [if *disabled {"enable"} else {"disable"} ] " the lower button" "click to " [if *disabled {"enable"} else {"disable"} ] " the lower button"
} }

12
examples/dog_app.rs
View file

@ -24,7 +24,7 @@ fn app(cx: Scope) -> Element {
.await .await
}); });
let selected_breed = use_state(&cx, || None); let (breed, set_breed) = use_state(&cx, || None);
match fut.value() { match fut.value() {
Some(Ok(breeds)) => cx.render(rsx! { Some(Ok(breeds)) => cx.render(rsx! {
@ -36,14 +36,14 @@ fn app(cx: Scope) -> Element {
breeds.message.keys().map(|breed| rsx!( breeds.message.keys().map(|breed| rsx!(
li { li {
button { button {
onclick: move |_| selected_breed.set(Some(breed.clone())), onclick: move |_| set_breed(Some(breed.clone())),
"{breed}" "{breed}"
} }
} }
)) ))
} }
div { flex: "50%", div { flex: "50%",
match &*selected_breed { match breed {
Some(breed) => rsx!( Breed { breed: breed.clone() } ), Some(breed) => rsx!( Breed { breed: breed.clone() } ),
None => rsx!("No Breed selected"), None => rsx!("No Breed selected"),
} }
@ -73,9 +73,9 @@ fn Breed(cx: Scope, breed: String) -> Element {
reqwest::get(endpoint).await.unwrap().json::<DogApi>().await reqwest::get(endpoint).await.unwrap().json::<DogApi>().await
}); });
let breed_name = use_state(&cx, || breed.clone()); let (name, set_name) = use_state(&cx, || breed.clone());
if breed_name.get() != breed { if name != breed {
breed_name.set(breed.clone()); set_name(breed.clone());
fut.restart(); fut.restart();
} }

4
examples/framework_benchmark.rs
View file

@ -33,7 +33,7 @@ impl Label {
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let items = use_ref(&cx, Vec::new); let items = use_ref(&cx, Vec::new);
let selected = use_state(&cx, || None); let (selected, set_selected) = use_state(&cx, || None);
cx.render(rsx! { cx.render(rsx! {
div { class: "container", div { class: "container",
@ -71,7 +71,7 @@ fn app(cx: Scope) -> Element {
rsx!(tr { class: "{is_in_danger}", rsx!(tr { class: "{is_in_danger}",
td { class:"col-md-1" } td { class:"col-md-1" }
td { class:"col-md-1", "{item.key}" } td { class:"col-md-1", "{item.key}" }
td { class:"col-md-1", onclick: move |_| selected.set(Some(id)), td { class:"col-md-1", onclick: move |_| set_selected(Some(id)),
a { class: "lbl", item.labels } a { class: "lbl", item.labels }
} }
td { class: "col-md-1", td { class: "col-md-1",

4
examples/hydration.rs
View file

@ -20,13 +20,13 @@ fn main() {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let val = use_state(&cx, || 0); let (val, set_val) = use_state(&cx, || 0);
cx.render(rsx! { cx.render(rsx! {
div { div {
h1 { "hello world. Count: {val}" } h1 { "hello world. Count: {val}" }
button { button {
onclick: move |_| *val.modify() += 1, onclick: move |_| set_val(val + 1),
"click to increment" "click to increment"
} }
} }

6
examples/pattern_reducer.rs
View file

@ -15,16 +15,16 @@ fn main() {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let state = use_state(&cx, PlayerState::new); let (state, set_state) = use_state(&cx, PlayerState::new);
cx.render(rsx!( cx.render(rsx!(
div { div {
h1 {"Select an option"} h1 {"Select an option"}
h3 { "The radio is... " [state.is_playing()] "!" } h3 { "The radio is... " [state.is_playing()] "!" }
button { onclick: move |_| state.modify().reduce(PlayerAction::Pause), button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Pause),
"Pause" "Pause"
} }
button { onclick: move |_| state.modify().reduce(PlayerAction::Play), button { onclick: move |_| set_state.make_mut().reduce(PlayerAction::Play),
"Play" "Play"
} }
} }

6
examples/readme.rs
View file

@ -9,13 +9,13 @@ fn main() {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let mut count = use_state(&cx, || 0); let (count, set_count) = use_state(&cx, || 0);
cx.render(rsx! { cx.render(rsx! {
div { div {
h1 { "High-Five counter: {count}" } h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| set_count(count + 1), "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" } button { onclick: move |_| set_count(count - 1), "Down low!" }
} }
}) })
} }

2
examples/rsx_compile_fail.rs
View file

@ -12,7 +12,7 @@ fn main() {
} }
fn example(cx: Scope) -> Element { fn example(cx: Scope) -> Element {
let items = use_state(&cx, || { let (items, _set_items) = use_state(&cx, || {
vec![Thing { vec![Thing {
a: "asd".to_string(), a: "asd".to_string(),
b: 10, b: 10,

8
examples/tasks.rs
View file

@ -10,14 +10,14 @@ fn main() {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let count = use_state(&cx, || 0); let (count, set_count) = use_state(&cx, || 0);
use_future(&cx, move || { use_future(&cx, move || {
let mut count = count.for_async(); let set_count = set_count.to_owned();
async move { async move {
loop { loop {
tokio::time::sleep(Duration::from_millis(1000)).await; tokio::time::sleep(Duration::from_millis(1000)).await;
count += 1; set_count.modify(|f| f + 1);
} }
} }
}); });
@ -26,7 +26,7 @@ fn app(cx: Scope) -> Element {
div { div {
h1 { "Current count: {count}" } h1 { "Current count: {count}" }
button { button {
onclick: move |_| count.set(0), onclick: move |_| set_count(0),
"Reset the count" "Reset the count"
} }
} }

50
examples/todomvc.rs
View file

@ -19,15 +19,15 @@ pub struct TodoItem {
} }
pub fn app(cx: Scope<()>) -> Element { pub fn app(cx: Scope<()>) -> Element {
let todos = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default); let (todos, set_todos) = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
let filter = use_state(&cx, || FilterState::All); let (filter, set_filter) = use_state(&cx, || FilterState::All);
let draft = use_state(&cx, || "".to_string()); let (draft, set_draft) = use_state(&cx, || "".to_string());
let mut todo_id = use_state(&cx, || 0); let (todo_id, set_todo_id) = use_state(&cx, || 0);
// Filter the todos based on the filter state // Filter the todos based on the filter state
let mut filtered_todos = todos let mut filtered_todos = todos
.iter() .iter()
.filter(|(_, item)| match *filter { .filter(|(_, item)| match filter {
FilterState::All => true, FilterState::All => true,
FilterState::Active => !item.checked, FilterState::Active => !item.checked,
FilterState::Completed => item.checked, FilterState::Completed => item.checked,
@ -54,25 +54,25 @@ pub fn app(cx: Scope<()>) -> Element {
placeholder: "What needs to be done?", placeholder: "What needs to be done?",
value: "{draft}", value: "{draft}",
autofocus: "true", autofocus: "true",
oninput: move |evt| draft.set(evt.value.clone()), oninput: move |evt| set_draft(evt.value.clone()),
onkeydown: move |evt| { onkeydown: move |evt| {
if evt.key == "Enter" && !draft.is_empty() { if evt.key == "Enter" && !draft.is_empty() {
todos.modify().insert( set_todos.make_mut().insert(
*todo_id, *todo_id,
TodoItem { TodoItem {
id: *todo_id, id: *todo_id,
checked: false, checked: false,
contents: draft.get().clone(), contents: draft.clone(),
}, },
); );
todo_id += 1; set_todo_id(todo_id + 1);
draft.set("".to_string()); set_draft("".to_string());
} }
} }
} }
} }
ul { class: "todo-list", ul { class: "todo-list",
filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, todos: todos ))) filtered_todos.iter().map(|id| rsx!(todo_entry( key: "{id}", id: *id, set_todos: set_todos )))
} }
(!todos.is_empty()).then(|| rsx!( (!todos.is_empty()).then(|| rsx!(
footer { class: "footer", footer { class: "footer",
@ -81,14 +81,14 @@ pub fn app(cx: Scope<()>) -> Element {
span {"{item_text} left"} span {"{item_text} left"}
} }
ul { class: "filters", ul { class: "filters",
li { class: "All", a { onclick: move |_| filter.set(FilterState::All), "All" }} li { class: "All", a { onclick: move |_| set_filter(FilterState::All), "All" }}
li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }} li { class: "Active", a { onclick: move |_| set_filter(FilterState::Active), "Active" }}
li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }} li { class: "Completed", a { onclick: move |_| set_filter(FilterState::Completed), "Completed" }}
} }
(show_clear_completed).then(|| rsx!( (show_clear_completed).then(|| rsx!(
button { button {
class: "clear-completed", class: "clear-completed",
onclick: move |_| todos.modify().retain(|_, todo| !todo.checked), onclick: move |_| set_todos.make_mut().retain(|_, todo| !todo.checked),
"Clear completed" "Clear completed"
} }
)) ))
@ -106,24 +106,26 @@ pub fn app(cx: Scope<()>) -> Element {
#[derive(Props)] #[derive(Props)]
pub struct TodoEntryProps<'a> { pub struct TodoEntryProps<'a> {
todos: UseState<'a, im_rc::HashMap<u32, TodoItem>>, set_todos: &'a UseState<im_rc::HashMap<u32, TodoItem>>,
id: u32, id: u32,
} }
pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element { pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
let todo = &cx.props.todos[&cx.props.id]; let (is_editing, set_is_editing) = use_state(&cx, || false);
let is_editing = use_state(&cx, || false);
let todos = cx.props.set_todos.get();
let todo = &todos[&cx.props.id];
let completed = if todo.checked { "completed" } else { "" }; let completed = if todo.checked { "completed" } else { "" };
let editing = if *is_editing.get() { "editing" } else { "" }; let editing = if *is_editing { "editing" } else { "" };
rsx!(cx, li { rsx!(cx, li {
class: "{completed} {editing}", class: "{completed} {editing}",
onclick: move |_| is_editing.set(true), onclick: move |_| set_is_editing(true),
onfocusout: move |_| is_editing.set(false), onfocusout: move |_| set_is_editing(false),
div { class: "view", div { class: "view",
input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}", input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
onchange: move |evt| { onchange: move |evt| {
cx.props.todos.modify()[&cx.props.id].checked = evt.value.parse().unwrap(); cx.props.set_todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
} }
} }
label { r#for: "cbg-{todo.id}", pointer_events: "none", "{todo.contents}" } label { r#for: "cbg-{todo.id}", pointer_events: "none", "{todo.contents}" }
@ -132,11 +134,11 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
input { input {
class: "edit", class: "edit",
value: "{todo.contents}", value: "{todo.contents}",
oninput: move |evt| cx.props.todos.modify()[&cx.props.id].contents = evt.value.clone(), oninput: move |evt| cx.props.set_todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
autofocus: "true", autofocus: "true",
onkeydown: move |evt| { onkeydown: move |evt| {
match evt.key.as_str() { match evt.key.as_str() {
"Enter" | "Escape" | "Tab" => is_editing.set(false), "Enter" | "Escape" | "Tab" => set_is_editing(false),
_ => {} _ => {}
} }
}, },

4
examples/xss_safety.rs
View file

@ -9,7 +9,7 @@ fn main() {
} }
fn app(cx: Scope) -> Element { fn app(cx: Scope) -> Element {
let contents = use_state(&cx, || { let (contents, set_contents) = use_state(&cx, || {
String::from("<script>alert(\"hello world\")</script>") String::from("<script>alert(\"hello world\")</script>")
}); });
@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
input { input {
value: "{contents}", value: "{contents}",
r#type: "text", r#type: "text",
oninput: move |e| contents.set(e.value.clone()), oninput: move |e| set_contents(e.value.clone()),
} }
} }
}) })

64
packages/hooks/src/lib.rs
View file

@ -16,45 +16,25 @@ pub use usefuture::*;
mod usesuspense; mod usesuspense;
pub use usesuspense::*; pub use usesuspense::*;
// #[macro_export] #[macro_export]
// macro_rules! to_owned { /// A helper macro for using hooks in async environements.
// ($($es:ident),+) => {$( ///
// #[allow(unused_mut)] /// # Usage
// let mut $es = $es.to_owned(); ///
// )*} ///
// } /// ```
/// let (data) = use_ref(&cx, || {});
// /// Calls `for_async` on the series of paramters. ///
// /// /// let handle_thing = move |_| {
// /// If the type is Clone, then it will be cloned. However, if the type is not `clone` /// to_owned![data]
// /// then it must have a `for_async` method for Rust to lower down into. /// cx.spawn(async move {
// /// /// // do stuff
// /// See: how use_state implements `for_async` but *not* through the trait. /// });
// #[macro_export] /// }
// macro_rules! for_async { /// ```
// ($($es:ident),+) => {$( macro_rules! to_owned {
// #[allow(unused_mut)] ($($es:ident),+) => {$(
// let mut $es = $es.for_async(); #[allow(unused_mut)]
// )*} let mut $es = $es.to_owned();
// } )*}
}
// /// This is a marker trait that uses decoherence.
// ///
// /// It is *not* meant for hooks to actually implement, but rather defer to their
// /// underlying implementation if they *don't* implement the trait.
// ///
// ///
// pub trait AsyncHook {
// type Output;
// fn for_async(self) -> Self::Output;
// }
// impl<T> AsyncHook for T
// where
// T: ToOwned<Owned = T>,
// {
// type Output = T;
// fn for_async(self) -> Self::Output {
// self
// }
// }

343
packages/hooks/src/usestate.rs Normal file
View file

@ -0,0 +1,343 @@
#![warn(clippy::pedantic)]
use dioxus_core::prelude::*;
use std::{
cell::{RefCell, RefMut},
fmt::{Debug, Display},
rc::Rc,
};
/// Store state between component renders.
///
/// ## Dioxus equivalent of useState, designed for Rust
///
/// The Dioxus version of `useState` for state management inside components. It allows you to ergonomically store and
/// modify state between component renders. When the state is updated, the component will re-render.
///
///
/// ```ignore
/// const Example: Component = |cx| {
/// let (count, set_count) = use_state(&cx, || 0);
///
/// cx.render(rsx! {
/// div {
/// h1 { "Count: {count}" }
/// button { onclick: move |_| set_count(a - 1), "Increment" }
/// button { onclick: move |_| set_count(a + 1), "Decrement" }
/// }
/// ))
/// }
/// ```
pub fn use_state<'a, T: 'static>(
cx: &'a ScopeState,
initial_state_fn: impl FnOnce() -> T,
) -> (&'a T, &'a UseState<T>) {
let hook = cx.use_hook(move |_| {
let current_val = Rc::new(initial_state_fn());
let update_callback = cx.schedule_update();
let slot = Rc::new(RefCell::new(current_val.clone()));
let setter = Rc::new({
crate::to_owned![update_callback, slot];
move |new| {
let mut slot = slot.borrow_mut();
// if there's only one reference (weak or otherwise), we can just swap the values
// Typically happens when the state is set multiple times - we don't want to create a new Rc for each new value
if let Some(val) = Rc::get_mut(&mut slot) {
*val = new;
} else {
*slot = Rc::new(new);
}
update_callback();
}
});
UseState {
current_val,
update_callback,
setter,
slot,
}
});
(hook.current_val.as_ref(), hook)
}
pub struct UseState<T: 'static> {
pub(crate) current_val: Rc<T>,
pub(crate) update_callback: Rc<dyn Fn()>,
pub(crate) setter: Rc<dyn Fn(T)>,
pub(crate) slot: Rc<RefCell<Rc<T>>>,
}
impl<T: 'static> UseState<T> {
/// Get the current value of the state by cloning its container Rc.
///
/// This is useful when you are dealing with state in async contexts but need
/// to know the current value. You are not given a reference to the state.
///
/// # Examples
/// An async context might need to know the current value:
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let (count, set_count) = use_state(&cx, || 0);
/// cx.spawn({
/// let set_count = set_count.to_owned();
/// async move {
/// let current = set_count.current();
/// }
/// })
/// }
/// ```
#[must_use]
pub fn current(&self) -> Rc<T> {
self.slot.borrow().clone()
}
/// Get the `setter` function directly without the `UseState` wrapper.
///
/// This is useful for passing the setter function to other components.
///
/// However, for most cases, calling `to_owned` o`UseState`te is the
/// preferred way to get "anoth`set_state`tate handle.
///
///
/// # Examples
/// A component might require an `Rc<dyn Fn(T)>` as an input to set a value.
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let (value, set_value) = use_state(&cx, || 0);
///
/// rsx!{
/// Component {
/// handler: set_val.setter()
/// }
/// }
/// }
/// ```
#[must_use]
pub fn setter(&self) -> Rc<dyn Fn(T)> {
self.setter.clone()
}
/// Set the state to a new value, using the current state value as a reference.
///
/// This is similar to passing a closure to React's `set_value` function.
///
/// # Examples
///
/// Basic usage:
/// ```rust
/// # use dioxus_core::prelude::*;
/// # use dioxus_hooks::*;
/// fn component(cx: Scope) -> Element {
/// let (value, set_value) = use_state(&cx, || 0);
///
/// // to increment the value
/// set_value.modify(|v| v + 1);
///
/// // usage in async
/// cx.spawn({
/// let set_value = set_value.to_owned();
/// async move {
/// set_value.modify(|v| v + 1);
/// }
/// });
///
/// # todo!()
/// }
/// ```
pub fn modify(&self, f: impl FnOnce(&T) -> T) {
let curernt = self.slot.borrow();
let new_val = f(curernt.as_ref());
(self.setter)(new_val);
}
/// Get the value of the state when this handle was created.
///
/// This method is useful when you want an `Rc` around the data to cheaply
/// pass it around your app.
///
/// ## Warning
///
/// This will return a stale value if used within async contexts.
///
/// Try `current` to get the real current value of the state.
///
/// ## Example
///
/// ```rust, ignore
/// # use dioxus_core::prelude::*;
/// # use dioxus_hooks::*;
/// fn component(cx: Scope) -> Element {
/// let (value, set_value) = use_state(&cx, || 0);
///
/// let as_rc = set_value.get();
/// assert_eq!(as_rc.as_ref(), &0);
///
/// # todo!()
/// }
/// ```
#[must_use]
pub fn get(&self) -> &Rc<T> {
&self.current_val
}
/// Mark the component that create this [`UseState`] as dirty, forcing it to re-render.
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let (count, set_count) = use_state(&cx, || 0);
/// cx.spawn({
/// let set_count = set_count.to_owned();
/// async move {
/// // for the component to re-render
/// set_count.needs_update();
/// }
/// })
/// }
/// ```
pub fn needs_update(&self) {
(self.update_callback)();
}
}
impl<T: Clone> UseState<T> {
/// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
/// current value.
///
/// This is essentially cloning the underlying value and then setting it,
/// giving you a mutable handle in the process. This method is intended for
/// types that are cheaply cloneable.
///
/// If you are comfortable dealing with `RefMut`, then you can use `make_mut` to get
/// the underlying slot. However, be careful with `RefMut` since you might panic
/// if the `RefCell` is left open.
///
/// # Examples
///
/// ```
/// let (val, set_val) = use_state(&cx, || 0);
///
/// set_val.with_mut(|v| *v = 1);
/// ```
pub fn with_mut(&self, apply: impl FnOnce(&mut T)) {
let mut slot = self.slot.borrow_mut();
let mut inner = slot.as_ref().to_owned();
apply(&mut inner);
if let Some(new) = Rc::get_mut(&mut slot) {
*new = inner;
} else {
*slot = Rc::new(inner);
}
self.needs_update();
}
/// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
/// current value.
///
/// This is essentially cloning the underlying value and then setting it,
/// giving you a mutable handle in the process. This method is intended for
/// types that are cheaply cloneable.
///
/// # Warning
/// Be careful with `RefMut` since you might panic if the `RefCell` is left open!
///
/// # Examples
///
/// ```
/// let (val, set_val) = use_state(&cx, || 0);
///
/// set_val.with_mut(|v| *v = 1);
/// ```
#[must_use]
pub fn make_mut(&self) -> RefMut<T> {
let mut slot = self.slot.borrow_mut();
self.needs_update();
if Rc::strong_count(&*slot) > 0 {
*slot = Rc::new(slot.as_ref().to_owned());
}
RefMut::map(slot, |rc| Rc::get_mut(rc).expect("the hard count to be 0"))
}
}
impl<T: 'static> ToOwned for UseState<T> {
type Owned = UseState<T>;
fn to_owned(&self) -> Self::Owned {
UseState {
current_val: self.current_val.clone(),
update_callback: self.update_callback.clone(),
setter: self.setter.clone(),
slot: self.slot.clone(),
}
}
}
impl<'a, T: 'static + Display> std::fmt::Display for UseState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{}", self.current_val)
}
}
impl<T> PartialEq<UseState<T>> for UseState<T> {
fn eq(&self, other: &UseState<T>) -> bool {
// some level of memoization for UseState
Rc::ptr_eq(&self.slot, &other.slot)
}
}
impl<T: Debug> Debug for UseState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:?}", self.current_val)
}
}
impl<'a, T> std::ops::Deref for UseState<T> {
type Target = Rc<dyn Fn(T)>;
fn deref(&self) -> &Self::Target {
&self.setter
}
}
#[test]
fn api_makes_sense() {
#[allow(unused)]
fn app(cx: Scope) -> Element {
let (val, set_val) = use_state(&cx, || 0);
set_val(0);
set_val.modify(|v| v + 1);
let real_current = set_val.current();
match val {
10 => {
set_val(20);
set_val.modify(|v| v + 1);
}
20 => {}
_ => {
println!("{real_current}");
}
}
cx.spawn({
crate::to_owned![set_val];
async move {
set_val.modify(|f| f + 1);
}
});
cx.render(LazyNodes::new(|f| f.static_text("asd")))
}
}

215
packages/hooks/src/usestate/handle.rs
View file

@ -1,215 +0,0 @@
use super::owned::UseStateOwned;
use std::{
cell::{Ref, RefMut},
fmt::{Debug, Display},
rc::Rc,
};
pub struct UseState<'a, T: 'static>(pub(crate) &'a UseStateOwned<T>);
impl<T> Copy for UseState<'_, T> {}
impl<'a, T: 'static> Clone for UseState<'a, T> {
fn clone(&self) -> Self {
UseState(self.0)
}
}
impl<T: Debug> Debug for UseState<'_, T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:?}", self.0.current_val)
}
}
impl<'a, T: 'static> UseState<'a, T> {
/// Tell the Dioxus Scheduler that we need to be processed
pub fn needs_update(&self) {
if !self.0.update_scheuled.get() {
self.0.update_scheuled.set(true);
(self.0.update_callback)();
}
}
pub fn set(&self, new_val: T) {
*self.0.wip.borrow_mut() = Some(new_val);
self.needs_update();
}
pub fn get(&self) -> &'a T {
&self.0.current_val
}
pub fn get_rc(&self) -> &'a Rc<T> {
&self.0.current_val
}
/// Get the current status of the work-in-progress data
pub fn get_wip(&self) -> Ref<Option<T>> {
self.0.wip.borrow()
}
/// Get the current status of the work-in-progress data
pub fn get_wip_mut(&self) -> RefMut<Option<T>> {
self.0.wip.borrow_mut()
}
pub fn classic(self) -> (&'a T, Rc<dyn Fn(T)>) {
(&self.0.current_val, self.setter())
}
pub fn setter(&self) -> Rc<dyn Fn(T)> {
let slot = self.0.wip.clone();
let callback = self.0.update_callback.clone();
Rc::new(move |new| {
callback();
*slot.borrow_mut() = Some(new)
})
}
pub fn with(&self, f: impl FnOnce(&mut T)) {
let mut val = self.0.wip.borrow_mut();
if let Some(inner) = val.as_mut() {
f(inner);
}
}
pub fn for_async(&self) -> UseStateOwned<T> {
let UseStateOwned {
current_val,
wip,
update_callback,
update_scheuled,
} = self.0;
UseStateOwned {
current_val: current_val.clone(),
wip: wip.clone(),
update_callback: update_callback.clone(),
update_scheuled: update_scheuled.clone(),
}
}
}
impl<'a, T: 'static + ToOwned<Owned = T>> UseState<'a, T> {
/// Gain mutable access to the new value via [`RefMut`].
///
/// If `modify` is called, then the component will re-render.
///
/// This method is only available when the value is a `ToOwned` type.
///
/// Mutable access is derived by calling "ToOwned" (IE cloning) on the current value.
///
/// To get a reference to the current value, use `.get()`
pub fn modify(self) -> RefMut<'a, T> {
// make sure we get processed
self.needs_update();
// Bring out the new value, cloning if it we need to
// "get_mut" is locked behind "ToOwned" to make it explicit that cloning occurs to use this
RefMut::map(self.0.wip.borrow_mut(), |slot| {
if slot.is_none() {
*slot = Some(self.0.current_val.as_ref().to_owned());
}
slot.as_mut().unwrap()
})
}
pub fn inner(self) -> T {
self.0.current_val.as_ref().to_owned()
}
}
impl<'a, T> std::ops::Deref for UseState<'a, T> {
type Target = T;
fn deref(&self) -> &Self::Target {
self.get()
}
}
// enable displaty for the handle
impl<'a, T: 'static + Display> std::fmt::Display for UseState<'a, T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{}", self.0.current_val)
}
}
impl<'a, V, T: PartialEq<V>> PartialEq<V> for UseState<'a, T> {
fn eq(&self, other: &V) -> bool {
self.get() == other
}
}
impl<'a, O, T: std::ops::Not<Output = O> + Copy> std::ops::Not for UseState<'a, T> {
type Output = O;
fn not(self) -> Self::Output {
!*self.get()
}
}
/*
Convenience methods for UseState.
Note!
This is not comprehensive.
This is *just* meant to make common operations easier.
*/
use std::ops::{Add, AddAssign, Div, DivAssign, Mul, MulAssign, Sub, SubAssign};
impl<'a, T: Copy + Add<T, Output = T>> Add<T> for UseState<'a, T> {
type Output = T;
fn add(self, rhs: T) -> Self::Output {
self.0.current_val.add(rhs)
}
}
impl<'a, T: Copy + Add<T, Output = T>> AddAssign<T> for UseState<'a, T> {
fn add_assign(&mut self, rhs: T) {
self.set(self.0.current_val.add(rhs));
}
}
/// Sub
impl<'a, T: Copy + Sub<T, Output = T>> Sub<T> for UseState<'a, T> {
type Output = T;
fn sub(self, rhs: T) -> Self::Output {
self.0.current_val.sub(rhs)
}
}
impl<'a, T: Copy + Sub<T, Output = T>> SubAssign<T> for UseState<'a, T> {
fn sub_assign(&mut self, rhs: T) {
self.set(self.0.current_val.sub(rhs));
}
}
/// MUL
impl<'a, T: Copy + Mul<T, Output = T>> Mul<T> for UseState<'a, T> {
type Output = T;
fn mul(self, rhs: T) -> Self::Output {
self.0.current_val.mul(rhs)
}
}
impl<'a, T: Copy + Mul<T, Output = T>> MulAssign<T> for UseState<'a, T> {
fn mul_assign(&mut self, rhs: T) {
self.set(self.0.current_val.mul(rhs));
}
}
/// DIV
impl<'a, T: Copy + Div<T, Output = T>> Div<T> for UseState<'a, T> {
type Output = T;
fn div(self, rhs: T) -> Self::Output {
self.0.current_val.div(rhs)
}
}
impl<'a, T: Copy + Div<T, Output = T>> DivAssign<T> for UseState<'a, T> {
fn div_assign(&mut self, rhs: T) {
self.set(self.0.current_val.div(rhs));
}
}

78
packages/hooks/src/usestate/mod.rs
View file

@ -1,78 +0,0 @@
mod handle;
mod owned;
pub use handle::*;
pub use owned::*;
use dioxus_core::prelude::*;
use std::{
cell::{Cell, RefCell},
rc::Rc,
};
/// Store state between component renders!
///
/// ## Dioxus equivalent of useState, designed for Rust
///
/// The Dioxus version of `useState` for state management inside components. It allows you to ergonomically store and
/// modify state between component renders. When the state is updated, the component will re-render.
///
/// Dioxus' use_state basically wraps a RefCell with helper methods and integrates it with the VirtualDOM update system.
///
/// [`use_state`] exposes a few helper methods to modify the underlying state:
/// - `.set(new)` allows you to override the "work in progress" value with a new value
/// - `.get_mut()` allows you to modify the WIP value
/// - `.get_wip()` allows you to access the WIP value
/// - `.deref()` provides the previous value (often done implicitly, though a manual dereference with `*` might be required)
///
/// Additionally, a ton of std::ops traits are implemented for the `UseState` wrapper, meaning any mutative type operations
/// will automatically be called on the WIP value.
///
/// ## Combinators
///
/// On top of the methods to set/get state, `use_state` also supports fancy combinators to extend its functionality:
/// - `.classic()` and `.split()` convert the hook into the classic React-style hook
/// ```rust
/// let (state, set_state) = use_state(&cx, || 10).split()
/// ```
///
///
/// Usage:
///
/// ```ignore
/// const Example: Component = |cx| {
/// let counter = use_state(&cx, || 0);
///
/// cx.render(rsx! {
/// div {
/// h1 { "Counter: {counter}" }
/// button { onclick: move |_| counter += 1, "Increment" }
/// button { onclick: move |_| counter -= 1, "Decrement" }
/// }
/// ))
/// }
/// ```
pub fn use_state<'a, T: 'static>(
cx: &'a ScopeState,
initial_state_fn: impl FnOnce() -> T,
) -> UseState<'a, T> {
let hook = cx.use_hook(move |_| UseStateOwned {
current_val: Rc::new(initial_state_fn()),
update_callback: cx.schedule_update(),
wip: Rc::new(RefCell::new(None)),
update_scheuled: Cell::new(false),
});
hook.update_scheuled.set(false);
let mut new_val = hook.wip.borrow_mut();
if new_val.is_some() {
// if there's only one reference (weak or otherwise), we can just swap the values
if let Some(val) = Rc::get_mut(&mut hook.current_val) {
*val = new_val.take().unwrap();
} else {
hook.current_val = Rc::new(new_val.take().unwrap());
}
}
UseState(hook)
}

99
packages/hooks/src/usestate/owned.rs
View file

@ -1,99 +0,0 @@
use std::{
cell::{Cell, Ref, RefCell, RefMut},
fmt::{Debug, Display},
rc::Rc,
};
pub struct UseStateOwned<T: 'static> {
// this will always be outdated
pub(crate) current_val: Rc<T>,
pub(crate) wip: Rc<RefCell<Option<T>>>,
pub(crate) update_callback: Rc<dyn Fn()>,
pub(crate) update_scheuled: Cell<bool>,
}
impl<T> UseStateOwned<T> {
pub fn get(&self) -> Ref<Option<T>> {
self.wip.borrow()
}
pub fn set(&self, new_val: T) {
*self.wip.borrow_mut() = Some(new_val);
(self.update_callback)();
}
pub fn modify(&self) -> RefMut<Option<T>> {
(self.update_callback)();
self.wip.borrow_mut()
}
}
use std::ops::{Add, AddAssign, Div, DivAssign, Mul, MulAssign, Sub, SubAssign};
impl<T: Debug> Debug for UseStateOwned<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:?}", self.current_val)
}
}
// enable displaty for the handle
impl<'a, T: 'static + Display> std::fmt::Display for UseStateOwned<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{}", self.current_val)
}
}
impl<'a, T: Copy + Add<T, Output = T>> Add<T> for UseStateOwned<T> {
type Output = T;
fn add(self, rhs: T) -> Self::Output {
self.current_val.add(rhs)
}
}
impl<'a, T: Copy + Add<T, Output = T>> AddAssign<T> for UseStateOwned<T> {
fn add_assign(&mut self, rhs: T) {
self.set(self.current_val.add(rhs));
}
}
/// Sub
impl<'a, T: Copy + Sub<T, Output = T>> Sub<T> for UseStateOwned<T> {
type Output = T;
fn sub(self, rhs: T) -> Self::Output {
self.current_val.sub(rhs)
}
}
impl<'a, T: Copy + Sub<T, Output = T>> SubAssign<T> for UseStateOwned<T> {
fn sub_assign(&mut self, rhs: T) {
self.set(self.current_val.sub(rhs));
}
}
/// MUL
impl<'a, T: Copy + Mul<T, Output = T>> Mul<T> for UseStateOwned<T> {
type Output = T;
fn mul(self, rhs: T) -> Self::Output {
self.current_val.mul(rhs)
}
}
impl<'a, T: Copy + Mul<T, Output = T>> MulAssign<T> for UseStateOwned<T> {
fn mul_assign(&mut self, rhs: T) {
self.set(self.current_val.mul(rhs));
}
}
/// DIV
impl<'a, T: Copy + Div<T, Output = T>> Div<T> for UseStateOwned<T> {
type Output = T;
fn div(self, rhs: T) -> Self::Output {
self.current_val.div(rhs)
}
}
impl<'a, T: Copy + Div<T, Output = T>> DivAssign<T> for UseStateOwned<T> {
fn div_assign(&mut self, rhs: T) {
self.set(self.current_val.div(rhs));
}
}