Merge branch 'master' into fix-non-str-attributes

.github/workflows/docs.yml

@@ -13,7 +13,6 @@ jobs:
     runs-on: ubuntu-latest
     environment: docs
     steps:
-      - uses: actions/checkout@v3
 
       # NOTE: Comment out when https://github.com/rust-lang/mdBook/pull/1306 is merged and released
       # - name: Setup mdBook
@@ -25,6 +24,7 @@ jobs:
       - name: Setup mdBook
         run: |
           cargo install mdbook --git https://github.com/Ruin0x11/mdBook.git --branch localization --rev e74fdb1
+      - uses: actions/checkout@v3
 
       - name: Build
         run: cd docs &&

.github/workflows/macos.yml

@@ -30,13 +30,13 @@ jobs:
     name: Test Suite
     runs-on: macos-latest
     steps:
-      - uses: actions/checkout@v3
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           toolchain: stable
           override: true
       - uses: Swatinem/rust-cache@v2
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: test

.github/workflows/main.yml

@@ -32,7 +32,6 @@ jobs:
     name: Check
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
@@ -41,6 +40,7 @@ jobs:
       - uses: Swatinem/rust-cache@v2
       - run: sudo apt-get update
       - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: check
@@ -51,7 +51,6 @@ jobs:
     name: Test Suite
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
@@ -63,6 +62,7 @@ jobs:
       - uses: davidB/rust-cargo-make@v1
       - uses: browser-actions/setup-firefox@latest
       - uses: jetli/wasm-pack-action@v0.4.0
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: make
@@ -73,7 +73,6 @@ jobs:
     name: Rustfmt
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
@@ -81,6 +80,7 @@ jobs:
           override: true
       - uses: Swatinem/rust-cache@v2
       - run: rustup component add rustfmt
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: fmt
@@ -91,7 +91,6 @@ jobs:
     name: Clippy
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
@@ -101,6 +100,7 @@ jobs:
       - run: sudo apt-get update
       - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev
       - run: rustup component add clippy
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: clippy

.github/workflows/windows.yml

@@ -47,8 +47,6 @@ jobs:
       # which causes failures for some of rustfmt's line-ending sensitive tests
       - name: disable git eol translation
         run: git config --global core.autocrlf false
-      - name: checkout
-        uses: actions/checkout@v3
 
         # Run build
       - name: Install Rustup using win.rustup.rs
@@ -66,6 +64,9 @@ jobs:
         if: matrix.target == 'x86_64-pc-windows-gnu' && matrix.channel == 'nightly'
         shell: bash
 
+      - name: checkout
+        uses: actions/checkout@v3
+
       - name: test
         run: |
           rustc -Vv

Cargo.toml

@@ -57,6 +57,7 @@ reqwest = { version = "0.11.9", features = ["json"] }
 fern = { version = "0.6.0", features = ["colored"] }
 thiserror = "1.0.30"
 env_logger = "0.9.0"
+simple_logger = "4.0.0"
 
 [profile.release]
 opt-level = 3

examples/crm.rs

@@ -30,7 +30,7 @@ fn app(cx: Scope) -> Element {
                 integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
                 crossorigin: "anonymous",
             }
-            h1 {"Dioxus CRM Example"}
+            h1 { "Dioxus CRM Example" }
             Router {
                 Route { to: "/",
                     div { class: "crm",
@@ -40,12 +40,12 @@ fn app(cx: Scope) -> Element {
                                 div { class: "client", style: "margin-bottom: 50px",
                                     p { "First Name: {client.first_name}" }
                                     p { "Last Name: {client.last_name}" }
-                                    p {"Description: {client.description}"}
+                                    p { "Description: {client.description}" }
                                 })
                             )
                         }
                         Link { to: "/new", class: "pure-button pure-button-primary", "Add New" }
-                        Link { to: "/new", class: "pure-button", "Settings" }
+                        Link { to: "/settings", class: "pure-button", "Settings" }
                     }
                 }
                 Route { to: "/new",

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!()
 }

examples/flat_router.rs

@@ -7,7 +7,6 @@ fn main() {
 
     let cfg = Config::new().with_window(
         WindowBuilder::new()
-            .with_title("Spinsense Client")
             .with_inner_size(LogicalSize::new(600, 1000))
             .with_resizable(false),
     );
@@ -17,21 +16,21 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
-        Router {
-            Route { to: "/", "Home" }
-            Route { to: "/games", "Games" }
-            Route { to: "/play", "Play" }
-            Route { to: "/settings", "Settings" }
+        div {
+            Router {
+                Route { to: "/", "Home" }
+                Route { to: "/games", "Games" }
+                Route { to: "/play", "Play" }
+                Route { to: "/settings", "Settings" }
 
-            p {
-                "----"
-            }
-            nav {
-                ul {
-                    Link { to: "/", li { "Home" } }
-                    Link { to: "/games", li { "Games" } }
-                    Link { to: "/play", li { "Play" } }
-                    Link { to: "/settings", li { "Settings" } }
+                p { "----" }
+                nav {
+                    ul {
+                        Link { to: "/", li { "Home" } }
+                        Link { to: "/games", li { "Games" } }
+                        Link { to: "/play", li { "Play" } }
+                        Link { to: "/settings", li { "Settings" } }
+                    }
                 }
             }
         }

examples/simple_desktop.rs

@@ -0,0 +1,60 @@
+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: "/blog/james",
+                        li { "james amazing' 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 {
+            h3 { "blog post: {id:?}"  }
+            Link { to: "/blog/", "back to blog list" }
+        }
+    })
+}

examples/svg_basic.rs

@@ -67,6 +67,12 @@ fn app(cx: Scope) -> Element {
             stroke: "blue",
             stroke_width: "5",
         }
+        path {
+            d: "M9.00001 9C9 62 103.5 124 103.5 178",
+            stroke: "#3CC4DC",
+            "stroke-linecap": "square",
+            "stroke-width": "square",
+        }
     }))
 }
 

