From 2d7d721fd6fb3618d9bda54dd57348c64ea9189a Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Tue, 19 Dec 2023 16:02:07 -0600 Subject: [PATCH 1/6] make hydration more resilient using ids to hydrate --- .../examples/axum-hello-world/src/main.rs | 4 +- .../interpreter/src/sledgehammer_bindings.rs | 40 ++- packages/ssr/src/cache.rs | 36 ++- packages/ssr/src/renderer.rs | 46 ++- packages/ssr/tests/hydration.rs | 120 ++++++++ packages/web/examples/hydrate.rs | 22 +- packages/web/src/lib.rs | 31 +- packages/web/src/rehydrate.rs | 280 +----------------- 8 files changed, 255 insertions(+), 324 deletions(-) create mode 100644 packages/ssr/tests/hydration.rs diff --git a/packages/fullstack/examples/axum-hello-world/src/main.rs b/packages/fullstack/examples/axum-hello-world/src/main.rs index 64e5b44a0..e9d3dcad6 100644 --- a/packages/fullstack/examples/axum-hello-world/src/main.rs +++ b/packages/fullstack/examples/axum-hello-world/src/main.rs @@ -27,9 +27,7 @@ fn app(cx: Scope) -> Element { let eval = use_eval(cx); cx.render(rsx! { - div { - "Server state: {state}" - } + div { "Server state: {state}" } h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } diff --git a/packages/interpreter/src/sledgehammer_bindings.rs b/packages/interpreter/src/sledgehammer_bindings.rs index e2633d024..fcd72937c 100644 --- a/packages/interpreter/src/sledgehammer_bindings.rs +++ b/packages/interpreter/src/sledgehammer_bindings.rs @@ -123,8 +123,42 @@ mod js { export function save_template(nodes, tmpl_id) { templates[tmpl_id] = nodes; } - export function set_node(id, node) { - nodes[id] = node; + export function hydrate() { + 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 = 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[parseInt(split[1])] = currentNode.nextSibling; + } + currentNode = treeWalker.nextNode(); + } } export function get_node(id) { return nodes[id]; @@ -181,7 +215,7 @@ mod js { pub fn save_template(nodes: Vec, tmpl_id: u32); #[wasm_bindgen] - pub fn set_node(id: u32, node: Node); + pub fn hydrate(); #[wasm_bindgen] pub fn get_node(id: u32) -> Node; diff --git a/packages/ssr/src/cache.rs b/packages/ssr/src/cache.rs index bcd6ba71f..9adcf395b 100644 --- a/packages/ssr/src/cache.rs +++ b/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(usize), + /// A marker for where to insert a node id for a root node + RootNodeMarker(usize), } 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 { + pub fn from_template(template: &VNode, prerender: bool) -> Result { 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, 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 last_dyn_attr_id = None; for attr in *attrs { match attr { TemplateAttribute::Static { @@ -97,8 +103,9 @@ impl StringCache { } } TemplateAttribute::Dynamic { id: index } => { - chain.segments.push(Segment::Attr(*index)); - has_dynamic_attrs = true; + let index = *index; + chain.segments.push(Segment::Attr(index)); + last_dyn_attr_id = Some(index); } } } @@ -113,12 +120,25 @@ impl StringCache { inside_style_tag: true, }); write!(chain, "\"")?; - } else if has_dynamic_attrs { + } else if last_dyn_attr_id.is_some() { 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 { + write!(chain, " data-node-hydration=\"")?; + if let Some(last_dyn_attr_id) = last_dyn_attr_id { + chain + .segments + .push(Segment::AttributeNodeMarker(last_dyn_attr_id)); + } else if is_root { + chain.segments.push(Segment::RootNodeMarker(root_idx)); + } + write!(chain, "\"")?; + } + if children.is_empty() && tag_is_self_closing(tag) { write!(chain, "/>")?; } else { @@ -126,12 +146,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 last_dyn_attr_id.is_some() { 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, "")?; } diff --git a/packages/ssr/src/renderer.rs b/packages/ssr/src/renderer.rs index 98afef8b7..87c882cde 100644 --- a/packages/ssr/src/renderer.rs +++ b/packages/ssr/src/renderer.rs @@ -69,7 +69,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 +80,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 +99,12 @@ impl Renderer { } else { write_attribute(buf, attr)?; } + + if self.pre_render { + if let AttributeValue::Listener(_) = &attr.value { + accumulated_listeners.push(attr.name); + } + } } Segment::Node(idx) => match &template.dynamic_nodes[*idx] { DynamicNode::Component(node) => { @@ -115,7 +127,10 @@ 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, "")?; + let node_id = text + .mounted_element() + .expect("Text nodes must be mounted before rendering"); + write!(buf, "", node_id.0)?; } write!( @@ -134,9 +149,12 @@ impl Renderer { } } - DynamicNode::Placeholder(_el) => { + DynamicNode::Placeholder(el) => { if self.pre_render { - write!(buf, "
")?;
+                            let id = el
+                                .mounted_element()
+                                .expect("Elements must be mounted before rendering");
+                            write!(buf, "
", id.0)?;
                         }
                     }
                 },
@@ -175,6 +193,22 @@ impl Renderer {
                         }
                     }
                 }
+
+                Segment::AttributeNodeMarker(idx) => {
+                    let id = template.dynamic_attrs[*idx].mounted_element();
+                    // first write the id
+                    write!(buf, "{}", id.0)?;
+                    // 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(idx) => {
+                    let id = template.root_ids.borrow()[*idx];
+                    write!(buf, "{}", id.0)?;
+                }
             }
         }
 
