wip: websys dom working properly

packages/core/src/arena.rs

@@ -45,7 +45,7 @@ pub struct SharedResources {
 
     pub(crate) heuristics: Shared<HeuristicsEngine>,
 
-    pub(crate) tasks: Shared<FuturesUnordered<FiberTask>>,
+    pub tasks: Shared<FuturesUnordered<FiberTask>>,
 
     /// 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"

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;

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

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)?;
                         //

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"

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}" }
+                })}
+            }
+        }
+    })
+};

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::<Element>() {
-                old_node
-                    .dyn_ref::<Element>()
-                    .unwrap()
-                    .replace_with_with_node_1(&new_node)
-                    .unwrap();
-            } else if old_node.has_type::<web_sys::CharacterData>() {
-                old_node
-                    .dyn_ref::<web_sys::CharacterData>()
-                    .unwrap()
-                    .replace_with_with_node_1(&new_node)
-                    .unwrap();
-            } else if old_node.has_type::<web_sys::DocumentType>() {
-                old_node
-                    .dyn_ref::<web_sys::DocumentType>()
-                    .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::<Element>().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::<Element>() {
+        //         old_node
+        //             .dyn_ref::<Element>()
+        //             .unwrap()
+        //             .replace_with_with_node_1(&new_node)
+        //             .unwrap();
+        //     } else if old_node.has_type::<web_sys::CharacterData>() {
+        //         old_node
+        //             .dyn_ref::<web_sys::CharacterData>()
+        //             .unwrap()
+        //             .replace_with_with_node_1(&new_node)
+        //             .unwrap();
+        //     } else if old_node.has_type::<web_sys::DocumentType>() {
+        //         old_node
+        //             .dyn_ref::<web_sys::DocumentType>()
+        //             .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::<Element>().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();
+        }
     }
 }
 

packages/web/src/lib.rs

@@ -75,61 +75,55 @@ pub async fn run_with_props<T: Properties + 'static>(
     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();
-
-        //         pin_mut!(real_queue);
-        //         pin_mut!(task_queue);
-
-        //         match futures_util::future::select(real_queue, task_queue).await {
-        //             futures_util::future::Either::Left((trigger, _)) => trigger,
-        //             futures_util::future::Either::Right((trigger, _)) => trigger,
-        //         }
-        //     }
-        // };
-
-        // if let Some(real_trigger) = trigger {
-        //     log::info!("event received");
-
-        //     internal_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 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);
+
+                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");
+
+            dom.queue_event(real_trigger);
+
+            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,

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<usize> for NodeSlab {
@@ -30,11 +25,12 @@ impl Index<usize> for NodeSlab {
 
 impl IndexMut<usize> 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]
     }