packages/core/Cargo.toml

@@ -36,6 +36,7 @@ serde = { version = "1", features = ["derive"], optional = true }
 anyhow = "1.0.66"
 
 smallbox = "0.8.1"
+log = "0.4.17"
 
 [dev-dependencies]
 tokio = { version = "*", features = ["full"] }

packages/core/src/arena.rs

@@ -1,4 +1,7 @@
-use crate::{nodes::RenderReturn, nodes::VNode, virtual_dom::VirtualDom, DynamicNode, ScopeId};
+use crate::{
+    nodes::RenderReturn, nodes::VNode, virtual_dom::VirtualDom, AttributeValue, DynamicNode,
+    ScopeId,
+};
 use bumpalo::boxed::Box as BumpBox;
 
 /// An Element's unique identifier.
@@ -34,14 +37,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();
 
@@ -75,11 +78,18 @@ impl VirtualDom {
 
     // Drop a scope and all its children
     pub(crate) fn drop_scope(&mut self, id: ScopeId) {
+        self.ensure_drop_safety(id);
+
         if let Some(root) = self.scopes[id.0].as_ref().try_root_node() {
             if let RenderReturn::Sync(Ok(node)) = unsafe { root.extend_lifetime_ref() } {
                 self.drop_scope_inner(node)
             }
         }
+        if let Some(root) = unsafe { self.scopes[id.0].as_ref().previous_frame().try_load_node() } {
+            if let RenderReturn::Sync(Ok(node)) = unsafe { root.extend_lifetime_ref() } {
+                self.drop_scope_inner(node)
+            }
+        }
 
         self.scopes[id.0].props.take();
 
@@ -95,51 +105,55 @@ impl VirtualDom {
     fn drop_scope_inner(&mut self, node: &VNode) {
         node.clear_listeners();
         node.dynamic_nodes.iter().for_each(|node| match node {
-            DynamicNode::Component(c) => self.drop_scope(c.scope.get().unwrap()),
+            DynamicNode::Component(c) => {
+                if let Some(f) = c.scope.get() {
+                    self.drop_scope(f);
+                }
+                c.props.take();
+            }
             DynamicNode::Fragment(nodes) => {
                 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();
-            if id.0 != 0 {
-                self.try_reclaim(id);
+            if let Some(id) = root.get() {
+                if id.0 != 0 {
+                    self.try_reclaim(id);
+                }
             }
         }
     }
 
     /// Descend through the tree, removing any borrowed props and listeners
     pub(crate) fn ensure_drop_safety(&self, scope: ScopeId) {
-        let node = unsafe { self.scopes[scope.0].previous_frame().try_load_node() };
-
-        // And now we want to make sure the previous frame has dropped anything that borrows self
-        if let Some(RenderReturn::Sync(Ok(node))) = node {
-            self.ensure_drop_safety_inner(node);
-        }
-    }
-
-    fn ensure_drop_safety_inner(&self, node: &VNode) {
-        node.clear_listeners();
-
-        node.dynamic_nodes.iter().for_each(|child| match child {
-            // 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);
+        let scope = &self.scopes[scope.0];
+
+        // make sure we drop all borrowed props manually to guarantee that their drop implementation is called before we
+        // run the hooks (which hold an &mut Reference)
+        // recursively call ensure_drop_safety on all children
+        let mut props = scope.borrowed_props.borrow_mut();
+        props.drain(..).for_each(|comp| {
+            let comp = unsafe { &*comp };
+            if let Some(scope_id) = comp.scope.get() {
+                self.ensure_drop_safety(scope_id);
             }
+            drop(comp.props.take());
+        });
 
-            DynamicNode::Fragment(f) => f
-                .iter()
-                .for_each(|node| self.ensure_drop_safety_inner(node)),
-
-            _ => {}
+        // Now that all the references are gone, we can safely drop our own references in our listeners.
+        let mut listeners = scope.listeners.borrow_mut();
+        listeners.drain(..).for_each(|listener| {
+            let listener = unsafe { &*listener };
+            if let AttributeValue::Listener(l) = &listener.value {
+                _ = l.take();
+            }
         });
     }
 }

packages/core/src/create.rs

@@ -1,13 +1,16 @@
-use std::cell::Cell;
-use std::rc::Rc;
-
-use crate::innerlude::{VComponent, VText};
+use crate::any_props::AnyProps;
+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,181 +20,248 @@ 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 } => {
+                    nodes.next().unwrap();
+                    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
+    }
 
-                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: &str =
-                                unsafe { std::mem::transmute(attribute.name) };
-
-                            match &attribute.value {
-                                AttributeValue::Listener(_) => {
-                                    self.mutations.push(NewEventListener {
-                                        // all listeners start with "on"
-                                        name: &unbounded_name[2..],
-                                        scope: cur_scope,
-                                        id,
-                                    })
-                                }
-                                _ => {
-                                    // Safety: we promise not to re-alias this text later on after committing it to the mutation
-                                    let unbounded_value =
-                                        unsafe { std::mem::transmute(attribute.value.clone()) };
-
-                                    self.mutations.push(SetAttribute {
-                                        name: unbounded_name,
-                                        value: unbounded_value,
-                                        ns: attribute.namespace,
-                                        id,
-                                    })
-                                }
-                            }
-
-                            // 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
+    /// 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).rev() {
+            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 });
+            }
+        }
+    }
+
+    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: &str = 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: &str = 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!(),
+        // }
+
+        // Safety: we promise not to re-alias this text later on after committing it to the mutation
+        let unbounded_value = unsafe { std::mem::transmute(attribute.value.clone()) };
+
+        self.mutations.push(SetAttribute {
+            name: unbounded_name,
+            value: unbounded_value,
+            ns: attribute.namespace,
+            id,
+        });
+    }
+
+    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,
+        });
+
+        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,
+        });
 