@@ -192,7 +226,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" }
diff --git a/packages/ssr/tests/hydration.rs b/packages/ssr/tests/hydration.rs
new file mode 100644
index 000000000..736a1435b
--- /dev/null
+++ b/packages/ssr/tests/hydration.rs
@@ -0,0 +1,120 @@
+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#"
"#
+    );
+}
+
+#[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#"
"#
+    );
+}
+
+#[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#"
"#
+    );
+
+    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#"
"#
+    );
+}
+
+#[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#"
hello
"#
+    );
+
+    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#"
1231234
"#
+    );
+}
+
+#[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#"
High-Five counter: 0
"#
+    );
+}
diff --git a/packages/web/examples/hydrate.rs b/packages/web/examples/hydrate.rs
index 08c0f95cd..8a6cd464e 100644
--- a/packages/web/examples/hydrate.rs
+++ b/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" }
-        }
-        div {
-            h2 { "thing 2"}
-        }
-        div {
-            h2 { "thing 2"}
+            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" }
-        }
-        div {
-            h2 { "thing 2"}
-        }
-        div {
-            h2 { "thing 2"}
+            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));
 }
diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs
index 944ed3150..9b80dc325 100644
--- a/packages/web/src/lib.rs
+++ b/packages/web/src/lib.rs
@@ -215,21 +215,21 @@ pub async fn run_with_props(root: fn(Scope) -> 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;
+            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();
+            websys_dom.rehydrate();
+            // if !true {
+            //     tracing::error!("Rehydration failed. Rebuild DOM into element from scratch");
+            //     websys_dom.root.set_text_content(None);
 
-            if let Err(err) = websys_dom.rehydrate(&dom) {
-                tracing::error!(
-                    "Rehydration failed {:?}. Rebuild DOM into element from scratch",
-                    &err
-                );
-                websys_dom.root.set_text_content(None);
+            //     let edits = dom.rebuild();
 
-                let edits = dom.rebuild();
-
-                websys_dom.load_templates(&edits.templates);
-                websys_dom.apply_edits(edits.edits);
-            }
+            //     websys_dom.load_templates(&edits.templates);
+            //     websys_dom.apply_edits(edits.edits);
+            // }
         }
     } else {
         let edits = dom.rebuild();
@@ -277,6 +277,13 @@ pub async fn run_with_props(root: fn(Scope) -> 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();
         }
diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs
index 4415ceb37..e151bb13f 100644
--- a/packages/web/src/rehydrate.rs
+++ b/packages/web/src/rehydrate.rs
@@ -6,286 +6,10 @@ use dioxus_html::event_bubbles;
 use wasm_bindgen::JsCast;
 use web_sys::{Comment, Node};
 
-#[derive(Debug, Copy, Clone)]
-pub enum RehydrationError {
-    NodeTypeMismatch,
-    NodeNotFound,
-    VNodeNotInitialized,
-}
-use RehydrationError::*;
-
-fn set_node(hydrated: &mut Vec, id: ElementId, node: Node) {
-    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::()
-            .map_err(|_| NodeTypeMismatch)?
-            .first_child()
-            .ok_or(NodeNotFound);
-
-        let root_scope = dom.base_scope();
-
-        let mut hydrated = vec![true];
-
-        let mut last_node_was_static_text = false;
-
-        // Recursively rehydrate the dom from the VirtualDom
-        self.rehydrate_scope(
-            root_scope,
-            &mut root,
-            &mut hydrated,
-            dom,
-            &mut last_node_was_static_text,
-        )?;
-
-        self.interpreter.flush();
-        Ok(())
-    }
-
-    fn rehydrate_scope(
-        &mut self,
-        scope: &ScopeState,
-        current_child: &mut Result,
-        hydrated: &mut Vec,
-        dom: &VirtualDom,
-        last_node_was_static_text: &mut bool,
-    ) -> Result<(), RehydrationError> {
-        let vnode = match scope.root_node() {
-            dioxus_core::RenderReturn::Ready(ready) => ready,
-            _ => return Err(VNodeNotInitialized),
-        };
-        self.rehydrate_vnode(
-            current_child,
-            hydrated,
-            dom,
-            vnode,
-            last_node_was_static_text,
-        )
-    }
-
-    fn rehydrate_vnode(
-        &mut self,
-        current_child: &mut Result,
-        hydrated: &mut Vec,
-        dom: &VirtualDom,
-        vnode: &VNode,
-        last_node_was_static_text: &mut bool,
-    ) -> 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,
-            )?;
-        }
-        Ok(())
-    }
-
-    fn rehydrate_template_node(
-        &mut self,
-        current_child: &mut Result,
-        hydrated: &mut Vec,
-        dom: &VirtualDom,
-        vnode: &VNode,
-        node: &TemplateNode,
-        last_node_was_static_text: &mut bool,
-    ) -> 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(¤t_child.clone().into());
-            }
-        }
-        match node {
-            TemplateNode::Element {
-                children, attrs, ..
-            } => {
-                let mut mounted_id = None;
-                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 AttributeValue::Listener(_) = value {
-                            let event_name = &name[2..];
-                            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()?);
-                }
-                if !children.is_empty() {
-                    let mut children_current_child = current_child
-                        .as_mut()
-                        .map_err(|e| *e)?
-                        .first_child()
-                        .ok_or(NodeNotFound)?
-                        .dyn_into::()
-                        .map_err(|_| NodeTypeMismatch);
-                    for child in *children {
-                        self.rehydrate_template_node(
-                            &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(
-                    current_child,
-                    hydrated,
-                    dom,
-                    &vnode.dynamic_nodes[*id],
-                    last_node_was_static_text,
-                )?;
-            }
-        }
-        Ok(())
-    }
-
-    fn rehydrate_dynamic_node(
-        &mut self,
-        current_child: &mut Result,
-        hydrated: &mut Vec,
-        dom: &VirtualDom,
-        dynamic: &DynamicNode,
-        last_node_was_static_text: &mut bool,
-    ) -> 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(¤t_child.clone().into());
-            }
-        }
-        match dynamic {
-            dioxus_core::DynamicNode::Text(text) => {
-                let id = text.mounted_element();
-                // skip comment separator before node
-                if cfg!(debug_assertions) {
-                    assert!(current_child
-                        .as_mut()
-                        .map_err(|e| *e)?
-                        .has_type::());
-                }
-                *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::());
-                }
-                *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(
-                    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(),
-                    current_child,
-                    hydrated,
-                    dom,
-                    last_node_was_static_text,
-                )?;
-            }
-            dioxus_core::DynamicNode::Fragment(fragment) => {
-                for vnode in *fragment {
-                    self.rehydrate_vnode(
-                        current_child,
-                        hydrated,
-                        dom,
-                        vnode,
-                        last_node_was_static_text,
-                    )?;
-                }
-            }
-        }
-        Ok(())
+    pub fn rehydrate(&mut self) {
+        dioxus_interpreter_js::hydrate()
     }
 }

