浏览代码

Feat: about to consolidate context and scope

Jonathan Kelley 4 年之前
父节点
当前提交
4c8130c4e4
共有 5 个文件被更改,包括 136 次插入9 次删除
  1. 3 1
      examples/README.md
  2. 38 0
      examples/external_updates.rs
  3. 32 1
      examples/router.rs
  4. 35 7
      packages/core/src/virtual_dom.rs
  5. 28 0
      packages/recoil/README.md

+ 3 - 1
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.

+ 38 - 0
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}
+        }
+    })
+}

+ 32 - 1
examples/router.rs

@@ -8,4 +8,35 @@
 
 
 use dioxus::prelude::*;
 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()}
+        }
+    })
+}

+ 35 - 7
packages/core/src/virtual_dom.rs

@@ -22,9 +22,9 @@ use crate::{arena::ScopeArena, innerlude::*};
 use bumpalo::Bump;
 use bumpalo::Bump;
 use generational_arena::Arena;
 use generational_arena::Arena;
 use std::{
 use std::{
-    any::TypeId,
+    any::{Any, TypeId},
     cell::{RefCell, UnsafeCell},
     cell::{RefCell, UnsafeCell},
-    collections::HashSet,
+    collections::{HashMap, HashSet},
     fmt::Debug,
     fmt::Debug,
     future::Future,
     future::Future,
     pin::Pin,
     pin::Pin,
@@ -50,6 +50,10 @@ pub struct VirtualDom {
     /// All components dump their updates into a queue to be processed
     /// All components dump their updates into a queue to be processed
     pub(crate) event_queue: EventQueue,
     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<ContextId, Box<dyn Any>>,
+
     /// a strong allocation to the "caller" for the original component and its props
     /// a strong allocation to the "caller" for the original component and its props
     #[doc(hidden)]
     #[doc(hidden)]
     _root_caller: Rc<OpaqueComponent<'static>>,
     _root_caller: Rc<OpaqueComponent<'static>>,
@@ -152,6 +156,7 @@ impl VirtualDom {
             _root_caller,
             _root_caller,
             base_scope,
             base_scope,
             event_queue,
             event_queue,
+            contexts: Default::default(),
             components: ScopeArena::new(components),
             components: ScopeArena::new(components),
             _root_prop_type: TypeId::of::<P>(),
             _root_prop_type: TypeId::of::<P>(),
         }
         }
@@ -720,8 +725,6 @@ impl<'a> Context<'a> {
         todo!("Children API not yet implemented for component Context")
         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
     /// Create a subscription that schedules a future render for the reference component
     pub fn schedule_update(&self) -> impl Fn() -> () {
     pub fn schedule_update(&self) -> impl Fn() -> () {
         self.scope.event_queue.schedule_update(&self.scope)
         self.scope.event_queue.schedule_update(&self.scope)
@@ -763,12 +766,15 @@ impl<'scope> Context<'scope> {
             idx: 0.into(),
             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<'scope>, 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<Box<dyn std::any::Any>>;
 type Hook = Pin<Box<dyn std::any::Any>>;
 
 
 impl<'scope> Context<'scope> {
 impl<'scope> Context<'scope> {
@@ -833,6 +839,16 @@ impl<'scope> Context<'scope> {
         // We extend the lifetime of the internal state
         // We extend the lifetime of the internal state
         runner(unsafe { &mut *(internal_state as *mut _) })
         runner(unsafe { &mut *(internal_state as *mut _) })
     }
     }
+
+    fn create_context_provider<T: 'static>(&self, init: impl Fn() -> T) {}
+
+    fn try_consume_context<T: 'static>(&self) -> Result<&T> {
+        todo!()
+    }
+
+    fn consume_context<T: 'static>(&self) -> &T {
+        self.try_consume_context().unwrap()
+    }
 }
 }
 
 
 mod support {
 mod support {
@@ -894,6 +910,18 @@ mod support {
             Ok(())
             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 {
 mod tests {

+ 28 - 0
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}"}
+    })
+}
+```