-        on_stack
+        id
     }
 
     /// Insert a new template into the VirtualDom's template registry
@@ -201,17 +271,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(
@@ -239,7 +301,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) };
@@ -257,7 +319,7 @@ impl<'b> VirtualDom {
 
     pub(crate) fn create_placeholder(
         &mut self,
-        slot: &Cell<ElementId>,
+        placeholder: &VPlaceholder,
         template: &'b VNode<'b>,
         idx: usize,
     ) -> usize {
@@ -265,7 +327,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 {
@@ -287,15 +349,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: Box<dyn AnyProps> = 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() };
@@ -385,4 +449,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,13 @@
-use std::cell::Cell;
-
 use crate::{
+    any_props::AnyProps,
     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,99 +55,85 @@ 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
-                let name = unsafe { std::mem::transmute(left_attr.name) };
-                let value = unsafe { std::mem::transmute(right_attr.value.clone()) };
-                self.mutations.push(Mutation::SetAttribute {
-                    id: left_attr.mounted_element.get(),
-                    ns: right_attr.namespace,
-                    name,
-                    value,
-                });
-            }
-        }
+                // 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 replace_placeholder_with_nodes(&mut self, l: &'b Cell<ElementId>, r: &'b [VNode<'b>]) {
-        let m = self.create_children(r);
-        let id = l.get();
-        self.mutations.push(Mutation::ReplaceWith { id, m });
-        self.reclaim(id);
+    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, node),
+            (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 replace_nodes_with_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b Cell<ElementId>) {
-        // Remove the old nodes, except for one
-        self.remove_nodes(&l[1..]);
-
-        // Now create the new one
-        let first = self.replace_inner(&l[0]);
-
-        // Create the placeholder first, ensuring we get a dedicated ID for the placeholder
-        let placeholder = self.next_element(&l[0], &[]);
-        r.set(placeholder);
-        self.mutations
-            .push(Mutation::CreatePlaceholder { id: placeholder });
-
-        self.mutations
-            .push(Mutation::ReplaceWith { id: first, m: 1 });
-
-        self.try_reclaim(first);
+    fn update_attribute(&mut self, right_attr: &Attribute, left_attr: &Attribute) {
+        // todo: add more types of attribute values
+        let name = unsafe { std::mem::transmute(left_attr.name) };
+        let value = unsafe { std::mem::transmute(right_attr.value.clone()) };
+        self.mutations.push(Mutation::SetAttribute {
+            id: left_attr.mounted_element.get(),
+            ns: right_attr.namespace,
+            name,
+            value,
+        });
     }
 
     fn diff_vcomponent(
@@ -158,6 +143,10 @@ impl<'b> VirtualDom {
         right_template: &'b VNode<'b>,
         idx: usize,
     ) {
+        if std::ptr::eq(left, right) {
+            return;
+        }
+
         // Replace components that have different render fns
         if left.render_fn != right.render_fn {
             let created = self.create_component_node(right_template, right, idx);
@@ -166,23 +155,27 @@ impl<'b> VirtualDom {
                     .root_node()
                     .extend_lifetime_ref()
             };
-            let id = match head {
-                RenderReturn::Sync(Ok(node)) => self.replace_inner(node),
+            let last = match head {
+                RenderReturn::Sync(Ok(node)) => self.find_last_element(node),
                 _ => todo!(),
             };
-            self.mutations
-                .push(Mutation::ReplaceWith { id, m: created });
-            self.drop_scope(left.scope.get().unwrap());
+            self.mutations.push(Mutation::InsertAfter {
+                id: last,
+                m: created,
+            });
+            self.remove_component_node(left, true);
             return;
         }
 
         // 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: Box<dyn AnyProps> = right.props.take().unwrap();
+        let new: Box<dyn AnyProps> = unsafe { std::mem::transmute(new) };
 
         // 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
@@ -192,11 +185,16 @@ impl<'b> VirtualDom {
         }
 
         // First, move over the props from the old to the new, dropping old props in the process
-        self.scopes[scope_id.0].props = unsafe { std::mem::transmute(new) };
+        self.scopes[scope_id.0].props = Some(new);
 
         // Now run the component and diff it
         self.run_scope(scope_id);
         self.diff_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.
@@ -238,7 +236,7 @@ impl<'b> VirtualDom {
     /// ```
     fn light_diff_templates(&mut self, left: &'b VNode<'b>, right: &'b VNode<'b>) {
         match matching_components(left, right) {
-            None => self.replace(left, right),
+            None => self.replace(left, [right]),
             Some(components) => components
                 .into_iter()
                 .enumerate()
@@ -250,121 +248,19 @@ 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();
+    fn diff_vtext(&mut self, left: &'b VText<'b>, right: &'b VText<'b>, node: &'b VNode<'b>) {
+        let id = left
+            .id
+            .get()
+            .unwrap_or_else(|| self.next_element(node, &[0]));
 
-        right.id.set(id);
+        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 });
         }
     }
 
