yewstack · futursolo · Apr 2, 2022 · Mar 14, 2022 · Mar 14, 2022 · Mar 14, 2022
diff --git a/.github/workflows/main-checks.yml b/.github/workflows/main-checks.yml
@@ -32,6 +32,7 @@ jobs:
           cargo clippy -- --deny=warnings
           cargo clippy --features=ssr -- --deny=warnings
           cargo clippy --features=csr -- --deny=warnings
+          cargo clippy --features=hydration -- --deny=warnings
           cargo clippy --all-features --all-targets -- --deny=warnings
         working-directory: packages/yew
 
@@ -62,6 +63,7 @@ jobs:
           cargo clippy --release -- --deny=warnings
           cargo clippy --release --features=ssr -- --deny=warnings
           cargo clippy --release --features=csr -- --deny=warnings
+          cargo clippy --release --features=hydration -- --deny=warnings
           cargo clippy --release --all-features --all-targets -- --deny=warnings
         working-directory: packages/yew
 

diff --git a/Cargo.toml b/Cargo.toml
@@ -34,6 +34,7 @@ members = [
   "examples/two_apps",
   "examples/webgl",
   "examples/web_worker_fib",
+  "examples/ssr_router",
   "examples/suspense",
 
   # Tools

diff --git a/examples/function_router/Cargo.toml b/examples/function_router/Cargo.toml
@@ -13,14 +13,11 @@ yew-router = { path = "../../packages/yew-router" }
 serde = { version = "1.0", features = ["derive"] }
 lazy_static = "1.4.0"
 gloo-timers = "0.2"
+wasm-logger = "0.2"
+instant = { version = "0.1", features = ["wasm-bindgen"] }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 getrandom = { version = "0.2", features = ["js"] }
-instant = { version = "0.1", features = ["wasm-bindgen"] }
-wasm-logger = "0.2"
-
-[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-instant = { version = "0.1" }
 
 [features]
 csr = ["yew/csr"]
diff --git a/examples/function_router/index.html b/examples/function_router/index.html
@@ -11,7 +11,7 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
     />
     <link data-trunk rel="sass" href="index.scss" />
-    <link data-trunk rel="rust" data-cargo-features="csr" />
+    <link data-trunk rel="rust" data-cargo-features="csr" data-bin="function_router" />
   </head>
 
   <body></body>

diff --git a/examples/function_router/src/app.rs b/examples/function_router/src/app.rs
@@ -1,4 +1,8 @@
+use std::collections::HashMap;
+
 use yew::prelude::*;
+use yew::virtual_dom::AttrValue;
+use yew_router::history::{AnyHistory, History, MemoryHistory};
 use yew_router::prelude::*;
 
 use crate::components::nav::Nav;
@@ -47,53 +51,40 @@ pub fn App() -> Html {
     }
 }
 
-#[cfg(not(target_arch = "wasm32"))]
-mod arch_native {
-    use super::*;
-
-    use yew::virtual_dom::AttrValue;
-    use yew_router::history::{AnyHistory, History, MemoryHistory};
-
-    use std::collections::HashMap;
-
-    #[derive(Properties, PartialEq, Debug)]
-    pub struct ServerAppProps {
-        pub url: AttrValue,
-        pub queries: HashMap<String, String>,
-    }
+#[derive(Properties, PartialEq, Debug)]
+pub struct ServerAppProps {
+    pub url: AttrValue,
+    pub queries: HashMap<String, String>,
+}
 
-    #[function_component]
-    pub fn ServerApp(props: &ServerAppProps) -> Html {
-        let history = AnyHistory::from(MemoryHistory::new());
-        history
-            .push_with_query(&*props.url, &props.queries)
-            .unwrap();
+#[function_component]
+pub fn ServerApp(props: &ServerAppProps) -> Html {
+    let history = AnyHistory::from(MemoryHistory::new());
+    history
+        .push_with_query(&*props.url, &props.queries)
+        .unwrap();
 
-        html! {
-            <Router history={history}>
-                <Nav />
+    html! {
+        <Router history={history}>
+            <Nav />
 
-                <main>
-                    <Switch<Route> render={Switch::render(switch)} />
-                </main>
-                <footer class="footer">
-                    <div class="content has-text-centered">
-                        { "Powered by " }
-                        <a href="https://yew.rs">{ "Yew" }</a>
-                        { " using " }
-                        <a href="https://bulma.io">{ "Bulma" }</a>
-                        { " and images from " }
-                        <a href="https://unsplash.com">{ "Unsplash" }</a>
-                    </div>
-                </footer>
-            </Router>
-        }
+            <main>
+                <Switch<Route> render={Switch::render(switch)} />
+            </main>
+            <footer class="footer">
+                <div class="content has-text-centered">
+                    { "Powered by " }
+                    <a href="https://yew.rs">{ "Yew" }</a>
+                    { " using " }
+                    <a href="https://bulma.io">{ "Bulma" }</a>
+                    { " and images from " }
+                    <a href="https://unsplash.com">{ "Unsplash" }</a>
+                </div>
+            </footer>
+        </Router>
     }
 }
 
-#[cfg(not(target_arch = "wasm32"))]
-pub use arch_native::*;
-
 fn switch(routes: &Route) -> Html {
     match routes.clone() {
         Route::Post { id } => {

diff --git a/examples/function_router/src/bin/function_router.rs b/examples/function_router/src/bin/function_router.rs
@@ -0,0 +1,7 @@
+pub use function_router::*;
+
+fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
+    #[cfg(feature = "csr")]
+    yew::Renderer::<App>::new().render();
+}
diff --git a/examples/function_router/src/main.rs b/examples/function_router/src/main.rs
diff --git a/examples/simple_ssr/Cargo.toml b/examples/simple_ssr/Cargo.toml
@@ -6,9 +6,20 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-tokio = { version = "1.15.0", features = ["full"] }
-warp = "0.3"
-yew = { path = "../../packages/yew", features = ["ssr"] }
+yew = { path = "../../packages/yew", features = ["ssr", "hydration"] }
 reqwest = { version = "0.11.8", features = ["json"] }
 serde = { version = "1.0.132", features = ["derive"] }
 uuid = { version = "0.8.2", features = ["serde"] }
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen-futures = "0.4"
+wasm-logger = "0.2"
+log = "0.4"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+tokio = { version = "1.15.0", features = ["full"] }
+warp = "0.3"
+num_cpus = "1.13"
+tokio-util = { version = "0.7", features = ["rt"] }
+once_cell = "1.5"
+clap = { version = "3.1.7", features = ["derive"] }
diff --git a/examples/simple_ssr/README.md b/examples/simple_ssr/README.md
@@ -2,5 +2,16 @@
 
 This example demonstrates server-side rendering.
 
-Run `cargo run -p simple_ssr` and navigate to http://localhost:8080/ to
-view results.
+# How to run this example
+
+1. build hydration bundle
+
+`trunk build examples/simple_ssr/index.html`
+
+2. Run the server
+
+`cargo run --bin simple_ssr_server -- --dir examples/simple_ssr/dist`
+
+3. Open Browser
+
+Navigate to http://localhost:8080/ to view results.
diff --git a/examples/simple_ssr/index.html b/examples/simple_ssr/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Yew SSR Example</title>
+
+    <link data-trunk rel="rust" data-bin="simple_ssr_hydrate" />
+  </head>
+</html>
diff --git a/examples/simple_ssr/src/bin/simple_ssr_hydrate.rs b/examples/simple_ssr/src/bin/simple_ssr_hydrate.rs
@@ -0,0 +1,7 @@
+use simple_ssr::App;
+
+fn main() {
+    #[cfg(target_arch = "wasm32")]
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
+    yew::Renderer::<App>::new().hydrate();
+}
diff --git a/examples/simple_ssr/src/bin/simple_ssr_server.rs b/examples/simple_ssr/src/bin/simple_ssr_server.rs
@@ -0,0 +1,53 @@
+use clap::Parser;
+use once_cell::sync::Lazy;
+use simple_ssr::App;
+use std::path::PathBuf;
+use tokio_util::task::LocalPoolHandle;
+use warp::Filter;
+
+// We spawn a local pool that is as big as the number of cpu threads.
+static LOCAL_POOL: Lazy<LocalPoolHandle> = Lazy::new(|| LocalPoolHandle::new(num_cpus::get()));
+
+/// A basic example
+#[derive(Parser, Debug)]
+struct Opt {
+    /// the "dist" created by trunk directory to be served for hydration.
+    #[structopt(short, long, parse(from_os_str))]
+    dir: PathBuf,
+}
+
+async fn render(index_html_s: &str) -> String {
+    let content = LOCAL_POOL
+        .spawn_pinned(move || async move {
+            let renderer = yew::ServerRenderer::<App>::new();
+
+            renderer.render().await
+        })
+        .await
+        .expect("the task has failed.");
+
+    // Good enough for an example, but developers should avoid the replace and extra allocation
+    // here in an actual app.
+    index_html_s.replace("<body>", &format!("<body>{}", content))
+}
+
+#[tokio::main]
+async fn main() {
+    let opts = Opt::parse();
+
+    let index_html_s = tokio::fs::read_to_string(opts.dir.join("index.html"))
+        .await
+        .expect("failed to read index.html");
+
+    let html = warp::path::end().then(move || {
+        let index_html_s = index_html_s.clone();
+
+        async move { warp::reply::html(render(&index_html_s).await) }
+    });
+
+    let routes = html.or(warp::fs::dir(opts.dir));
+
+    println!("You can view the website at: http://localhost:8080/");
+
+    warp::serve(routes).run(([127, 0, 0, 1], 8080)).await;
+}
diff --git a/examples/simple_ssr/src/main.rs → examples/simple_ssr/src/lib.rs b/examples/simple_ssr/src/main.rs → examples/simple_ssr/src/lib.rs
@@ -2,13 +2,15 @@ use std::cell::RefCell;
 use std::rc::Rc;
 
 use serde::{Deserialize, Serialize};
-use tokio::task::LocalSet;
-use tokio::task::{spawn_blocking, spawn_local};
 use uuid::Uuid;
-use warp::Filter;
 use yew::prelude::*;
 use yew::suspense::{Suspension, SuspensionResult};
 
+#[cfg(not(target_arch = "wasm32"))]
+use tokio::task::spawn_local;
+#[cfg(target_arch = "wasm32")]
+use wasm_bindgen_futures::spawn_local;
+
 #[derive(Serialize, Deserialize)]
 struct UuidResponse {
     uuid: Uuid,
@@ -79,7 +81,7 @@ fn Content() -> HtmlResult {
 }
 
 #[function_component]
-fn App() -> Html {
+pub fn App() -> Html {
     let fallback = html! {<div>{"Loading..."}</div>};
 
     html! {
@@ -88,43 +90,3 @@ fn App() -> Html {
         </Suspense>
     }
 }
-
-async fn render() -> String {
-    let content = spawn_blocking(move || {
-        use tokio::runtime::Builder;
-        let set = LocalSet::new();
-
-        let rt = Builder::new_current_thread().enable_all().build().unwrap();
-
-        set.block_on(&rt, async {
-            let renderer = yew::ServerRenderer::<App>::new();
-
-            renderer.render().await
-        })
-    })
-    .await
-    .expect("the thread has failed.");
-
-    format!(
-        r#"<!DOCTYPE HTML>
-<html>
-    <head>
-        <title>Yew SSR Example</title>
-    </head>
-    <body>
-        {}
-    </body>
-</html>
-"#,
-        content
-    )
-}
-
-#[tokio::main]
-async fn main() {
-    let routes = warp::any().then(|| async move { warp::reply::html(render().await) });
-
-    println!("You can view the website at: http://localhost:8080/");
-
-    warp::serve(routes).run(([127, 0, 0, 1], 8080)).await;
-}
diff --git a/examples/ssr_router/Cargo.toml b/examples/ssr_router/Cargo.toml
@@ -0,0 +1,24 @@
+[package]
+name = "ssr_router"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+yew = { path = "../../packages/yew", features = ["ssr", "hydration", "trace_hydration"] }
+function_router = { path = "../function_router" }
+log = "0.4"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen-futures = "0.4"
+wasm-logger = "0.2"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+tokio = { version = "1.15.0", features = ["full"] }
+warp = "0.3"
+env_logger = "0.9"
+num_cpus = "1.13"
+tokio-util = { version = "0.7", features = ["rt"] }
+once_cell = "1.5"
+clap = { version = "3.1.7", features = ["derive"] }
diff --git a/examples/ssr_router/README.md b/examples/ssr_router/README.md
@@ -0,0 +1,19 @@
+# SSR Router Example
+
+This example is the same as the function router example, but with
+server-side rendering and hydration support. It reuses the same codebase
+of the function router example.
+
+# How to run this example
+
+1. Build Hydration Bundle
+
+`trunk build examples/ssr_router/index.html`
+
+2. Run the server
+
+`cargo run --bin ssr_router_server -- --dir examples/ssr_router/dist`
+
+3. Open Browser
+
+Navigate to http://localhost:8080/ to view results.