Add WASI support for server-side rendering.

.cargo/config.toml

@@ -1,6 +1,9 @@
-[target.'cfg(target_arch = "wasm32")']
+[target.'cfg(all(target_arch = "wasm32", not(target_os = "wasi")))']
 runner = 'wasm-bindgen-test-runner'
 
+[target.'cfg(all(target_arch = "wasm32", target_os = "wasi"))']
+runner = 'wasmtime -W unknown-imports-trap=y'
+
 # This section needs to be last.
 # GitHub Actions modifies this section.
 [unstable]

.github/workflows/main-checks.yml

@@ -3,11 +3,11 @@ name: Main Checks
 on:
   pull_request:
     paths:
-      - ".github/workflows/main-checks.yml"
-      - "ci/**"
-      - "packages/**/*"
-      - "Cargo.toml"
-      - "Cargo.lock"
+      - '.github/workflows/main-checks.yml'
+      - 'ci/**'
+      - 'packages/**/*'
+      - 'Cargo.toml'
+      - 'Cargo.lock'
   push:
     branches: [master]
 
@@ -170,3 +170,72 @@ jobs:
         env:
           RUSTFLAGS: --cfg nightly_yew --cfg yew_lints
         run: cargo test -p yew-macro test_html_lints
+
+  unit_tests_wasi:
+    name: Unit Tests (WASI) on ${{ matrix.toolchain }}
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        toolchain:
+          - stable
+          - nightly
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: ${{ matrix.toolchain }}
+          target: wasm32-wasip1
+
+      - name: Install wasmtime
+        run: |
+          wget https://github.com/bytecodealliance/wasmtime/releases/download/v24.0.0/wasmtime-v24.0.0-x86_64-linux.tar.xz
+          tar xf wasmtime-v24.0.0-x86_64-linux.tar.xz
+          mv wasmtime-v24.0.0-x86_64-linux/wasmtime ~/wasmtime
+          rm -rf wasmtime-v24.0.0-x86_64-linux.tar.xz wasmtime-v24.0.0-x86_64-linux
+          chmod +x ~/wasmtime
+          mv ~/wasmtime /usr/local/bin
+          source ~/.bashrc
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Run WASI tests for yew
+        run: |
+          RUST_LOG=info
+          cargo test --features ssr,hydration --target wasm32-wasip1 -p yew
+
+  example-runnable-tests-on-wasi:
+    name: Example Runnable Tests on WASI
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        package:
+          - wasi_ssr_module
+        toolchain:
+          - stable
+          - nightly
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: ${{ matrix.toolchain }}
+          target: wasm32-wasip1
+
+      - name: Install wasmtime
+        run: |
+          wget https://github.com/bytecodealliance/wasmtime/releases/download/v24.0.0/wasmtime-v24.0.0-x86_64-linux.tar.xz
+          tar xf wasmtime-v24.0.0-x86_64-linux.tar.xz
+          mv wasmtime-v24.0.0-x86_64-linux/wasmtime ~/wasmtime
+          rm -rf wasmtime-v24.0.0-x86_64-linux.tar.xz wasmtime-v24.0.0-x86_64-linux
+          chmod +x ~/wasmtime
+          mv ~/wasmtime /usr/local/bin
+          source ~/.bashrc
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Build and run ${{ matrix.package }}
+        run: |
+          cargo build --target wasm32-wasip1 -p ${{ matrix.package }}
+          wasmtime -W unknown-imports-trap=y target/wasm32-wasip1/debug/${{ matrix.package }}.wasm

Cargo.toml

@@ -2,11 +2,9 @@
 members = [
     "packages/*",
     "tools/*",
-    "examples/*",
-]
-default-members = [
-    "packages/*",
+    "examples/*"
 ]
+default-members = ["packages/*"]
 resolver = "2"
 
 [profile.release]

examples/README.md

