wip: more examples

packages/core/src/hooks.rs

@@ -86,75 +86,114 @@ use std::{
     pin::Pin,
 };
 
-pub struct UseState<T: 'static> {
-    current_val: T,
-    callback: Rc<dyn Fn()>,
-    wip: RefCell<Option<T>>,
+pub struct UseState<'a, T: 'static> {
+    inner: &'a UseStateInner<T>,
+}
+impl<T> Copy for UseState<'_, T> {}
+impl<'a, T> Clone for UseState<'a, T>
+where
+    T: 'static,
+{
+    fn clone(&self) -> Self {
+        UseState { inner: self.inner }
+    }
 }
 
-impl<T: 'static> UseState<T> {
+impl<'a, T: 'static> UseState<'a, T> {
     /// Tell the Dioxus Scheduler that we need to be processed
     pub fn needs_update(&self) {
-        (self.callback)();
+        (self.inner.callback)();
     }
 
     pub fn set(&self, new_val: T) {
         self.needs_update();
-        *self.wip.borrow_mut() = Some(new_val);
+        *self.inner.wip.borrow_mut() = Some(new_val);
     }
 
     pub fn get(&self) -> &T {
-        &self.current_val
+        &self.inner.current_val
     }
 
     /// Get the current status of the work-in-progress data
     pub fn get_wip(&self) -> Ref<Option<T>> {
-        self.wip.borrow()
+        self.inner.wip.borrow()
     }
 }
-impl<'a, T: 'static + ToOwned<Owned = T>> UseState<T> {
-    pub fn get_mut<'r>(&'r self) -> RefMut<'r, T> {
+impl<'a, T: 'static + ToOwned<Owned = T>> UseState<'a, T> {
+    pub fn get_mut(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.wip.borrow_mut(), |slot| {
+        RefMut::map(self.inner.wip.borrow_mut(), |slot| {
             if slot.is_none() {
-                *slot = Some(self.current_val.to_owned());
+                *slot = Some(self.inner.current_val.to_owned());
             }
             slot.as_mut().unwrap()
         })
     }
 }
 
-impl<'a, T: 'static> std::ops::Deref for UseState<T> {
+impl<'a, T: 'static> std::ops::Deref for UseState<'a, T> {
     type Target = T;
 
     fn deref(&self) -> &Self::Target {
-        &self.current_val
+        &self.inner.current_val
+    }
+}
+
+use std::ops::{Add, AddAssign};
+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.inner.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.inner.current_val.add(rhs));
     }
 }
 
 // enable displaty for the handle
-impl<'a, T: 'static + Display> std::fmt::Display for UseState<T> {
+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.current_val)
+        write!(f, "{}", self.inner.current_val)
     }
 }
+struct UseStateInner<T: 'static> {
+    current_val: T,
+    callback: Rc<dyn Fn()>,
+    wip: RefCell<Option<T>>,
+}
 
 /// Store state between component renders!
-/// When called, this hook retrives a stored value and provides a setter to update that value.
-/// When the setter is called, the component is re-ran with the new value.
 ///
-/// This is behaves almost exactly the same way as React's "use_state".
+/// ## The "King" of state hooks
+///
+/// The Dioxus version of `useState` is the "king daddy" of state management. 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.
+///
 ///
 /// Usage:
 /// ```ignore
-/// static Example: FC<()> = |cx| {
-///     let (counter, set_counter) = use_state(cx, || 0);
-///     let increment = |_| set_couter(counter + 1);
-///     let decrement = |_| set_couter(counter + 1);
+/// const Example: FC<()> = |cx| {
+///     let counter = use_state(cx, || 0);
+///     let increment = |_| counter += 1;
+///     let decrement = |_| counter += 1;
 ///
 ///     html! {
 ///         <div>
@@ -168,9 +207,9 @@ impl<'a, T: 'static + Display> std::fmt::Display for UseState<T> {
 pub fn use_state<'a, 'c, T: 'static, F: FnOnce() -> T, P>(
     cx: Context<'a, P>,
     initial_state_fn: F,
-) -> &'a UseState<T> {
+) -> UseState<T> {
     cx.use_hook(
-        move || UseState {
+        move || UseStateInner {
             current_val: initial_state_fn(),
             callback: cx.schedule_update(),
             wip: RefCell::new(None),
@@ -182,7 +221,7 @@ pub fn use_state<'a, 'c, T: 'static, F: FnOnce() -> T, P>(
                 hook.current_val = new_val.take().unwrap();
             }
 
-            &*hook
+            UseState { inner: &*hook }
         },
         |_| {},
     )