wip: more examples

packages/core/src/events.rs

@@ -151,7 +151,7 @@ pub mod on {
                     $(#[$method_attr])*
                     pub fn $name<'a>(
                         c: NodeFactory<'a>,
-                        callback: impl Fn($wrapper) + 'a,
+                        mut callback: impl FnMut($wrapper) + 'a,
                     ) -> Listener<'a> {
                         let bump = &c.bump();
                         Listener {

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 }
         },
         |_| {},
     )

packages/core/src/nodebuilder.rs

@@ -359,7 +359,7 @@ where
     ///     })
     ///     .finish();
     /// ```
-    pub fn on(self, event: &'static str, callback: impl Fn(VirtualEvent) + 'a) -> Self {
+    pub fn on(self, event: &'static str, callback: impl FnMut(VirtualEvent) + 'a) -> Self {
         let bump = &self.cx.bump();
         let listener = Listener {
             event,
@@ -382,11 +382,10 @@ where
         // This is okay because the bump arena is stable
         self.listeners.last().map(|g| {
             let r = unsafe { std::mem::transmute::<&Listener<'a>, &Listener<'static>>(g) };
-            self.cx
-                .scope_ref
-                .listeners
-                .borrow_mut()
-                .push((r.mounted_node as *const _, r.callback as *const _));
+            self.cx.scope_ref.listeners.borrow_mut().push((
+                r.mounted_node as *const _ as *mut _,
+                r.callback as *const _ as *mut _,
+            ));
         });
 
         self

packages/core/src/nodes.rs

@@ -267,7 +267,7 @@ pub struct Listener<'bump> {
     pub mounted_node: &'bump Cell<RealDomNode>,
 
     /// The callback to invoke when the event happens.
-    pub(crate) callback: &'bump dyn Fn(VirtualEvent),
+    pub(crate) callback: &'bump dyn FnMut(VirtualEvent),
 }
 
 /// The key for keyed children.

packages/core/src/virtual_dom.rs

@@ -399,14 +399,14 @@ pub struct Scope {
     // - is self-refenrential and therefore needs to point into the bump
     // Stores references into the listeners attached to the vnodes
     // NEEDS TO BE PRIVATE
-    pub(crate) listeners: RefCell<Vec<(*const Cell<RealDomNode>, *const dyn Fn(VirtualEvent))>>,
+    pub(crate) listeners: RefCell<Vec<(*mut Cell<RealDomNode>, *mut dyn FnMut(VirtualEvent))>>,
 
     pub(crate) suspended_tasks: Vec<Box<dyn Future<Output = VNode<'static>>>>,
-    // pub(crate) listeners: RefCell<nohash_hasher::IntMap<u32, *const dyn Fn(VirtualEvent)>>,
-    // pub(crate) listeners: RefCell<Vec<*const dyn Fn(VirtualEvent)>>,
-    // pub(crate) listeners: RefCell<Vec<*const dyn Fn(VirtualEvent)>>,
-    // NoHashMap<RealDomNode, <*const dyn Fn(VirtualEvent)>
-    // pub(crate) listeners: RefCell<Vec<*const dyn Fn(VirtualEvent)>>
+    // pub(crate) listeners: RefCell<nohash_hasher::IntMap<u32, *const dyn FnMut(VirtualEvent)>>,
+    // pub(crate) listeners: RefCell<Vec<*const dyn FnMut(VirtualEvent)>>,
+    // pub(crate) listeners: RefCell<Vec<*const dyn FnMut(VirtualEvent)>>,
+    // NoHashMap<RealDomNode, <*const dyn FnMut(VirtualEvent)>
+    // pub(crate) listeners: RefCell<Vec<*const dyn FnMut(VirtualEvent)>>
 }
 
 // We need to pin the hook so it doesn't move as we initialize the list of hooks
@@ -550,7 +550,7 @@ impl Scope {
         // This operation is assumed to be safe
 
         log::debug!("Calling listeners! {:?}", self.listeners.borrow().len());
-        let listners = self.listeners.borrow();
+        let mut listners = self.listeners.borrow_mut();
         let (_, listener) = listners
             .iter()
             .find(|(domptr, _)| {
@@ -564,7 +564,7 @@ impl Scope {
 
         // TODO: Don'tdo a linear scan! Do a hashmap lookup! It'll be faster!
         unsafe {
-            let listener_fn = &**listener;
+            let mut listener_fn = &mut **listener;
             listener_fn(event);
         }