From e2646e655e9a45223e388881e302d272930deed5 Mon Sep 17 00:00:00 2001
From: Evan Almloff 
Date: Wed, 27 Dec 2023 10:17:18 -0600
Subject: [PATCH 2/6] fix hydration after suspense

---
 .../fullstack/src/adapters/axum_adapter.rs    |   1 -
 .../interpreter/src/sledgehammer_bindings.rs  |   9 +-
 packages/ssr/src/cache.rs                     |  22 ++--
 packages/ssr/src/renderer.rs                  |  34 ++---
 packages/ssr/tests/hydration.rs               |  92 ++++++++++++--
 packages/ssr/tests/simple.rs                  |   4 +-
 packages/web/src/dom.rs                       |   3 +-
 packages/web/src/lib.rs                       |  28 +++--
 packages/web/src/rehydrate.rs                 | 116 +++++++++++++++++-
 9 files changed, 250 insertions(+), 59 deletions(-)

diff --git a/packages/fullstack/src/adapters/axum_adapter.rs b/packages/fullstack/src/adapters/axum_adapter.rs
index 41a7c92be..09e6e1aa1 100644
--- a/packages/fullstack/src/adapters/axum_adapter.rs
+++ b/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| {
                 let mut service = crate::server_fn_service(Default::default(), func);
                 async move {
diff --git a/packages/interpreter/src/sledgehammer_bindings.rs b/packages/interpreter/src/sledgehammer_bindings.rs
index fcd72937c..8b44f4486 100644
--- a/packages/interpreter/src/sledgehammer_bindings.rs
+++ b/packages/interpreter/src/sledgehammer_bindings.rs
@@ -123,13 +123,14 @@ mod js {
     export function save_template(nodes, tmpl_id) {
         templates[tmpl_id] = nodes;
     }
-    export function hydrate() {
+    export function hydrate(ids) {
+        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 = parseInt(split[0]);
+            const id = ids[parseInt(split[0])];
             nodes[id] = hydrateNode;
             console.log("hydrating node", hydrateNode, id);
             if (split.length > 1) {
@@ -155,7 +156,7 @@ mod js {
             const split = id.split('node-id');
             if (split.length > 1) {
                 console.log("hydrating text", currentNode.nextSibling, id);
-                nodes[parseInt(split[1])] = currentNode.nextSibling;
+                nodes[ids[parseInt(split[1])]] = currentNode.nextSibling;
             }
             currentNode = treeWalker.nextNode();
         }
@@ -215,7 +216,7 @@ mod js {
         pub fn save_template(nodes: Vec, tmpl_id: u32);
 
         #[wasm_bindgen]
-        pub fn hydrate();
+        pub fn hydrate(ids: Vec);
 
         #[wasm_bindgen]
         pub fn get_node(id: u32) -> Node;
diff --git a/packages/ssr/src/cache.rs b/packages/ssr/src/cache.rs
index 9adcf395b..11f90058a 100644
--- a/packages/ssr/src/cache.rs
+++ b/packages/ssr/src/cache.rs
@@ -28,9 +28,9 @@ 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(usize),
+    AttributeNodeMarker,
     /// A marker for where to insert a node id for a root node
-    RootNodeMarker(usize),
+    RootNodeMarker,
 }
 
 impl std::fmt::Write for StringChain {
@@ -82,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 last_dyn_attr_id = None;
+                let mut has_dyn_attrs = false;
                 for attr in *attrs {
                     match attr {
                         TemplateAttribute::Static {
@@ -105,7 +105,7 @@ impl StringCache {
                         TemplateAttribute::Dynamic { id: index } => {
                             let index = *index;
                             chain.segments.push(Segment::Attr(index));
-                            last_dyn_attr_id = Some(index);
+                            has_dyn_attrs = true
                         }
                     }
                 }
@@ -120,21 +120,19 @@ impl StringCache {
                         inside_style_tag: true,
                     });
                     write!(chain, "\"")?;
-                } else if last_dyn_attr_id.is_some() {
+                } 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 {
+                if prerender && (has_dyn_attrs || is_root) {
                     write!(chain, " data-node-hydration=\"")?;
-                    if let Some(last_dyn_attr_id) = last_dyn_attr_id {
-                        chain
-                            .segments
-                            .push(Segment::AttributeNodeMarker(last_dyn_attr_id));
+                    if has_dyn_attrs {
+                        chain.segments.push(Segment::AttributeNodeMarker);
                     } else if is_root {
-                        chain.segments.push(Segment::RootNodeMarker(root_idx));
+                        chain.segments.push(Segment::RootNodeMarker);
                     }
                     write!(chain, "\"")?;
                 }
@@ -146,7 +144,7 @@ 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 last_dyn_attr_id.is_some() {
+                    } else if has_dyn_attrs {
                         chain.segments.push(Segment::InnerHtmlMarker);
                     }
 
diff --git a/packages/ssr/src/renderer.rs b/packages/ssr/src/renderer.rs
index 87c882cde..9b0d9e7bb 100644
--- a/packages/ssr/src/renderer.rs
+++ b/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>,
+
+    /// 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)?
         };
 
@@ -127,10 +131,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 {
-                            let node_id = text
-                                .mounted_element()
-                                .expect("Text nodes must be mounted before rendering");
-                            write!(buf, "", node_id.0)?;
+                            write!(buf, "", self.dynamic_node_id)?;
+                            self.dynamic_node_id += 1;
                         }
 
                         write!(
@@ -149,12 +151,14 @@ impl Renderer {
                         }
                     }
 
-                    DynamicNode::Placeholder(el) => {
+                    DynamicNode::Placeholder(_) => {
                         if self.pre_render {
-                            let id = el
-                                .mounted_element()
-                                .expect("Elements must be mounted before rendering");
-                            write!(buf, "
", id.0)?;
+                            write!(
+                                buf,
+                                "
",
+                                self.dynamic_node_id
+                            )?;
+                            self.dynamic_node_id += 1;
                         }
                     }
                 },
@@ -194,10 +198,10 @@ impl Renderer {
                     }
                 }
 
-                Segment::AttributeNodeMarker(idx) => {
-                    let id = template.dynamic_attrs[*idx].mounted_element();
+                Segment::AttributeNodeMarker => {
                     // first write the id
-                    write!(buf, "{}", id.0)?;
+                    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..])?;
@@ -205,9 +209,9 @@ impl Renderer {
                     }
                 }
 
-                Segment::RootNodeMarker(idx) => {
-                    let id = template.root_ids.borrow()[*idx];
-                    write!(buf, "{}", id.0)?;
+                Segment::RootNodeMarker => {
+                    write!(buf, "{}", self.dynamic_node_id)?;
+                    self.dynamic_node_id += 1
                 }
             }
         }
diff --git a/packages/ssr/tests/hydration.rs b/packages/ssr/tests/hydration.rs
index 736a1435b..360aa0c5f 100644
--- a/packages/ssr/tests/hydration.rs
+++ b/packages/ssr/tests/hydration.rs
@@ -11,7 +11,7 @@ fn root_ids() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"
"#
+        r#"
"#
     );
 }
 
@@ -29,7 +29,7 @@ fn dynamic_attributes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"
"#
+        r#"
"#
     );
 }
 
@@ -46,7 +46,7 @@ fn listeners() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"
"#
+        r#"
"#
     );
 
     fn app2(cx: Scope) -> Element {
@@ -61,7 +61,7 @@ fn listeners() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"
"#
+        r#"
"#
     );
 }
 