-    /// Remove all the top-level nodes, returning the firstmost root ElementId
-    ///
-    /// 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(),
-            Some(Fragment(nodes)) => {
-                let id = self.replace_inner(&nodes[0]);
-                self.remove_nodes(&nodes[1..]);
-                id
-            }
-            Some(Component(comp)) => {
-                let scope = comp.scope.get().unwrap();
-                match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } {
-                    RenderReturn::Sync(Ok(t)) => self.replace_inner(t),
-                    _ => todo!("cannot handle nonstandard nodes"),
-                }
-            }
-        };
-
-        // Just remove the rest from the dom
-        for (idx, _) in node.template.roots.iter().enumerate().skip(1) {
-            self.remove_root_node(node, idx);
-        }
-
-        // Garabge collect all of the nodes since this gets used in replace
-        self.clean_up_node(node);
-
-        id
-    }
-
-    /// Clean up the node, not generating mutations
-    ///
-    /// Simply walks through the dynamic nodes
-    fn clean_up_node(&mut self, node: &'b VNode<'b>) {
-        for (idx, dyn_node) in node.dynamic_nodes.iter().enumerate() {
-            // Roots are cleaned up automatically?
-            if node.template.node_paths[idx].len() == 1 {
-                continue;
-            }
-
-            match dyn_node {
-                Component(comp) => {
-                    let scope = comp.scope.get().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()),
-                Fragment(nodes) => nodes.iter().for_each(|node| self.clean_up_node(node)),
-            };
-        }
-
-        // we clean up nodes with dynamic attributes, provided the node is unique and not a root node
-        let mut id = None;
-        for (idx, attr) in node.dynamic_attrs.iter().enumerate() {
-            // We'll clean up the root nodes either way, so don't worry
-            if node.template.attr_paths[idx].len() == 1 {
-                continue;
-            }
-
-            let next_id = attr.mounted_element.get();
-
-            if id == Some(next_id) {
-                continue;
-            }
-
-            id = Some(next_id);
-
-            self.reclaim(next_id);
-        }
-    }
-
-    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();
-                self.mutations.push(Mutation::Remove { id });
-                self.reclaim(id);
-            }
-            Some(Placeholder(e)) => {
-                let id = e.get();
-                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();
-                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();
-                self.mutations.push(Mutation::Remove { id });
-                self.reclaim(id);
-            }
-        };
-    }
-
     fn diff_non_empty_fragment(&mut self, old: &'b [VNode<'b>], new: &'b [VNode<'b>]) {
         let new_is_keyed = new[0].key.is_some();
         let old_is_keyed = old[0].key.is_some();
@@ -615,7 +511,7 @@ impl<'b> VirtualDom {
         if shared_keys.is_empty() {
             if old.get(0).is_some() {
                 self.remove_nodes(&old[1..]);
-                self.replace_many(&old[0], new);
+                self.replace(&old[0], new);
             } else {
                 // I think this is wrong - why are we appending?
                 // only valid of the if there are no trailing elements
@@ -631,7 +527,7 @@ impl<'b> VirtualDom {
         for child in old {
             let key = child.key.unwrap();
             if !shared_keys.contains(&key) {
-                self.remove_node(child);
+                self.remove_node(child, true);
             }
         }
 
@@ -734,111 +630,205 @@ impl<'b> VirtualDom {
         }
     }
 
+    /// Push all the real nodes on the stack
+    fn push_all_real_nodes(&mut self, node: &'b VNode<'b>) -> usize {
+        node.template
+            .roots
+            .iter()
+            .enumerate()
+            .map(|(idx, _)| {
+                let node = match node.dynamic_root(idx) {
+                    Some(node) => node,
+                    None => {
+                        self.mutations.push(Mutation::PushRoot {
+                            id: node.root_ids[idx].get().unwrap(),
+                        });
+                        return 1;
+                    }
+                };
+
+                match node {
+                    Text(t) => {
+                        self.mutations.push(Mutation::PushRoot {
+                            id: t.id.get().unwrap(),
+                        });
+                        1
+                    }
+                    Placeholder(t) => {
+                        self.mutations.push(Mutation::PushRoot {
+                            id: t.id.get().unwrap(),
+                        });
+                        1
+                    }
+                    Fragment(nodes) => nodes
+                        .iter()
+                        .map(|node| self.push_all_real_nodes(node))
+                        .count(),
+
+                    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!(),
+                        }
+                    }
+                }
+            })
+            .count()
+    }
+
+    fn create_children(&mut self, nodes: impl IntoIterator<Item = &'b VNode<'b>>) -> usize {
+        nodes
+            .into_iter()
+            .fold(0, |acc, child| acc + self.create(child))
+    }
+
+    fn create_and_insert_before(&mut self, new: &'b [VNode<'b>], before: &'b VNode<'b>) {
+        let m = self.create_children(new);
+        let id = self.find_first_element(before);
+        self.mutations.push(Mutation::InsertBefore { id, m })
+    }
+
+    fn create_and_insert_after(&mut self, new: &'b [VNode<'b>], after: &'b VNode<'b>) {
+        let m = self.create_children(new);
+        let id = self.find_last_element(after);
+        self.mutations.push(Mutation::InsertAfter { id, m })
+    }
+
+    /// Simply replace a placeholder with a list of nodes
+    fn replace_placeholder(&mut self, l: &'b VPlaceholder, r: &'b [VNode<'b>]) {
+        let m = self.create_children(r);
+        let id = l.id.get().unwrap();
+        self.mutations.push(Mutation::ReplaceWith { id, m });
+        self.reclaim(id);
+    }
+
+    fn replace(&mut self, left: &'b VNode<'b>, right: impl IntoIterator<Item = &'b VNode<'b>>) {
+        let m = self.create_children(right);
+
+        let id = self.find_last_element(left);
+
+        self.mutations.push(Mutation::InsertAfter { id, m });
+
+        self.remove_node(left, true);
+    }
+
+    fn node_to_placeholder(&mut self, l: &'b [VNode<'b>], r: &'b VPlaceholder) {
+        // Create the placeholder first, ensuring we get a dedicated ID for the placeholder
+        let placeholder = self.next_element(&l[0], &[]);
+
+        r.id.set(Some(placeholder));
+
+        let id = self.find_last_element(&l[0]);
+
+        self.mutations
+            .push(Mutation::CreatePlaceholder { id: placeholder });
+
+        self.mutations.push(Mutation::InsertAfter { id, m: 1 });
+
+        self.remove_nodes(l);
+    }
+
     /// Remove these nodes from the dom
     /// Wont generate mutations for the inner nodes
     fn remove_nodes(&mut self, nodes: &'b [VNode<'b>]) {
-        // note that we iterate in reverse to unlink lists of nodes in their rough index order
-        nodes.iter().rev().for_each(|node| self.remove_node(node));
+        nodes.iter().for_each(|node| self.remove_node(node, true));
     }
 
