feat: add yew-link crate for unified SSR/CSR data fetching

Author: Madoshakalaka

Cargo.lock

@@ -59,3 +59,4 @@ chrono = "0.4"
 thiserror = "2.0"
 bincode = { version = "2.0.0-rc.3", features = ["serde"] }
 reqwest = "0.13"
+axum = "0.8"

Cargo.toml

@@ -1,6 +1,8 @@
+use serde::{Deserialize, Serialize};
+
 use crate::generator::{Generated, Generator};
 
-#[derive(Clone, Debug, Eq, PartialEq)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize)]
 pub struct Author {
     pub seed: u32,
     pub name: String,
@@ -22,7 +24,7 @@ impl Generated for Author {
     }
 }
 
-#[derive(Clone, Debug, Eq, PartialEq)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize)]
 pub struct PostMeta {
     pub seed: u32,
     pub title: String,
@@ -48,7 +50,7 @@ impl Generated for PostMeta {
     }
 }
 
-#[derive(Clone, Debug, Eq, PartialEq)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize)]
 pub struct Post {
     pub meta: PostMeta,
     pub content: Vec<PostPart>,
@@ -68,7 +70,7 @@ impl Generated for Post {
     }
 }
 
-#[derive(Clone, Debug, Eq, PartialEq)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize)]
 pub enum PostPart {
     Section(Section),
     Quote(Quote),
@@ -87,7 +89,7 @@ impl Generated for PostPart {
     }
 }
 
-#[derive(Clone, Debug, Eq, PartialEq)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize)]
 pub struct Section {
     pub title: String,
     pub paragraphs: Vec<String>,
@@ -112,7 +114,7 @@ impl Generated for Section {
     }
 }
 
-#[derive(Clone, Debug, Eq, PartialEq)]
+#[derive(Clone, Debug, Eq, PartialEq, Serialize, Deserialize)]
 pub struct Quote {
     pub author: Author,
     pub content: String,

examples/function_router/src/content.rs

@@ -14,11 +14,11 @@
 //   Hence, it may not yield the same value on the client and server side.
 
 mod app;
-mod components;
-mod content;
+pub mod components;
+pub mod content;
 mod generator;
 pub mod imagegen;
-mod pages;
+pub mod pages;
 
 pub use app::*;
 pub use content::*;

examples/function_router/src/lib.rs

@@ -3,8 +3,6 @@ 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
-
 [[bin]]
 name = "ssr_router_hydrate"
 required-features = ["hydration"]
@@ -15,8 +13,14 @@ required-features = ["ssr"]
 
 [dependencies]
 yew = { path = "../../packages/yew" }
+yew-link = { path = "../../packages/yew-link" }
+yew-router = { path = "../../packages/yew-router" }
 function_router = { path = "../function_router" }
 log = "0.4"
+rand = { workspace = true }
+getrandom = { workspace = true }
+serde = { workspace = true, features = ["derive"] }
+serde_json = { workspace = true }
 futures = { workspace = true, features = ["std"] }
 hyper-util = "0.1.20"
 
@@ -25,9 +29,8 @@ wasm-bindgen-futures.workspace = true
 wasm-logger.workspace = true
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-yew-router = { path = "../../packages/yew-router" }
 tokio = { workspace = true, features = ["macros", "rt-multi-thread", "net", "fs"] }
-axum = "0.8"
+axum = { workspace = true }
 tower = { version = "0.5", features = ["make"] }
 tower-http = { version = "0.6", features = ["fs", "cors"] }
 env_logger = "0.11"
@@ -39,12 +42,15 @@ jemallocator = "0.5"
 
 [target.'cfg(target_arch = "wasm32")'.dev-dependencies]
 wasm-bindgen-test.workspace = true
+wasm-bindgen.workspace = true
+web-sys = { workspace = true }
 gloo = { workspace = true }
 ssr-e2e-harness = { path = "../../tools/ssr-e2e-harness" }
 
 [dev-dependencies]
-yew = { path = "../../packages/yew", features = ["hydration"] }
+yew = { path = "../../packages/yew", features = ["hydration", "test"] }
+yew-link = { path = "../../packages/yew-link", features = ["hydration"] }
 
 [features]
-ssr = ["yew/ssr"]
-hydration = ["yew/hydration"]
+ssr = ["yew/ssr", "yew-link/ssr", "yew-link/axum"]
+hydration = ["yew/hydration", "yew-link/hydration"]

examples/ssr_router/Cargo.toml

@@ -1,7 +1,10 @@
-use function_router::App;
+use ssr_router::{App, AppProps, LINK_ENDPOINT};
 
 fn main() {
     #[cfg(target_arch = "wasm32")]
     wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
-    yew::Renderer::<App>::new().hydrate();
+    yew::Renderer::<App>::with_props(AppProps {
+        endpoint: LINK_ENDPOINT.into(),
+    })
+    .hydrate();
 }

examples/ssr_router/src/bin/ssr_router_hydrate.rs

@@ -9,19 +9,23 @@ use axum::extract::{Query, Request, State};
 use axum::handler::HandlerWithoutStateExt;
 use axum::http::Uri;
 use axum::response::IntoResponse;
-use axum::routing::get;
+use axum::routing::{get, post};
 use axum::Router;
 use clap::Parser;
-use function_router::{route_meta, Route, ServerApp, ServerAppProps};
+use function_router::{route_meta, Route};
 use futures::stream::{self, StreamExt};
 use hyper::body::Incoming;
 use hyper_util::rt::TokioIo;
 use hyper_util::server;
+use ssr_router::{
+    LinkedAuthor, LinkedPost, LinkedPostMeta, ServerApp, ServerAppProps, LINK_ENDPOINT,
+};
 use tokio::net::TcpListener;
 use tower::Service;
 use tower_http::cors::CorsLayer;
 use tower_http::services::ServeDir;
 use yew::platform::Runtime;
+use yew_link::{linked_state_handler, Resolver, ResolverProp};
 use yew_router::prelude::Routable;
 
 // We use jemalloc as it produces better performance.
@@ -46,25 +50,36 @@ fn head_tags_for(path: &str) -> String {
     )
 }
 