@@ -79,7 +79,7 @@ fn text_nodes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"
hello
"#
+        r#"
hello
"#
     );
 
     fn app2(cx: Scope) -> Element {
@@ -94,7 +94,85 @@ fn text_nodes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"
1231234
"#
+        r#"
1231234
"#
+    );
+}
+
+#[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#"
hello
"#
+    );
+
+    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#"
hello
"#
+    );
+
+    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#"
"#
+    );
+
+    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#"11"#
     );
 }
 
@@ -115,6 +193,6 @@ fn hello_world_hydrates() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"
High-Five counter: 0
"#
+        r#"
High-Five counter: 0
"#
     );
 }
diff --git a/packages/ssr/tests/simple.rs b/packages/ssr/tests/simple.rs
index cdf186a80..a9034df9b 100644
--- a/packages/ssr/tests/simple.rs
+++ b/packages/ssr/tests/simple.rs
@@ -47,9 +47,7 @@ fn dynamic() {
 fn components() {
     #[component]
     fn MyComponent(cx: Scope, name: i32) -> Element {
-        render! {
-            div { "component {name}" }
-        }
+        render! { div { "component {name}" } }
     }
 
     assert_eq!(
diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs
index b8e9255f7..bcf2065ec 100644
--- a/packages/web/src/dom.rs
+++ b/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,
diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs
index 9b80dc325..3d8ecf03f 100644
--- a/packages/web/src/lib.rs
+++ b/packages/web/src/lib.rs
@@ -215,21 +215,23 @@ pub async fn run_with_props(root: fn(Scope) -> 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 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();
-            websys_dom.rehydrate();
-            // if !true {
-            //     tracing::error!("Rehydration failed. Rebuild DOM into element from scratch");
-            //     websys_dom.root.set_text_content(None);
+            {
+                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!("Rehydration failed. {:?}", err);
+                tracing::error!("Rebuild DOM into element from scratch");
+                websys_dom.root.set_text_content(None);
 
-            //     let edits = dom.rebuild();
+                let edits = dom.rebuild();
 
-            //     websys_dom.load_templates(&edits.templates);
-            //     websys_dom.apply_edits(edits.edits);
-            // }
+                websys_dom.load_templates(&edits.templates);
+                websys_dom.apply_edits(edits.edits);
+            }
         }
     } else {
         let edits = dom.rebuild();
diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs
index e151bb13f..2c67cd544 100644
--- a/packages/web/src/rehydrate.rs
+++ b/packages/web/src/rehydrate.rs
@@ -6,10 +6,122 @@ use dioxus_html::event_bubbles;
 use wasm_bindgen::JsCast;
 use web_sys::{Comment, Node};
 
+#[derive(Debug)]
+pub enum RehydrationError {
+    VNodeNotInitialized,
+}
+
+use RehydrationError::*;
+
 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) {
-        dioxus_interpreter_js::hydrate()
+    pub fn rehydrate(&mut self, dom: &VirtualDom) -> Result<(), RehydrationError> {
+        let root_scope = dom.base_scope();
+        let mut ids = Vec::new();
+
+        // Recursively rehydrate the dom from the VirtualDom
+        self.rehydrate_scope(root_scope, dom, &mut ids)?;
+
+        dioxus_interpreter_js::hydrate(ids);
+
+        Ok(())
+    }
+
+    fn rehydrate_scope(
+        &mut self,
+        scope: &ScopeState,
+        dom: &VirtualDom,
+        ids: &mut Vec,
+    ) -> Result<(), RehydrationError> {
+        let vnode = match scope.root_node() {
+            dioxus_core::RenderReturn::Ready(ready) => ready,
+            _ => return Err(VNodeNotInitialized),
+        };
+        self.rehydrate_vnode(dom, vnode, ids)
+    }
+
+    fn rehydrate_vnode(
+        &mut self,
+        dom: &VirtualDom,
+        vnode: &VNode,
+        ids: &mut Vec,
+    ) -> Result<(), RehydrationError> {
+        for (i, root) in vnode.template.get().roots.iter().enumerate() {
+            self.rehydrate_template_node(
+                dom,
+                vnode,
+                root,
+                ids,
+                Some(*vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?),
+            )?;
+        }
+        Ok(())
+    }
+
+    fn rehydrate_template_node(
+        &mut self,
+        dom: &VirtualDom,
+        vnode: &VNode,
+        node: &TemplateNode,
+        ids: &mut Vec,
+        root_id: Option,
+    ) -> Result<(), RehydrationError> {
+        tracing::trace!("rehydrate template node: {:?}", node);
+        match node {
+            TemplateNode::Element {
+                children, attrs, ..
+            } => {
+                let mut mounted_id = root_id;
+                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);
+                    }
+                }
+                if let Some(id) = mounted_id {
+                    ids.push(id.0 as u32);
+                }
+                if !children.is_empty() {
+                    for child in *children {
+                        self.rehydrate_template_node(dom, vnode, child, ids, None)?;
+                    }
+                }
+            }
+            TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
+                self.rehydrate_dynamic_node(dom, &vnode.dynamic_nodes[*id], ids)?;
+            }
+            _ => {}
+        }
+        Ok(())
+    }
+
+    fn rehydrate_dynamic_node(
+        &mut self,
+        dom: &VirtualDom,
+        dynamic: &DynamicNode,
+        ids: &mut Vec,
+    ) -> Result<(), RehydrationError> {
+        tracing::trace!("rehydrate dynamic node: {:?}", dynamic);
+        match dynamic {
+            dioxus_core::DynamicNode::Text(text) => {
+                ids.push(text.mounted_element().ok_or(VNodeNotInitialized)?.0 as u32);
+            }
+            dioxus_core::DynamicNode::Placeholder(placeholder) => {
+                ids.push(placeholder.mounted_element().ok_or(VNodeNotInitialized)?.0 as u32);
+            }
+            dioxus_core::DynamicNode::Component(comp) => {
+                let scope = comp.mounted_scope().ok_or(VNodeNotInitialized)?;
+                self.rehydrate_scope(dom.get_scope(scope).ok_or(VNodeNotInitialized)?, dom, ids)?;
+            }
+            dioxus_core::DynamicNode::Fragment(fragment) => {
+                for vnode in *fragment {
+                    self.rehydrate_vnode(dom, vnode, ids)?;
+                }
+            }
+        }
+        Ok(())
     }
 }

