mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-26 22:20:19 +00:00
Feat: introduce children for walking down the tree
This commit is contained in:
parent
24805a02f6
commit
0d44f009b0
7 changed files with 165 additions and 77 deletions
|
@ -29,12 +29,20 @@ impl ScopeArena {
|
||||||
})))
|
})))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// THIS METHOD IS CURRENTLY UNSAFE
|
||||||
|
/// THERE ARE NO CHECKS TO VERIFY THAT WE ARE ALLOWED TO DO THIS
|
||||||
pub fn try_get(&self, idx: ScopeIdx) -> Result<&Scope> {
|
pub fn try_get(&self, idx: ScopeIdx) -> Result<&Scope> {
|
||||||
todo!()
|
let inner = unsafe { &*self.0.borrow().arena.get() };
|
||||||
|
let scope = inner.get(idx);
|
||||||
|
scope.ok_or_else(|| Error::FatalInternal("Scope not found"))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// THIS METHOD IS CURRENTLY UNSAFE
|
||||||
|
/// THERE ARE NO CHECKS TO VERIFY THAT WE ARE ALLOWED TO DO THIS
|
||||||
pub fn try_get_mut(&self, idx: ScopeIdx) -> Result<&mut Scope> {
|
pub fn try_get_mut(&self, idx: ScopeIdx) -> Result<&mut Scope> {
|
||||||
todo!()
|
let inner = unsafe { &mut *self.0.borrow().arena.get() };
|
||||||
|
let scope = inner.get_mut(idx);
|
||||||
|
scope.ok_or_else(|| Error::FatalInternal("Scope not found"))
|
||||||
}
|
}
|
||||||
|
|
||||||
fn inner(&self) -> &Arena<Scope> {
|
fn inner(&self) -> &Arena<Scope> {
|
||||||
|
@ -45,8 +53,12 @@ impl ScopeArena {
|
||||||
todo!()
|
todo!()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// THIS METHOD IS CURRENTLY UNSAFE
|
||||||
|
/// THERE ARE NO CHECKS TO VERIFY THAT WE ARE ALLOWED TO DO THIS
|
||||||
pub fn with<T>(&self, f: impl FnOnce(&mut Arena<Scope>) -> T) -> Result<T> {
|
pub fn with<T>(&self, f: impl FnOnce(&mut Arena<Scope>) -> T) -> Result<T> {
|
||||||
todo!()
|
let inner = unsafe { &mut *self.0.borrow().arena.get() };
|
||||||
|
Ok(f(inner))
|
||||||
|
// todo!()
|
||||||
}
|
}
|
||||||
|
|
||||||
unsafe fn inner_unchecked<'s>() -> &'s mut Arena<Scope> {
|
unsafe fn inner_unchecked<'s>() -> &'s mut Arena<Scope> {
|
||||||
|
|
|
@ -81,7 +81,7 @@ pub mod on {
|
||||||
Listener {
|
Listener {
|
||||||
event: stringify!($name),
|
event: stringify!($name),
|
||||||
id: *c.listener_id.borrow(),
|
id: *c.listener_id.borrow(),
|
||||||
scope: c.scope_ref.myidx,
|
scope: c.scope_ref.arena_idx,
|
||||||
callback: bump.alloc(move |evt: VirtualEvent| match evt {
|
callback: bump.alloc(move |evt: VirtualEvent| match evt {
|
||||||
VirtualEvent::$eventdata(event) => callback(event),
|
VirtualEvent::$eventdata(event) => callback(event),
|
||||||
_ => {
|
_ => {
|
||||||
|
|
|
@ -342,7 +342,7 @@ where
|
||||||
event,
|
event,
|
||||||
callback: bump.alloc(callback),
|
callback: bump.alloc(callback),
|
||||||
id: *self.ctx.listener_id.borrow(),
|
id: *self.ctx.listener_id.borrow(),
|
||||||
scope: self.ctx.scope_ref.myidx,
|
scope: self.ctx.scope_ref.arena_idx,
|
||||||
};
|
};
|
||||||
self.add_listener(listener)
|
self.add_listener(listener)
|
||||||
}
|
}
|
||||||
|
|
|
@ -277,13 +277,13 @@ impl VirtualDom {
|
||||||
// Start a new mutable borrow to components
|
// Start a new mutable borrow to components
|
||||||
// We are guaranteeed that this scope is unique because we are tracking which nodes have modified
|
// We are guaranteeed that this scope is unique because we are tracking which nodes have modified
|
||||||
|
|
||||||
let component = self.components.try_get_mut(update.idx).unwrap();
|
let mut cur_component = self.components.try_get_mut(update.idx).unwrap();
|
||||||
|
|
||||||
component.run_scope()?;
|
cur_component.run_scope()?;
|
||||||
|
|
||||||
diff_machine.diff_node(component.old_frame(), component.next_frame());
|
diff_machine.diff_node(cur_component.old_frame(), cur_component.next_frame());
|
||||||
|
|
||||||
cur_height = component.height;
|
cur_height = cur_component.height;
|
||||||
|
|
||||||
log::debug!(
|
log::debug!(
|
||||||
"Processing update: {:#?} with height {}",
|
"Processing update: {:#?} with height {}",
|
||||||
|
@ -315,7 +315,7 @@ impl VirtualDom {
|
||||||
Scope::new(
|
Scope::new(
|
||||||
caller,
|
caller,
|
||||||
f,
|
f,
|
||||||
None,
|
Some(cur_component.arena_idx),
|
||||||
cur_height + 1,
|
cur_height + 1,
|
||||||
self.event_queue.clone(),
|
self.event_queue.clone(),
|
||||||
self.components.clone(),
|
self.components.clone(),
|
||||||
|
@ -323,20 +323,23 @@ impl VirtualDom {
|
||||||
})
|
})
|
||||||
})?;
|
})?;
|
||||||
|
|
||||||
|
cur_component.children.borrow_mut().insert(idx);
|
||||||
|
|
||||||
// Grab out that component
|
// Grab out that component
|
||||||
let component = self.components.try_get_mut(idx).unwrap();
|
let new_component = self.components.try_get_mut(idx).unwrap();
|
||||||
|
|
||||||
// Actually initialize the caller's slot with the right address
|
// Actually initialize the caller's slot with the right address
|
||||||
*stable_scope_addr.upgrade().unwrap().as_ref().borrow_mut() = Some(idx);
|
*stable_scope_addr.upgrade().unwrap().as_ref().borrow_mut() = Some(idx);
|
||||||
|
|
||||||
// Run the scope for one iteration to initialize it
|
// Run the scope for one iteration to initialize it
|
||||||
component.run_scope()?;
|
new_component.run_scope()?;
|
||||||
|
|
||||||
// Navigate the diff machine to the right point in the output dom
|
// Navigate the diff machine to the right point in the output dom
|
||||||
diff_machine.change_list.load_known_root(id);
|
diff_machine.change_list.load_known_root(id);
|
||||||
|
|
||||||
// And then run the diff algorithm
|
// And then run the diff algorithm
|
||||||
diff_machine.diff_node(component.old_frame(), component.next_frame());
|
diff_machine
|
||||||
|
.diff_node(new_component.old_frame(), new_component.next_frame());
|
||||||
|
|
||||||
// Finally, insert this node as a seen node.
|
// Finally, insert this node as a seen node.
|
||||||
seen_nodes.insert(idx);
|
seen_nodes.insert(idx);
|
||||||
|
@ -439,6 +442,8 @@ pub struct Scope {
|
||||||
// The parent's scope ID
|
// The parent's scope ID
|
||||||
pub parent: Option<ScopeIdx>,
|
pub parent: Option<ScopeIdx>,
|
||||||
|
|
||||||
|
pub children: RefCell<HashSet<ScopeIdx>>,
|
||||||
|
|
||||||
// A reference to the list of components.
|
// A reference to the list of components.
|
||||||
// This lets us traverse the component list whenever we need to access our parent or children.
|
// This lets us traverse the component list whenever we need to access our parent or children.
|
||||||
arena_link: ScopeArena,
|
arena_link: ScopeArena,
|
||||||
|
@ -446,7 +451,7 @@ pub struct Scope {
|
||||||
pub shared_contexts: RefCell<HashMap<TypeId, Rc<dyn Any>>>,
|
pub shared_contexts: RefCell<HashMap<TypeId, Rc<dyn Any>>>,
|
||||||
|
|
||||||
// Our own ID accessible from the component map
|
// Our own ID accessible from the component map
|
||||||
pub myidx: ScopeIdx,
|
pub arena_idx: ScopeIdx,
|
||||||
|
|
||||||
pub height: u32,
|
pub height: u32,
|
||||||
|
|
||||||
|
@ -521,8 +526,9 @@ impl Scope {
|
||||||
frames: ActiveFrame::new(),
|
frames: ActiveFrame::new(),
|
||||||
listeners: Default::default(),
|
listeners: Default::default(),
|
||||||
hookidx: Default::default(),
|
hookidx: Default::default(),
|
||||||
|
children: Default::default(),
|
||||||
parent,
|
parent,
|
||||||
myidx,
|
arena_idx: myidx,
|
||||||
height,
|
height,
|
||||||
event_queue,
|
event_queue,
|
||||||
arena_link,
|
arena_link,
|
||||||
|
@ -549,6 +555,8 @@ impl Scope {
|
||||||
// This breaks any latent references, invalidating every pointer referencing into it.
|
// This breaks any latent references, invalidating every pointer referencing into it.
|
||||||
self.frames.next().bump.reset();
|
self.frames.next().bump.reset();
|
||||||
|
|
||||||
|
*self.hookidx.borrow_mut() = 0;
|
||||||
|
|
||||||
let caller = self
|
let caller = self
|
||||||
.caller
|
.caller
|
||||||
.upgrade()
|
.upgrade()
|
||||||
|
@ -777,23 +785,24 @@ impl Scope {
|
||||||
let mut ctxs = self.shared_contexts.borrow_mut();
|
let mut ctxs = self.shared_contexts.borrow_mut();
|
||||||
let ty = TypeId::of::<T>();
|
let ty = TypeId::of::<T>();
|
||||||
|
|
||||||
let initialized = self.use_hook(
|
let is_initialized = self.use_hook(
|
||||||
|| false,
|
|| false,
|
||||||
|s| {
|
|s| {
|
||||||
let i = *s;
|
let i = s.clone();
|
||||||
*s = true;
|
*s = true;
|
||||||
i
|
i
|
||||||
},
|
},
|
||||||
|_| {},
|
|_| {},
|
||||||
);
|
);
|
||||||
|
|
||||||
match (initialized, ctxs.contains_key(&ty)) {
|
match (is_initialized, ctxs.contains_key(&ty)) {
|
||||||
// Do nothing, already initialized and already exists
|
// Do nothing, already initialized and already exists
|
||||||
(true, true) => {}
|
(true, true) => {}
|
||||||
|
|
||||||
// Needs to be initialized
|
// Needs to be initialized
|
||||||
(false, false) => {
|
(false, false) => {
|
||||||
ctxs.insert(ty, Rc::new(init())).unwrap();
|
log::debug!("Initializing context...");
|
||||||
|
ctxs.insert(ty, Rc::new(init()));
|
||||||
}
|
}
|
||||||
|
|
||||||
(false, true) => panic!("Cannot initialize two contexts of the same type"),
|
(false, true) => panic!("Cannot initialize two contexts of the same type"),
|
||||||
|
@ -807,6 +816,7 @@ impl Scope {
|
||||||
let mut scope = Some(self);
|
let mut scope = Some(self);
|
||||||
|
|
||||||
while let Some(inner) = scope {
|
while let Some(inner) = scope {
|
||||||
|
log::debug!("Searching {:#?} for valid shared_context", inner.arena_idx);
|
||||||
let shared_contexts = inner.shared_contexts.borrow();
|
let shared_contexts = inner.shared_contexts.borrow();
|
||||||
if let Some(shared_ctx) = shared_contexts.get(&ty) {
|
if let Some(shared_ctx) = shared_contexts.get(&ty) {
|
||||||
return Ok(shared_ctx.clone().downcast().unwrap());
|
return Ok(shared_ctx.clone().downcast().unwrap());
|
||||||
|
@ -849,7 +859,7 @@ impl EventQueue {
|
||||||
let inner = self.clone();
|
let inner = self.clone();
|
||||||
let marker = HeightMarker {
|
let marker = HeightMarker {
|
||||||
height: source.height,
|
height: source.height,
|
||||||
idx: source.myidx,
|
idx: source.arena_idx,
|
||||||
};
|
};
|
||||||
move || inner.0.as_ref().borrow_mut().push(marker)
|
move || inner.0.as_ref().borrow_mut().push(marker)
|
||||||
}
|
}
|
||||||
|
|
66
packages/web/examples/context.rs
Normal file
66
packages/web/examples/context.rs
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
|
||||||
|
use std::fmt::Display;
|
||||||
|
|
||||||
|
use dioxus::{events::on::MouseEvent, prelude::*};
|
||||||
|
use dioxus_core as dioxus;
|
||||||
|
use dioxus_web::WebsysRenderer;
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
|
||||||
|
console_error_panic_hook::set_once();
|
||||||
|
|
||||||
|
wasm_bindgen_futures::spawn_local(async {
|
||||||
|
WebsysRenderer::new_with_props(Example, ())
|
||||||
|
.run()
|
||||||
|
.await
|
||||||
|
.unwrap()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#[derive(Debug)]
|
||||||
|
struct CustomContext([&'static str; 3]);
|
||||||
|
|
||||||
|
|
||||||
|
static Example: FC<()> = |ctx, props| {
|
||||||
|
ctx.create_context(|| CustomContext(["Jack", "Jill", "Bob"]));
|
||||||
|
|
||||||
|
let names = ctx.use_context::<CustomContext>();
|
||||||
|
// let name = names.0[props.id as usize];
|
||||||
|
|
||||||
|
ctx.render(rsx! {
|
||||||
|
div {
|
||||||
|
class: "py-12 px-4 text-center w-full max-w-2xl mx-auto"
|
||||||
|
span {
|
||||||
|
class: "text-sm font-semibold"
|
||||||
|
"Dioxus Example: Jack and Jill"
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
class: "text-5xl mt-2 mb-6 leading-tight font-semibold font-heading"
|
||||||
|
"Hello"
|
||||||
|
}
|
||||||
|
|
||||||
|
CustomButton { id: 0 }
|
||||||
|
CustomButton { id: 1 }
|
||||||
|
CustomButton { id: 2 }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
#[derive(Props, PartialEq)]
|
||||||
|
struct ButtonProps {
|
||||||
|
id: u8,
|
||||||
|
}
|
||||||
|
|
||||||
|
fn CustomButton<'b, 'a,>(ctx: Context<'a>, props: &'b ButtonProps) -> DomTree {
|
||||||
|
let names = ctx.use_context::<CustomContext>();
|
||||||
|
let name = names.0[props.id as usize];
|
||||||
|
|
||||||
|
ctx.render(rsx!{
|
||||||
|
button {
|
||||||
|
class: "inline-block py-4 px-8 mr-6 leading-none text-white bg-indigo-600 hover:bg-indigo-900 font-semibold rounded shadow"
|
||||||
|
"{name}"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
4
packages/web/examples/derive.rs
Normal file
4
packages/web/examples/derive.rs
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
use dioxus::{events::on::MouseEvent, prelude::*};
|
||||||
|
use dioxus_core as dioxus;
|
||||||
|
use dioxus_web::WebsysRenderer;
|
||||||
|
fn main() {}
|
|
@ -1,68 +1,24 @@
|
||||||
|
#![allow(non_snake_case)]
|
||||||
use dioxus_core::prelude::*;
|
use dioxus_core::prelude::*;
|
||||||
use dioxus_web::WebsysRenderer;
|
use dioxus_web::WebsysRenderer;
|
||||||
|
|
||||||
static APP_STYLE: &'static str = include_str!("./todomvc/style.css");
|
static APP_STYLE: &'static str = include_str!("./todomvc/style.css");
|
||||||
|
|
||||||
fn main() {
|
|
||||||
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
|
|
||||||
}
|
|
||||||
// =======================
|
|
||||||
// state-related items
|
|
||||||
// =======================
|
|
||||||
pub static TODOS: AtomFamily<uuid::Uuid, TodoItem> = atom_family(|_| {});
|
pub static TODOS: AtomFamily<uuid::Uuid, TodoItem> = atom_family(|_| {});
|
||||||
pub static FILTER: Atom<FilterState> = atom(|_| FilterState::All);
|
pub static FILTER: Atom<FilterState> = atom(|_| FilterState::All);
|
||||||
pub static SHOW_ALL_TODOS: selector<bool> = selector(|g| g.getter(|f| false));
|
pub static SHOW_ALL_TODOS: selector<bool> = selector(|g| g.getter(|f| false));
|
||||||
|
|
||||||
#[derive(PartialEq)]
|
fn main() {
|
||||||
pub enum FilterState {
|
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(|ctx, props| {
|
||||||
All,
|
ctx.render(rsx! {
|
||||||
Active,
|
div {
|
||||||
Completed,
|
id: "app",
|
||||||
}
|
style { "{APP_STYLE}" }
|
||||||
|
TodoList {}
|
||||||
#[derive(Debug, PartialEq, Clone)]
|
Footer {}
|
||||||
pub struct TodoItem {
|
|
||||||
pub id: uuid::Uuid,
|
|
||||||
pub checked: bool,
|
|
||||||
pub contents: String,
|
|
||||||
}
|
|
||||||
|
|
||||||
impl RecoilContext<()> {
|
|
||||||
pub fn add_todo(&self, contents: String) {}
|
|
||||||
pub fn remove_todo(&self, id: &uuid::Uuid) {}
|
|
||||||
pub fn select_all_todos(&self) {}
|
|
||||||
pub fn toggle_todo(&self, id: &uuid::Uuid) {}
|
|
||||||
pub fn clear_completed(&self) {}
|
|
||||||
pub fn set_filter(&self, filter: &FilterState) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// =======================
|
|
||||||
// Components
|
|
||||||
// =======================
|
|
||||||
pub fn App(ctx: Context, props: &()) -> DomTree {
|
|
||||||
ctx.render(rsx! {
|
|
||||||
div {
|
|
||||||
id: "app"
|
|
||||||
style { "{APP_STYLE}" }
|
|
||||||
|
|
||||||
// list
|
|
||||||
TodoList {}
|
|
||||||
|
|
||||||
// footer
|
|
||||||
footer {
|
|
||||||
class: "info"
|
|
||||||
p {"Double-click to edit a todo"}
|
|
||||||
p {
|
|
||||||
"Created by "
|
|
||||||
a { "jkelleyrtp", href: "http://github.com/jkelleyrtp/" }
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
"Part of "
|
|
||||||
a { "TodoMVC", href: "http://todomvc.com" }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
})
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn TodoList(ctx: Context, props: &()) -> DomTree {
|
pub fn TodoList(ctx: Context, props: &()) -> DomTree {
|
||||||
|
@ -125,11 +81,11 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
|
||||||
type: "checkbox"
|
type: "checkbox"
|
||||||
"{todo.checked}"
|
"{todo.checked}"
|
||||||
}
|
}
|
||||||
{is_editing.then(|| rsx!(
|
{is_editing.then(|| rsx!(
|
||||||
input {
|
input {
|
||||||
value: "{contents}"
|
value: "{contents}"
|
||||||
}
|
}
|
||||||
))}
|
))}
|
||||||
}
|
}
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
@ -175,6 +131,46 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn Footer(ctx: Context, props: &()) -> DomTree {
|
||||||
|
ctx.render(rsx! {
|
||||||
|
footer {
|
||||||
|
class: "info"
|
||||||
|
p {"Double-click to edit a todo"}
|
||||||
|
p {
|
||||||
|
"Created by "
|
||||||
|
a { "jkelleyrtp", href: "http://github.com/jkelleyrtp/" }
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
"Part of "
|
||||||
|
a { "TodoMVC", href: "http://todomvc.com" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(PartialEq)]
|
||||||
|
pub enum FilterState {
|
||||||
|
All,
|
||||||
|
Active,
|
||||||
|
Completed,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, PartialEq, Clone)]
|
||||||
|
pub struct TodoItem {
|
||||||
|
pub id: uuid::Uuid,
|
||||||
|
pub checked: bool,
|
||||||
|
pub contents: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl RecoilContext<()> {
|
||||||
|
pub fn add_todo(&self, contents: String) {}
|
||||||
|
pub fn remove_todo(&self, id: &uuid::Uuid) {}
|
||||||
|
pub fn select_all_todos(&self) {}
|
||||||
|
pub fn toggle_todo(&self, id: &uuid::Uuid) {}
|
||||||
|
pub fn clear_completed(&self) {}
|
||||||
|
pub fn set_filter(&self, filter: &FilterState) {}
|
||||||
|
}
|
||||||
|
|
||||||
pub use recoil::*;
|
pub use recoil::*;
|
||||||
mod recoil {
|
mod recoil {
|
||||||
use dioxus_core::context::Context;
|
use dioxus_core::context::Context;
|
||||||
|
|
Loading…
Reference in a new issue