fix: removed hydration ids from .index_view()

These interrupted string replacements, rendering relative path deployments using `.index_view()` utterly non-functional.
framesurge · Apr 20, 2022 · 41ab625 · 41ab625
1 parent 5e5f2e0
commit 41ab625
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/perseus/Cargo.toml b/packages/perseus/Cargo.toml
@@ -30,14 +30,16 @@ urlencoding = "2.1"
 chrono = "0.4"
 http = "0.2"
 async-trait = "0.1"
-cfg-if = "1"
 fluent-bundle = { version = "0.15", optional = true }
 unic-langid = { version = "0.9", optional = true }
 intl-memoizer = { version = "0.5", optional = true }
 tokio = { version = "1", features = [ "fs", "io-util" ] }
 rexie = { version = "0.2", optional = true }
 js-sys = { version = "0.3", optional = true }
 
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+regex = "1"
+
 [features]
 # Live reloading will only take effect in development, and won't impact production
 # BUG This adds 1.9kB to the production bundle (that's without size optimizations though)

diff --git a/packages/perseus/src/init.rs b/packages/perseus/src/init.rs
@@ -309,7 +309,16 @@ impl<G: Html, M: MutableStore, T: TranslationsManager> PerseusAppBase<G, M, T> {
     /// Warning: this view can't be reactive (yet). It will be rendered to a static string, which won't be hydrated.
     // 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() -> 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(" >", ">");
         self.index_view = html_str;
         self
     }

diff --git a/packages/perseus/src/server/html_shell.rs b/packages/perseus/src/server/html_shell.rs
@@ -230,7 +230,8 @@ impl HtmlShell {
         self
     }
 }
-// This code actually interpolates everything in the correct places.
+// This code actually interpolates everything in the correct places
+// Because of the way these string interpolations work, there MUST NOT be hydration IDs on the `<head>` or `<body>` tags, or Perseus will break in very unexpected ways
 impl fmt::Display for HtmlShell {
     fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
         let head_start = self.head_before_boundary.join("\n");