feat: fix the scope rollover bug

examples/custom_element.rs

@@ -16,6 +16,12 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
+    let g = cx.component(component, (), "component");
+    let c = cx.make_node(g);
+    cx.render(rsx! {
+        div { c }
+    })
+
     // let nf = NodeFactory::new(cx);
 
     // let mut attrs = dioxus::core::exports::bumpalo::collections::Vec::new_in(nf.bump());
@@ -27,6 +33,8 @@ fn app(cx: Scope) -> Element {
     // attrs.push(nf.attr("age", format_args!("47"), None, false));
 
     // Some(nf.raw_element("my-element", None, &[], attrs.into_bump_slice(), &[], None))
+}
 
+fn component(cx: Scope) -> Element {
     todo!()
 }

packages/core/src/arena.rs

@@ -34,14 +34,14 @@ impl ElementRef {
 
 impl VirtualDom {
     pub(crate) fn next_element(&mut self, template: &VNode, path: &'static [u8]) -> ElementId {
-        self.next(template, ElementPath::Deep(path))
+        self.next_reference(template, ElementPath::Deep(path))
     }
 
     pub(crate) fn next_root(&mut self, template: &VNode, path: usize) -> ElementId {
-        self.next(template, ElementPath::Root(path))
+        self.next_reference(template, ElementPath::Root(path))
     }
 
-    fn next(&mut self, template: &VNode, path: ElementPath) -> ElementId {
+    fn next_reference(&mut self, template: &VNode, path: ElementPath) -> ElementId {
         let entry = self.elements.vacant_entry();
         let id = entry.key();
 
@@ -100,15 +100,15 @@ impl VirtualDom {
                 nodes.iter().for_each(|node| self.drop_scope_inner(node))
             }
             DynamicNode::Placeholder(t) => {
-                self.try_reclaim(t.get());
+                self.try_reclaim(t.id.get().unwrap());
             }
             DynamicNode::Text(t) => {
-                self.try_reclaim(t.id.get());
+                self.try_reclaim(t.id.get().unwrap());
             }
         });
 
         for root in node.root_ids {
-            let id = root.get();
+            let id = root.get().unwrap();
             if id.0 != 0 {
                 self.try_reclaim(id);
             }
@@ -132,7 +132,7 @@ impl VirtualDom {
             // Only descend if the props are borrowed
             DynamicNode::Component(c) if !c.static_props => {
                 self.ensure_drop_safety(c.scope.get().unwrap());
-                c.props.set(None);
+                c.props.take();
             }
 
             DynamicNode::Fragment(f) => f

packages/core/src/create.rs

@@ -1,13 +1,15 @@
-use std::cell::Cell;
-use std::rc::Rc;
-
-use crate::innerlude::{VComponent, VText};
+use crate::innerlude::{VComponent, VPlaceholder, VText};
 use crate::mutations::Mutation;
 use crate::mutations::Mutation::*;
 use crate::nodes::VNode;
 use crate::nodes::{DynamicNode, TemplateNode};
 use crate::virtual_dom::VirtualDom;
 use crate::{AttributeValue, ElementId, RenderReturn, ScopeId, SuspenseContext};
+use std::cell::Cell;
+use std::iter::{Enumerate, Peekable};
+use std::rc::Rc;
+use std::slice;
+use TemplateNode::*;
 
 impl<'b> VirtualDom {
     /// Create a new template [`VNode`] and write it to the [`Mutations`] buffer.
@@ -17,190 +19,232 @@ impl<'b> VirtualDom {
         self.scope_stack.push(scope);
         let out = self.create(template);
         self.scope_stack.pop();
-
         out
     }
 
     /// Create this template and write its mutations
-    pub(crate) fn create(&mut self, template: &'b VNode<'b>) -> usize {
+    pub(crate) fn create(&mut self, node: &'b VNode<'b>) -> usize {
         // The best renderers will have templates prehydrated and registered
         // Just in case, let's create the template using instructions anyways
-        if !self.templates.contains_key(&template.template.name) {
-            self.register_template(template);
+        if !self.templates.contains_key(&node.template.name) {
+            self.register_template(node);
         }
 
+        // we know that this will generate at least one mutation per node
+        self.mutations.edits.reserve(node.template.roots.len());
+
         // Walk the roots, creating nodes and assigning IDs
         // todo: adjust dynamic nodes to be in the order of roots and then leaves (ie BFS)
-        let mut dynamic_attrs = template.template.attr_paths.iter().enumerate().peekable();
-        let mut dynamic_nodes = template.template.node_paths.iter().enumerate().peekable();
+        let mut attrs = node.template.attr_paths.iter().enumerate().peekable();
+        let mut nodes = node.template.node_paths.iter().enumerate().peekable();
+
+        node.template
+            .roots
+            .iter()
+            .enumerate()
+            .map(|(idx, root)| match root {
+                DynamicText { id } | Dynamic { id } => self.write_dynamic_root(node, *id),
+                Element { .. } => self.write_element_root(node, idx, &mut attrs, &mut nodes),
+                Text { .. } => self.write_static_text_root(node, idx),
+            })
+            .sum()
+    }
 
-        let cur_scope = self.scope_stack.last().copied().unwrap();
+    fn write_static_text_root(&mut self, node: &VNode, idx: usize) -> usize {
+        // Simply just load the template root, no modifications needed
+        self.load_template_root(node, idx);
 
-        // we know that this will generate at least one mutation per node
-        self.mutations.edits.reserve(template.template.roots.len());
-
-        let mut on_stack = 0;
-        for (root_idx, root) in template.template.roots.iter().enumerate() {
-            // We might need to generate an ID for the root node
-            on_stack += match root {
-                TemplateNode::DynamicText { id } | TemplateNode::Dynamic { id } => {
-                    match &template.dynamic_nodes[*id] {
-                        // a dynamic text node doesn't replace a template node, instead we create it on the fly
-                        DynamicNode::Text(VText { id: slot, value }) => {
-                            let id = self.next_element(template, template.template.node_paths[*id]);
-                            slot.set(id);
-
-                            // Safety: we promise not to re-alias this text later on after committing it to the mutation
-                            let unbounded_text = unsafe { std::mem::transmute(*value) };
-                            self.mutations.push(CreateTextNode {
-                                value: unbounded_text,
-                                id,
-                            });
-
-                            1
-                        }
-
-                        DynamicNode::Placeholder(slot) => {
-                            let id = self.next_element(template, template.template.node_paths[*id]);
-                            slot.set(id);
-                            self.mutations.push(CreatePlaceholder { id });
-                            1
-                        }
-
-                        DynamicNode::Fragment(_) | DynamicNode::Component { .. } => {
-                            self.create_dynamic_node(template, &template.dynamic_nodes[*id], *id)
-                        }
-                    }
-                }
+        // Text producs just one node on the stack
+        1
+    }
+
+    fn write_dynamic_root(&mut self, template: &'b VNode<'b>, idx: usize) -> usize {
+        use DynamicNode::*;
+        match &template.dynamic_nodes[idx] {
+            node @ Fragment(_) => self.create_dynamic_node(template, node, idx),
+            node @ Component { .. } => self.create_dynamic_node(template, node, idx),
+            Placeholder(VPlaceholder { id }) => {
+                let id = self.set_slot(template, id, idx);
+                self.mutations.push(CreatePlaceholder { id });
+                1
+            }
+            Text(VText { id, value }) => {
+                let id = self.set_slot(template, id, idx);
+                self.create_static_text(value, id);
+                1
+            }
+        }
+    }
+
+    fn create_static_text(&mut self, value: &str, id: ElementId) {
+        // Safety: we promise not to re-alias this text later on after committing it to the mutation
+        let unbounded_text: &str = unsafe { std::mem::transmute(value) };
+        self.mutations.push(CreateTextNode {
+            value: unbounded_text,
+            id,
+        });
+    }
+
+    /// We write all the descndent data for this element
+    ///
+    /// Elements can contain other nodes - and those nodes can be dynamic or static
+    ///
+    /// We want to make sure we write these nodes while on top of the root
+    fn write_element_root(
+        &mut self,
+        template: &'b VNode<'b>,
+        root_idx: usize,
+        dynamic_attrs: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
+        dynamic_nodes: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
+    ) -> usize {
+        // Load the template root and get the ID for the node on the stack
+        let root_on_stack = self.load_template_root(template, root_idx);
+
+        // Write all the attributes below this root
+        self.write_attrs_on_root(dynamic_attrs, root_idx, root_on_stack, template);
+
+        // Load in all of the placeholder or dynamic content under this root too
+        self.load_placeholders(dynamic_nodes, root_idx, template);
+
+        1
+    }
+
+    /// Load all of the placeholder nodes for descendents of this root node
+    ///
+    /// ```rust, ignore
+    /// rsx! {
+    ///     div {
+    ///         // This is a placeholder
+    ///         some_value,
+    ///
+    ///         // Load this too
+    ///         "{some_text}"
+    ///     }
+    /// }
+    /// ```
+    fn load_placeholders(
+        &mut self,
+        dynamic_nodes: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
+        root_idx: usize,
+        template: &'b VNode<'b>,
+    ) {
+        let (start, end) = match collect_dyn_node_range(dynamic_nodes, root_idx) {
+            Some((a, b)) => (a, b),
+            None => return,
+        };
+
+        for idx in start..=end {
+            let m = self.create_dynamic_node(template, &template.dynamic_nodes[idx], idx);
+            if m > 0 {
+                // The path is one shorter because the top node is the root
+                let path = &template.template.node_paths[idx][1..];
+                self.mutations.push(ReplacePlaceholder { m, path });
+            }
+        }
+    }
 
-                TemplateNode::Element { .. } | TemplateNode::Text { .. } => {
-                    let this_id = self.next_root(template, root_idx);
-
-                    template.root_ids[root_idx].set(this_id);
-                    self.mutations.push(LoadTemplate {
-                        name: template.template.name,
-                        index: root_idx,
-                        id: this_id,
-                    });
-
-                    // we're on top of a node that has a dynamic attribute for a descendant
-                    // Set that attribute now before the stack gets in a weird state
-                    while let Some((mut attr_id, path)) =
-                        dynamic_attrs.next_if(|(_, p)| p[0] == root_idx as u8)
-                    {
-                        // if attribute is on a root node, then we've already created the element
-                        // Else, it's deep in the template and we should create a new id for it
-                        let id = match path.len() {
-                            1 => this_id,
-                            _ => {
-                                let id = self
-                                    .next_element(template, template.template.attr_paths[attr_id]);
-                                self.mutations.push(Mutation::AssignId {
-                                    path: &path[1..],
-                                    id,
-                                });
-                                id
-                            }
-                        };
-
-                        loop {
-                            let attribute = template.dynamic_attrs.get(attr_id).unwrap();
-                            attribute.mounted_element.set(id);
-
-                            // Safety: we promise not to re-alias this text later on after committing it to the mutation
-                            let unbounded_name = unsafe { std::mem::transmute(attribute.name) };
-
-                            match &attribute.value {
-                                AttributeValue::Text(value) => {
-                                    // Safety: we promise not to re-alias this text later on after committing it to the mutation
-                                    let unbounded_value = unsafe { std::mem::transmute(*value) };
-
-                                    self.mutations.push(SetAttribute {
-                                        name: unbounded_name,
-                                        value: unbounded_value,
-                                        ns: attribute.namespace,
-                                        id,
-                                    })
-                                }
-                                AttributeValue::Bool(value) => {
-                                    self.mutations.push(SetBoolAttribute {
-                                        name: unbounded_name,
-                                        value: *value,
-                                        id,
-                                    })
-                                }
-                                AttributeValue::Listener(_) => {
-                                    self.mutations.push(NewEventListener {
-                                        // all listeners start with "on"
-                                        name: &unbounded_name[2..],
-                                        scope: cur_scope,
-                                        id,
-                                    })
-                                }
-                                AttributeValue::Float(_) => todo!(),
-                                AttributeValue::Int(_) => todo!(),
-                                AttributeValue::Any(_) => todo!(),
-                                AttributeValue::None => todo!(),
-                            }
-
-                            // Only push the dynamic attributes forward if they match the current path (same element)
-                            match dynamic_attrs.next_if(|(_, p)| *p == path) {
-                                Some((next_attr_id, _)) => attr_id = next_attr_id,
-                                None => break,
-                            }
-                        }
-                    }
-
-                    // We're on top of a node that has a dynamic child for a descendant
-                    // Skip any node that's a root
-                    let mut start = None;
-                    let mut end = None;
-
-                    // Collect all the dynamic nodes below this root
-                    // We assign the start and end of the range of dynamic nodes since they area ordered in terms of tree path
-                    //
-                    // [0]
-                    // [1, 1]     <---|
-                    // [1, 1, 1]  <---| these are the range of dynamic nodes below root 1
-                    // [1, 1, 2]  <---|
-                    // [2]
-                    //
-                    // We collect each range and then create them and replace the placeholder in the template
-                    while let Some((idx, p)) =
-                        dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8)
-                    {
-                        if p.len() == 1 {
-                            continue;
-                        }
-
-                        if start.is_none() {
-                            start = Some(idx);
-                        }
-
-                        end = Some(idx);
-                    }
-
-                    //
-                    if let (Some(start), Some(end)) = (start, end) {
-                        for idx in start..=end {
-                            let node = &template.dynamic_nodes[idx];
-                            let m = self.create_dynamic_node(template, node, idx);
-                            if m > 0 {
-                                self.mutations.push(ReplacePlaceholder {
-                                    m,
-                                    path: &template.template.node_paths[idx][1..],
-                                });
-                            }
-                        }
-                    }
-
-                    // elements create only one node :-)
-                    1
+    fn write_attrs_on_root(
+        &mut self,
+        attrs: &mut Peekable<Enumerate<slice::Iter<&'static [u8]>>>,
+        root_idx: usize,
+        root: ElementId,
+        node: &VNode,
+    ) {
+        while let Some((mut attr_id, path)) = attrs.next_if(|(_, p)| p[0] == root_idx as u8) {
+            let id = self.assign_static_node_as_dynamic(path, root, node, attr_id);
+
+            loop {
+                self.write_attribute(&node.dynamic_attrs[attr_id], id);
+
+                // Only push the dynamic attributes forward if they match the current path (same element)
+                match attrs.next_if(|(_, p)| *p == path) {
+                    Some((next_attr_id, _)) => attr_id = next_attr_id,
+                    None => break,
                 }
-            };
+            }
+        }
+    }
+
+    fn write_attribute(&mut self, attribute: &crate::Attribute, id: ElementId) {
+        // Make sure we set the attribute's associated id
+        attribute.mounted_element.set(id);
+
+        // Safety: we promise not to re-alias this text later on after committing it to the mutation
+        let unbounded_name = unsafe { std::mem::transmute(attribute.name) };
+
+        match &attribute.value {
+            AttributeValue::Text(value) => {
+                // Safety: we promise not to re-alias this text later on after committing it to the mutation
+                let unbounded_value = unsafe { std::mem::transmute(*value) };
+
+                self.mutations.push(SetAttribute {
+                    name: unbounded_name,
+                    value: unbounded_value,
+                    ns: attribute.namespace,
+                    id,
+                })
+            }
+            AttributeValue::Bool(value) => self.mutations.push(SetBoolAttribute {
+                name: unbounded_name,
+                value: *value,
+                id,
+            }),
+            AttributeValue::Listener(_) => {
+                self.mutations.push(NewEventListener {
+                    // all listeners start with "on"
+                    name: &unbounded_name[2..],
+                    id,
+                })
+            }
+            AttributeValue::Float(_) => todo!(),
+            AttributeValue::Int(_) => todo!(),
+            AttributeValue::Any(_) => todo!(),
+            AttributeValue::None => todo!(),
         }
+    }
+
+    fn load_template_root(&mut self, template: &VNode, root_idx: usize) -> ElementId {
+        // Get an ID for this root since it's a real root
+        let this_id = self.next_root(template, root_idx);
+        template.root_ids[root_idx].set(Some(this_id));
+
+        self.mutations.push(LoadTemplate {
+            name: template.template.name,
+            index: root_idx,
+            id: this_id,
+        });
 
-        on_stack
+        this_id
+    }
+
+    /// We have some dynamic attributes attached to a some node
+    ///
+    /// That node needs to be loaded at runtime, so we need to give it an ID
+    ///
+    /// If the node in question is on the stack, we just return that ID
+    ///
+    /// If the node is not on the stack, we create a new ID for it and assign it
+    fn assign_static_node_as_dynamic(
+        &mut self,
+        path: &'static [u8],
+        this_id: ElementId,
+        template: &VNode,
+        attr_id: usize,
+    ) -> ElementId {
+        if path.len() == 1 {
+            return this_id;
+        }
+
+        // if attribute is on a root node, then we've already created the element
+        // Else, it's deep in the template and we should create a new id for it
+        let id = self.next_element(template, template.template.attr_paths[attr_id]);
+
+        self.mutations.push(Mutation::AssignId {
+            path: &path[1..],
+            id,
+        });
+
+        id
     }
 
     /// Insert a new template into the VirtualDom's template registry
@@ -210,17 +254,9 @@ impl<'b> VirtualDom {
             .insert(template.template.name, template.template);
 
         // If it's all dynamic nodes, then we don't need to register it
-        // Quickly run through and see if it's all just dynamic nodes
-        if template.template.roots.iter().all(|root| {
-            matches!(
-                root,
-                TemplateNode::Dynamic { .. } | TemplateNode::DynamicText { .. }
-            )
-        }) {
-            return;
+        if !template.template.is_completely_dynamic() {
+            self.mutations.templates.push(template.template);
         }
-
-        self.mutations.templates.push(template.template);
     }
 
     pub(crate) fn create_dynamic_node(
@@ -248,7 +284,7 @@ impl<'b> VirtualDom {
         let new_id = self.next_element(template, template.template.node_paths[idx]);
 
         // Make sure the text node is assigned to the correct element
-        text.id.set(new_id);
+        text.id.set(Some(new_id));
 
         // Safety: we promise not to re-alias this text later on after committing it to the mutation
         let value = unsafe { std::mem::transmute(text.value) };
@@ -266,7 +302,7 @@ impl<'b> VirtualDom {
 
     pub(crate) fn create_placeholder(
         &mut self,
-        slot: &Cell<ElementId>,
+        placeholder: &VPlaceholder,
         template: &'b VNode<'b>,
         idx: usize,
     ) -> usize {
@@ -274,7 +310,7 @@ impl<'b> VirtualDom {
         let id = self.next_element(template, template.template.node_paths[idx]);
 
         // Make sure the text node is assigned to the correct element
-        slot.set(id);
+        placeholder.id.set(Some(id));
 
         // Assign the ID to the existing node in the template
         self.mutations.push(AssignId {
@@ -296,15 +332,17 @@ impl<'b> VirtualDom {
         component: &'b VComponent<'b>,
         idx: usize,
     ) -> usize {
-        let props = component
-            .props
-            .take()
-            .expect("Props to always exist when a component is being created");
-
-        let unbounded_props = unsafe { std::mem::transmute(props) };
+        let scope = match component.props.take() {
+            Some(props) => {
+                let unbounded_props = unsafe { std::mem::transmute(props) };
+                let scope = self.new_scope(unbounded_props, component.name);
+                scope.id
+            }
+
+            // Component is coming back, it probably still exists, right?
+            None => component.scope.get().unwrap(),
+        };
 
-        let scope = self.new_scope(unbounded_props, component.name);
-        let scope = scope.id;
         component.scope.set(Some(scope));
 
         let return_nodes = unsafe { self.run_scope(scope).extend_lifetime_ref() };
@@ -394,4 +432,37 @@ impl<'b> VirtualDom {
 
         0
     }
+
+    fn set_slot(
+        &mut self,
+        template: &'b VNode<'b>,
+        slot: &'b Cell<Option<ElementId>>,
+        id: usize,
+    ) -> ElementId {
+        let id = self.next_element(template, template.template.node_paths[id]);
+        slot.set(Some(id));
+        id
+    }
+}
+
+fn collect_dyn_node_range(
+    dynamic_nodes: &mut Peekable<Enumerate<slice::Iter<&[u8]>>>,
+    root_idx: usize,
+) -> Option<(usize, usize)> {
+    let start = match dynamic_nodes.peek() {
+        Some((idx, p)) if p[0] == root_idx as u8 => *idx,
+        _ => return None,
+    };
+
+    let mut end = start;
+
+    while let Some((idx, p)) = dynamic_nodes.next_if(|(_, p)| p[0] == root_idx as u8) {
+        if p.len() == 1 {
+            continue;
+        }
+
+        end = idx;
+    }
+
+    Some((start, end))
 }

packages/core/src/diff.rs

@@ -1,14 +1,12 @@
-use std::cell::Cell;
-
 use crate::{
     arena::ElementId,
-    innerlude::{DirtyScope, VComponent, VText},
+    innerlude::{DirtyScope, VComponent, VPlaceholder, VText},
     mutations::Mutation,
     nodes::RenderReturn,
     nodes::{DynamicNode, VNode},
     scopes::ScopeId,
     virtual_dom::VirtualDom,
-    AttributeValue, TemplateNode,
+    Attribute, AttributeValue, TemplateNode,
 };
 
 use rustc_hash::{FxHashMap, FxHashSet};
@@ -56,89 +54,101 @@ impl<'b> VirtualDom {
     fn diff_err_to_ok(&mut self, _e: &anyhow::Error, _l: &'b VNode<'b>) {}
 
     fn diff_node(&mut self, left_template: &'b VNode<'b>, right_template: &'b VNode<'b>) {
-        if !std::ptr::eq(left_template.template.name, right_template.template.name)
-            && left_template.template.name != right_template.template.name
-        {
+        // If the templates are the same, we don't need to do anything, nor do we want to
+        if templates_are_the_same(left_template, right_template) {
+            return;
+        }
+
+        // If the templates are different by name, we need to replace the entire template
+        if templates_are_different(left_template, right_template) {
             return self.light_diff_templates(left_template, right_template);
         }
 
-        for (left_attr, right_attr) in left_template
+        // If the templates are the same, we can diff the attributes and children
+        // Start with the attributes
+        left_template
             .dynamic_attrs
             .iter()
             .zip(right_template.dynamic_attrs.iter())
-        {
-            // Move over the ID from the old to the new
-            right_attr
-                .mounted_element
-                .set(left_attr.mounted_element.get());
-
-            // We want to make sure anything listener that gets pulled is valid
-            if let AttributeValue::Listener(_) = right_attr.value {
-                self.update_template(left_attr.mounted_element.get(), right_template);
-            }
+            .for_each(|(left_attr, right_attr)| {
+                // Move over the ID from the old to the new
+                right_attr
+                    .mounted_element
+                    .set(left_attr.mounted_element.get());
+
+                // We want to make sure anything listener that gets pulled is valid
+                if let AttributeValue::Listener(_) = right_attr.value {
+                    self.update_template(left_attr.mounted_element.get(), right_template);
+                }
 
-            if left_attr.value != right_attr.value || left_attr.volatile {
-                // todo: add more types of attribute values
-                match right_attr.value {
-                    AttributeValue::Text(text) => {
-                        let name = unsafe { std::mem::transmute(left_attr.name) };
-                        let value = unsafe { std::mem::transmute(text) };
-                        self.mutations.push(Mutation::SetAttribute {
-                            id: left_attr.mounted_element.get(),
-                            ns: right_attr.namespace,
-                            name,
-                            value,
-                        });
-                    }
-                    // todo: more types of attribute values
-                    _ => todo!("other attribute types"),
+                // If the attributes are different (or volatile), we need to update them
+                if left_attr.value != right_attr.value || left_attr.volatile {
+                    self.update_attribute(right_attr, left_attr);
                 }
-            }
-        }
+            });
 
-        for (idx, (left_node, right_node)) in left_template
+        // Now diff the dynamic nodes
+        left_template
             .dynamic_nodes
             .iter()
             .zip(right_template.dynamic_nodes.iter())
             .enumerate()
-        {
-            match (left_node, right_node) {
-                (Text(left), Text(right)) => self.diff_vtext(left, right),
-                (Fragment(left), Fragment(right)) => self.diff_non_empty_fragment(left, right),
-                (Placeholder(left), Placeholder(right)) => {
-                    right.set(left.get());
-                }
-                (Component(left), Component(right)) => {
-                    self.diff_vcomponent(left, right, right_template, idx)
-                }
-                (Placeholder(left), Fragment(right)) => {
-                    self.replace_placeholder_with_nodes(left, right)
-                }
-                (Fragment(left), Placeholder(right)) => {
-                    self.replace_nodes_with_placeholder(left, right)
-                }
-                _ => todo!(),
-            };
-        }
+            .for_each(|(idx, (left_node, right_node))| {
+                self.diff_dynamic_node(left_node, right_node, right_template, idx);
+            });
 
-        // Make sure the roots get transferred over
-        for (left, right) in left_template
+        // Make sure the roots get transferred over while we're here
+        left_template
             .root_ids
             .iter()
             .zip(right_template.root_ids.iter())
-        {
-            right.set(left.get());
+            .for_each(|(left, right)| right.set(left.get()));
+    }
+
+    fn diff_dynamic_node(
+        &mut self,
+        left_node: &'b DynamicNode<'b>,
+        right_node: &'b DynamicNode<'b>,
+        node: &'b VNode<'b>,
+        idx: usize,
+    ) {
+        match (left_node, right_node) {
+            (Text(left), Text(right)) => self.diff_vtext(left, right),
+            (Fragment(left), Fragment(right)) => self.diff_non_empty_fragment(left, right),
+            (Placeholder(left), Placeholder(right)) => right.id.set(left.id.get()),
+            (Component(left), Component(right)) => self.diff_vcomponent(left, right, node, idx),
+            (Placeholder(left), Fragment(right)) => self.replace_placeholder(left, right),
+            (Fragment(left), Placeholder(right)) => self.node_to_placeholder(left, right),
+            _ => todo!("This is an usual custom case for dynamic nodes. We don't know how to handle it yet."),
+        };
+    }
+
+    fn update_attribute(&mut self, right_attr: &Attribute, left_attr: &Attribute) {
+        // todo: add more types of attribute values
+        match right_attr.value {
+            AttributeValue::Text(text) => {
+                let name = unsafe { std::mem::transmute(left_attr.name) };
+                let value = unsafe { std::mem::transmute(text) };
+                self.mutations.push(Mutation::SetAttribute {
+                    id: left_attr.mounted_element.get(),
+                    ns: right_attr.namespace,
+                    name,
+                    value,
+                });
+            }
+            // todo: more types of attribute values
+            _ => todo!("other attribute types"),
         }
     }
 
-    fn replace_placeholder_with_nodes(&mut self, l: &'b Cell<ElementId>, r: &'b [VNode<'b>]) {
+    fn replace_placeholder(&mut self, l: &'b VPlaceholder, r: &'b [VNode<'b>]) {
         let m = self.create_children(r);
-        let id = l.get();
+        let id = l.id.get().unwrap();
         self.mutations.push(Mutation::ReplaceWith { id, m });
         self.reclaim(id);
     }
 
-    fn replace_nodes_with_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b Cell<ElementId>) {
+    fn node_to_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b VPlaceholder) {
         // Remove the old nodes, except for one
         self.remove_nodes(&l[1..]);
 
@@ -147,7 +157,7 @@ impl<'b> VirtualDom {
 
         // Create the placeholder first, ensuring we get a dedicated ID for the placeholder
         let placeholder = self.next_element(&l[0], &[]);
-        r.set(placeholder);
+        r.id.set(Some(placeholder));
         self.mutations
             .push(Mutation::CreatePlaceholder { id: placeholder });
 
@@ -184,11 +194,12 @@ impl<'b> VirtualDom {
 
         // Make sure the new vcomponent has the right scopeid associated to it
         let scope_id = left.scope.get().unwrap();
+
         right.scope.set(Some(scope_id));
 
         // copy out the box for both
         let old = self.scopes[scope_id.0].props.as_ref();
-        let new = right.props.replace(None).unwrap();
+        let new = right.props.take().unwrap();
 
         // If the props are static, then we try to memoize by setting the new with the old
         // The target scopestate still has the reference to the old props, so there's no need to update anything
@@ -203,6 +214,12 @@ impl<'b> VirtualDom {
         // Now run the component and diff it
         self.run_scope(scope_id);
         self.diff_scope(scope_id);
+
+        println!("diffed component scope {:?}", scope_id);
+        self.dirty_scopes.remove(&DirtyScope {
+            height: self.scopes[scope_id.0].height,
+            id: scope_id,
+        });
     }
 
     /// Lightly diff the two templates, checking only their roots.
@@ -257,9 +274,8 @@ impl<'b> VirtualDom {
     /// This just moves the ID of the old node over to the new node, and then sets the text of the new node if it's
     /// different.
     fn diff_vtext(&mut self, left: &'b VText<'b>, right: &'b VText<'b>) {
-        let id = left.id.get();
-
-        right.id.set(id);
+        let id = left.id.get().unwrap();
+        right.id.set(Some(id));
         if left.value != right.value {
             let value = unsafe { std::mem::transmute(right.value) };
             self.mutations.push(Mutation::SetText { id, value });
@@ -271,9 +287,9 @@ impl<'b> VirtualDom {
     /// All IDs will be garbage collected
     fn replace_inner(&mut self, node: &'b VNode<'b>) -> ElementId {
         let id = match node.dynamic_root(0) {
-            None => node.root_ids[0].get(),
-            Some(Text(t)) => t.id.get(),
-            Some(Placeholder(e)) => e.get(),
+            None => node.root_ids[0].get().unwrap(),
+            Some(Text(t)) => t.id.get().unwrap(),
+            Some(Placeholder(e)) => e.id.get().unwrap(),
             Some(Fragment(nodes)) => {
                 let id = self.replace_inner(&nodes[0]);
                 self.remove_nodes(&nodes[1..]);
@@ -311,14 +327,18 @@ impl<'b> VirtualDom {
 
             match dyn_node {
                 Component(comp) => {
-                    let scope = comp.scope.get().unwrap();
+                    let scope = comp.scope.take().unwrap();
                     match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } {
                         RenderReturn::Sync(Ok(t)) => self.clean_up_node(t),
                         _ => todo!("cannot handle nonstandard nodes"),
                     };
                 }
-                Text(t) => self.reclaim(t.id.get()),
-                Placeholder(t) => self.reclaim(t.get()),
+                Text(t) => {
+                    if let Some(id) = t.id.take() {
+                        self.reclaim(id)
+                    }
+                }
+                Placeholder(t) => self.reclaim(t.id.take().unwrap()),
                 Fragment(nodes) => nodes.iter().for_each(|node| self.clean_up_node(node)),
             };
         }
@@ -346,25 +366,25 @@ impl<'b> VirtualDom {
     fn remove_root_node(&mut self, node: &'b VNode<'b>, idx: usize) {
         match node.dynamic_root(idx) {
             Some(Text(i)) => {
-                let id = i.id.get();
+                let id = i.id.take().unwrap();
                 self.mutations.push(Mutation::Remove { id });
                 self.reclaim(id);
             }
             Some(Placeholder(e)) => {
-                let id = e.get();
+                let id = e.id.take().unwrap();
                 self.mutations.push(Mutation::Remove { id });
                 self.reclaim(id);
             }
             Some(Fragment(nodes)) => self.remove_nodes(nodes),
             Some(Component(comp)) => {
-                let scope = comp.scope.get().unwrap();
+                let scope = comp.scope.take().unwrap();
                 match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } {
                     RenderReturn::Sync(Ok(t)) => self.remove_node(t),
                     _ => todo!("cannot handle nonstandard nodes"),
                 };
             }
             None => {
-                let id = node.root_ids[idx].get();
+                let id = node.root_ids[idx].get().unwrap();
                 self.mutations.push(Mutation::Remove { id });
                 self.reclaim(id);
             }
@@ -750,12 +770,16 @@ impl<'b> VirtualDom {
     fn remove_node(&mut self, node: &'b VNode<'b>) {
         for (idx, _) in node.template.roots.iter().enumerate() {
             let id = match node.dynamic_root(idx) {
-                Some(Text(t)) => t.id.get(),
-                Some(Placeholder(t)) => t.get(),
+                Some(Text(t)) => t.id.take(),
+                Some(Placeholder(t)) => t.id.take(),
                 Some(Fragment(t)) => return self.remove_nodes(t),
-                Some(Component(comp)) => return self.remove_component(comp.scope.get().unwrap()),
+                Some(Component(comp)) => {
+                    comp.scope.set(None);
+                    return self.remove_component(comp.scope.get().unwrap());
+                }
                 None => node.root_ids[idx].get(),
-            };
+            }
+            .unwrap();
 
             self.mutations.push(Mutation::Remove { id })
         }
@@ -763,7 +787,7 @@ impl<'b> VirtualDom {
         self.clean_up_node(node);
 
         for root in node.root_ids {
-            let id = root.get();
+            let id = root.get().unwrap();
             if id.0 != 0 {
                 self.reclaim(id);
             }
@@ -786,41 +810,45 @@ impl<'b> VirtualDom {
 
     /// Push all the real nodes on the stack
     fn push_all_real_nodes(&mut self, node: &'b VNode<'b>) -> usize {
-        let mut onstack = 0;
-
-        for (idx, _) in node.template.roots.iter().enumerate() {
-            match node.dynamic_root(idx) {
-                Some(Text(t)) => {
-                    self.mutations.push(Mutation::PushRoot { id: t.id.get() });
-                    onstack += 1;
-                }
-                Some(Placeholder(t)) => {
-                    self.mutations.push(Mutation::PushRoot { id: t.get() });
-                    onstack += 1;
-                }
-                Some(Fragment(nodes)) => {
-                    for node in *nodes {
-                        onstack += self.push_all_real_nodes(node);
+        node.template
+            .roots
+            .iter()
+            .enumerate()
+            .map(|(idx, _)| {
+                match node.dynamic_root(idx) {
+                    Some(Text(t)) => {
+                        self.mutations.push(Mutation::PushRoot {
+                            id: t.id.get().unwrap(),
+                        });
+                        1
                     }
-                }
-                Some(Component(comp)) => {
-                    let scope = comp.scope.get().unwrap();
-                    onstack +=
+                    Some(Placeholder(t)) => {
+                        self.mutations.push(Mutation::PushRoot {
+                            id: t.id.get().unwrap(),
+                        });
+                        1
+                    }
+                    Some(Fragment(nodes)) => nodes
+                        .iter()
+                        .map(|node| self.push_all_real_nodes(node))
+                        .count(),
+
+                    Some(Component(comp)) => {
+                        let scope = comp.scope.get().unwrap();
                         match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } {
                             RenderReturn::Sync(Ok(node)) => self.push_all_real_nodes(node),
                             _ => todo!(),
                         }
-                }
-                None => {
-                    self.mutations.push(Mutation::PushRoot {
-                        id: node.root_ids[idx].get(),
-                    });
-                    onstack += 1;
-                }
-            };
-        }
-
-        onstack
+                    }
+                    None => {
+                        self.mutations.push(Mutation::PushRoot {
+                            id: node.root_ids[idx].get().unwrap(),
+                        });
+                        1
+                    }
+                };
+            })
+            .count()
     }
 
     fn create_children(&mut self, nodes: &'b [VNode<'b>]) -> usize {
@@ -841,10 +869,10 @@ impl<'b> VirtualDom {
 
     fn find_first_element(&self, node: &'b VNode<'b>) -> ElementId {
         match node.dynamic_root(0) {
-            None => node.root_ids[0].get(),
-            Some(Text(t)) => t.id.get(),
+            None => node.root_ids[0].get().unwrap(),
+            Some(Text(t)) => t.id.get().unwrap(),
             Some(Fragment(t)) => self.find_first_element(&t[0]),
-            Some(Placeholder(t)) => t.get(),
+            Some(Placeholder(t)) => t.id.get().unwrap(),
             Some(Component(comp)) => {
                 let scope = comp.scope.get().unwrap();
                 match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } {
@@ -857,10 +885,10 @@ impl<'b> VirtualDom {
 
     fn find_last_element(&self, node: &'b VNode<'b>) -> ElementId {
         match node.dynamic_root(node.template.roots.len() - 1) {
-            None => node.root_ids.last().unwrap().get(),
-            Some(Text(t)) => t.id.get(),
+            None => node.root_ids.last().unwrap().get().unwrap(),
+            Some(Text(t)) => t.id.get().unwrap(),
             Some(Fragment(t)) => self.find_last_element(t.last().unwrap()),
-            Some(Placeholder(t)) => t.get(),
+            Some(Placeholder(t)) => t.id.get().unwrap(),
             Some(Component(comp)) => {
                 let scope = comp.scope.get().unwrap();
                 match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } {
@@ -894,6 +922,21 @@ impl<'b> VirtualDom {
     }
 }
 
+/// Are the templates the same?
+///
+/// We need to check for the obvious case, and the non-obvious case where the template as cloned
+///
+/// We use the pointer of the dynamic_node list in this case
+fn templates_are_the_same<'b>(left_template: &'b VNode<'b>, right_template: &'b VNode<'b>) -> bool {
+    std::ptr::eq(left_template, right_template)
+        || std::ptr::eq(left_template.dynamic_nodes, right_template.dynamic_nodes)
+}
+
+fn templates_are_different(left_template: &VNode, right_template: &VNode) -> bool {
+    !std::ptr::eq(left_template.template.name, right_template.template.name)
+        && left_template.template.name != right_template.template.name
+}
+
 fn matching_components<'a>(
     left: &'a VNode<'a>,
     right: &'a VNode<'a>,

packages/core/src/dirty_scope.rs

@@ -1,19 +1,21 @@
+use std::hash::Hash;
+
 use crate::ScopeId;
 
-#[derive(Debug, Clone, PartialEq, Eq, Hash)]
+#[derive(Debug, Clone, Eq, PartialOrd, Ord)]
 pub struct DirtyScope {
     pub height: u32,
     pub id: ScopeId,
 }
 
-impl PartialOrd for DirtyScope {
-    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
-        Some(self.height.cmp(&other.height))
+impl PartialEq for DirtyScope {
+    fn eq(&self, other: &Self) -> bool {
+        self.id == other.id
     }
 }
 
-impl Ord for DirtyScope {
-    fn cmp(&self, other: &Self) -> std::cmp::Ordering {
-        self.height.cmp(&other.height)
+impl Hash for DirtyScope {
+    fn hash<H: std::hash::Hasher>(&self, state: &mut H) {
+        self.id.hash(state);
     }
 }

packages/core/src/mutations.rs

@@ -230,9 +230,6 @@ pub enum Mutation<'a> {
         /// The name of the event to listen for.
         name: &'a str,
 
-        /// The ID of the node to attach the listener to.
-        scope: ScopeId,
-
         /// The ID of the node to attach the listener to.
         id: ElementId,
     },

packages/core/src/nodes.rs

@@ -46,7 +46,7 @@ pub struct VNode<'a> {
 
     /// The IDs for the roots of this template - to be used when moving the template around and removing it from
     /// the actual Dom
-    pub root_ids: &'a [Cell<ElementId>],
+    pub root_ids: &'a [Cell<Option<ElementId>>],
 
     /// The dynamic parts of the template
     pub dynamic_nodes: &'a [DynamicNode<'a>],
@@ -128,6 +128,18 @@ pub struct Template<'a> {
     pub attr_paths: &'a [&'a [u8]],
 }
 
+impl<'a> Template<'a> {
+    /// Is this template worth caching at all, since it's completely runtime?
+    ///
+    /// There's no point in saving templates that are completely dynamic, since they'll be recreated every time anyway.
+    pub fn is_completely_dynamic(&self) -> bool {
+        use TemplateNode::*;
+        self.roots
+            .iter()
+            .all(|root| matches!(root, Dynamic { .. } | DynamicText { .. }))
+    }
+}
+
 /// A statically known node in a layout.
 ///
 /// This can be created at compile time, saving the VirtualDom time when diffing the tree
@@ -201,7 +213,7 @@ pub enum DynamicNode<'a> {
     /// Used by suspense when a node isn't ready and by fragments that don't render anything
     ///
     /// In code, this is just an ElementId whose initial value is set to 0 upon creation
-    Placeholder(Cell<ElementId>),
+    Placeholder(VPlaceholder),
 
     /// A list of VNodes.
     ///
@@ -236,7 +248,7 @@ pub struct VComponent<'a> {
     /// It is possible that components get folded at comppile time, so these shouldn't be really used as a key
     pub render_fn: *const (),
 
-    pub(crate) props: Cell<Option<Box<dyn AnyProps<'a> + 'a>>>,
+    pub(crate) props: RefCell<Option<Box<dyn AnyProps<'a> + 'a>>>,
 }
 
 impl<'a> std::fmt::Debug for VComponent<'a> {
@@ -256,7 +268,14 @@ pub struct VText<'a> {
     pub value: &'a str,
 
     /// The ID of this node in the real DOM
-    pub id: Cell<ElementId>,
+    pub id: Cell<Option<ElementId>>,
+}
+
+/// A placeholder node, used by suspense and fragments
+#[derive(Debug, Default)]
+pub struct VPlaceholder {
+    /// The ID of this node in the real DOM
+    pub id: Cell<Option<ElementId>>,
 }
 
 /// An attribute of the TemplateNode, created at compile time

packages/core/src/scopes.rs

@@ -237,7 +237,10 @@ impl<'src> ScopeState {
     /// This method should be used when you want to schedule an update for a component
     pub fn schedule_update_any(&self) -> Arc<dyn Fn(ScopeId) + Send + Sync> {
         let chan = self.tasks.sender.clone();
-        Arc::new(move |id| drop(chan.unbounded_send(SchedulerMsg::Immediate(id))))
+        Arc::new(move |id| {
+            println!("Scheduling update for {:?}", id);
+            chan.unbounded_send(SchedulerMsg::Immediate(id)).unwrap();
+        })
     }
 
     /// Mark this scope as dirty, and schedule a render for it.
@@ -448,7 +451,7 @@ impl<'src> ScopeState {
             name: fn_name,
             render_fn: component as *const (),
             static_props: P::IS_STATIC,
-            props: Cell::new(Some(extended)),
+            props: RefCell::new(Some(extended)),
             scope: Cell::new(None),
         })
     }

packages/core/src/virtual_dom.rs

@@ -280,6 +280,9 @@ impl VirtualDom {
     /// Whenever the VirtualDom "works", it will re-render this scope
     pub fn mark_dirty(&mut self, id: ScopeId) {
         let height = self.scopes[id.0].height;
+
+        println!("marking scope {} dirty with height {}", id.0, height);
+
         self.dirty_scopes.insert(DirtyScope { height, id });
     }
 
@@ -516,6 +519,9 @@ impl VirtualDom {
     pub async fn render_with_deadline(&mut self, deadline: impl Future<Output = ()>) -> Mutations {
         pin_mut!(deadline);
 
+        self.process_events();
+        println!("rendering with dirty scopes {:#?}", self.dirty_scopes);
+
         loop {
             // first, unload any complete suspense trees
             for finished_fiber in self.finished_fibers.drain(..) {
@@ -542,6 +548,8 @@ impl VirtualDom {
             if let Some(dirty) = self.dirty_scopes.iter().next().cloned() {
                 self.dirty_scopes.remove(&dirty);
 
+                println!("diffing scope {:?}", dirty);
+
                 // if the scope is currently suspended, then we should skip it, ignoring any tasks calling for an update
                 if self.is_scope_suspended(dirty.id) {
                     continue;

packages/router/Cargo.toml

@@ -36,6 +36,7 @@ thiserror = "1.0.30"
 futures-util = "0.3.21"
 serde = { version = "1", optional = true }
 serde_urlencoded = { version = "0.7.1", optional = true }
+simple_logger = "4.0.0"
 
 [features]
 default = ["query"]
@@ -50,6 +51,7 @@ wasm-logger = "0.2.0"
 wasm-bindgen-test = "0.3"
 gloo-utils = "0.1.2"
 dioxus-web = { path = "../web" }
+dioxus-desktop = { path = "../desktop" }
 
 [target.wasm32-unknown-unknown.dev-dependencies]
 dioxus-router = { path = ".", features = ["web"] }

packages/router/examples/simple_desktop.rs

@@ -0,0 +1,52 @@
+use dioxus::prelude::*;
+use dioxus_router::*;
+
+fn main() {
+    simple_logger::SimpleLogger::new()
+        .with_level(log::LevelFilter::Debug)
+        .with_module_level("dioxus_router", log::LevelFilter::Trace)
+        .with_module_level("dioxus", log::LevelFilter::Trace)
+        .init()
+        .unwrap();
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        Router {
+            h1 { "Your app here" }
+            ul {
+                Link { to: "/", li { "home" } }
+                Link { to: "/blog", li { "blog" } }
+                Link { to: "/blog/tim", li { "tims' blog" } }
+                Link { to: "/blog/bill", li { "bills' blog" } }
+                Link { to: "/apples", li { "go to apples" } }
+            }
+            Route { to: "/", Home {} }
+            Route { to: "/blog/", BlogList {} }
+            Route { to: "/blog/:id/", BlogPost {} }
+            Route { to: "/oranges", "Oranges are not apples!" }
+            Redirect { from: "/apples", to: "/oranges" }
+        }
+    })
+}
+
+fn Home(cx: Scope) -> Element {
+    log::debug!("rendering home {:?}", cx.scope_id());
+    cx.render(rsx! { h1 { "Home" } })
+}
+
+fn BlogList(cx: Scope) -> Element {
+    log::debug!("rendering blog list {:?}", cx.scope_id());
+    cx.render(rsx! { div { "Blog List" } })
+}
+
+fn BlogPost(cx: Scope) -> Element {
+    let Some(id) = use_route(cx).segment("id") else {
+        return cx.render(rsx! { div { "No blog post id" } })
+    };
+
+    log::debug!("rendering blog post {}", id);
+
+    cx.render(rsx! { div { "{id:?}" } })
+}

packages/router/src/components/link.rs

@@ -120,8 +120,11 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
             prevent_default: "{prevent_default}",
             target: format_args!("{}", if * new_tab { "_blank" } else { "" }),
             onclick: move |_| {
+                log::trace!("Clicked link to {}", to);
+
                 if !outerlink {
                     if let Some(service) = svc {
+                        log::trace!("Pushing route to {}", to);
                         service.push_route(to, cx.props.title.map(|f| f.to_string()), None);
                     } else {
                         log::error!(

packages/router/src/components/route.rs

@@ -45,13 +45,13 @@ pub fn Route<'a>(cx: Scope<'a, RouteProps<'a>>) -> Element {
         router_root.register_total_route(route_context.total_route, cx.scope_id());
     });
 
-    log::trace!("Checking Route: {:?}", cx.props.to);
+    println!("Checking Route: {:?}", cx.props.to);
 
     if router_root.should_render(cx.scope_id()) {
-        log::trace!("Route should render: {:?}", cx.scope_id());
+        println!("Route should render: {:?}", cx.scope_id());
         cx.render(rsx!(&cx.props.children))
     } else {
-        log::trace!("Route should *not* render: {:?}", cx.scope_id());
+        println!("Route should *not* render: {:?}", cx.scope_id());
         cx.render(rsx!(()))
     }
 }

packages/router/src/service.rs

@@ -180,6 +180,7 @@ impl RouterService {
         (self.regen_any_route)(self.router_id);
 
         for listener in self.onchange_listeners.borrow().iter() {
+            log::trace!("Regenerating scope {:?}", listener);
             (self.regen_any_route)(*listener);
         }
 

packages/rsx/src/lib.rs

@@ -147,7 +147,8 @@ impl<'a> ToTokens for TemplateRenderer<'a> {
                 parent: None,
                 key: #key_tokens,
                 template: TEMPLATE,
-                root_ids: std::cell::Cell::from_mut( __cx.bump().alloc([::dioxus::core::ElementId(0); #num_roots]) as &mut [::dioxus::core::ElementId]).as_slice_of_cells(),
+                root_ids: std::cell::Cell::from_mut( __cx.bump().alloc([None; #num_roots]) as &mut _).as_slice_of_cells(),
+                // root_ids: std::cell::Cell::from_mut( __cx.bump().alloc([None; #num_roots]) as &mut [::dioxus::core::ElementId]).as_slice_of_cells(),
                 dynamic_nodes: __cx.bump().alloc([ #( #node_printer ),* ]),
                 dynamic_attrs: __cx.bump().alloc([ #( #dyn_attr_printer ),* ]),
             }

packages/web/src/dom.rs

@@ -7,7 +7,7 @@
 //! - tests to ensure dyn_into works for various event types.
 //! - Partial delegation?>
 
-use dioxus_core::{Mutation, Template, TemplateAttribute, TemplateNode};
+use dioxus_core::{ElementId, Mutation, Template, TemplateAttribute, TemplateNode};
 use dioxus_html::{event_bubbles, CompositionData, FormData};
 use dioxus_interpreter_js::{save_template, Channel};
 use futures_channel::mpsc;
@@ -25,8 +25,16 @@ pub struct WebsysDom {
     interpreter: Channel,
 }
 
+pub struct UiEvent {
+    pub name: String,
+    pub bubbles: bool,
+    pub element: ElementId,
+    pub data: Rc<dyn Any>,
+    pub event: Event,
+}
+
 impl WebsysDom {
-    pub fn new(cfg: Config, event_channel: mpsc::UnboundedSender<Event>) -> Self {
+    pub fn new(cfg: Config, event_channel: mpsc::UnboundedSender<UiEvent>) -> Self {
         // eventually, we just want to let the interpreter do all the work of decoding events into our event type
         // a match here in order to avoid some error during runtime browser test
         let document = load_document();
@@ -38,7 +46,28 @@ impl WebsysDom {
 
         let handler: Closure<dyn FnMut(&Event)> =
             Closure::wrap(Box::new(move |event: &web_sys::Event| {
-                let _ = event_channel.unbounded_send(event.clone());
+                let name = event.type_();
+                let element = walk_event_for_id(event);
+                let bubbles = dioxus_html::event_bubbles(name.as_str());
+                if let Some((element, target)) = element {
+                    if target
+                        .get_attribute("dioxus-prevent-default")
+                        .as_deref()
+                        .map(|f| f.trim_start_matches("on"))
+                        == Some(&name)
+                    {
+                        event.prevent_default();
+                    }
+
+                    let data = virtual_event_from_websys_event(event.clone(), target);
+                    let _ = event_channel.unbounded_send(UiEvent {
+                        name,
+                        bubbles,
+                        element,
+                        data,
+                        event: event.clone(),
+                    });
+                }
             }));
 
         dioxus_interpreter_js::initilize(root.unchecked_into(), handler.as_ref().unchecked_ref());
@@ -56,8 +85,6 @@ impl WebsysDom {
     }
 
     pub fn load_templates(&mut self, templates: &[Template]) {
-        log::debug!("Loading templates {:?}", templates);
-
         for template in templates {
             let mut roots = vec![];
 
@@ -310,3 +337,26 @@ fn read_input_to_data(target: Element) -> Rc<FormData> {
         files: None,
     })
 }
+
+fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> {
+    use wasm_bindgen::JsCast;
+
+    let mut target = event
+        .target()
+        .expect("missing target")
+        .dyn_into::<web_sys::Element>()
+        .expect("not a valid element");
+
+    loop {
+        match target.get_attribute("data-dioxus-id").map(|f| f.parse()) {
+            Some(Ok(id)) => return Some((ElementId(id), target)),
+            Some(Err(_)) => return None,
+
+            // walk the tree upwards until we actually find an event target
+            None => match target.parent_element() {
+                Some(parent) => target = parent,
+                None => return None,
+            },
+        }
+    }
+}

packages/web/src/lib.rs

@@ -218,13 +218,7 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
         // Dequeue all of the events from the channel in send order
         // todo: we should re-order these if possible
         while let Some(evt) = res {
-            let name = evt.type_();
-            let element = walk_event_for_id(&evt);
-            let bubbles = dioxus_html::event_bubbles(name.as_str());
-            if let Some((element, target)) = element {
-                let data = virtual_event_from_websys_event(evt, target);
-                dom.handle_event(name.as_str(), data, element, bubbles);
-            }
+            dom.handle_event(evt.name.as_str(), evt.data, evt.element, evt.bubbles);
             res = rx.try_next().transpose().unwrap().ok();
         }
 
@@ -250,29 +244,6 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
     }
 }
 
-fn walk_event_for_id(event: &web_sys::Event) -> Option<(ElementId, web_sys::Element)> {
-    use wasm_bindgen::JsCast;
-
-    let mut target = event
-        .target()
-        .expect("missing target")
-        .dyn_into::<web_sys::Element>()
-        .expect("not a valid element");
-
-    loop {
-        match target.get_attribute("data-dioxus-id").map(|f| f.parse()) {
-            Some(Ok(id)) => return Some((ElementId(id), target)),
-            Some(Err(_)) => return None,
-
-            // walk the tree upwards until we actually find an event target
-            None => match target.parent_element() {
-                Some(parent) => target = parent,
-                None => return None,
-            },
-        }
-    }
-}
-
 // if should_hydrate {
 //     // todo: we need to split rebuild and initialize into two phases
 //     // it's a waste to produce edits just to get the vdom loaded