fix hydration after suspense

packages/ssr/tests/hydration.rs

@@ -11,7 +11,7 @@ fn root_ids() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"></div>"#
     );
 }
 
@@ -29,7 +29,7 @@ fn dynamic_attributes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"><div style="width:123px;" data-node-hydration="2"></div></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1"></div></div>"#
     );
 }
 
@@ -46,7 +46,7 @@ fn listeners() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"><div data-node-hydration="2,click:1"></div></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"><div data-node-hydration="1,click:1"></div></div>"#
     );
 
     fn app2(cx: Scope) -> Element {
@@ -61,7 +61,7 @@ fn listeners() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div style="width:100px;" data-node-hydration="1"><div style="width:123px;" data-node-hydration="2,click:1"></div></div>"#
+        r#"<div style="width:100px;" data-node-hydration="0"><div style="width:123px;" data-node-hydration="1,click:1"></div></div>"#
     );
 }
 
@@ -79,7 +79,7 @@ fn text_nodes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div data-node-hydration="1"><!--node-id2-->hello<!--#--></div>"#
+        r#"<div data-node-hydration="0"><!--node-id1-->hello<!--#--></div>"#
     );
 
     fn app2(cx: Scope) -> Element {
@@ -94,7 +94,85 @@ fn text_nodes() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<div data-node-hydration="1"><!--node-id3-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
+        r#"<div data-node-hydration="0"><!--node-id1-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
+    );
+}
+
+#[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<!--#-->"#
     );
 }
 
@@ -115,6 +193,6 @@ fn hello_world_hydrates() {
 
     assert_eq!(
         dioxus_ssr::pre_render(&dom),
-        r#"<h1 data-node-hydration="1"><!--node-id2-->High-Five counter: 0<!--#--></h1><button data-node-hydration="3,click:1">Up high!</button><button data-node-hydration="4,click:1">Down low!</button>"#
+        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! {
-            div { "component {name}" }
-        }
+        render! { div { "component {name}" } }
     }
 
     assert_eq!(