From 9e9b7a2459b4b40b47cc265e5211865d9171ead1 Mon Sep 17 00:00:00 2001
From: Evan Almloff 
Date: Wed, 27 Dec 2023 10:23:56 -0600
Subject: [PATCH 3/6] fix clippy

---
 packages/core/tests/suspense.rs | 2 +-
 packages/ssr/tests/hydration.rs | 1 +
 packages/web/src/rehydrate.rs   | 6 +-----
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/core/tests/suspense.rs b/packages/core/tests/suspense.rs
index abce7f8a6..1a7ab3d58 100644
--- a/packages/core/tests/suspense.rs
+++ b/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, "
Waiting for... child
");
 
diff --git a/packages/ssr/tests/hydration.rs b/packages/ssr/tests/hydration.rs
index 360aa0c5f..8c9e9f5c8 100644
--- a/packages/ssr/tests/hydration.rs
+++ b/packages/ssr/tests/hydration.rs
@@ -98,6 +98,7 @@ fn text_nodes() {
     );
 }
 
+#[allow(non_snake_case)]
 #[test]
 fn components_hydrate() {
     fn app(cx: Scope) -> Element {
diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs
index 2c67cd544..84f92ac19 100644
--- a/packages/web/src/rehydrate.rs
+++ b/packages/web/src/rehydrate.rs
@@ -1,10 +1,7 @@
 use crate::dom::WebsysDom;
 use dioxus_core::{
-    AttributeValue, DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom,
+     DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom,
 };
-use dioxus_html::event_bubbles;
-use wasm_bindgen::JsCast;
-use web_sys::{Comment, Node};
 
 #[derive(Debug)]
 pub enum RehydrationError {
@@ -76,7 +73,6 @@ impl WebsysDom {
                 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);
                     }

From b7aea9653f9ad4a6448ce3c7eda4a48cea6ecfcc Mon Sep 17 00:00:00 2001
From: Evan Almloff 
Date: Wed, 27 Dec 2023 10:25:42 -0600
Subject: [PATCH 4/6] fix server cached docs

---
 packages/fullstack/src/hooks/server_cached.rs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/fullstack/src/hooks/server_cached.rs b/packages/fullstack/src/hooks/server_cached.rs
index 519f70dae..827ba22c5 100644
--- a/packages/fullstack/src/hooks/server_cached.rs
+++ b/packages/fullstack/src/hooks/server_cached.rs
@@ -12,9 +12,11 @@ use serde::{de::DeserializeOwned, Serialize};
 /// use dioxus_fullstack::prelude::*;
 ///
 /// fn app(cx: Scope) -> Element {
-///    let state1 = use_state(cx, || from_server(|| {
+///    let state1 = server_cached(cx, || from_server(|| {
 ///       1234
 ///    }));
+///
+///    todo!()
 /// }
 /// ```
 pub fn server_cached(server_fn: impl Fn() -> O) -> O {

From f34053c18f329f682bbad247fc5418b82335a81c Mon Sep 17 00:00:00 2001
From: Evan Almloff 
Date: Wed, 27 Dec 2023 10:32:01 -0600
Subject: [PATCH 5/6] fix formatting

---
 packages/web/src/rehydrate.rs | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs
index 84f92ac19..9fa20e56a 100644
--- a/packages/web/src/rehydrate.rs
+++ b/packages/web/src/rehydrate.rs
@@ -1,7 +1,5 @@
 use crate::dom::WebsysDom;
-use dioxus_core::{
-     DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom,
-};
+use dioxus_core::{DynamicNode, ElementId, ScopeState, TemplateNode, VNode, VirtualDom};
 
 #[derive(Debug)]
 pub enum RehydrationError {

From 0a7873fcd0dbde76e9e4dc2869f49b97dc641bb7 Mon Sep 17 00:00:00 2001
From: Evan Almloff 
Date: Sat, 30 Dec 2023 14:12:21 -0600
Subject: [PATCH 6/6] merge upstream

---
 README.md                                     |  2 +-
 packages/core/src/lazynodes.rs                |  2 +-
 packages/liveview/Cargo.toml                  | 13 +++-
 packages/liveview/README.md                   |  1 +
 packages/liveview/examples/rocket.rs          | 76 +++++++++++++++++++
 .../liveview/src/adapters/rocket_adapter.rs   | 25 ++++++
 packages/liveview/src/lib.rs                  |  5 ++
 packages/ssr/src/renderer.rs                  |  5 +-
 packages/web/src/dom.rs                       | 26 ++++---
 packages/web/src/lib.rs                       |  7 --
 packages/web/src/rehydrate.rs                 | 32 ++++++--
 11 files changed, 166 insertions(+), 28 deletions(-)
 create mode 100644 packages/liveview/examples/rocket.rs
 create mode 100644 packages/liveview/src/adapters/rocket_adapter.rs

diff --git a/README.md b/README.md
index d1ec98019..65cd08263 100644
--- a/README.md
+++ b/README.md
@@ -161,7 +161,7 @@ So... Dioxus is great, but why won't it work for me?
 ## Contributing
 - Check out the website [section on contributing](https://dioxuslabs.com/learn/0.4/contributing).
 - Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
-- Join the discord and ask questions!
+- [Join](https://discord.gg/XgGxMSkvUM) the discord and ask questions!
 
 
 
diff --git a/packages/core/src/lazynodes.rs b/packages/core/src/lazynodes.rs
index 3189086b4..ae1bd2109 100644
--- a/packages/core/src/lazynodes.rs
+++ b/packages/core/src/lazynodes.rs
@@ -18,7 +18,7 @@ use crate::{innerlude::VNode, ScopeState};
 
 /// A concrete type provider for closures that build [`VNode`] structures.
 ///
-/// This struct wraps lazy structs that build [`VNode`] trees Normally, we cannot perform a blanket implementation over
+/// This struct wraps lazy structs that build [`VNode`] trees. Normally, we cannot perform a blanket implementation over
 /// closures, but if we wrap the closure in a concrete type, we can use it for different branches in matching.
 ///
 ///
diff --git a/packages/liveview/Cargo.toml b/packages/liveview/Cargo.toml
index cbd7b75f5..0f35f4ae6 100644
--- a/packages/liveview/Cargo.toml
+++ b/packages/liveview/Cargo.toml
@@ -38,6 +38,10 @@ salvo = { version = "0.44.1", optional = true, features = ["ws"] }
 once_cell = "1.17.1"
 async-trait = "0.1.71"
 
+# rocket
+rocket = { version = "0.5.0", optional = true }
+rocket_ws = { version = "0.1.0", optional = true }
+
 # actix is ... complicated?
 # actix-files = { version = "0.6.2", optional = true }
 # actix-web = { version = "4.2.1", optional = true }
@@ -49,13 +53,16 @@ tokio = { workspace = true, features = ["full"] }
 dioxus = { workspace = true }
 warp = "0.3.3"
 axum = { version = "0.6.1", features = ["ws"] }
-salvo = { version = "0.44.1", features = ["affix", "ws"] }
+# salvo = { version = "0.44.1", features = ["affix", "ws"] }
+rocket = "0.5.0"
+rocket_ws = "0.1.0"
 tower = "0.4.13"
 
 [features]
 default = ["hot-reload"]
 # actix = ["actix-files", "actix-web", "actix-ws"]
 hot-reload = ["dioxus-hot-reload"]
+rocket = ["dep:rocket", "dep:rocket_ws"]
 
 [[example]]
 name = "axum"
@@ -68,3 +75,7 @@ required-features = ["salvo"]
 [[example]]
 name = "warp"
 required-features = ["warp"]
+
+[[example]]
+name = "rocket"
+required-features = ["rocket"]
diff --git a/packages/liveview/README.md b/packages/liveview/README.md
index cbae3c53a..13af3c36f 100644
--- a/packages/liveview/README.md
+++ b/packages/liveview/README.md
@@ -28,6 +28,7 @@ The current backend frameworks supported include:
 - Axum
 - Warp
 - Salvo
+- Rocket
 
 Dioxus-LiveView exports some primitives to wire up an app into an existing backend framework.
 
diff --git a/packages/liveview/examples/rocket.rs b/packages/liveview/examples/rocket.rs
new file mode 100644
index 000000000..8256db7f8
--- /dev/null
+++ b/packages/liveview/examples/rocket.rs
@@ -0,0 +1,76 @@
+#[macro_use]
+extern crate rocket;
+
+use dioxus::prelude::*;
+use dioxus_liveview::LiveViewPool;
+use rocket::response::content::RawHtml;
+use rocket::{Config, Rocket, State};
+use rocket_ws::{Channel, WebSocket};
+
+fn app(cx: Scope) -> Element {
+    let mut num = use_state(cx, || 0);
+
+    cx.render(rsx! {
+        div {
+            "hello Rocket! {num}"
+            button { onclick: move |_| num += 1, "Increment" }
+        }
+    })
+}
+
+fn index_page_with_glue(glue: &str) -> RawHtml {
+    RawHtml(format!(
+        r#"
+        
+        
+             Dioxus LiveView with Rocket  
+             
 
+            {glue}
+        
+        "#,
+        glue = glue
+    ))
+}
+
+#[get("/")]
+async fn index(config: &Config) -> RawHtml {
+    index_page_with_glue(&dioxus_liveview::interpreter_glue(&format!(
+        "ws://{addr}:{port}/ws",
+        addr = config.address,
+        port = config.port,
+    )))
+}
+
+#[get("/as-path")]
+async fn as_path() -> RawHtml {
+    index_page_with_glue(&dioxus_liveview::interpreter_glue("/ws"))
+}
+
+#[get("/ws")]
+fn ws(ws: WebSocket, pool: &State) -> Channel<'static> {
+    let pool = pool.inner().to_owned();
+
+    ws.channel(move |stream| {
+        Box::pin(async move {
+            let _ = pool
+                .launch(dioxus_liveview::rocket_socket(stream), app)
+                .await;
+            Ok(())
+        })
+    })
+}
+
+#[tokio::main]
+async fn main() {
+    let view = dioxus_liveview::LiveViewPool::new();
+
+    Rocket::build()
+        .manage(view)
+        .mount("/", routes![index, as_path, ws])
+        .ignite()
+        .await
+        .expect("Failed to ignite rocket")
+        .launch()
+        .await
+        .expect("Failed to launch rocket");
+}
diff --git a/packages/liveview/src/adapters/rocket_adapter.rs b/packages/liveview/src/adapters/rocket_adapter.rs
new file mode 100644
index 000000000..8a9840bf2
--- /dev/null
+++ b/packages/liveview/src/adapters/rocket_adapter.rs
@@ -0,0 +1,25 @@
+use crate::{LiveViewError, LiveViewSocket};
+use rocket::futures::{SinkExt, StreamExt};
+use rocket_ws::{result::Error, stream::DuplexStream, Message};
+
+/// Convert a rocket websocket into a LiveViewSocket
+///
+/// This is required to launch a LiveView app using the rocket web framework
+pub fn rocket_socket(stream: DuplexStream) -> impl LiveViewSocket {
+    stream
+        .map(transform_rx)
+        .with(transform_tx)
+        .sink_map_err(|_| LiveViewError::SendingFailed)
+}
+
+fn transform_rx(message: Result) -> Result, LiveViewError> {
+    message
+        .map_err(|_| LiveViewError::SendingFailed)?
+        .into_text()
+        .map(|s| s.into_bytes())
+        .map_err(|_| LiveViewError::SendingFailed)
+}
+
+async fn transform_tx(message: Vec) -> Result {
+    Ok(Message::Text(String::from_utf8_lossy(&message).to_string()))
+}
diff --git a/packages/liveview/src/lib.rs b/packages/liveview/src/lib.rs
index 6a2768fd5..40d6186dc 100644
--- a/packages/liveview/src/lib.rs
+++ b/packages/liveview/src/lib.rs
@@ -18,6 +18,11 @@ pub mod adapters {
 
     #[cfg(feature = "salvo")]
     pub use salvo_adapter::*;
+
+    #[cfg(feature = "rocket")]
+    pub mod rocket_adapter;
+    #[cfg(feature = "rocket")]
+    pub use rocket_adapter::*;
 }
 
 pub use adapters::*;
diff --git a/packages/ssr/src/renderer.rs b/packages/ssr/src/renderer.rs
index 9b0d9e7bb..31c7f33f5 100644
--- a/packages/ssr/src/renderer.rs
+++ b/packages/ssr/src/renderer.rs
@@ -106,7 +106,10 @@ impl Renderer {
 
                     if self.pre_render {
                         if let AttributeValue::Listener(_) = &attr.value {
-                            accumulated_listeners.push(attr.name);
+                            // The onmounted event doesn't need a DOM listener
+                            if attr.name != "onmounted" {
+                                accumulated_listeners.push(attr.name);
+                            }
                         }
                     }
                 }
diff --git a/packages/web/src/dom.rs b/packages/web/src/dom.rs
index bcf2065ec..c535d961b 100644
--- a/packages/web/src/dom.rs
+++ b/packages/web/src/dom.rs
@@ -255,17 +255,21 @@ impl WebsysDom {
         i.flush();
 
         for id in to_mount {
-            let node = get_node(id.0 as u32);
-            if let Some(element) = node.dyn_ref::() {
-                let data: MountedData = element.into();
-                let data = Rc::new(data);
-                let _ = self.event_channel.unbounded_send(UiEvent {
-                    name: "mounted".to_string(),
-                    bubbles: false,
-                    element: id,
-                    data,
-                });
-            }
+            self.send_mount_event(id);
+        }
+    }
+
+    pub(crate) fn send_mount_event(&self, id: ElementId) {
+        let node = get_node(id.0 as u32);
+        if let Some(element) = node.dyn_ref::() {
+            let data: MountedData = element.into();
+            let data = Rc::new(data);
+            let _ = self.event_channel.unbounded_send(UiEvent {
+                name: "mounted".to_string(),
+                bubbles: false,
+                element: id,
+                data,
+            });
         }
     }
 }
diff --git a/packages/web/src/lib.rs b/packages/web/src/lib.rs
index 3d8ecf03f..90959a517 100644
--- a/packages/web/src/lib.rs
+++ b/packages/web/src/lib.rs
@@ -253,13 +253,6 @@ pub async fn run_with_props(root: fn(Scope) -> 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),
diff --git a/packages/web/src/rehydrate.rs b/packages/web/src/rehydrate.rs
index 9fa20e56a..4905d1e24 100644
--- a/packages/web/src/rehydrate.rs
+++ b/packages/web/src/rehydrate.rs
@@ -14,12 +14,17 @@ impl WebsysDom {
     pub fn rehydrate(&mut self, dom: &VirtualDom) -> Result<(), RehydrationError> {
         let root_scope = dom.base_scope();
         let mut ids = Vec::new();
+        let mut to_mount = Vec::new();
 
         // Recursively rehydrate the dom from the VirtualDom
-        self.rehydrate_scope(root_scope, dom, &mut ids)?;
+        self.rehydrate_scope(root_scope, dom, &mut ids, &mut to_mount)?;
 
         dioxus_interpreter_js::hydrate(ids);
 
+        for id in to_mount {
+            self.send_mount_event(id);
+        }
+
         Ok(())
     }
 
@@ -28,12 +33,13 @@ impl WebsysDom {
         scope: &ScopeState,
         dom: &VirtualDom,
         ids: &mut Vec,
+        to_mount: &mut Vec,
     ) -> Result<(), RehydrationError> {
         let vnode = match scope.root_node() {
             dioxus_core::RenderReturn::Ready(ready) => ready,
             _ => return Err(VNodeNotInitialized),
         };
-        self.rehydrate_vnode(dom, vnode, ids)
+        self.rehydrate_vnode(dom, vnode, ids, to_mount)
     }
 
     fn rehydrate_vnode(
@@ -41,6 +47,7 @@ impl WebsysDom {
         dom: &VirtualDom,
         vnode: &VNode,
         ids: &mut Vec,
+        to_mount: &mut Vec,
     ) -> Result<(), RehydrationError> {
         for (i, root) in vnode.template.get().roots.iter().enumerate() {
             self.rehydrate_template_node(
@@ -48,6 +55,7 @@ impl WebsysDom {
                 vnode,
                 root,
                 ids,
+                to_mount,
                 Some(*vnode.root_ids.borrow().get(i).ok_or(VNodeNotInitialized)?),
             )?;
         }
@@ -60,6 +68,7 @@ impl WebsysDom {
         vnode: &VNode,
         node: &TemplateNode,
         ids: &mut Vec,
+        to_mount: &mut Vec,
         root_id: Option,
     ) -> Result<(), RehydrationError> {
         tracing::trace!("rehydrate template node: {:?}", node);
@@ -73,6 +82,11 @@ impl WebsysDom {
                         let attribute = &vnode.dynamic_attrs[*id];
                         let id = attribute.mounted_element();
                         mounted_id = Some(id);
+                        if let dioxus_core::AttributeValue::Listener(_) = attribute.value {
+                            if attribute.name == "onmounted" {
+                                to_mount.push(id);
+                            }
+                        }
                     }
                 }
                 if let Some(id) = mounted_id {
@@ -80,12 +94,12 @@ impl WebsysDom {
                 }
                 if !children.is_empty() {
                     for child in *children {
-                        self.rehydrate_template_node(dom, vnode, child, ids, None)?;
+                        self.rehydrate_template_node(dom, vnode, child, ids, to_mount, None)?;
                     }
                 }
             }
             TemplateNode::Dynamic { id } | TemplateNode::DynamicText { id } => {
-                self.rehydrate_dynamic_node(dom, &vnode.dynamic_nodes[*id], ids)?;
+                self.rehydrate_dynamic_node(dom, &vnode.dynamic_nodes[*id], ids, to_mount)?;
             }
             _ => {}
         }
@@ -97,6 +111,7 @@ impl WebsysDom {
         dom: &VirtualDom,
         dynamic: &DynamicNode,
         ids: &mut Vec,
+        to_mount: &mut Vec,
     ) -> Result<(), RehydrationError> {
         tracing::trace!("rehydrate dynamic node: {:?}", dynamic);
         match dynamic {
@@ -108,11 +123,16 @@ impl WebsysDom {
             }
             dioxus_core::DynamicNode::Component(comp) => {
                 let scope = comp.mounted_scope().ok_or(VNodeNotInitialized)?;
-                self.rehydrate_scope(dom.get_scope(scope).ok_or(VNodeNotInitialized)?, dom, ids)?;
+                self.rehydrate_scope(
+                    dom.get_scope(scope).ok_or(VNodeNotInitialized)?,
+                    dom,
+                    ids,
+                    to_mount,
+                )?;
             }
             dioxus_core::DynamicNode::Fragment(fragment) => {
                 for vnode in *fragment {
-                    self.rehydrate_vnode(dom, vnode, ids)?;
+                    self.rehydrate_vnode(dom, vnode, ids, to_mount)?;
                 }
             }
         }