Merge pull request #1732 from ealmloff/resilient-hydration

Make hydration more resilient

packages/core/tests/suspense.rs

@@ -11,7 +11,7 @@ fn it_works() {
             let mut dom = VirtualDom::new(app);
             _ = dom.rebuild();
             dom.wait_for_suspense().await;
-            let out = dioxus_ssr::pre_render(&dom);
+            let out = dioxus_ssr::render(&dom);
 
             assert_eq!(out, "<div>Waiting for... child</div>");
 

packages/fullstack/examples/axum-hello-world/src/main.rs

@@ -27,9 +27,7 @@ fn app(cx: Scope<AppProps>) -> Element {
     let eval = use_eval(cx);
 
     cx.render(rsx! {
-        div {
+        div { "Server state: {state}" }
-            "Server state: {state}"
-        }
         h1 { "High-Five counter: {count}" }
         button { onclick: move |_| count += 1, "Up high!" }
         button { onclick: move |_| count -= 1, "Down low!" }

packages/fullstack/src/adapters/axum_adapter.rs

@@ -254,7 +254,6 @@ where
 
     fn register_server_fns(self, server_fn_route: &'static str) -> Self {
         self.register_server_fns_with_handler(server_fn_route, |func| {
-            use crate::layer::Service;
             move |req: Request<Body>| {
                 let mut service = crate::server_fn_service(Default::default(), func);
                 async move {

packages/fullstack/src/hooks/server_cached.rs

@@ -12,9 +12,10 @@ use serde::{de::DeserializeOwned, Serialize};
 /// use dioxus_fullstack::prelude::*;
 ///
 /// fn app(cx: Scope) -> Element {
-///    let state1 = use_state(cx, || server_cached(|| {
+///    let state1 = server_cached(cx, || from_server(|| {
 ///       1234
 ///    }));
+///
 ///    todo!()
 /// }
 /// ```

packages/interpreter/src/sledgehammer_bindings.rs

@@ -86,8 +86,43 @@ mod js {
     export function save_template(nodes, tmpl_id) {
         templates[tmpl_id] = nodes;
     }
-    export function set_node(id, node) {
+    export function hydrate(ids) {
-        nodes[id] = node;
+        console.log("hydrating", ids);
+        const hydrateNodes = document.querySelectorAll('[data-node-hydration]');
+        for (let i = 0; i < hydrateNodes.length; i++) {
+            const hydrateNode = hydrateNodes[i];
+            const hydration = hydrateNode.getAttribute('data-node-hydration');
+            const split = hydration.split(',');
+            const id = ids[parseInt(split[0])];
+            nodes[id] = hydrateNode;
+            console.log("hydrating node", hydrateNode, id);
+            if (split.length > 1) {
+                hydrateNode.listening = split.length - 1;
+                hydrateNode.setAttribute('data-dioxus-id', id);
+                for (let j = 1; j < split.length; j++) {
+                    const listener = split[j];
+                    const split2 = listener.split(':');
+                    const event_name = split2[0];
+                    const bubbles = split2[1] === '1';
+                    console.log("hydrating listener", event_name, bubbles);
+                    listeners.create(event_name, hydrateNode, bubbles);
+                }
+            }
+        }
+        const treeWalker = document.createTreeWalker(
+            document.body,
+            NodeFilter.SHOW_COMMENT,
+        );
+        let currentNode = treeWalker.nextNode();
+        while (currentNode) {
+            const id = currentNode.textContent;
+            const split = id.split('node-id');
+            if (split.length > 1) {
+                console.log("hydrating text", currentNode.nextSibling, id);
+                nodes[ids[parseInt(split[1])]] = currentNode.nextSibling;
+            }
+            currentNode = treeWalker.nextNode();
+        }
     }
     export function get_node(id) {
         return nodes[id];
@@ -112,7 +147,7 @@ mod js {
         pub fn save_template(nodes: Vec<Node>, tmpl_id: u16);
 
         #[wasm_bindgen]
-        pub fn set_node(id: u32, node: Node);
+        pub fn hydrate(ids: Vec<u32>);
 
         #[wasm_bindgen]
         pub fn get_node(id: u32) -> Node;

packages/ssr/src/cache.rs

@@ -27,6 +27,10 @@ pub enum Segment {
     },
     /// A marker for where to insert a dynamic inner html
     InnerHtmlMarker,
+    /// A marker for where to insert a node id for an attribute
+    AttributeNodeMarker,
+    /// A marker for where to insert a node id for a root node
+    RootNodeMarker,
 }
 
 impl std::fmt::Write for StringChain {
@@ -41,13 +45,13 @@ impl std::fmt::Write for StringChain {
 }
 
 impl StringCache {
-    pub fn from_template(template: &VNode) -> Result<Self, std::fmt::Error> {
+    pub fn from_template(template: &VNode, prerender: bool) -> Result<Self, std::fmt::Error> {
         let mut chain = StringChain::default();
 
         let mut cur_path = vec![];
 
         for (root_idx, root) in template.template.get().roots.iter().enumerate() {
-            Self::recurse(root, &mut cur_path, root_idx, &mut chain)?;
+            Self::recurse(root, &mut cur_path, root_idx, true, prerender, &mut chain)?;
         }
 
         Ok(Self {
@@ -60,6 +64,8 @@ impl StringCache {
         root: &TemplateNode,
         cur_path: &mut Vec<usize>,
         root_idx: usize,
+        is_root: bool,
+        prerender: bool,
         chain: &mut StringChain,
     ) -> Result<(), std::fmt::Error> {
         match root {
@@ -76,7 +82,7 @@ impl StringCache {
                 // we need to collect the inner html and write it at the end
                 let mut inner_html = None;
                 // we need to keep track of if we have dynamic attrs to know if we need to insert a style and inner_html marker
-                let mut has_dynamic_attrs = false;
+                let mut has_dyn_attrs = false;
                 for attr in *attrs {
                     match attr {
                         TemplateAttribute::Static {
@@ -97,8 +103,9 @@ impl StringCache {
                             }
                         }
                         TemplateAttribute::Dynamic { id: index } => {
-                            chain.segments.push(Segment::Attr(*index));
+                            let index = *index;
-                            has_dynamic_attrs = true;
+                            chain.segments.push(Segment::Attr(index));
+                            has_dyn_attrs = true
                         }
                     }
                 }
@@ -113,12 +120,23 @@ impl StringCache {
                         inside_style_tag: true,
                     });
                     write!(chain, "\"")?;
-                } else if has_dynamic_attrs {
+                } else if has_dyn_attrs {
                     chain.segments.push(Segment::StyleMarker {
                         inside_style_tag: false,
                     });
                 }
 
+                // write the id if we are prerendering and this is either a root node or a node with a dynamic attribute
+                if prerender && (has_dyn_attrs || is_root) {
+                    write!(chain, " data-node-hydration=\"")?;
+                    if has_dyn_attrs {
+                        chain.segments.push(Segment::AttributeNodeMarker);
+                    } else if is_root {
+                        chain.segments.push(Segment::RootNodeMarker);
+                    }
+                    write!(chain, "\"")?;
+                }
+
                 if children.is_empty() && tag_is_self_closing(tag) {
                     write!(chain, "/>")?;
                 } else {
@@ -126,12 +144,12 @@ impl StringCache {
                     // Write the static inner html, or insert a marker if dynamic inner html is possible
                     if let Some(inner_html) = inner_html {
                         chain.write_str(inner_html)?;
-                    } else if has_dynamic_attrs {
+                    } else if has_dyn_attrs {
                         chain.segments.push(Segment::InnerHtmlMarker);
                     }
 
                     for child in *children {
-                        Self::recurse(child, cur_path, root_idx, chain)?;
+                        Self::recurse(child, cur_path, root_idx, false, prerender, chain)?;
                     }
                     write!(chain, "</{tag}>")?;
                 }

packages/ssr/src/renderer.rs

@@ -28,6 +28,9 @@ pub struct Renderer {
 
     /// A cache of templates that have been rendered
     template_cache: HashMap<&'static str, Arc<StringCache>>,
+
+    /// The current dynamic node id for hydration
+    dynamic_node_id: usize,
 }
 
 impl Renderer {
@@ -54,6 +57,7 @@ impl Renderer {
         // We should never ever run into async or errored nodes in SSR
         // Error boundaries and suspense boundaries will convert these to sync
         if let RenderReturn::Ready(node) = dom.get_scope(scope).unwrap().root_node() {
+            self.dynamic_node_id = 0;
             self.render_template(buf, dom, node)?
         };
 
@@ -69,7 +73,10 @@ impl Renderer {
         let entry = self
             .template_cache
             .entry(template.template.get().name)
-            .or_insert_with(|| Arc::new(StringCache::from_template(template).unwrap()))
+            .or_insert_with({
+                let prerender = self.pre_render;
+                move || Arc::new(StringCache::from_template(template, prerender).unwrap())
+            })
             .clone();
 
         let mut inner_html = None;
@@ -77,6 +84,9 @@ impl Renderer {
         // We need to keep track of the dynamic styles so we can insert them into the right place
         let mut accumulated_dynamic_styles = Vec::new();
 
+        // We need to keep track of the listeners so we can insert them into the right place
+        let mut accumulated_listeners = Vec::new();
+
         for segment in entry.segments.iter() {
             match segment {
                 Segment::Attr(idx) => {
@@ -93,6 +103,15 @@ impl Renderer {
                     } else {
                         write_attribute(buf, attr)?;
                     }
+
+                    if self.pre_render {
+                        if let AttributeValue::Listener(_) = &attr.value {
+                            // The onmounted event doesn't need a DOM listener
+                            if attr.name != "onmounted" {
+                                accumulated_listeners.push(attr.name);
+                            }
+                        }
+                    }
                 }
                 Segment::Node(idx) => match &template.dynamic_nodes[*idx] {
                     DynamicNode::Component(node) => {
@@ -115,7 +134,8 @@ impl Renderer {
                     DynamicNode::Text(text) => {
                         // in SSR, we are concerned that we can't hunt down the right text node since they might get merged
                         if self.pre_render {
-                            write!(buf, "<!--#-->")?;
+                            write!(buf, "<!--node-id{}-->", self.dynamic_node_id)?;
+                            self.dynamic_node_id += 1;
                         }
 
                         write!(
@@ -134,9 +154,14 @@ impl Renderer {
                         }
                     }
 
-                    DynamicNode::Placeholder(_el) => {
+                    DynamicNode::Placeholder(_) => {
                         if self.pre_render {
-                            write!(buf, "<pre></pre>")?;
+                            write!(
+                                buf,
+                                "<pre data-node-hydration={}></pre>",
+                                self.dynamic_node_id
+                            )?;
+                            self.dynamic_node_id += 1;
                         }
                     }
                 },
@@ -175,6 +200,22 @@ impl Renderer {
                         }
                     }
                 }
+
+                Segment::AttributeNodeMarker => {
+                    // first write the id
+                    write!(buf, "{}", self.dynamic_node_id)?;
+                    self.dynamic_node_id += 1;
+                    // then write any listeners
+                    for name in accumulated_listeners.drain(..) {
+                        write!(buf, ",{}:", &name[2..])?;
+                        write!(buf, "{}", dioxus_html::event_bubbles(name) as u8)?;
+                    }
+                }
+
+                Segment::RootNodeMarker => {
+                    write!(buf, "{}", self.dynamic_node_id)?;
+                    self.dynamic_node_id += 1
+                }
             }
         }
 
@@ -192,7 +233,9 @@ fn to_string_works() {
 
         render! {
             div { class: "asdasdasd", class: "asdasdasd", id: "id-{dynamic}",
-                "Hello world 1 -->" "{dynamic}" "<-- Hello world 2"
+                "Hello world 1 -->"
+                "{dynamic}"
+                "<-- Hello world 2"
                 div { "nest 1" }
                 div {}
                 div { "nest 2" }

packages/ssr/tests/hydration.rs

@@ -0,0 +1,199 @@
+use dioxus::prelude::*;
+
+#[test]
+fn root_ids() {
+    fn app(cx: Scope) -> Element {
+        render! { div { width: "100px" } }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div style="width:100px;" data-node-hydration="0"></div>"#
+    );
+}
+
+#[test]
+fn dynamic_attributes() {
+    fn app(cx: Scope) -> Element {
+        let dynamic = 123;
+        render! {
+            div { width: "100px", div { width: "{dynamic}px" } }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1"></div></div>"#
+    );
+}
+
+#[test]
+fn listeners() {
+    fn app(cx: Scope) -> Element {
+        render! {
+            div { width: "100px", div { onclick: |_| {} } }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div style="width:100px;" data-node-hydration="0"><div data-node-hydration="1,click:1"></div></div>"#
+    );
+
+    fn app2(cx: Scope) -> Element {
+        let dynamic = 123;
+        render! {
+            div { width: "100px", div { width: "{dynamic}px", onclick: |_| {} } }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app2);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1,click:1"></div></div>"#
+    );
+}
+
+#[test]
+fn text_nodes() {
+    fn app(cx: Scope) -> Element {
+        let dynamic_text = "hello";
+        render! {
+            div { dynamic_text }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div data-node-hydration="0"><!--node-id1-->hello<!--#--></div>"#
+    );
+
+    fn app2(cx: Scope) -> Element {
+        let dynamic = 123;
+        render! {
+            div { "{dynamic}", "{1234}" }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app2);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div data-node-hydration="0"><!--node-id1-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
+    );
+}
+
+#[allow(non_snake_case)]
+#[test]
+fn components_hydrate() {
+    fn app(cx: Scope) -> Element {
+        render! { Child {} }
+    }
+
+    fn Child(cx: Scope) -> Element {
+        render! { div { "hello" } }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div data-node-hydration="0">hello</div>"#
+    );
+
+    fn app2(cx: Scope) -> Element {
+        render! { Child2 {} }
+    }
+
+    fn Child2(cx: Scope) -> Element {
+        let dyn_text = "hello";
+        render! {
+            div { dyn_text }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app2);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div data-node-hydration="0"><!--node-id1-->hello<!--#--></div>"#
+    );
+
+    fn app3(cx: Scope) -> Element {
+        render! { Child3 {} }
+    }
+
+    fn Child3(cx: Scope) -> Element {
+        render! { div { width: "{1}" } }
+    }
+
+    let mut dom = VirtualDom::new(app3);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<div style="width:1;" data-node-hydration="0"></div>"#
+    );
+
+    fn app4(cx: Scope) -> Element {
+        render! { Child4 {} }
+    }
+
+    fn Child4(cx: Scope) -> Element {
+        render! {
+            for _ in 0..2 {
+                render! {
+                    render! {
+                        "{1}"
+                    }
+                }
+            }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app4);
+    _ = dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<!--node-id0-->1<!--#--><!--node-id1-->1<!--#-->"#
+    );
+}
+
+#[test]
+fn hello_world_hydrates() {
+    fn app(cx: Scope) -> Element {
+        let mut count = use_state(cx, || 0);
+
+        cx.render(rsx! {
+            h1 { "High-Five counter: {count}" }
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+        })
+    }
+
+    let mut dom = VirtualDom::new(app);
+    _ = dbg!(dom.rebuild());
+
+    assert_eq!(
+        dioxus_ssr::pre_render(&dom),
+        r#"<h1 data-node-hydration="0"><!--node-id1-->High-Five counter: 0<!--#--></h1><button data-node-hydration="2,click:1">Up high!</button><button data-node-hydration="3,click:1">Down low!</button>"#
+    );
+}

packages/ssr/tests/simple.rs

@@ -47,9 +47,7 @@ fn dynamic() {
 fn components() {
     #[component]
     fn MyComponent(cx: Scope, name: i32) -> Element {
-        render! {
+        render! { div { "component {name}" } }
-            div { "component {name}" }
-        }
     }
 
     assert_eq!(

packages/web/examples/hydrate.rs

@@ -4,14 +4,10 @@ use web_sys::window;
 
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
+        div { h1 { "thing 1" } }
+        div { h2 { "thing 2" } }
         div {
-            h1 { "thing 1" }
+            h2 { "thing 2" }
-        }
-        div {
-            h2 { "thing 2"}
-        }
-        div {
-            h2 { "thing 2"}
             "asd"
             "asd"
             Bapp {}
@@ -27,14 +23,10 @@ fn app(cx: Scope) -> Element {
 #[allow(non_snake_case)]
 fn Bapp(cx: Scope) -> Element {
     cx.render(rsx! {
+        div { h1 { "thing 1" } }
+        div { h2 { "thing 2" } }
         div {
-            h1 { "thing 1" }
+            h2 { "thing 2" }
-        }
-        div {
-            h2 { "thing 2"}
-        }
-        div {
-            h2 { "thing 2"}
             "asd"
             "asd"
         }
@@ -60,6 +52,6 @@ fn main() {
         .unwrap()
         .set_inner_html(&pre);
 
-    // now rehydtrate
+    // now rehydrate
     dioxus_web::launch_with_props(app, (), Config::new().hydrate(true));
 }

packages/web/src/dom.rs

@@ -1,11 +1,10 @@
 //! Implementation of a renderer for Dioxus on the web.
 //!
 //! Oustanding todos:
-//! - Removing event listeners (delegation)
 //! - Passive event listeners
 //! - no-op event listener patch for safari
 //! - tests to ensure dyn_into works for various event types.
-//! - Partial delegation?>
+//! - Partial delegation?
 
 use dioxus_core::{
     BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode,

packages/web/src/lib.rs

@@ -216,14 +216,16 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
             // todo: we need to split rebuild and initialize into two phases
             // it's a waste to produce edits just to get the vdom loaded
 
-            let templates = dom.rebuild().templates;
+            {
-            websys_dom.load_templates(&templates);
+                let mutations = dom.rebuild();
-
+                web_sys::console::log_1(&format!("mutations: {:#?}", mutations).into());
+                let templates = mutations.templates;
+                websys_dom.load_templates(&templates);
+                websys_dom.interpreter.flush();
+            }
             if let Err(err) = websys_dom.rehydrate(&dom) {
-                tracing::error!(
+                tracing::error!("Rehydration failed. {:?}", err);
-                    "Rehydration failed {:?}. Rebuild DOM into element from scratch",
+                tracing::error!("Rebuild DOM into element from scratch");
-                    &err
-                );
                 websys_dom.root.set_text_content(None);
 
                 let edits = dom.rebuild();
@@ -252,13 +254,6 @@ pub async fn run_with_props<T: 'static>(root: fn(Scope<T>) -> Element, root_prop
             pin_mut!(work);
 
             #[cfg(all(feature = "hot_reload", debug_assertions))]
-            // futures_util::select! {
-            //     _ = work => (None, None),
-            //     new_template = hotreload_rx.next() => {
-            //         (None, new_template)
-            //     }
-            //     evt = rx.next() =>
-            // }
             match select(work, select(hotreload_rx.next(), rx.next())).await {
                 Either::Left((_, _)) => (None, None),
                 Either::Right((Either::Left((new_template, _)), _)) => (None, new_template),
@@ -278,6 +273,13 @@ 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 {
+            web_sys::console::log_1(
+                &format!(
+                    "event: {:?}, {:?}, {:?}",
+                    evt.name, evt.bubbles, evt.element
+                )
+                .into(),
+            );
             dom.handle_event(evt.name.as_str(), evt.data, evt.element, evt.bubbles);
             res = rx.try_next().transpose().unwrap().ok();
         }

packages/web/src/rehydrate.rs

@@ -1,105 +1,62 @@
 use crate::dom::WebsysDom;
-use dioxus_core::{
+use dioxus_core::{DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom};
-    AttributeValue, DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom,
-};
-use dioxus_html::event_bubbles;
-use wasm_bindgen::JsCast;
-use web_sys::{Comment, Node};
 
-#[derive(Debug, Copy, Clone)]
+#[derive(Debug)]
 pub enum RehydrationError {
-    NodeTypeMismatch,
-    NodeNotFound,
     VNodeNotInitialized,
 }
-use RehydrationError::*;
 
-fn set_node(hydrated: &mut Vec<bool>, id: ElementId, node: Node) {
+use RehydrationError::*;
-    let idx = id.0;
-    if idx >= hydrated.len() {
-        hydrated.resize(idx + 1, false);
-    }
-    if !hydrated[idx] {
-        dioxus_interpreter_js::set_node(idx as u32, node);
-        hydrated[idx] = true;
-    }
-}
 
 impl WebsysDom {
     // we're streaming in patches, but the nodes already exist
     // so we're just going to write the correct IDs to the node and load them in
     pub fn rehydrate(&mut self, dom: &VirtualDom) -> Result<(), RehydrationError> {
-        let mut root = self
-            .root
-            .clone()
-            .dyn_into::<Node>()
-            .map_err(|_| NodeTypeMismatch)?
-            .first_child()
-            .ok_or(NodeNotFound);
-
         let root_scope = dom.base_scope();
-
+        let mut ids = Vec::new();
-        let mut hydrated = vec![true];
+        let mut to_mount = Vec::new();
-
-        let mut last_node_was_static_text = false;
 
         // Recursively rehydrate the dom from the VirtualDom
-        self.rehydrate_scope(
+        self.rehydrate_scope(root_scope, dom, &mut ids, &mut to_mount)?;
-            root_scope,
+
-            &mut root,
+        dioxus_interpreter_js::hydrate(ids);
-            &mut hydrated,
+
-            dom,
+        for id in to_mount {
-            &mut last_node_was_static_text,
+            self.send_mount_event(id);
-        )?;
+        }
 
-        self.interpreter.flush();
         Ok(())
     }
 
     fn rehydrate_scope(
         &mut self,
         scope: &ScopeState,
-        current_child: &mut Result<Node, RehydrationError>,
-        hydrated: &mut Vec<bool>,
         dom: &VirtualDom,
-        last_node_was_static_text: &mut bool,
+        ids: &mut Vec<u32>,
+        to_mount: &mut Vec<ElementId>,
     ) -> Result<(), RehydrationError> {
         let vnode = match scope.root_node() {
             dioxus_core::RenderReturn::Ready(ready) => ready,
             _ => return Err(VNodeNotInitialized),
         };
-        self.rehydrate_vnode(
+        self.rehydrate_vnode(dom, vnode, ids, to_mount)
-            current_child,
-            hydrated,
-            dom,
-            vnode,
-            last_node_was_static_text,
-        )
     }
 
     fn rehydrate_vnode(
         &mut self,
-        current_child: &mut Result<Node, RehydrationError>,
-        hydrated: &mut Vec<bool>,
         dom: &VirtualDom,
         vnode: &VNode,
-        last_node_was_static_text: &mut bool,
+        ids: &mut Vec<u32>,
+        to_mount: &mut Vec<ElementId>,
     ) -> Result<(), RehydrationError> {
         for (i, root) in vnode.template.get().roots.iter().enumerate() {
-            // make sure we set the root node ids even if the node is not dynamic
-            set_node(
-                hydrated,
-                *vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?,
-                current_child.clone()?,
-            );
-
             self.rehydrate_template_node(
-                current_child,
-                hydrated,
                 dom,
                 vnode,
                 root,
-                last_node_was_static_text,
+                ids,
+                to_mount,
+                Some(*vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?),
             )?;
         }
         Ok(())
@@ -107,191 +64,75 @@ impl WebsysDom {
 
     fn rehydrate_template_node(
         &mut self,
-        current_child: &mut Result<Node, RehydrationError>,
-        hydrated: &mut Vec<bool>,
         dom: &VirtualDom,
         vnode: &VNode,
         node: &TemplateNode,
-        last_node_was_static_text: &mut bool,
+        ids: &mut Vec<u32>,
+        to_mount: &mut Vec<ElementId>,
+        root_id: Option<ElementId>,
     ) -> Result<(), RehydrationError> {
         tracing::trace!("rehydrate template node: {:?}", node);
-        if let Ok(current_child) = current_child {
-            if tracing::event_enabled!(tracing::Level::TRACE) {
-                web_sys::console::log_1(&current_child.clone().into());
-            }
-        }
         match node {
             TemplateNode::Element {
                 children, attrs, ..
             } => {
-                let mut mounted_id = None;
+                let mut mounted_id = root_id;
-                let mut should_send_mount_event = true;
                 for attr in *attrs {
                     if let dioxus_core::TemplateAttribute::Dynamic { id } = attr {
                         let attribute = &vnode.dynamic_attrs[*id];
-                        let value = &attribute.value;
                         let id = attribute.mounted_element();
                         mounted_id = Some(id);
-                        let name = attribute.name;
+                        if let dioxus_core::AttributeValue::Listener(_) = attribute.value {
-                        if let AttributeValue::Listener(_) = value {
+                            if attribute.name == "onmounted" {
-                            let event_name = &name[2..];
+                                to_mount.push(id);
-                            match event_name {
-                                "mounted" => should_send_mount_event = true,
-                                _ => {
-                                    self.interpreter.new_event_listener(
-                                        event_name,
-                                        id.0 as u32,
-                                        event_bubbles(event_name) as u8,
-                                    );
-                                }
                             }
                         }
                     }
                 }
                 if let Some(id) = mounted_id {
-                    set_node(hydrated, id, current_child.clone()?);
+                    ids.push(id.0 as u32);
-                    if should_send_mount_event {
-                        self.send_mount_event(id);
-                    }
                 }
                 if !children.is_empty() {
-                    let mut children_current_child = current_child
-                        .as_mut()
-                        .map_err(|e| *e)?
-                        .first_child()
-                        .ok_or(NodeNotFound)?
-                        .dyn_into::<Node>()
-                        .map_err(|_| NodeTypeMismatch);
                     for child in *children {
-                        self.rehydrate_template_node(
+                        self.rehydrate_template_node(dom, vnode, child, ids, to_mount, None)?;
-                            &mut children_current_child,
-                            hydrated,
-                            dom,
-                            vnode,
-                            child,
-                            last_node_was_static_text,
-                        )?;
                     }
                 }
-                *current_child = current_child
-                    .as_mut()
-                    .map_err(|e| *e)?
-                    .next_sibling()
-                    .ok_or(NodeNotFound);
-                *last_node_was_static_text = false;
-            }
-            TemplateNode::Text { .. } => {
-                // if the last node was static text, it got merged with this one
-                if !*last_node_was_static_text {
-                    *current_child = current_child
-                        .as_mut()
-                        .map_err(|e| *e)?
-                        .next_sibling()
-                        .ok_or(NodeNotFound);
-                }
-                *last_node_was_static_text = true;
             }
             TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
-                self.rehydrate_dynamic_node(
+                self.rehydrate_dynamic_node(dom, &vnode.dynamic_nodes[*id], ids, to_mount)?;
-                    current_child,
-                    hydrated,
-                    dom,
-                    &vnode.dynamic_nodes[*id],
-                    last_node_was_static_text,
-                )?;
             }
+            _ => {}
         }
         Ok(())
     }
 
     fn rehydrate_dynamic_node(
         &mut self,
-        current_child: &mut Result<Node, RehydrationError>,
-        hydrated: &mut Vec<bool>,
         dom: &VirtualDom,
         dynamic: &DynamicNode,
-        last_node_was_static_text: &mut bool,
+        ids: &mut Vec<u32>,
+        to_mount: &mut Vec<ElementId>,
     ) -> Result<(), RehydrationError> {
         tracing::trace!("rehydrate dynamic node: {:?}", dynamic);
-        if let Ok(current_child) = current_child {
-            if tracing::event_enabled!(tracing::Level::TRACE) {
-                web_sys::console::log_1(&current_child.clone().into());
-            }
-        }
         match dynamic {
             dioxus_core::DynamicNode::Text(text) => {
-                let id = text.mounted_element();
+                ids.push(text.mounted_element().ok_or(VNodeNotInitialized)?.0 as u32);
-                // skip comment separator before node
-                if cfg!(debug_assertions) {
-                    assert!(current_child
-                        .as_mut()
-                        .map_err(|e| *e)?
-                        .has_type::<Comment>());
-                }
-                *current_child = current_child
-                    .as_mut()
-                    .map_err(|e| *e)?
-                    .next_sibling()
-                    .ok_or(NodeNotFound);
-
-                set_node(
-                    hydrated,
-                    id.ok_or(VNodeNotInitialized)?,
-                    current_child.clone()?,
-                );
-                *current_child = current_child
-                    .as_mut()
-                    .map_err(|e| *e)?
-                    .next_sibling()
-                    .ok_or(NodeNotFound);
-
-                // skip comment separator after node
-                if cfg!(debug_assertions) {
-                    assert!(current_child
-                        .as_mut()
-                        .map_err(|e| *e)?
-                        .has_type::<Comment>());
-                }
-                *current_child = current_child
-                    .as_mut()
-                    .map_err(|e| *e)?
-                    .next_sibling()
-                    .ok_or(NodeNotFound);
-
-                *last_node_was_static_text = false;
             }
             dioxus_core::DynamicNode::Placeholder(placeholder) => {
-                set_node(
+                ids.push(placeholder.mounted_element().ok_or(VNodeNotInitialized)?.0 as u32);
-                    hydrated,
-                    placeholder.mounted_element().ok_or(VNodeNotInitialized)?,
-                    current_child.clone()?,
-                );
-                *current_child = current_child
-                    .as_mut()
-                    .map_err(|e| *e)?
-                    .next_sibling()
-                    .ok_or(NodeNotFound);
-                *last_node_was_static_text = false;
             }
             dioxus_core::DynamicNode::Component(comp) => {
                 let scope = comp.mounted_scope().ok_or(VNodeNotInitialized)?;
                 self.rehydrate_scope(
-                    dom.get_scope(scope).unwrap(),
+                    dom.get_scope(scope).ok_or(VNodeNotInitialized)?,
-                    current_child,
-                    hydrated,
                     dom,
-                    last_node_was_static_text,
+                    ids,
+                    to_mount,
                 )?;
             }
             dioxus_core::DynamicNode::Fragment(fragment) => {
                 for vnode in *fragment {
-                    self.rehydrate_vnode(
+                    self.rehydrate_vnode(dom, vnode, ids, to_mount)?;
-                        current_child,
-                        hydrated,
-                        dom,
-                        vnode,
-                        last_node_was_static_text,
-                    )?;
                 }
             }
         }