From e4106f69e1162dc7530113aead64646d727a22f3 Mon Sep 17 00:00:00 2001 From: arctic_hen7 Date: Fri, 2 Sep 2022 10:24:11 +1000 Subject: [PATCH] feat: removed final wrapper `
` Perseus will now inject directly into the root component provided by the user, with no intermediary wrapper `
`s, making styling full-page layouts substantially easier! --- .../demos/full_page_layout/static/style.css | 8 ++----- packages/perseus/src/init.rs | 22 +++++++------------ 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/examples/demos/full_page_layout/static/style.css b/examples/demos/full_page_layout/static/style.css index b5fd48fb6c..02d57f8746 100644 --- 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 `
` 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 `
` 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 index 08b6bfe20b..bfbf0929f4 100644 --- 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 PerseusAppBase { // 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 + 'a) -> Self { - // This, very problematically, could add hydration IDs to the `` and - // ``, 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 PerseusAppBase { #[allow(non_snake_case)] pub fn PerseusRoot(cx: Scope) -> View { view! { cx, - div(dangerously_set_inner_html = "
") + // Since we render the index view with no hydration IDs, this conforms + // to the expectations of the HTML shell + div(id = "root") } }