make hydration more resilient using ids to hydrate

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#"<div style="width:100px;" data-node-hydration="1"></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="1"><div style="width:123px;" data-node-hydration="2"></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="1"><div data-node-hydration="2,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="1"><div style="width:123px;" data-node-hydration="2,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="1"><!--node-id2-->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="1"><!--node-id3-->123<!--#--><!--node-id2-->1234<!--#--></div>"#
+    );
+}
+
+#[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="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>"#
+    );
+}