feat: naive implementation for vraw hydration

Author: Dillen Meijboom

packages/yew/src/dom_bundle/bnode.rs

@@ -267,9 +267,7 @@ mod feat_hydration {
                 VNode::VSuspense(vsuspense) => vsuspense
                     .hydrate(root, parent_scope, parent, fragment)
                     .into(),
-                VNode::VRaw(_) => {
-                    panic!("VRaw is not hydratable (raw HTML string cannot be hydrated)")
-                }
+                VNode::VRaw(vraw) => vraw.hydrate(root, parent_scope, parent, fragment).into(),
             }
         }
     }

packages/yew/src/dom_bundle/braw.rs

@@ -128,6 +128,51 @@ impl Reconcilable for VRaw {
     }
 }
 
+#[cfg(feature = "hydration")]
+mod feat_hydration {
+    use gloo::utils::document;
+
+    use super::*;
+    use crate::{
+        dom_bundle::{Fragment, Hydratable},
+        virtual_dom::Collectable,
+    };
+
+    impl Hydratable for VRaw {
+        fn hydrate(
+            self,
+            _root: &BSubtree,
+            _parent_scope: &AnyScope,
+            parent: &Element,
+            fragment: &mut Fragment,
+        ) -> Self::Bundle {
+            let detached_parent = document()
+                .create_element("div")
+                .expect("failed to create detached element");
+
+            let collectable = Collectable::Raw;
+            let fallback_fragment = Fragment::collect_between(fragment, &collectable, parent);
+
+            let mut nodes = fallback_fragment.deep_clone();
+
+            for node in nodes.iter() {
+                detached_parent.append_child(node).unwrap();
+            }
+
+            // We trim all leading text nodes before checking as it's likely these are whitespaces.
+            nodes.trim_start_text_nodes();
+
+            let Self { html } = self;
+
+            BRaw {
+                reference: None,
+                children_count: nodes.len(),
+                html,
+            }
+        }
+    }
+}
+
 #[cfg(target_arch = "wasm32")]
 #[cfg(test)]
 mod tests {

packages/yew/src/virtual_dom/mod.rs

@@ -64,6 +64,7 @@ mod feat_ssr_hydration {
     /// This indicates a kind that can be collected from fragment to be processed at a later time
     pub enum Collectable {
         Component(ComponentName),
+        Raw,
         Suspense,
     }
 
@@ -79,20 +80,23 @@ mod feat_ssr_hydration {
         pub fn open_start_mark(&self) -> &'static str {
             match self {
                 Self::Component(_) => "<[",
+                Self::Raw => "<#",
                 Self::Suspense => "<?",
             }
         }
 
         pub fn close_start_mark(&self) -> &'static str {
             match self {
                 Self::Component(_) => "</[",
+                Self::Raw => "</#",
                 Self::Suspense => "</?",
             }
         }
 
         pub fn end_mark(&self) -> &'static str {
             match self {
                 Self::Component(_) => "]>",
+                Self::Raw => "#>",
                 Self::Suspense => ">",
             }
         }
@@ -104,6 +108,7 @@ mod feat_ssr_hydration {
                 Self::Component(m) => format!("Component({m})").into(),
                 #[cfg(not(debug_assertions))]
                 Self::Component(_) => "Component".into(),
+                Self::Raw => "Raw".into(),
                 Self::Suspense => "Suspense".into(),
             }
         }
@@ -130,6 +135,7 @@ mod feat_ssr {
                 Self::Component(type_name) => {
                     let _ = w.write_str(type_name);
                 }
+                Self::Raw => {}
                 Self::Suspense => {}
             }
 
@@ -146,6 +152,7 @@ mod feat_ssr {
                 Self::Component(type_name) => {
                     let _ = w.write_str(type_name);
                 }
+                Self::Raw => {}
                 Self::Suspense => {}
             }
 

packages/yew/src/virtual_dom/vraw.rs

@@ -19,15 +19,26 @@ mod feat_ssr {
     use super::*;
     use crate::html::AnyScope;
     use crate::platform::fmt::BufWriter;
+    use crate::virtual_dom::Collectable;
 
     impl VRaw {
         pub(crate) async fn render_into_stream(
             &self,
             w: &mut BufWriter,
             _parent_scope: &AnyScope,
-            _hydratable: bool,
+            hydratable: bool,
         ) {
+            let collectable = Collectable::Raw;
+
+            if hydratable {
+                collectable.write_open_tag(w);
+            }
+
             let _ = w.write_str(self.html.as_ref());
+
+            if hydratable {
+                collectable.write_close_tag(w);
+            }
         }
     }
 }