feat: add SSR e2e hydration tests for simple_ssr and ssr_router

Introduces ssr-e2e orchestrator (trunk build, server start, wasm-bindgen-test
runner) and ssr-e2e-harness (shared wasm32 test utilities). Adds e2e tests that
fetch SSR-rendered HTML, inject it into the wasm-bindgen-test output element,
and hydrate against it to verify no hydration panics. Also adds CORS support
to both SSR servers for cross-origin test fetches and a CI workflow job.

Author: Madoshakalaka

.github/workflows/main-checks.yml

@@ -6,6 +6,8 @@ on:
       - ".github/workflows/main-checks.yml"
       - "ci/**"
       - "packages/**/*"
+      - "examples/**/*"
+      - "tools/**/*"
       - "Cargo.toml"
       - "Cargo.lock"
   push:
@@ -290,3 +292,53 @@ jobs:
         run: |
           cargo build --target wasm32-wasip1 -p ${{ matrix.package }}
           wasmtime -W unknown-imports-trap=y target/wasm32-wasip1/debug/${{ matrix.package }}.wasm
+
+  ssr_e2e_tests:
+    name: SSR E2E Tests (${{ matrix.example }})
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - example: ssr_router
+            server_bin: ssr_router_server
+            trunk_dir: examples/ssr_router
+          - example: simple_ssr
+            server_bin: simple_ssr_server
+            trunk_dir: examples/simple_ssr
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup toolchain
+        uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: stable
+          targets: wasm32-unknown-unknown
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          save-if: ${{ github.ref == 'refs/heads/master' }}
+
+      - name: Install wasm-bindgen-cli
+        shell: bash
+        run: ./ci/install-wasm-bindgen-cli.sh
+
+      - name: Install trunk
+        uses: jetli/trunk-action@v0.5.1
+        with:
+          version: "latest"
+
+      - uses: browser-actions/setup-geckodriver@latest
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Run SSR E2E tests
+        run: |
+          GECKODRIVER=$(which geckodriver) cargo run -p ssr-e2e -- \
+            --trunk-dir ${{ matrix.trunk_dir }} \
+            --server-cmd "cargo run -p ${{ matrix.example }} --bin ${{ matrix.server_bin }} --features ssr -- --dir ${{ matrix.trunk_dir }}/dist" \
+            --health-url http://127.0.0.1:8080/ \
+            --test-pkg ${{ matrix.example }} \
+            -- --target wasm32-unknown-unknown --test e2e

Cargo.lock

@@ -39,6 +39,7 @@ trybuild = "1"
 clap = { version = "4", features = ["derive"] }
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
+wasm-bindgen-test = "0.3"
 js-sys = "0.3"
 web-sys = "0.3"
 gloo = "0.11"

Cargo.toml

@@ -29,6 +29,13 @@ tokio = { workspace = true, features = ["macros", "rt-multi-thread", "fs"] }
 warp = { git = "https://github.com/seanmonstar/warp.git", rev = "de1ccd8", features = ["server"] }
 clap = { workspace = true }
 
+[target.'cfg(target_arch = "wasm32")'.dev-dependencies]
+wasm-bindgen-test.workspace = true
+ssr-e2e-harness = { path = "../../tools/ssr-e2e-harness" }
+
+[dev-dependencies]
+yew = { path = "../../packages/yew", features = ["hydration"] }
+
 [features]
 hydration = ["yew/hydration"]
 ssr = ["yew/ssr"]

examples/simple_ssr/Cargo.toml

@@ -52,7 +52,12 @@ async fn main() {
         }
     });
 
-    let routes = html.or(warp::fs::dir(opts.dir));
+    let cors = warp::cors()
+        .allow_any_origin()
+        .allow_methods(vec!["GET"])
+        .allow_headers(vec!["content-type"]);
+
+    let routes = html.or(warp::fs::dir(opts.dir)).with(cors);
 
     println!("You can view the website at: http://localhost:8080/");
     warp::serve(routes).run(([127, 0, 0, 1], 8080)).await;

examples/simple_ssr/src/bin/simple_ssr_server.rs

@@ -0,0 +1,32 @@
+#![cfg(all(target_arch = "wasm32", not(target_os = "wasi")))]
+
+use simple_ssr::App;
+use ssr_e2e_harness::{fetch_ssr_html, output_element, wait_for};
+use wasm_bindgen_test::*;
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+const SERVER_BASE: &str = "http://127.0.0.1:8080";
+
+#[wasm_bindgen_test]
+async fn hydration_succeeds() {
+    let body_html = fetch_ssr_html(SERVER_BASE, "/").await;
+    output_element().set_inner_html(&body_html);
+    yew::Renderer::<App>::with_root(output_element()).hydrate();
+
+    wait_for(
+        || {
+            let html = output_element().inner_html();
+            html.contains("Random UUID:")
+        },
+        5000,
+        "SSR content with UUID",
+    )
+    .await;
+
+    let html = output_element().inner_html();
+    assert!(
+        html.contains("Random UUID:"),
+        "hydrated content should contain the UUID text"
+    );
+}

examples/simple_ssr/tests/e2e.rs

