dioxus/packages/hooks/src/usestate.rs
Miles Murgaw 6210c6fefe
Convert use_eval to use send/recv system (#1080)
* progress: reworked

don't run this, it'll kill your web browser

* feat: use_eval but with comms

* revision: async recv & recv_sync

* revision: use_eval

* revision: standard eval interface

* revision: use serde_json::Value instead of JsValue

* revision: docs

* revision: error message

* create: desktop eval (wip)

* fix: desktop eval

* revision: wrap use_eval in Rc<RefCell<_>>

* fix: fmt, clippy

* fix: desktop tests

* revision: change to channel system

- fixes clippy errors
- fixes playwright tests

* fix: tests

* fix: eval example

* fix: fmt

* fix: tests, desktop stuff

* fix: tests

* feat: drop handler

* fix: tests

* fix: rustfmt

* revision: web promise/callback system

* fix: recv error

* revision: IntoFuture, functionation

* fix: ci

* revision: playwright web

* remove: unescessary code

* remove dioxus-html from public examples

* prototype-patch

* fix web eval

* fix: rustfmt

* fix: CI

* make use_eval more efficient

* implement eval for liveview as well

* fix playwright tests

* fix clippy

* more clippy fixes

* fix clippy

* fix stack overflow

* fix desktop mock

* fix clippy

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
2023-07-21 17:36:25 -05:00

480 lines
13 KiB
Rust

#![warn(clippy::pedantic)]
use dioxus_core::prelude::*;
use std::{
cell::{RefCell, RefMut},
fmt::{Debug, Display},
ops::{Add, Div, Mul, Not, Sub},
rc::Rc,
sync::Arc,
};
/// 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 = use_state(cx, || 0);
///
/// cx.render(rsx! {
/// div {
/// h1 { "Count: {count}" }
/// button { onclick: move |_| *count.modify() += 1, "Increment" }
/// button { onclick: move |_| *count.modify() -= 1, "Decrement" }
/// }
/// ))
/// }
/// ```
pub fn use_state<T: 'static>(
cx: &ScopeState,
initial_state_fn: impl FnOnce() -> T,
) -> &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({
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 = hook.slot.borrow().clone();
hook
}
pub struct UseState<T: 'static> {
pub(crate) current_val: Rc<T>,
pub(crate) update_callback: Arc<dyn Fn()>,
pub(crate) setter: Rc<dyn Fn(T)>,
pub(crate) slot: Rc<RefCell<Rc<T>>>,
}
impl<T: 'static> UseState<T> {
/// Set the state to a new value.
pub fn set(&self, new: T) {
(self.setter)(new);
}
/// 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 = use_state(cx, || 0);
/// cx.spawn({
/// let set_count = 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` on the state is the
/// preferred way to get "another" state 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 = use_state(cx, || 0);
///
/// rsx!{
/// Component {
/// handler: value.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, ignore
/// # use dioxus_core::prelude::*;
/// # use dioxus_hooks::*;
/// fn component(cx: Scope) -> Element {
/// let value = use_state(cx, || 0);
///
/// // to increment the value
/// value.modify(|v| v + 1);
///
/// // usage in async
/// cx.spawn({
/// let value = value.to_owned();
/// async move {
/// value.modify(|v| v + 1);
/// }
/// });
///
/// # todo!()
/// }
/// ```
pub fn modify(&self, f: impl FnOnce(&T) -> T) {
let new_val = {
let current = self.slot.borrow();
f(current.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 = use_state(cx, || 0);
///
/// let as_rc = value.get();
/// assert_eq!(as_rc.as_ref(), &0);
///
/// # todo!()
/// }
/// ```
#[must_use]
pub fn get(&self) -> &T {
&self.current_val
}
#[must_use]
pub fn get_rc(&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 = use_state(cx, || 0);
/// cx.spawn({
/// let count = count.to_owned();
/// async move {
/// // for the component to re-render
/// 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
///
/// ```rust, ignore
/// let val = use_state(cx, || 0);
///
/// 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
///
/// ```rust, ignore
/// let val = use_state(cx, || 0);
///
/// *val.make_mut() += 1;
/// ```
#[must_use]
#[allow(clippy::missing_panics_doc)]
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"))
}
/// Convert this handle to a tuple of the value and the handle itself.
#[must_use]
pub fn split(&self) -> (&T, &Self) {
(&self.current_val, self)
}
}
impl<T: 'static> Clone for UseState<T> {
fn clone(&self) -> Self {
UseState {
current_val: self.current_val.clone(),
update_callback: self.update_callback.clone(),
setter: self.setter.clone(),
slot: self.slot.clone(),
}
}
}
impl<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: std::fmt::Binary> std::fmt::Binary for UseState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:b}", self.current_val.as_ref())
}
}
impl<T: PartialEq> PartialEq<T> for UseState<T> {
fn eq(&self, other: &T) -> bool {
self.current_val.as_ref() == other
}
}
// todo: this but for more interesting conrete types
impl PartialEq<bool> for &UseState<bool> {
fn eq(&self, other: &bool) -> bool {
self.current_val.as_ref() == other
}
}
impl<T> PartialEq<UseState<T>> for UseState<T> {
fn eq(&self, other: &UseState<T>) -> bool {
Rc::ptr_eq(&self.current_val, &other.current_val)
}
}
impl<T: Debug> Debug for UseState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:?}", self.current_val)
}
}
impl<T> std::ops::Deref for UseState<T> {
type Target = T;
fn deref(&self) -> &Self::Target {
self.current_val.as_ref()
}
}
impl<T: Not + Copy> std::ops::Not for &UseState<T> {
type Output = <T as std::ops::Not>::Output;
fn not(self) -> Self::Output {
self.current_val.not()
}
}
impl<T: Not + Copy> std::ops::Not for UseState<T> {
type Output = <T as std::ops::Not>::Output;
fn not(self) -> Self::Output {
self.current_val.not()
}
}
impl<T: std::ops::Add + Copy> std::ops::Add<T> for &UseState<T> {
type Output = <T as std::ops::Add>::Output;
fn add(self, other: T) -> Self::Output {
*self.current_val.as_ref() + other
}
}
impl<T: std::ops::Sub + Copy> std::ops::Sub<T> for &UseState<T> {
type Output = <T as std::ops::Sub>::Output;
fn sub(self, other: T) -> Self::Output {
*self.current_val.as_ref() - other
}
}
impl<T: std::ops::Div + Copy> std::ops::Div<T> for &UseState<T> {
type Output = <T as std::ops::Div>::Output;
fn div(self, other: T) -> Self::Output {
*self.current_val.as_ref() / other
}
}
impl<T: std::ops::Mul + Copy> std::ops::Mul<T> for &UseState<T> {
type Output = <T as std::ops::Mul>::Output;
fn mul(self, other: T) -> Self::Output {
*self.current_val.as_ref() * other
}
}
impl<T: Add<Output = T> + Copy> std::ops::AddAssign<T> for &UseState<T> {
fn add_assign(&mut self, rhs: T) {
self.set((*self.current()) + rhs);
}
}
impl<T: Sub<Output = T> + Copy> std::ops::SubAssign<T> for &UseState<T> {
fn sub_assign(&mut self, rhs: T) {
self.set((*self.current()) - rhs);
}
}
impl<T: Mul<Output = T> + Copy> std::ops::MulAssign<T> for &UseState<T> {
fn mul_assign(&mut self, rhs: T) {
self.set((*self.current()) * rhs);
}
}
impl<T: Div<Output = T> + Copy> std::ops::DivAssign<T> for &UseState<T> {
fn div_assign(&mut self, rhs: T) {
self.set((*self.current()) / rhs);
}
}
impl<T: Add<Output = T> + Copy> std::ops::AddAssign<T> for UseState<T> {
fn add_assign(&mut self, rhs: T) {
self.set((*self.current()) + rhs);
}
}
impl<T: Sub<Output = T> + Copy> std::ops::SubAssign<T> for UseState<T> {
fn sub_assign(&mut self, rhs: T) {
self.set((*self.current()) - rhs);
}
}
impl<T: Mul<Output = T> + Copy> std::ops::MulAssign<T> for UseState<T> {
fn mul_assign(&mut self, rhs: T) {
self.set((*self.current()) * rhs);
}
}
impl<T: Div<Output = T> + Copy> std::ops::DivAssign<T> for UseState<T> {
fn div_assign(&mut self, rhs: T) {
self.set((*self.current()) / rhs);
}
}
#[test]
fn api_makes_sense() {
#[allow(unused)]
fn app(cx: Scope) -> Element {
let val = use_state(cx, || 0);
val.set(0);
val.modify(|v| v + 1);
let real_current = val.current();
match val.get() {
10 => {
val.set(20);
val.modify(|v| v + 1);
}
20 => {}
_ => {
println!("{real_current}");
}
}
cx.spawn({
to_owned![val];
async move {
val.modify(|f| f + 1);
}
});
// cx.render(LazyNodes::new(|f| f.static_text("asd")))
todo!()
}
}