-    fn remove_node(&mut self, node: &'b VNode<'b>) {
+    fn remove_node(&mut self, node: &'b VNode<'b>, gen_muts: bool) {
+        // Clean up the roots, assuming we need to generate mutations for these
         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(Fragment(t)) => return self.remove_nodes(t),
-                Some(Component(comp)) => return self.remove_component(comp.scope.get().unwrap()),
-                None => node.root_ids[idx].get(),
-            };
+            if let Some(dy) = node.dynamic_root(idx) {
+                self.remove_dynamic_node(dy, gen_muts);
+            } else {
+                let id = node.root_ids[idx].get().unwrap();
+                if gen_muts {
+                    self.mutations.push(Mutation::Remove { id });
+                }
+                self.reclaim(id);
+            }
+        }
 
-            self.mutations.push(Mutation::Remove { id })
+        for (idx, dyn_node) in node.dynamic_nodes.iter().enumerate() {
+            // Roots are cleaned up automatically above
+            if node.template.node_paths[idx].len() == 1 {
+                continue;
+            }
+
+            self.remove_dynamic_node(dyn_node, false);
         }
 
-        self.clean_up_node(node);
+        // we clean up nodes with dynamic attributes, provided the node is unique and not a root node
+        let mut id = None;
+        for (idx, attr) in node.dynamic_attrs.iter().enumerate() {
+            // We'll clean up the root nodes either way, so don't worry
+            if node.template.attr_paths[idx].len() == 1 {
+                continue;
+            }
 
-        for root in node.root_ids {
-            let id = root.get();
-            if id.0 != 0 {
-                self.reclaim(id);
+            let next_id = attr.mounted_element.get();
+
+            if id == Some(next_id) {
+                continue;
             }
+
+            id = Some(next_id);
+
+            self.reclaim(next_id);
         }
     }
 
-    fn remove_component(&mut self, scope_id: ScopeId) {
-        let height = self.scopes[scope_id.0].height;
-        self.dirty_scopes.remove(&DirtyScope {
-            height,
-            id: scope_id,
-        });
+    fn remove_dynamic_node(&mut self, node: &DynamicNode, gen_muts: bool) {
+        match node {
+            Component(comp) => self.remove_component_node(comp, gen_muts),
+            Text(t) => self.remove_text_node(t),
+            Placeholder(t) => self.remove_placeholder(t),
+            Fragment(nodes) => nodes
+                .iter()
+                .for_each(|node| self.remove_node(node, gen_muts)),
+        };
+    }
 
-        // I promise, since we're descending down the tree, this is safe
-        match unsafe { self.scopes[scope_id.0].root_node().extend_lifetime_ref() } {
-            RenderReturn::Sync(Ok(t)) => self.remove_node(t),
-            _ => todo!("cannot handle nonstandard nodes"),
+    fn remove_placeholder(&mut self, t: &VPlaceholder) {
+        if let Some(id) = t.id.take() {
+            self.reclaim(id)
         }
     }
 
-    /// Push all the real nodes on the stack
-    fn push_all_real_nodes(&mut self, node: &'b VNode<'b>) -> usize {
-        let mut onstack = 0;
+    fn remove_text_node(&mut self, t: &VText) {
+        if let Some(id) = t.id.take() {
+            self.reclaim(id)
+        }
+    }
 
-        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);
-                    }
-                }
-                Some(Component(comp)) => {
-                    let scope = comp.scope.get().unwrap();
-                    onstack +=
-                        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;
-                }
+    fn remove_component_node(&mut self, comp: &VComponent, gen_muts: bool) {
+        if let Some(scope) = comp.scope.take() {
+            match unsafe { self.scopes[scope.0].root_node().extend_lifetime_ref() } {
+                RenderReturn::Sync(Ok(t)) => self.remove_node(t, gen_muts),
+                _ => todo!("cannot handle nonstandard nodes"),
             };
-        }
 
-        onstack
-    }
+            let props = self.scopes[scope.0].props.take();
 
-    fn create_children(&mut self, nodes: &'b [VNode<'b>]) -> usize {
-        nodes.iter().fold(0, |acc, child| acc + self.create(child))
-    }
+            self.dirty_scopes.remove(&DirtyScope {
+                height: self.scopes[scope.0].height,
+                id: scope,
+            });
 