@@ -60,6 +60,7 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 | [web_worker_fib](web_worker_fib)                                                          | [F]  | Calculate Fibonacci numbers in a web worker thread using [`yew-agent`](https://docs.rs/yew-agent/latest/yew_agent/).              |
 | [web_worker_prime](web_worker_prime)                                                      | [F]  | Calculate Prime numbers in a web worker thread using [`yew-agent`](https://docs.rs/yew-agent/latest/yew_agent/).                  |
 | [webgl](webgl)                                                                            | [S]  | Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew. |
+| [wasi_ssr_module](wasi_ssr_module)                                                        | [F]  | Demonstrates server-side rendering using WASI.                                                                                      |
 
 [CT]: ## "Component Type"
 [S]: ## "Struct Components"

examples/boids/Cargo.toml

@@ -16,6 +16,4 @@ gloo = "0.11"
 
 [dependencies.web-sys]
 version = "0.3"
-features = [
-	"HtmlInputElement",
-]
+features = ["HtmlInputElement"]

examples/function_memory_game/Cargo.toml

@@ -17,6 +17,4 @@ yew = { path = "../../packages/yew", features = ["csr"] }
 
 [dependencies.web-sys]
 version = "0.3"
-features = [
-	"HtmlInputElement",
-]
+features = ["HtmlInputElement"]

examples/function_todomvc/Cargo.toml

@@ -14,6 +14,4 @@ yew = { path = "../../packages/yew", features = ["csr"] }
 
 [dependencies.web-sys]
 version = "0.3"
-features = [
-	"HtmlInputElement",
-]
+features = ["HtmlInputElement"]

examples/game_of_life/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.4"
 authors = [
     "Diego Cardoso <[email protected]>",
     "Ilya Bogdanov <[email protected]",
-    "Junjie Huang <[email protected]>"
+    "Junjie Huang <[email protected]>",
 ]
 edition = "2021"
 license = "MIT OR Apache-2.0"

examples/mount_point/Cargo.toml

@@ -19,5 +19,5 @@ features = [
   "Element",
   "HtmlCanvasElement",
   "Node",
-  "Window"
+  "Window",
 ]

examples/simple_ssr/index.html

@@ -1,9 +1,13 @@
 <!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" data-cargo-features="hydration" />
-  </head>
-</html>
+<head>
+  <meta charset="utf-8" />
+  <title>Yew SSR Example</title>
+
+  <link data-trunk rel="rust" data-bin="simple_ssr_hydrate" data-cargo-features="hydration" />
+</head>
+
+<body></body>
+
+</html>

examples/todomvc/Cargo.toml

@@ -15,6 +15,4 @@ gloo = "0.11"
 
 [dependencies.web-sys]
 version = "0.3"
-features = [
-	"HtmlInputElement",
-]
+features = ["HtmlInputElement"]

examples/wasi_ssr_module/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "wasi_ssr_module"
+version = "0.1.0"
+edition = "2021"
+authors = ["langyo <[email protected]>"]
+
+[dependencies]
+yew = { path = "../../packages/yew", features = ["ssr"] }
+yew-router = { path = "../../packages/yew-router" }
+
+anyhow = "^1"
+bytes = "^1"
+serde = { version = "^1", features = ["derive"] }
+serde_json = "^1"
+lazy_static = "^1"
+
+tokio = { version = "^1", features = ["macros", "rt", "time"] }

examples/wasi_ssr_module/README.md

@@ -0,0 +1,23 @@
+# WASI SSR Module Example
+
+This example demonstrates how to use the WASI target to run a simple server-side rendering application.
+
+It depends on [wasmtime](https://wasmtime.dev)'s WASI preview2.
+
+## Building
+
+To build the example, run the following command from the root of the repository:
+
+```bash
+cargo build --manifest-path examples/wasi_ssr_module/Cargo.toml --target wasm32-wasi --release
+```
+
+## Running
+
+> Note: This example requires the wasmtime CLI to be installed. See [wasmtime's installation instructions](https://docs.wasmtime.dev/cli-install.html) for more information.
+
+```bash
+wasmtime target/wasm32-wasi/release/wasi_ssr_module.wasm
+```
+
+> Note: If your wasmtime CLI throws an error that it says some imports like `__wbindgen_placeholder__::__wbindgen_xxx` is invalid, try to run `cargo update`. See issue [rustwasm/gloo#411](https://github.com/rustwasm/gloo/pull/411#discussion_r1421219033).

examples/wasi_ssr_module/src/main.rs

@@ -0,0 +1,60 @@
+#![allow(unused_imports)]
+#![allow(non_snake_case)]
+
+mod router;
+
+use anyhow::Result;
+use router::{switch, Route};
+use yew::prelude::*;
+use yew::LocalServerRenderer;
+
+#[function_component]
+fn Content() -> Html {
+    use yew_router::prelude::*;
+
+    html! {
+        <>
+            <h1>{"Yew WASI SSR demo"}</h1>
+            <Switch<Route> render={switch} />
+        </>
+    }
+}
+
+#[function_component]
+fn App() -> Html {
+    use yew_router::history::{AnyHistory, History, MemoryHistory};
+    use yew_router::prelude::*;
+
+    let history = AnyHistory::from(MemoryHistory::new());
+    history.push("/");
+
+    html! {
+        <div>
+            <Router history={history}>
+                <Content />
+            </Router>
+        </div>
+    }
+}
+
+pub async fn render() -> Result<String> {
+    let renderer = LocalServerRenderer::<App>::new();
+    let html_raw = renderer.render().await;
+
+    let mut body = String::new();
+    body.push_str("<body>");
+    body.push_str("<div id='app' style='width: 100vw; height: 100vh; position: fixed;'>");
+    body.push_str(&html_raw);
+    body.push_str("</div>");
+    body.push_str("</body>");
+
+    Ok(body)
+}
+
+#[tokio::main(flavor = "current_thread")]
+async fn main() -> Result<()> {
+    let ret = render().await?;
+    println!("{}", ret);
+
+    Ok(())
+}

examples/wasi_ssr_module/src/router.rs

@@ -0,0 +1,29 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+#[derive(Routable, PartialEq, Eq, Clone, Debug)]
+pub enum Route {
+    #[at("/")]
+    Portal,
+
+    #[at("/t/:id")]
+    Thread { id: String },
+
+    #[not_found]
+    #[at("/404")]
+    NotFound,
+}
+
+pub fn switch(routes: Route) -> Html {
+    match routes {
+        Route::Portal => {
+            html! { <h1>{"Hello"}</h1> }
+        }
+        Route::Thread { id } => {
+            html! { <h1>{format!("Thread id {}", id)}</h1> }
+        }
+        Route::NotFound => {
+            html! { <h1>{"Not found"}</h1> }
+        }
+    }
+}

packages/yew-router-macro/Cargo.toml

@@ -14,7 +14,7 @@ proc-macro = true
 [dependencies]
 proc-macro2 = "1"
 quote = "1"
-syn = { version = "2", features = ["full","extra-traits"] }
+syn = { version = "2", features = ["full", "extra-traits"] }
 
 [dev-dependencies]
 rustversion = "1"

packages/yew-router/Cargo.toml

@@ -12,7 +12,7 @@ repository = "https://github.com/yewstack/yew"
 rust-version = "1.76.0"
 
 [dependencies]
-yew = { version = "0.21.0", path = "../yew", default-features= false }
+yew = { version = "0.21.0", path = "../yew", default-features = false }
 yew-router-macro = { version = "0.18.0", path = "../yew-router-macro" }
 
 wasm-bindgen = "0.2"
@@ -26,19 +26,16 @@ urlencoding = "2.1.3"
 
 [dependencies.web-sys]
 version = "0.3"
-features = [
-    "Document",
-    "HtmlBaseElement",
-    "Window",
-]
+features = ["Document", "HtmlBaseElement", "Window"]
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3"
+wasm-bindgen-test = "0.3.43"
 serde = { version = "1", features = ["derive"] }
 yew = { version = "0.21.0", path = "../yew", features = ["csr"] }
 
 [dev-dependencies.web-sys]
 version = "0.3"
-features = [
-    "HtmlHeadElement",
-]
+features = ["HtmlHeadElement"]
+
+[features]
+default = []