feat: removed final wrapper <div>

Perseus will now inject directly into the root component provided by the user, with no intermediary wrapper `<div>`s, making styling full-page layouts substantially easier!
framesurge · Sep 2, 2022 · e4106f6 · e4106f6
1 parent 3198558
commit e4106f6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 20 deletions.
diff --git a/examples/demos/full_page_layout/static/style.css b/examples/demos/full_page_layout/static/style.css
@@ -5,15 +5,11 @@
 
 /* This makes all the elements that wrap our code take up the whole page, so that we can put things at the bottom.
  * Without this, the footer would be just beneath the content if the content doesn't fill the whole page (try disabling this).
- *
- * Quirk: we have to deal with the wrapper around `#root` created by `PerseusRoot`
 */
-html, body, body > div, #root {
+html, body, #root {
     height: 100%;
 }
-/* This makes the `<div>` that wraps our whole app use CSS Grid to display three sections: the header, content, and footer.
- * Quirk: soon, this will just be `#root`
-*/
+/* This makes the `<div>` that wraps our whole app use CSS Grid to display three sections: the header, content, and footer. */
 #root {
     display: grid;
     grid-template-columns: 1fr;

diff --git a/packages/perseus/src/init.rs b/packages/perseus/src/init.rs
@@ -20,6 +20,7 @@ use std::pin::Pin;
 use std::sync::Arc;
 use std::{collections::HashMap, rc::Rc};
 use sycamore::prelude::Scope;
+use sycamore::utils::hydrate::with_no_hydration_context;
 use sycamore::{
     prelude::{component, view},
     view::View,
@@ -527,20 +528,11 @@ impl<G: Html, M: MutableStore, T: TranslationsManager> PerseusAppBase<G, M, T> {
     // The lifetime of the provided function doesn't need to be static, because we
     // render using it and then we're done with it
     pub fn index_view<'a>(mut self, f: impl Fn(Scope) -> View<SsrNode> + 'a) -> Self {
-        // This, very problematically, could add hydration IDs to the `<head>` and
-        // `<body>`, which we MUST NOT have (or the HTML shell's interpolation breaks in
-        // unexpected ways)
-        let html_str = sycamore::render_to_string(f);
-        // So, we get rid of the hydration IDs completely
-        // We have to get rid of leftover spaces as well to make sure we're completely
-        // good for the naive string replacement
-        #[cfg(not(target_arch = "wasm32"))]
-        let html_str = regex::Regex::new(r#"data-hk=".*?""#)
-            .unwrap()
-            .replace_all(&html_str, "")
-            .to_string()
-            .replace(" >", ">");
+        // We need to render the index view without any hydration IDs (which would break
+        // the HTML shell's interpolation mechanisms)
+        let html_str = sycamore::render_to_string(|cx| with_no_hydration_context(|| f(cx)));
         self.index_view = html_str;
+
         self
     }
     // Setters
@@ -859,7 +851,9 @@ impl<G: Html, M: MutableStore, T: TranslationsManager> PerseusAppBase<G, M, T> {
 #[allow(non_snake_case)]
 pub fn PerseusRoot<G: Html>(cx: Scope) -> View<G> {
     view! { cx,
-        div(dangerously_set_inner_html = "<div id=\"root\"></div>")
+        // Since we render the index view with no hydration IDs, this conforms
+        // to the expectations of the HTML shell
+        div(id = "root")
     }
 }