-    fn create_and_insert_before(&mut self, new: &'b [VNode<'b>], before: &'b VNode<'b>) {
-        let m = self.create_children(new);
-        let id = self.find_first_element(before);
-        self.mutations.push(Mutation::InsertBefore { id, m })
-    }
+            *comp.props.borrow_mut() = unsafe { std::mem::transmute(props) };
 
-    fn create_and_insert_after(&mut self, new: &'b [VNode<'b>], after: &'b VNode<'b>) {
-        let m = self.create_children(new);
-        let id = self.find_last_element(after);
-        self.mutations.push(Mutation::InsertAfter { id, m })
+            // make sure to wipe any of its props and listeners
+            self.ensure_drop_safety(scope);
+            self.scopes.remove(scope.0);
+        }
     }
 
     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() } {
@@ -851,10 +841,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() } {
@@ -864,28 +854,21 @@ impl<'b> VirtualDom {
             }
         }
     }
+}
 
-    fn replace(&mut self, left: &'b VNode<'b>, right: &'b VNode<'b>) {
-        let first = self.find_first_element(left);
-        let id = self.replace_inner(left);
-        let created = self.create(right);
-        self.mutations.push(Mutation::ReplaceWith {
-            id: first,
-            m: created,
-        });
-        self.try_reclaim(id);
-    }
+/// 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 replace_many(&mut self, left: &'b VNode<'b>, right: &'b [VNode<'b>]) {
-        let first = self.find_first_element(left);
-        let id = self.replace_inner(left);
-        let created = self.create_children(right);
-        self.mutations.push(Mutation::ReplaceWith {
-            id: first,
-            m: created,
-        });
-        self.try_reclaim(id);
-    }
+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>(

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/lazynodes.rs

@@ -25,7 +25,11 @@ use crate::{innerlude::VNode, ScopeState};
 /// LazyNodes::new(|f| f.element("div", [], [], [] None))
 /// ```
 pub struct LazyNodes<'a, 'b> {
+    #[cfg(not(miri))]
     inner: SmallBox<dyn FnMut(&'a ScopeState) -> VNode<'a> + 'b, S16>,
+
+    #[cfg(miri)]
+    inner: Box<dyn FnMut(&'a ScopeState) -> VNode<'a> + 'b>,
 }
 
 impl<'a, 'b> LazyNodes<'a, 'b> {
@@ -39,10 +43,17 @@ impl<'a, 'b> LazyNodes<'a, 'b> {
         let mut slot = Some(val);
 
         Self {
+            #[cfg(not(miri))]
             inner: smallbox!(move |f| {
                 let val = slot.take().expect("cannot call LazyNodes twice");
                 val(f)
             }),
+
+            #[cfg(miri)]
+            inner: Box::new(move |f| {
+                let val = slot.take().expect("cannot call LazyNodes twice");
+                val(f)
+            }),
         }
     }
 

packages/core/src/mutations.rs

@@ -219,9 +219,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
@@ -577,6 +596,12 @@ impl<'a> IntoDynNode<'a> for VNode<'a> {
     }
 }
 
+impl<'a> IntoDynNode<'a> for DynamicNode<'a> {
+    fn into_vnode(self, _cx: &'a ScopeState) -> DynamicNode<'a> {
+        self
+    }
+}
+
 // An element that's an error is currently lost into the ether
 impl<'a> IntoDynNode<'a> for Element<'a> {
     fn into_vnode(self, _cx: &'a ScopeState) -> DynamicNode<'a> {

packages/core/src/scope_arena.rs

@@ -32,8 +32,9 @@ impl VirtualDom {
             parent,
             id,
             height,
-            props: Some(props),
             name,
+            props: Some(props),
+            tasks: self.scheduler.clone(),
             placeholder: Default::default(),
             node_arena_1: BumpFrame::new(0),
             node_arena_2: BumpFrame::new(0),
@@ -43,7 +44,8 @@ impl VirtualDom {
             hook_list: Default::default(),
             hook_idx: Default::default(),
             shared_contexts: Default::default(),
-            tasks: self.scheduler.clone(),
+            borrowed_props: Default::default(),
+            listeners: Default::default(),
         }))
     }
 
@@ -75,7 +77,7 @@ impl VirtualDom {
             scope.hook_idx.set(0);
 
             // safety: due to how we traverse the tree, we know that the scope is not currently aliased
-            let props = scope.props.as_ref().unwrap().as_ref();
+            let props: &dyn AnyProps = scope.props.as_ref().unwrap().as_ref();
             let props: &dyn AnyProps = mem::transmute(props);
             props.render(scope).extend_lifetime()
         };

packages/core/src/scopes.rs

@@ -87,6 +87,9 @@ pub struct ScopeState {
     pub(crate) tasks: Rc<Scheduler>,
     pub(crate) spawned_tasks: FxHashSet<TaskId>,
 
+    pub(crate) borrowed_props: RefCell<Vec<*const VComponent<'static>>>,
+    pub(crate) listeners: RefCell<Vec<*const Attribute<'static>>>,
+
     pub(crate) props: Option<Box<dyn AnyProps<'static>>>,
     pub(crate) placeholder: Cell<Option<ElementId>>,
 }
@@ -237,7 +240,9 @@ 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| {
+            chan.unbounded_send(SchedulerMsg::Immediate(id)).unwrap();
+        })
     }
 
     /// Mark this scope as dirty, and schedule a render for it.
