dnrops
/
dioxuslab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: more examples

This commit is contained in:
Jonathan Kelley 2021-07-08 10:17:51 -04:00
parent e4cdb645aa
commit 2547da36a0
9 changed files with 166 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
examples/slideshow.rs Normal file
View File

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

4
examples/webview.rs
View File

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

2
packages/core/src/events.rs
View File

@ -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 {

93
packages/core/src/hooks.rs
View File

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

11
packages/core/src/nodebuilder.rs
View File

@ -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

2
packages/core/src/nodes.rs
View File

@ -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.

16
packages/core/src/virtual_dom.rs
View File

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

10
packages/webview/Cargo.toml
View File

@ -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]

5
packages/webview/build.rs
View File

@ -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() {}