From 4c8130c4e48a4f0eaef53c696154958d6e0ec6f2 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Mon, 17 May 2021 17:59:10 -0400 Subject: [PATCH] Feat: about to consolidate context and scope --- examples/README.md | 4 ++- examples/external_updates.rs | 38 +++++++++++++++++++++++++++++ examples/router.rs | 33 ++++++++++++++++++++++++- packages/core/src/virtual_dom.rs | 42 ++++++++++++++++++++++++++------ packages/recoil/README.md | 28 +++++++++++++++++++++ 5 files changed, 136 insertions(+), 9 deletions(-) create mode 100644 examples/external_updates.rs create mode 100644 packages/recoil/README.md diff --git a/examples/README.md b/examples/README.md index f8dc7fb25..8a22b3c05 100644 --- a/examples/README.md +++ b/examples/README.md @@ -1 +1,3 @@ -# Hello examples +# Examples + +Most of these examples are run through webview so you don't need the dioxus cli installed to preview the functionality. Anything labeled `_web` will need to be compiled with Dioxus CLI. diff --git a/examples/external_updates.rs b/examples/external_updates.rs new file mode 100644 index 000000000..44796bf75 --- /dev/null +++ b/examples/external_updates.rs @@ -0,0 +1,38 @@ +//! Example: External Updates +//! ------------------------- +//! Cause updates to the VirtualDOM state from outside the component lifecycle. +//! The root props could be changed or the use_receiver hook could be used. +//! +//! + +fn main() { + let (recv, sender) = channel(); + + async_std::task::spawn({ + for location in ["a", "b", "c", "d"] { + sender.send(location); + } + }); + + let app = diouxs_webview::launch_with_props(App, RootProps { recv }).await; +} + +struct RootProps { + navigator: Receiver<&'static str>, +} + +fn App(ctx: Context, props: &RootProps) -> DomTree { + let router = use_router(&ctx, |router| {}); + + let navigator = use_history(&ctx); + + use_receiver(&ctx, || props.recv.clone(), |to| navigator.navigate(to)); + + ctx.render(rsx! { + div { + a { href="/dogs/"} + a { href="/cats/"} + {content} + } + }) +} diff --git a/examples/router.rs b/examples/router.rs index 7f09b872a..f4f690dbf 100644 --- a/examples/router.rs +++ b/examples/router.rs @@ -8,4 +8,35 @@ use dioxus::prelude::*; -fn main() {} +fn main() { + diouxs_webview::launch(App).run().await +} + +fn App(ctx: Context, props: &()) -> DomTree { + let router = use_router(&ctx, |router| { + // + router.get("/dogs/:dogId/").render(|ctx, request| { + rsx! { + div { + + } + } + }); + + router.get("/cats/:catId/").render(|ctx, request| { + rsx! { + div { + + } + } + }); + }); + + ctx.render(rsx! { + div { + a { href="/dogs/"} + a { href="/cats/"} + {router.render()} + } + }) +} diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 769f2a8c8..c84a506db 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -22,9 +22,9 @@ use crate::{arena::ScopeArena, innerlude::*}; use bumpalo::Bump; use generational_arena::Arena; use std::{ - any::TypeId, + any::{Any, TypeId}, cell::{RefCell, UnsafeCell}, - collections::HashSet, + collections::{HashMap, HashSet}, fmt::Debug, future::Future, pin::Pin, @@ -50,6 +50,10 @@ pub struct VirtualDom { /// All components dump their updates into a queue to be processed pub(crate) event_queue: EventQueue, + /// Global contexts shared within the VirtualDOM + /// These are anchored to individual scopes, making them inaccessible if a context is created from a sibiling + pub(crate) contexts: HashMap>, + /// a strong allocation to the "caller" for the original component and its props #[doc(hidden)] _root_caller: Rc>, @@ -152,6 +156,7 @@ impl VirtualDom { _root_caller, base_scope, event_queue, + contexts: Default::default(), components: ScopeArena::new(components), _root_prop_type: TypeId::of::

(), } @@ -720,8 +725,6 @@ impl<'a> Context<'a> { todo!("Children API not yet implemented for component Context") } - pub fn callback(&self, _f: impl Fn(()) + 'a) {} - /// Create a subscription that schedules a future render for the reference component pub fn schedule_update(&self) -> impl Fn() -> () { self.scope.event_queue.schedule_update(&self.scope) @@ -763,12 +766,15 @@ impl<'scope> Context<'scope> { idx: 0.into(), }; - let safe_nodes: VNode<'scope> = lazy_nodes.into_vnode(&ctx); - let root: VNode<'static> = unsafe { std::mem::transmute(safe_nodes) }; - DomTree { root } + DomTree { + root: unsafe { + std::mem::transmute::, VNode<'static>>(lazy_nodes.into_vnode(&ctx)) + }, + } } } +// We need to pin the hook so it doesn't move as we initialize the list of hooks type Hook = Pin>; impl<'scope> Context<'scope> { @@ -833,6 +839,16 @@ impl<'scope> Context<'scope> { // We extend the lifetime of the internal state runner(unsafe { &mut *(internal_state as *mut _) }) } + + fn create_context_provider(&self, init: impl Fn() -> T) {} + + fn try_consume_context(&self) -> Result<&T> { + todo!() + } + + fn consume_context(&self) -> &T { + self.try_consume_context().unwrap() + } } mod support { @@ -894,6 +910,18 @@ mod support { Ok(()) } } + + #[derive(Debug, PartialEq, Hash)] + pub struct ContextId { + // Which component is the scope in + original: ScopeIdx, + + // What's the height of the scope + height: u32, + + // Which scope is it (in order) + id: u32, + } } mod tests { diff --git a/packages/recoil/README.md b/packages/recoil/README.md new file mode 100644 index 000000000..8d32bf73a --- /dev/null +++ b/packages/recoil/README.md @@ -0,0 +1,28 @@ +# Recoil.rs +Recoil.rs provides a global state management API for Dioxus apps built on the concept of "atomic state." Instead of grouping state together into a single bundle ALA Redux, Recoil provides individual building blocks of state called Atoms. These atoms can be set/get anywhere in the app and combined to craft complex state. Recoil should be easier to learn and more efficient than Redux. Recoil.rs is modeled after the Recoil.JS project and pulls in + + +## Guide + +A simple atom of state is defined globally as a const: + +```rust +static Light: Atom<&'static str> = atom(|_| "Green"); +``` + +This atom of state is initialized with a value of `"Green"`. The atom that is returned does not actually contain any values. Instead, the atom's key - which is automatically generated in this instance - is used in the context of a Recoil App. + +This is then later used in components like so: + +```rust +fn App(ctx: Context, props: &()) -> DomTree { + // The recoil root must be initialized at the top of the application before any uses + recoil::init_recoil_root(&ctx, |_| {}); + + let color = use_recoil(&ctx, &TITLE); + + ctx.render(rsx!{ + h1 {"Color of light: {color}"} + }) +} +```