@@ -367,7 +372,25 @@ impl<'src> ScopeState {
     /// }
     ///```
     pub fn render(&'src self, rsx: LazyNodes<'src, '_>) -> Element<'src> {
-        Ok(rsx.call(self))
+        let element = rsx.call(self);
+
+        let mut listeners = self.listeners.borrow_mut();
+        for attr in element.dynamic_attrs {
+            if let AttributeValue::Listener(_) = attr.value {
+                let unbounded = unsafe { std::mem::transmute(attr as *const Attribute) };
+                listeners.push(unbounded);
+            }
+        }
+
+        let mut props = self.borrowed_props.borrow_mut();
+        for node in element.dynamic_nodes {
+            if let DynamicNode::Component(comp) = node {
+                let unbounded = unsafe { std::mem::transmute(comp as *const VComponent) };
+                props.push(unbounded);
+            }
+        }
+
+        Ok(element)
     }
 
     /// Create a dynamic text node using [`Arguments`] and the [`ScopeState`]'s internal [`Bump`] allocator
@@ -448,7 +471,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

@@ -279,8 +279,10 @@ 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;
-        self.dirty_scopes.insert(DirtyScope { height, id });
+        if let Some(scope) = self.scopes.get(id.0) {
+            let height = scope.height;
+            self.dirty_scopes.insert(DirtyScope { height, id });
+        }
     }
 
     /// Determine whether or not a scope is currently in a suspended state
