From cfa0247cbb1233e1df275374a73f431650a9250f Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Fri, 30 Jul 2021 17:04:04 -0400 Subject: [PATCH] wip: websys dom working properly --- packages/core/src/arena.rs | 2 +- packages/core/src/diff.rs | 3 +- packages/core/src/virtual_dom.rs | 16 ++++ packages/ssr/src/lib.rs | 11 ++- packages/web/Cargo.toml | 6 +- packages/web/examples/basic.rs | 45 +++++++++++ packages/web/src/dom.rs | 124 +++++++++++++++++++++---------- packages/web/src/lib.rs | 70 ++++++++--------- packages/web/src/nodeslab.rs | 20 ++--- 9 files changed, 200 insertions(+), 97 deletions(-) create mode 100644 packages/web/examples/basic.rs diff --git a/packages/core/src/arena.rs b/packages/core/src/arena.rs index ce74b6876..18fdee8a0 100644 --- a/packages/core/src/arena.rs +++ b/packages/core/src/arena.rs @@ -45,7 +45,7 @@ pub struct SharedResources { pub(crate) heuristics: Shared, - pub(crate) tasks: Shared>, + pub tasks: Shared>, /// We use a SlotSet to keep track of the keys that are currently being used. /// However, we don't store any specific data since the "mirror" diff --git a/packages/core/src/diff.rs b/packages/core/src/diff.rs index 9e88f9242..72e7f0e80 100644 --- a/packages/core/src/diff.rs +++ b/packages/core/src/diff.rs @@ -526,7 +526,8 @@ impl<'real, 'bump> DiffMachine<'real, 'bump> { let mut is_static = true; let mut added_to_stack = 0; - for child in children { + // add them backwards + for child in children.iter().rev() { let child_meta = self.create_vnode(child); is_static = is_static && child_meta.is_static; added_to_stack += child_meta.added_to_stack; diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs index 0536492dc..5d4aa11bb 100644 --- a/packages/core/src/virtual_dom.rs +++ b/packages/core/src/virtual_dom.rs @@ -19,6 +19,8 @@ //! This module includes just the barebones for a complete VirtualDOM API. //! Additional functionality is defined in the respective files. +use futures_util::StreamExt; + use crate::hooks::{SuspendedContext, SuspenseHook}; use crate::{arena::SharedResources, innerlude::*}; @@ -400,6 +402,20 @@ impl VirtualDom { Ok(()) } + pub async fn wait_for_event(&mut self) -> Option { + let r = self.shared.tasks.clone(); + let mut r = r.borrow_mut(); + let gh = r.next().await; + + gh + } + + pub fn any_pending_events(&self) -> bool { + let r = self.shared.tasks.clone(); + let r = r.borrow(); + !r.is_empty() + } + pub fn base_scope(&self) -> &Scope { unsafe { self.shared.get_scope(self.base_scope).unwrap() } } diff --git a/packages/ssr/src/lib.rs b/packages/ssr/src/lib.rs index 25881c400..bd323e77d 100644 --- a/packages/ssr/src/lib.rs +++ b/packages/ssr/src/lib.rs @@ -83,6 +83,15 @@ impl<'a> TextRenderer<'a> { } write!(f, "{}", text.text)? } + VNodeKind::Anchor(anchor) => { + // + if self.cfg.indent { + for _ in 0..il { + write!(f, " ")?; + } + } + write!(f, "")?; + } VNodeKind::Element(el) => { if self.cfg.indent { for _ in 0..il { @@ -120,7 +129,7 @@ impl<'a> TextRenderer<'a> { // // when the page is loaded, the `querySelectorAll` will be used to collect all the nodes, and then add // them interpreter's stack - match (self.cfg.pre_render, node.dom_id()) { + match (self.cfg.pre_render, node.try_direct_id()) { (true, Some(id)) => { write!(f, " dio_el=\"{}\"", id)?; // diff --git a/packages/web/Cargo.toml b/packages/web/Cargo.toml index 78000c4b7..82b9e85d0 100644 --- a/packages/web/Cargo.toml +++ b/packages/web/Cargo.toml @@ -78,7 +78,7 @@ uuid = { version = "0.8.2", features = ["v4", "wasm-bindgen"] } dioxus-hooks = { path = "../hooks" } gloo-timers = { version = "0.2.1", features = ["futures"] } serde = { version = "1.0.126", features = ["derive"] } -surf = { version = "2.2.0", default-features = false, features = [ - "wasm-client", -] } +# surf = { git = "https://github.com/http-rs/surf", default-features = false, features = [ +# "wasm-client", +# ] } # wasm-timer = "0.2.5" diff --git a/packages/web/examples/basic.rs b/packages/web/examples/basic.rs new file mode 100644 index 000000000..518115f7c --- /dev/null +++ b/packages/web/examples/basic.rs @@ -0,0 +1,45 @@ +//! Basic example that renders a simple VNode to the browser. + +use dioxus::events::on::MouseEvent; +use dioxus_core as dioxus; +use dioxus_core::prelude::*; +use dioxus_hooks::*; +use dioxus_html as dioxus_elements; +// use wasm_timer; + +use std::future::Future; + +use std::{pin::Pin, time::Duration}; + +use dioxus::prelude::*; + +use dioxus_web::*; + +fn main() { + // Setup logging + wasm_logger::init(wasm_logger::Config::new(log::Level::Debug)); + console_error_panic_hook::set_once(); + + // Run the app + dioxus_web::launch(App, |c| c) +} + +static App: FC<()> = |cx| { + let mut count = use_state(cx, || 0); + + cx.render(rsx! { + div { + button { + "add" + onclick: move |_| count += 1 + } + ul { + {(0..*count).map(|f| rsx!{ + li { "a - {f}" } + li { "b - {f}" } + li { "c - {f}" } + })} + } + } + }) +}; diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs index 2ae5ca822..0567a53b8 100644 --- a/packages/web/src/dom.rs +++ b/packages/web/src/dom.rs @@ -48,6 +48,7 @@ impl WebsysDom { let sender_callback = Arc::new(move |ev| { let c = sender.clone(); wasm_bindgen_futures::spawn_local(async move { + log::debug!("sending event through channel"); c.send(ev).await.unwrap(); }); }); @@ -102,7 +103,7 @@ impl WebsysDom { DomEdit::PushRoot { id: root } => self.push(root), DomEdit::PopRoot => self.pop(), DomEdit::AppendChildren { many } => self.append_children(many), - DomEdit::ReplaceWith { many } => self.replace_with(many), + DomEdit::ReplaceWith { n, m } => self.replace_with(n, m), DomEdit::Remove => self.remove(), DomEdit::RemoveAllChildren => self.remove_all_children(), DomEdit::CreateTextNode { text, id } => self.create_text_node(text, id), @@ -113,12 +114,15 @@ impl WebsysDom { event_name: event, scope, mounted_node_id: node, - element_id: idx, - } => self.new_event_listener(event, scope, idx, node), + } => self.new_event_listener(event, scope, node), + DomEdit::RemoveEventListener { event } => todo!(), DomEdit::SetText { text } => self.set_text(text), DomEdit::SetAttribute { field, value, ns } => self.set_attribute(field, value, ns), DomEdit::RemoveAttribute { name } => self.remove_attribute(name), + + DomEdit::InsertAfter { n } => self.insert_after(n), + DomEdit::InsertBefore { n } => self.insert_before(n), } } } @@ -169,37 +173,51 @@ impl WebsysDom { } } - fn replace_with(&mut self, many: u32) { + fn replace_with(&mut self, n: u32, m: u32) { log::debug!("Called [`replace_with`]"); - let new_node = self.stack.pop(); - let old_node = self.stack.pop(); - // TODO: use different-sized replace withs - if many == 1 { - if old_node.has_type::() { - old_node - .dyn_ref::() - .unwrap() - .replace_with_with_node_1(&new_node) - .unwrap(); - } else if old_node.has_type::() { - old_node - .dyn_ref::() - .unwrap() - .replace_with_with_node_1(&new_node) - .unwrap(); - } else if old_node.has_type::() { - old_node - .dyn_ref::() - .unwrap() - .replace_with_with_node_1(&new_node) - .unwrap(); - } else { - panic!("Cannot replace node: {:?}", old_node); - } + let mut new_nodes = vec![]; + for _ in 0..m { + new_nodes.push(self.stack.pop()); } - self.stack.push(new_node); + let mut old_nodes = vec![]; + for _ in 0..n { + old_nodes.push(self.stack.pop()); + } + + let old = old_nodes[0].clone(); + let arr: js_sys::Array = new_nodes.iter().collect(); + let el = old.dyn_into::().unwrap(); + el.replace_with_with_node(&arr).unwrap(); + // let arr = js_sys::Array::from(); + + // TODO: use different-sized replace withs + // if m == 1 { + // if old_node.has_type::() { + // old_node + // .dyn_ref::() + // .unwrap() + // .replace_with_with_node_1(&new_node) + // .unwrap(); + // } else if old_node.has_type::() { + // old_node + // .dyn_ref::() + // .unwrap() + // .replace_with_with_node_1(&new_node) + // .unwrap(); + // } else if old_node.has_type::() { + // old_node + // .dyn_ref::() + // .unwrap() + // .replace_with_with_node_1(&new_node) + // .unwrap(); + // } else { + // panic!("Cannot replace node: {:?}", old_node); + // } + // } + + // self.stack.push(new_node); } fn remove(&mut self) { @@ -213,7 +231,8 @@ impl WebsysDom { } fn create_placeholder(&mut self, id: u64) { - self.create_element("pre", None, id) + self.create_element("pre", None, id); + self.set_attribute("hidden", "", None); } fn create_text_node(&mut self, text: &str, id: u64) { // let nid = self.node_counter.next(); @@ -255,14 +274,8 @@ impl WebsysDom { // ElementId::new(nid) } - fn new_event_listener( - &mut self, - event: &'static str, - scope: ScopeId, - _element_id: usize, - real_id: u64, - ) { - let (_on, event) = event.split_at(2); + fn new_event_listener(&mut self, event: &'static str, scope: ScopeId, real_id: u64) { + // let (_on, event) = event.split_at(2); let event = wasm_bindgen::intern(event); // attach the correct attributes to the element @@ -367,8 +380,37 @@ impl WebsysDom { } } - fn raw_node_as_any(&self) -> &mut dyn std::any::Any { - todo!() + fn insert_after(&mut self, n: u32) { + let mut new_nodes = vec![]; + for _ in 0..n { + new_nodes.push(self.stack.pop()); + } + + let after = self.stack.top().clone(); + let arr: js_sys::Array = new_nodes.iter().collect(); + + let el = after.dyn_into::().unwrap(); + el.after_with_node(&arr).unwrap(); + // let mut old_nodes = vec![]; + // for _ in 0..n { + // old_nodes.push(self.stack.pop()); + // } + + // let el = self.stack.top(); + } + + fn insert_before(&mut self, n: u32) { + let n = n as usize; + let root = self + .stack + .list + .get(self.stack.list.len() - n) + .unwrap() + .clone(); + for _ in 0..n { + let el = self.stack.pop(); + root.insert_before(&el, None).unwrap(); + } } } diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs index 5b6229a2f..d70ac567f 100644 --- a/packages/web/src/lib.rs +++ b/packages/web/src/lib.rs @@ -75,61 +75,55 @@ pub async fn run_with_props( root_props: T, cfg: WebConfig, ) -> Result<()> { - let dom = VirtualDom::new_with_props(root, root_props); + let mut dom = VirtualDom::new_with_props(root, root_props); - let root_el = load_document().get_element_by_id("dioxus_root").unwrap(); + // let tasks = dom.shared.tasks.clone(); + + let root_el = load_document().get_element_by_id("dioxusroot").unwrap(); let mut websys_dom = dom::WebsysDom::new(root_el, cfg); - // let mut edits = Vec::new(); - // internal_dom.rebuild(&mut websys_dom, &mut edits)?; - // websys_dom.process_edits(&mut edits); + let mut edits = Vec::new(); + dom.rebuild(&mut websys_dom, &mut edits)?; + websys_dom.process_edits(&mut edits); log::info!("Going into event loop"); + + // #[allow(unreachable_code)] loop { - todo!(); - // let trigger = { - // let real_queue = websys_dom.wait_for_event(); - // if internal_dom.tasks.is_empty() { - // log::info!("tasks is empty, waiting for dom event to trigger soemthing"); - // real_queue.await - // } else { - // log::info!("tasks is not empty, waiting for either tasks or event system"); - // let task_queue = (&mut internal_dom.tasks).next(); + let trigger = { + let real_queue = websys_dom.wait_for_event(); + if dom.any_pending_events() { + log::info!("tasks is not empty, waiting for either tasks or event system"); + let mut task = dom.wait_for_event(); - // pin_mut!(real_queue); - // pin_mut!(task_queue); + pin_mut!(real_queue); + pin_mut!(task); - // match futures_util::future::select(real_queue, task_queue).await { - // futures_util::future::Either::Left((trigger, _)) => trigger, - // futures_util::future::Either::Right((trigger, _)) => trigger, - // } - // } - // }; + match futures_util::future::select(real_queue, task).await { + futures_util::future::Either::Left((trigger, _)) => trigger, + futures_util::future::Either::Right((trigger, _)) => trigger, + } + } else { + log::info!("tasks is empty, waiting for dom event to trigger soemthing"); + real_queue.await + } + }; - // if let Some(real_trigger) = trigger { - // log::info!("event received"); + if let Some(real_trigger) = trigger { + log::info!("event received"); - // internal_dom.queue_event(real_trigger); + dom.queue_event(real_trigger); - // let mut edits = Vec::new(); - // internal_dom - // .progress_with_event(&mut websys_dom, &mut edits) - // .await?; - // websys_dom.process_edits(&mut edits); - // } + let mut edits = Vec::new(); + dom.progress_with_event(&mut websys_dom, &mut edits).await?; + websys_dom.process_edits(&mut edits); + } } // should actually never return from this, should be an error, rustc just cant see it Ok(()) } -fn iter_node_list() {} - -// struct NodeListIter { -// node_list: NodeList, -// } -// impl Iterator for NodeListIter {} - struct HydrationNode { id: usize, node: Node, diff --git a/packages/web/src/nodeslab.rs b/packages/web/src/nodeslab.rs index 5f6eb2496..e374a3dc9 100644 --- a/packages/web/src/nodeslab.rs +++ b/packages/web/src/nodeslab.rs @@ -8,17 +8,12 @@ pub struct NodeSlab { impl NodeSlab { pub fn new(capacity: usize) -> NodeSlab { - NodeSlab { - nodes: Vec::with_capacity(capacity), - } - } - - fn insert_and_extend(&mut self, node: Node, id: usize) { - if id > self.nodes.len() * 3 { - panic!("Trying to insert an element way too far out of bounds"); + let mut nodes = Vec::with_capacity(capacity); + for x in 0..5 { + nodes.push(None); } - if id < self.nodes.len() {} + NodeSlab { nodes } } } impl Index for NodeSlab { @@ -30,11 +25,12 @@ impl Index for NodeSlab { impl IndexMut for NodeSlab { fn index_mut(&mut self, index: usize) -> &mut Self::Output { - if index >= self.nodes.len() * 3 { + if index >= self.nodes.capacity() * 3 { panic!("Trying to mutate an element way too far out of bounds"); } - if index > self.nodes.len() { - self.nodes.resize_with(index, || None); + + if index + 1 > self.nodes.len() { + self.nodes.resize_with(index + 1, || None); } &mut self.nodes[index] }