Server-side Rendering Support (#95)

* Update dependencies.

* Update version.

* Implement serde for Sheet.

* Break reference cycle.

* Deliver style data with transitive state.

* Update docs.

* Add feature hydration.

* Remove todo!().

* Add method to write styles as static string.

* Add a method to create StyleManager without a builder.

* Add notes.

* Adds an example.

* Update error docs.

* Add prepared media query hook.

* Add SSR test.

* Fix clippy.

* Add SSR test to CI.

* Fix clippy.

* Fix tests.

* Apply review suggestions.

* Rearrange Codebase.

* Rewrite static reader.

* Try to remove feature flags.

* Push into StyleData.

* Do not render style twice.

* Minor adjustments.

* Fix tests.

* Add docs.

* Fix docs.

* Fix merge failure.

.github/workflows/everything.yml

@@ -92,7 +92,9 @@ jobs:
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
 
       - name: Run Browser Tests
-        run: wasm-pack test --headless --chrome --firefox examples/yew-integration
+        run: |
+          wasm-pack test --headless --chrome --firefox examples/yew-integration
+          wasm-pack test --headless --chrome --firefox examples/yew-ssr
 
   publish:
     name: Publish to crates.io

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v0.12.0
+
+### Other Changes:
+- Added Server-side Rendering Support.
+- Fixed a reference cycle between `Style` and `StyleManager`.
+- Added `StyleManager::new()` to create a style manager with default configuration.
+
 ## v0.11.0
 
 ### Breaking Changes:

Cargo.toml

@@ -11,6 +11,7 @@ members = [
     "examples/yew-theme-context",
     "examples/yew-theme-hooks",
     "examples/use-media-query",
+    "examples/yew-ssr",
 ]
 resolver = "2"
 

Trunk.toml

@@ -1,20 +1,19 @@
 [watch]
 # Paths to watch. The `build.target`'s parent folder is watched by default.
 watch = []
-# Paths to ignore.
-ignore = [
-  "target/",
-  "packages/stylist/target/",
-  "packages/stylist-core/target/",
 
-  "examples/benchmarks/target/",
-  "examples/use-media-query/target/",
-  "examples/yew-integration/target/",
-  "examples/yew-proc-macros/target/",
-  "examples/yew-shadow/target/",
-  "examples/yew-theme-context/target/",
-  "examples/yew-theme-hooks/target/",
-]
+ # Paths to ignore.
+ ignore = [
+   "target/",
+   "packages/stylist/target/",
+   "packages/stylist-core/target/",
 
-[tools]
-wasm_bindgen = "0.2.77"
+   "examples/benchmarks/target/",
+   "examples/use-media-query/target/",
+   "examples/yew-integration/target/",
+   "examples/yew-proc-macros/target/",
+   "examples/yew-shadow/target/",
+   "examples/yew-theme-context/target/",
+   "examples/yew-theme-hooks/target/",
+ ]
+

examples/benchmarks/Cargo.toml

@@ -3,6 +3,7 @@ name = "stylist-benchmarks"
 version = "0.1.0"
 authors = ["Kaede Hoshikawa <[email protected]>"]
 edition = "2021"
+publish = false
 
 [dependencies]
 log = "0.4.17"
@@ -12,5 +13,5 @@ stylist = { path = "../../packages/stylist", features = [
     "yew_integration",
     "parser",
 ] }
-web-sys = { version = "0.3.58", features = ["Window", "Performance"] }
+web-sys = { version = "0.3.60", features = ["Window", "Performance"] }
 gloo = "0.8.0"

examples/use-media-query/Cargo.toml

@@ -3,6 +3,7 @@ name = "example-use-media-query"
 version = "0.1.0"
 authors = ["Kaede Hoshikawa <[email protected]>"]
 edition = "2021"
+publish = false
 
 [dependencies]
 log = "0.4.17"
@@ -14,12 +15,12 @@ stylist = { path = "../../packages/stylist", features = [
 ] }
 
 [dev-dependencies]
-gloo-utils = "0.1.4"
-wasm-bindgen-test = "0.3.31"
-wasm-bindgen = "0.2.81"
+gloo-utils = "0.1.6"
+wasm-bindgen-test = "0.3.33"
+wasm-bindgen = "0.2.83"
 
 [dev-dependencies.web-sys]
-version = "0.3.58"
+version = "0.3.60"
 features = [
     "Window",
     "Document",

examples/yew-integration/Cargo.toml

@@ -3,6 +3,7 @@ name = "example-yew-integration"
 version = "0.1.0"
 authors = ["Kaede Hoshikawa <[email protected]>"]
 edition = "2021"
+publish = false
 
 [dependencies]
 log = "0.4.17"
@@ -11,13 +12,13 @@ yew = { version = "0.20", features = ["csr"] }
 stylist = { path = "../../packages/stylist", features = ["yew_integration"] }
 
 [dev-dependencies]
-gloo-utils = "0.1.4"
-gloo-timers = { version = "0.2.4", features = ["futures"] }
-wasm-bindgen-test = "0.3.31"
-wasm-bindgen = "0.2.81"
+gloo-utils = "0.1.6"
+gloo-timers = { version = "0.2.5", features = ["futures"] }
+wasm-bindgen-test = "0.3.33"
+wasm-bindgen = "0.2.83"
 
 [dev-dependencies.web-sys]
-version = "0.3.58"
+version = "0.3.60"
 features = [
     "Window",
     "Document",

examples/yew-proc-macros/Cargo.toml

@@ -3,6 +3,7 @@ name = "example-yew-proc-macros"
 version = "0.1.0"
 authors = ["Kaede Hoshikawa <[email protected]>"]
 edition = "2021"
+publish = false
 
 [dependencies]
 log = "0.4.17"
@@ -14,12 +15,12 @@ stylist = { path = "../../packages/stylist", default-features = false, features
 ] }
 
 [dev-dependencies]
-gloo-utils = "0.1.4"
-wasm-bindgen-test = "0.3.31"
-wasm-bindgen = "0.2.81"
+gloo-utils = "0.1.6"
+wasm-bindgen-test = "0.3.33"
+wasm-bindgen = "0.2.83"
 
 [dev-dependencies.web-sys]
-version = "0.3.58"
+version = "0.3.60"
 features = [
     "Window",
     "Document",

examples/yew-shadow/Cargo.toml

@@ -3,16 +3,17 @@ name = "example-yew-shadow"
 version = "0.1.0"
 authors = ["Kaede Hoshikawa <[email protected]>"]
 edition = "2021"
+publish = false
 
 [dependencies]
 log = "0.4.17"
 console_log = { version = "0.2.0", features = ["color"] }
 yew = { version = "0.20", features = ["csr"] }
 stylist = { path = "../../packages/stylist", features = ["yew_integration"] }
-once_cell = "1.13.0"
+once_cell = "1.16.0"
 
 [dependencies.web-sys]
-version = "0.3.58"
+version = "0.3.60"
 features = [
     "Window",
     "Document",

examples/yew-ssr/Cargo.toml

@@ -0,0 +1,50 @@
+[package]
+name = "example-yew-ssr"
+version = "0.1.0"
+authors = ["Kaede Hoshikawa <[email protected]>"]
+edition = "2021"
+publish = false
+
+[[bin]]
+name = "yew-ssr-client"
+required-features = ["csr"]
+
+[[bin]]
+name = "yew-ssr-server"
+required-features = ["ssr"]
+
+[dependencies]
+log = "0.4.17"
+console_log = { version = "0.2.0", features = ["color"] }
+yew = { version = "0.20" }
+stylist = { path = "../../packages/stylist", features = ["yew_integration"] }
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+tokio = { version = "1.22.0", features = ["full"] }
+env_logger = "0.10"
+clap = { version = "4.0.29", features = ["derive"] }
+warp = "0.3"
+
+[dev-dependencies]
+gloo-utils = "0.1.6"
+gloo-timers = { version = "0.2.5", features = ["futures"] }
+wasm-bindgen-test = "0.3.33"
+wasm-bindgen = "0.2.83"
+yew = { version = "0.20", features = ["csr", "ssr", "hydration"] }
+stylist = { path = "../../packages/stylist", features = ["yew_integration", "ssr", "hydration"] }
+
+[dev-dependencies.web-sys]
+version = "0.3.60"
+features = [
+    "Window",
+    "Document",
+    "Element",
+    "HtmlElement",
+    "HtmlHeadElement",
+    "HtmlStyleElement",
+    "CssStyleDeclaration",
+]
+
+[features]
+csr = ["yew/csr", "yew/hydration", "stylist/hydration"]
+ssr = ["yew/ssr", "stylist/ssr"]

examples/yew-ssr/README.md

@@ -0,0 +1,5 @@
+# Yew SSR Integration
+
+1. Install [Trunk](https://trunkrs.dev) and [Rust](https://rustup.rs)
+2. Build client side example with `trunk build examples/yew-ssr/index.html`
+3. Run the test Server with `cargo run --features=ssr --bin yew-ssr-server -- --dir examples/yew-ssr/dist/`

examples/yew-ssr/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Yew SSR Integration Example</title>
+    <link data-trunk rel="rust" data-wasm-opt="z" data-bin="yew-ssr-client" data-cargo-features="csr" />
+    <!--%HEAD_PLACEHOLDER%-->
+</head>
+
+
+<body>
+    <!--%BODY_PLACEHOLDER%-->
+</body>
+
+</html>

examples/yew-ssr/src/bin/yew-ssr-client.rs

@@ -0,0 +1,7 @@
+use example_yew_ssr::App;
+use log::Level;
+
+fn main() {
+    console_log::init_with_level(Level::Trace).expect("Failed to initialise Log!");
+    yew::Renderer::<App>::new().hydrate();
+}

examples/yew-ssr/src/bin/yew-ssr-server.rs

@@ -0,0 +1,65 @@
+use std::path::PathBuf;
+use std::sync::Arc;
+
+use clap::Parser;
+use example_yew_ssr::{ServerApp, ServerAppProps};
+use stylist::manager::{render_static, StyleManager};
+use warp::Filter;
+
+/// A basic example
+#[derive(Parser, Debug)]
+struct Opt {
+    /// the "dist" created by trunk directory to be served for hydration.
+    #[clap(short, long)]
+    dir: PathBuf,
+}
+
+async fn render(index_html_s: Arc<str>) -> String {
+    let (writer, reader) = render_static();
+
+    let body_s = yew::ServerRenderer::<ServerApp>::with_props(move || {
+        let manager = StyleManager::builder()
+            .writer(writer)
+            .build()
+            .expect("failed to create style manager.");
+        ServerAppProps { manager }
+    })
+    .render()
+    .await;
+
+    let data = reader.read_style_data();
+
+    let mut style_s = String::new();
+    data.write_static_markup(&mut style_s)
+        .expect("failed to read styles from style manager");
+
+    index_html_s
+        .replace("<!--%BODY_PLACEHOLDER%-->", &body_s)
+        .replace("<!--%HEAD_PLACEHOLDER%-->", &style_s)
+}
+
+#[tokio::main]
+async fn main() {
+    env_logger::init();
+
+    let opts = Opt::parse();
+
+    let index_html_s: Arc<str> = tokio::fs::read_to_string(opts.dir.join("index.html"))
+        .await
+        .expect("failed to read index.html")
+        .into();
+
+    let render_f = warp::get().then(move || {
+        let index_html_s = index_html_s.clone();
+
+        async move { warp::reply::html(render(index_html_s).await) }
+    });
+
+    let routes = warp::path::end()
+        .and(render_f.clone())
+        .or(warp::path("index.html").and(render_f.clone()))
+        .or(warp::fs::dir(opts.dir.clone()));
+
+    println!("You can view the website at: http://localhost:8080/");
+    warp::serve(routes).run(([127, 0, 0, 1], 8080)).await;
+}