Improve generation of HTML for the hydrate example. (#657)

Fix hydrate example rendered HTML This changes the hydrate app to render the HTML when using `cargo run` so that we no longer need to manually update the HTML.
sycamore-rs · Feb 1, 2024 · 1161393 · 1161393
1 parent a7bec19
commit 1161393
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 36 deletions.
diff --git a/examples/hydrate/index.html b/examples/hydrate/index.html
@@ -1,32 +1,16 @@
 <!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Hydration | Sycamore</title>
-  </head>
-  <body>
-    <!-- SSR-ed HTML can be found in dev console when running the app. -->
-    <p data-hk="0.0">Hydration</p>
-    <br data-hk="0.1" />
-    <div data-hk="1.1">
-      <p>
-        Hello
-        <!--#--><span data-hk="1.0">World</span
-        ><!--/-->!
-      </p>
-      <input />
-    </div>
-    <br data-hk="0.2" />
-    <div data-hk="2.0">
-      <p>
-        Value:
-        <!--#-->0<!--/-->
-      </p>
-      <button>+</button><button>-</button><button>Reset</button>
-    </div>
-    <div data-hk="3.0"><p>This paragraph is not hydrated!</p></div>
-    <div data-hk="4.0"><!----></div>
-    <!-- End SSR-ed HTML. -->
-  </body>
+
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<title>Hydration | Sycamore</title>
+</head>
+
+<body>
+	<!-- Generate SSR-ed HTML with `cargo run`. This will generate an `index.html` file with the rendered HTML -->
+	<p data-hk="0.0">Hydration</p><br data-hk="0.1"/><div data-hk="1.1"><p>Hello <!--#--><span data-hk="1.0">World</span><!--/-->!</p><input/></div><br data-hk="0.2"/><div data-hk="2.0"><p>Value: <!--#-->0<!--/--></p><button>+</button><button>-</button><button>Reset</button></div><div data-hk="3.0"><p>This paragraph is not hydrated!</p></div><div data-hk="4.0"><!----></div>
+	<!-- End SSR-ed HTML. -->
+</body>
+
 </html>
diff --git a/examples/hydrate/src/main.rs b/examples/hydrate/src/main.rs
@@ -56,12 +56,19 @@ fn App<G: Html>() -> View<G> {
         }
     }
 }
-fn main() {
-    console_error_panic_hook::set_once();
-    console_log::init_with_level(log::Level::Debug).unwrap();
-
-    let s = sycamore::render_to_string(App);
-    log::info!("{}", s);
 
-    sycamore::hydrate(App);
+fn main() {
+    if cfg!(target_arch = "wasm32") {
+        console_error_panic_hook::set_once();
+        console_log::init_with_level(log::Level::Debug).unwrap();
+        sycamore::hydrate(App);
+    } else {
+        // Create inedx.html from template.html and insert the rendered HTML.
+        let html = sycamore::render_to_string(App);
+        let template =
+            std::fs::read_to_string("template.html").expect("failed to read template.html");
+        let rendered = template.replace("%sycamore.html%", &html);
+        std::fs::write("index.html", rendered).expect("failed to write index.html");
+        println!("Wrote index.html");
+    }
 }
diff --git a/examples/hydrate/template.html b/examples/hydrate/template.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<title>Hydration | Sycamore</title>
+</head>
+
+<body>
+	<!-- Generate SSR-ed HTML with `cargo run`. This will generate an `index.html` file with the rendered HTML -->
+	%sycamore.html%
+	<!-- End SSR-ed HTML. -->
+</body>
+
+</html>