@@ -29,14 +29,22 @@ yew-router = { path = "../../packages/yew-router" }
 tokio = { workspace = true, features = ["macros", "rt-multi-thread", "net", "fs"] }
 axum = "0.8"
 tower = { version = "0.5", features = ["make"] }
-tower-http = { version = "0.6", features = ["fs"] }
+tower-http = { version = "0.6", features = ["fs", "cors"] }
 env_logger = "0.11"
 clap = { workspace = true }
 hyper = { version = "1.4", features = ["server", "http1"] }
 
 [target.'cfg(unix)'.dependencies]
 jemallocator = "0.5"
 
+[target.'cfg(target_arch = "wasm32")'.dev-dependencies]
+wasm-bindgen-test.workspace = true
+gloo = { workspace = true }
+ssr-e2e-harness = { path = "../../tools/ssr-e2e-harness" }
+
+[dev-dependencies]
+yew = { path = "../../packages/yew", features = ["hydration"] }
+
 [features]
 ssr = ["yew/ssr"]
 hydration = ["yew/hydration"]

examples/ssr_router/Cargo.toml

@@ -19,6 +19,7 @@ use hyper_util::rt::TokioIo;
 use hyper_util::server;
 use tokio::net::TcpListener;
 use tower::Service;
+use tower_http::cors::CorsLayer;
 use tower_http::services::ServeDir;
 use yew::platform::Runtime;
 use yew_router::prelude::Routable;
@@ -108,15 +109,17 @@ async fn main() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
 
     let index_html_after = index_html_after.to_owned();
 
-    let app = Router::new().fallback_service(
-        ServeDir::new(opts.dir)
-            .append_index_html_on_directories(false)
-            .fallback(
-                get(render)
-                    .with_state((index_html_before.clone(), index_html_after.clone()))
-                    .into_service(),
-            ),
-    );
+    let app = Router::new()
+        .fallback_service(
+            ServeDir::new(opts.dir)
+                .append_index_html_on_directories(false)
+                .fallback(
+                    get(render)
+                        .with_state((index_html_before.clone(), index_html_after.clone()))
+                        .into_service(),
+                ),
+        )
+        .layer(CorsLayer::permissive());
 
     let addr: SocketAddr = ([0, 0, 0, 0], 8080).into();
 

examples/ssr_router/src/bin/ssr_router_server.rs

@@ -0,0 +1,81 @@
+#![cfg(all(target_arch = "wasm32", not(target_os = "wasi")))]
+
+use std::time::Duration;
+
+use function_router::App;
+use gloo::utils::document;
+use ssr_e2e_harness::{fetch_ssr_html, output_element, push_route, wait_for};
+use wasm_bindgen_test::*;
+use yew::platform::time::sleep;
+
+wasm_bindgen_test_configure!(run_in_browser);
+
+const SERVER_BASE: &str = "http://127.0.0.1:8080";
+
+fn get_title_text() -> Option<String> {
+    document()
+        .query_selector("h1.title")
+        .ok()
+        .flatten()
+        .map(|el| el.text_content().unwrap_or_default())
+}
+
+#[wasm_bindgen_test]
+async fn hydrate_post_page() {
+    let body_html = fetch_ssr_html(SERVER_BASE, "/posts/0").await;
+
+    output_element().set_inner_html(&body_html);
+    push_route("/posts/0");
+    yew::Renderer::<App>::with_root(output_element()).hydrate();
+
+    wait_for(
+        || {
+            let html = output_element().inner_html();
+            html.contains("<h1 class=\"title\">") && !html.contains("Loading post...")
+        },
+        5000,
+        "post page content",
+    )
+    .await;
+
+    let title = get_title_text().expect("h1.title should be present on the post page");
+    assert!(!title.is_empty(), "post title should not be empty");
+}
+
+#[wasm_bindgen_test]
+async fn hydrate_posts_list() {
+    let body_html = fetch_ssr_html(SERVER_BASE, "/posts").await;
+
+    output_element().set_inner_html(&body_html);
+    push_route("/posts");
+    yew::Renderer::<App>::with_root(output_element()).hydrate();
+
+    wait_for(
+        || {
+            document()
+                .query_selector("a.title.is-block")
+                .ok()
+                .flatten()
+                .is_some()
+        },
+        10000,
+        "post links to appear on /posts",
+    )
+    .await;
+}
+
+#[wasm_bindgen_test]
+async fn hydrate_home() {
+    let body_html = fetch_ssr_html(SERVER_BASE, "/").await;
+
+    output_element().set_inner_html(&body_html);
+    push_route("/");
+    yew::Renderer::<App>::with_root(output_element()).hydrate();
+
+    sleep(Duration::from_secs(2)).await;
+    let html = output_element().inner_html();
+    assert!(
+        html.contains("Welcome"),
+        "home page should have content after hydration"
+    );
+}

examples/ssr_router/tests/e2e.rs

@@ -0,0 +1,10 @@
+[package]
+name = "ssr-e2e-harness"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+gloo = { workspace = true, features = ["futures"] }
+web-sys = { workspace = true }
+wasm-bindgen = { workspace = true }
+js-sys = { workspace = true }