@@ -516,6 +518,8 @@ impl VirtualDom {
     pub async fn render_with_deadline(&mut self, deadline: impl Future<Output = ()>) -> Mutations {
         pin_mut!(deadline);
 
+        self.process_events();
+
         loop {
             // first, unload any complete suspense trees
             for finished_fiber in self.finished_fibers.drain(..) {
@@ -542,6 +546,11 @@ impl VirtualDom {
             if let Some(dirty) = self.dirty_scopes.iter().next().cloned() {
                 self.dirty_scopes.remove(&dirty);
 
+                // If the scope doesn't exist for whatever reason, then we should skip it
+                if !self.scopes.contains(dirty.id.0) {
+                    continue;
+                }
+
                 // 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/core/tests/kitchen_sink.rs

@@ -40,7 +40,7 @@ fn dual_stream() {
                 id: ElementId(1),
                 ns: None,
             },
-            NewEventListener { name: "click", scope: ScopeId(0), id: ElementId(1) },
+            NewEventListener { name: "click", id: ElementId(1) },
             HydrateText { path: &[0, 0], value: "123", id: ElementId(2) },
             AppendChildren { id: ElementId(0), m: 1 },
         ]

packages/core/tests/miri_simple.rs

@@ -66,7 +66,7 @@ fn contexts_drop() {
 fn tasks_drop() {
     fn app(cx: Scope) -> Element {
         cx.spawn(async {
-            tokio::time::sleep(std::time::Duration::from_millis(100000)).await;
+            // tokio::time::sleep(std::time::Duration::from_millis(100000)).await;
         });
 
         cx.render(rsx! {

packages/core/tests/miri_stress.rs

@@ -12,9 +12,7 @@ fn test_memory_leak() {
     fn app(cx: Scope) -> Element {
         let val = cx.generation();
 
-        cx.spawn(async {
-            tokio::time::sleep(std::time::Duration::from_millis(100000)).await;
-        });
+        cx.spawn(async {});
 
         if val == 2 || val == 4 {
             return cx.render(rsx!(()));

packages/desktop/Cargo.toml

@@ -20,7 +20,7 @@ serde = "1.0.136"
 serde_json = "1.0.79"
 thiserror = "1.0.30"
 log = "0.4.14"
-wry = { version = "0.22.0" }
+wry = { version = "0.23.4" }
 futures-channel = "0.3.21"
 tokio = { version = "1.16.1", features = [
     "sync",

packages/interpreter/src/sledgehammer_bindings.rs

@@ -210,7 +210,17 @@ mod js {
         "{nodes[$id$] = LoadChild($ptr$, $len$);}"
     }
     fn hydrate_text(ptr: u32, len: u8, value: &str, id: u32) {
-        "{node = LoadChild($ptr$, $len$); node.textContent = $value$; nodes[$id$] = node;}"
+        r#"{
+            node = LoadChild($ptr$, $len$);
+            if (node.nodeType == Node.TEXT_NODE) {
+                node.textContent = value;
+            } else {
+                let text = document.createTextNode(value);
+                node.replaceWith(text);
+                node = text;
+            }
+            nodes[$id$] = node;
+        }"#
     }
     fn replace_placeholder(ptr: u32, len: u8, n: u32) {
         "{els = stack.splice(stack.length - $n$); node = LoadChild($ptr$, $len$); node.replaceWith(...els);}"

packages/native-core/src/real_dom.rs

@@ -287,7 +287,7 @@ impl<S: State> RealDom<S> {
                     }
                     mark_dirty(node_id, NodeMask::new().with_text(), &mut nodes_updated);
                 }
-                NewEventListener { name, scope: _, id } => {
+                NewEventListener { name, id } => {
                     let node_id = self.element_to_node_id(id);
                     let node = self.tree.get_mut(node_id).unwrap();
                     if let NodeType::Element { listeners, .. } = &mut node.node_data.node_type {

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,9 @@ wasm-logger = "0.2.0"
 wasm-bindgen-test = "0.3"
 gloo-utils = "0.1.2"
 dioxus-web = { path = "../web" }
+# dioxus-desktop = { path = "../desktop", optional = true }
+
+# not wasm
 
 [target.wasm32-unknown-unknown.dev-dependencies]
 dioxus-router = { path = ".", features = ["web"] }

packages/router/examples/simple.rs

@@ -16,6 +16,7 @@ fn app(cx: Scope) -> Element {
                 Link { to: "/blog", li { "blog" } }
                 Link { to: "/blog/tim", li { "tims' blog" } }
                 Link { to: "/blog/bill", li { "bills' blog" } }
+                Link { to: "/blog/james", li { "james amazing' blog" } }
                 Link { to: "/apples", li { "go to apples" } }
             }
             Route { to: "/", Home {} }
@@ -42,5 +43,10 @@ fn BlogPost(cx: Scope) -> Element {
 
     log::trace!("rendering blog post {}", id);
 
-    cx.render(rsx! { div { "{id:?}" } })
+    cx.render(rsx! {
+        div {
+            h3 { "blog post: {id:?}"  }
+            Link { to: "/blog/", "back to blog list" }
+        }
+    })
 }

packages/router/src/components/link.rs

@@ -120,9 +120,17 @@ 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);
+
+                        #[cfg(feature = "web")]
+                        {
+                            web_sys::window().unwrap().scroll_to_with_x_and_y(0.0, 0.0);
+                        }
                     } else {
                         log::error!(
                             "Attempted to create a Link to {} outside of a Router context", cx.props

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);
+    log::debug!("Checking Route: {:?}", cx.props.to);
 
     if router_root.should_render(cx.scope_id()) {
-        log::trace!("Route should render: {:?}", cx.scope_id());
+        log::debug!("Route should render: {:?}", cx.scope_id());
         cx.render(rsx!(&cx.props.children))
     } else {
-        log::trace!("Route should *not* render: {:?}", cx.scope_id());
+        log::debug!("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/element.rs

@@ -45,7 +45,7 @@ impl Parse for Element {
 
                 content.parse::<Token![:]>()?;
 
-                if content.peek(LitStr) && content.peek2(Token![,]) {
+                if content.peek(LitStr) {
                     let value = content.parse()?;
                     attributes.push(ElementAttrNamed {
                         el_name: el_name.clone(),
@@ -53,7 +53,6 @@ impl Parse for Element {
                     });
                 } else {
                     let value = content.parse::<Expr>()?;
-
                     attributes.push(ElementAttrNamed {
                         el_name: el_name.clone(),
                         attr: ElementAttr::CustomAttrExpression { name, value },

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/tui/examples/tui_colorpicker.rs

@@ -17,12 +17,14 @@ fn app(cx: Scope) -> Element {
             width: "100%",
             background_color: "hsl({hue}, 70%, {brightness}%)",
             onmousemove: move |evt| {
-                if let RenderReturn::Sync(Ok(node))=cx.root_node(){
-                    let node = tui_query.get(node.root_ids[0].get());
-                    let Size{width, height} = node.size().unwrap();
-                    let pos = evt.inner().element_coordinates();
-                    hue.set((pos.x as f32/width as f32)*255.0);
-                    brightness.set((pos.y as f32/height as f32)*100.0);
+                if let RenderReturn::Sync(Ok(node)) = cx.root_node() {
+                    if let Some(id) = node.root_ids[0].get() {
+                        let node = tui_query.get(id);
+                        let Size{width, height} = node.size().unwrap();
+                        let pos = evt.inner().element_coordinates();
+                        hue.set((pos.x as f32/width as f32)*255.0);
+                        brightness.set((pos.y as f32/height as f32)*100.0);
+                    }
                 }
             },
             "hsl({hue}, 70%, {brightness}%)",

packages/tui/src/widgets/mod.rs

@@ -11,7 +11,7 @@ pub use input::*;
 
 pub(crate) fn get_root_id<T>(cx: Scope<T>) -> Option<ElementId> {
     if let RenderReturn::Sync(Ok(sync)) = cx.root_node() {
-        sync.root_ids.get(0).map(|id| id.get())
+        sync.root_ids.get(0).and_then(|id| id.get())
     } else {
         None
     }

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![];
 
@@ -324,3 +351,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

@@ -220,13 +220,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();
         }
 
@@ -252,29 +246,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