diff --git a/examples/slideshow.rs b/examples/slideshow.rs new file mode 100644 index 000000000..c99e58255 --- /dev/null +++ b/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 { + + } + }) +}; diff --git a/examples/webview.rs b/examples/webview.rs index 55e1d1b86..4d962fd6f 100644 --- a/examples/webview.rs +++ b/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 } } }) diff --git a/packages/core/src/events.rs b/packages/core/src/events.rs index 46d167dd4..d630f56c2 100644 --- a/packages/core/src/events.rs +++ b/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 { diff --git a/packages/core/src/hooks.rs b/packages/core/src/hooks.rs index b861a8c0e..78f90ba57 100644 --- a/packages/core/src/hooks.rs +++ b/packages/core/src/hooks.rs @@ -86,75 +86,114 @@ use std::{ pin::Pin, }; -pub struct UseState { - current_val: T, - callback: Rc, - wip: RefCell>, +pub struct UseState<'a, T: 'static> { + inner: &'a UseStateInner, +} +impl Copy for UseState<'_, T> {} +impl<'a, T> Clone for UseState<'a, T> +where + T: 'static, +{ + fn clone(&self) -> Self { + UseState { inner: self.inner } + } } -impl UseState { +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> { - self.wip.borrow() + self.inner.wip.borrow() } } -impl<'a, T: 'static + ToOwned> UseState { - pub fn get_mut<'r>(&'r self) -> RefMut<'r, T> { +impl<'a, T: 'static + ToOwned> 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 { +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> Add 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> AddAssign 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 { +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 { + current_val: T, + callback: Rc, + wip: RefCell>, +} /// 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! { ///
@@ -168,9 +207,9 @@ impl<'a, T: 'static + Display> std::fmt::Display for UseState { pub fn use_state<'a, 'c, T: 'static, F: FnOnce() -> T, P>( cx: Context<'a, P>, initial_state_fn: F, -) -> &'a UseState { +) -> UseState { 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 } }, |_| {}, ) diff --git a/packages/core/src/nodebuilder.rs b/packages/core/src/nodebuilder.rs index fa551ffd8..f74e12102 100644 --- a/packages/core/src/nodebuilder.rs +++ b/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 diff --git a/packages/core/src/nodes.rs b/packages/core/src/nodes.rs index 5839eabca..e4c25b129 100644 --- a/packages/core/src/nodes.rs +++ b/packages/core/src/nodes.rs @@ -267,7 +267,7 @@ pub struct Listener<'bump> { pub mounted_node: &'bump Cell, /// 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. diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 5e3fe3888..55a2ce3c9 100644 --- a/packages/core/src/virtual_dom.rs +++ b/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, *const dyn Fn(VirtualEvent))>>, + pub(crate) listeners: RefCell, *mut dyn FnMut(VirtualEvent))>>, pub(crate) suspended_tasks: Vec>>>, - // pub(crate) listeners: RefCell>, - // pub(crate) listeners: RefCell>, - // pub(crate) listeners: RefCell>, - // NoHashMap - // pub(crate) listeners: RefCell> + // pub(crate) listeners: RefCell>, + // pub(crate) listeners: RefCell>, + // pub(crate) listeners: RefCell>, + // NoHashMap + // pub(crate) listeners: RefCell> } // 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); } diff --git a/packages/webview/Cargo.toml b/packages/webview/Cargo.toml index edf541971..18fd276c3 100644 --- a/packages/webview/Cargo.toml +++ b/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] diff --git a/packages/webview/build.rs b/packages/webview/build.rs deleted file mode 100644 index ad97526af..000000000 --- a/packages/webview/build.rs +++ /dev/null @@ -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() {}