wip: more examples

examples/slideshow.rs

@@ -0,0 +1,78 @@
+//! Example: Webview Renderer
+//! -------------------------
+//!
+//! This example shows how to use the dioxus_webview crate to build a basic desktop application.
+//!
+//! Under the hood, the dioxus_webview crate bridges a native Dioxus VirtualDom with a custom prebuit application running
+//! in the webview runtime. Custom handlers are provided for the webview instance to consume patches and emit user events
+//! into the native VDom instance.
+//!
+//! Currently, NodeRefs won't work properly, but all other event functionality will.
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(App, |c| c);
+}
+
+static App: FC<()> = |cx| {
+    let slide_id = use_state(cx, || 0);
+
+    let slide = match *slide_id {
+        0 => cx.render(rsx!(Title {})),
+        1 => cx.render(rsx!(Slide1 {})),
+        2 => cx.render(rsx!(Slide2 {})),
+        3 => cx.render(rsx!(Slide3 {})),
+        _ => cx.render(rsx!(End {})),
+    };
+
+    cx.render(rsx! {
+        div {
+            div {
+                div { h1 {"my awesome slideshow"} }
+                div {
+                    button {"<-", onclick: move |_| if *slide_id != 0 { *slide_id.get_mut() -= 1}}
+                    h3 { "{slide_id}" }
+                    button {"->" onclick: move |_| if *slide_id != 4 { *slide_id.get_mut() += 1 }}
+                 }
+            }
+            {slide}
+        }
+    })
+};
+
+const Title: FC<()> = |cx| {
+    cx.render(rsx! {
+        div {
+
+        }
+    })
+};
+const Slide1: FC<()> = |cx| {
+    cx.render(rsx! {
+        div {
+
+        }
+    })
+};
+const Slide2: FC<()> = |cx| {
+    cx.render(rsx! {
+        div {
+
+        }
+    })
+};
+const Slide3: FC<()> = |cx| {
+    cx.render(rsx! {
+        div {
+
+        }
+    })
+};
+const End: FC<()> = |cx| {
+    cx.render(rsx! {
+        div {
+
+        }
+    })
+};

examples/webview.rs

@@ -16,7 +16,7 @@ fn main() {
 }
 
 static App: FC<()> = |cx| {
-    let (count, set_count) = use_state_classic(cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
         div {
@@ -24,7 +24,7 @@ static App: FC<()> = |cx| {
             p { "Count is {count}" }
             button {
                 "Click to increment"
-                onclick: move |_| set_count(count + 1)
+                onclick: move |_| count += 1
             }
         }
     })

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);
         }
 

packages/webview/Cargo.toml

@@ -10,7 +10,6 @@ license = "MIT/Apache-2.0"
 
 [dependencies]
 # web-view = { git = "https://github.com/Boscop/web-view" }
-web-view = "0.7.3"
 dioxus-core = { path="../core", version="0.1.2", features=["serialize"] }
 anyhow = "1.0.38"
 argh = "0.1.4"
@@ -21,6 +20,10 @@ thiserror = "1.0.23"
 log = "0.4.13"
 fern = { version="0.6.0", features=["colored"] }
 
+tide = "0.15.0"
+tide-websockets = "0.3.0"
+html-escape = "0.2.9"
+
 # thiserror = "1.0.23"
 # log = "0.4.13"
 # fern = { version = "0.6.0", features = ["colored"] }
@@ -30,10 +33,7 @@ fern = { version="0.6.0", features=["colored"] }
 # serde = "1.0.120"
 # serde_json = "1.0.61"
 # async-std = { version = "1.9.0", features = ["attributes"] }
-tide = "0.15.0"
-tide-websockets = "0.3.0"
-html-escape = "0.2.9"
-# wry = "0.10.3"
+wry = "0.10.3"
 
 
 [build-dependencies]

packages/webview/build.rs

@@ -1,5 +0,0 @@
-// todo
-// build the .wasm bundle directly from this build script
-// the bundle should never change (and not be linked to user code)]
-
-fn main() {}