+#[derive(Clone)]
+struct AppState {
+    index_html_before: String,
+    index_html_after: String,
+    resolver: ResolverProp,
+}
+
 async fn render(
     url: Uri,
     Query(queries): Query<HashMap<String, String>>,
-    State((index_html_before, index_html_after)): State<(String, String)>,
+    State(state): State<AppState>,
 ) -> impl IntoResponse {
     let path = url.path().to_owned();
 
     // Inject route-specific <head> tags before </head>, outside of Yew rendering.
-    let before = index_html_before.replace("</head>", &format!("{}</head>", head_tags_for(&path)));
+    let before = state
+        .index_html_before
+        .replace("</head>", &format!("{}</head>", head_tags_for(&path)));
+    let resolver = state.resolver.clone();
 
     let renderer = yew::ServerRenderer::<ServerApp>::with_props(move || ServerAppProps {
         url: path.into(),
         queries,
+        resolver,
     });
 
     Body::from_stream(
         stream::once(async move { before })
             .chain(renderer.render_stream())
-            .chain(stream::once(async move { index_html_after }))
+            .chain(stream::once(async move { state.index_html_after }))
             .map(Result::<_, Infallible>::Ok),
     )
 }
@@ -94,35 +109,44 @@ where
 #[tokio::main]
 async fn main() -> Result<(), Box<dyn std::error::Error + Send + Sync>> {
     let exec = Executor::default();
-
     env_logger::init();
-
     let opts = Opt::parse();
 
+    let resolver_prop: ResolverProp = Resolver::new()
+        .register_linked::<LinkedPost>(())
+        .register_linked::<LinkedAuthor>(())
+        .register_linked::<LinkedPostMeta>(())
+        .into();
+    let arc_resolver = resolver_prop.0.clone();
+
     let index_html_s = tokio::fs::read_to_string(opts.dir.join("index.html"))
         .await
         .expect("failed to read index.html");
 
     let (index_html_before, index_html_after) = index_html_s.split_once("<body>").unwrap();
     let mut index_html_before = index_html_before.to_owned();
     index_html_before.push_str("<body>");
-
     let index_html_after = index_html_after.to_owned();
 
+    let app_state = AppState {
+        index_html_before,
+        index_html_after,
+        resolver: resolver_prop,
+    };
+
     let app = Router::new()
+        .route(
+            LINK_ENDPOINT,
+            post(linked_state_handler).with_state(arc_resolver),
+        )
         .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(),
-                ),
+                .fallback(get(render).with_state(app_state).into_service()),
         )
         .layer(CorsLayer::permissive());
 
     let addr: SocketAddr = ([0, 0, 0, 0], 8080).into();
-
     println!("You can view the website at: http://localhost:8080/");
 
     let listener = TcpListener::bind(addr).await?;