Skip to content

Commit e46ae55

Browse files
futursoloranile
futursolo
and
ranile
authored
SSR Hydration (#2552)
* Bring changes to this branch. * Add feature hydration. * Hydrate text. * Hydrate tag. * Hydrate node. * Hydrate List. * Hydrate Suspense. * Hydrate component. * Renderer::hydrate. * Add example and tests. * Fix comp_id. * Move some code away from generics. * Fix everything. * trybuild? * Collectable! * Phantom component. * Migrate docs as well. * Update example. * Fix docs and improve debug message. * Minor fixing. * Add hydration to feature soundness check. * Fix name in debug. * Remove Shift. * Remove comment. * Adjust readme. * Update website/docs/advanced-topics/server-side-rendering.md Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * Update packages/yew/src/dom_bundle/bnode.rs Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * Update packages/yew/src/dom_bundle/bnode.rs Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com> * Once via structopt, now direct clap. * Fix docs and empty fragment. * Remove struct component warning. * Move function router into a separate binary. * Optimise Code Logic. * Fix condition. * Fix rendering behaviour. * Fix comment. Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
1 parent 2db4284 commit e46ae55

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2260
-243
lines changed

‎.github/workflows/main-checks.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ jobs:
3232
cargo clippy -- --deny=warnings
3333
cargo clippy --features=ssr -- --deny=warnings
3434
cargo clippy --features=csr -- --deny=warnings
35+
cargo clippy --features=hydration -- --deny=warnings
3536
cargo clippy --all-features --all-targets -- --deny=warnings
3637
working-directory: packages/yew
3738

@@ -62,6 +63,7 @@ jobs:
6263
cargo clippy --release -- --deny=warnings
6364
cargo clippy --release --features=ssr -- --deny=warnings
6465
cargo clippy --release --features=csr -- --deny=warnings
66+
cargo clippy --release --features=hydration -- --deny=warnings
6567
cargo clippy --release --all-features --all-targets -- --deny=warnings
6668
working-directory: packages/yew
6769

‎Cargo.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ members = [
3434
"examples/two_apps",
3535
"examples/webgl",
3636
"examples/web_worker_fib",
37+
"examples/ssr_router",
3738
"examples/suspense",
3839

3940
# Tools

‎examples/function_router/Cargo.toml‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,11 @@ yew-router = { path = "../../packages/yew-router" }
1313
serde = { version = "1.0", features = ["derive"] }
1414
lazy_static = "1.4.0"
1515
gloo-timers = "0.2"
16+
wasm-logger = "0.2"
17+
instant = { version = "0.1", features = ["wasm-bindgen"] }
1618

1719
[target.'cfg(target_arch = "wasm32")'.dependencies]
1820
getrandom = { version = "0.2", features = ["js"] }
19-
instant = { version = "0.1", features = ["wasm-bindgen"] }
20-
wasm-logger = "0.2"
21-
22-
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
23-
instant = { version = "0.1" }
2421

2522
[features]
2623
csr = ["yew/csr"]

‎examples/function_router/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"
1212
/>
1313
<link data-trunk rel="sass" href="index.scss" />
14-
<link data-trunk rel="rust" data-cargo-features="csr" />
14+
<link data-trunk rel="rust" data-cargo-features="csr" data-bin="function_router" />
1515
</head>
1616

1717
<body></body>

‎examples/function_router/src/app.rs‎

Lines changed: 32 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1+
use std::collections::HashMap;
2+
13
use yew::prelude::*;
4+
use yew::virtual_dom::AttrValue;
5+
use yew_router::history::{AnyHistory, History, MemoryHistory};
26
use yew_router::prelude::*;
37

48
use crate::components::nav::Nav;
@@ -47,53 +51,40 @@ pub fn App() -> Html {
4751
}
4852
}
4953

50-
#[cfg(not(target_arch = "wasm32"))]
51-
mod arch_native {
52-
use super::*;
53-
54-
use yew::virtual_dom::AttrValue;
55-
use yew_router::history::{AnyHistory, History, MemoryHistory};
56-
57-
use std::collections::HashMap;
58-
59-
#[derive(Properties, PartialEq, Debug)]
60-
pub struct ServerAppProps {
61-
pub url: AttrValue,
62-
pub queries: HashMap<String, String>,
63-
}
54+
#[derive(Properties, PartialEq, Debug)]
55+
pub struct ServerAppProps {
56+
pub url: AttrValue,
57+
pub queries: HashMap<String, String>,
58+
}
6459

65-
#[function_component]
66-
pub fn ServerApp(props: &ServerAppProps) -> Html {
67-
let history = AnyHistory::from(MemoryHistory::new());
68-
history
69-
.push_with_query(&*props.url, &props.queries)
70-
.unwrap();
60+
#[function_component]
61+
pub fn ServerApp(props: &ServerAppProps) -> Html {
62+
let history = AnyHistory::from(MemoryHistory::new());
63+
history
64+
.push_with_query(&*props.url, &props.queries)
65+
.unwrap();
7166

72-
html! {
73-
<Router history={history}>
74-
<Nav />
67+
html! {
68+
<Router history={history}>
69+
<Nav />
7570

76-
<main>
77-
<Switch<Route> render={Switch::render(switch)} />
78-
</main>
79-
<footer class="footer">
80-
<div class="content has-text-centered">
81-
{ "Powered by " }
82-
<a href="https://yew.rs">{ "Yew" }</a>
83-
{ " using " }
84-
<a href="https://bulma.io">{ "Bulma" }</a>
85-
{ " and images from " }
86-
<a href="https://unsplash.com">{ "Unsplash" }</a>
87-
</div>
88-
</footer>
89-
</Router>
90-
}
71+
<main>
72+
<Switch<Route> render={Switch::render(switch)} />
73+
</main>
74+
<footer class="footer">
75+
<div class="content has-text-centered">
76+
{ "Powered by " }
77+
<a href="https://yew.rs">{ "Yew" }</a>
78+
{ " using " }
79+
<a href="https://bulma.io">{ "Bulma" }</a>
80+
{ " and images from " }
81+
<a href="https://unsplash.com">{ "Unsplash" }</a>
82+
</div>
83+
</footer>
84+
</Router>
9185
}
9286
}
9387

94-
#[cfg(not(target_arch = "wasm32"))]
95-
pub use arch_native::*;
96-
9788
fn switch(routes: &Route) -> Html {
9889
match routes.clone() {
9990
Route::Post { id } => {

‎examples/function_router/src/bin/function_router.rs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
pub use function_router::*;
2+
3+
fn main() {
4+
wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
5+
#[cfg(feature = "csr")]
6+
yew::Renderer::<App>::new().render();
7+
}

‎examples/function_router/src/main.rs‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎examples/simple_ssr/Cargo.toml‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,20 @@ edition = "2021"
66
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
77

88
[dependencies]
9-
tokio = { version = "1.15.0", features = ["full"] }
10-
warp = "0.3"
11-
yew = { path = "../../packages/yew", features = ["ssr"] }
9+
yew = { path = "../../packages/yew", features = ["ssr", "hydration"] }
1210
reqwest = { version = "0.11.8", features = ["json"] }
1311
serde = { version = "1.0.132", features = ["derive"] }
1412
uuid = { version = "0.8.2", features = ["serde"] }
13+
14+
[target.'cfg(target_arch = "wasm32")'.dependencies]
15+
wasm-bindgen-futures = "0.4"
16+
wasm-logger = "0.2"
17+
log = "0.4"
18+
19+
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
20+
tokio = { version = "1.15.0", features = ["full"] }
21+
warp = "0.3"
22+
num_cpus = "1.13"
23+
tokio-util = { version = "0.7", features = ["rt"] }
24+
once_cell = "1.5"
25+
clap = { version = "3.1.7", features = ["derive"] }

‎examples/simple_ssr/README.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,16 @@
22

33
This example demonstrates server-side rendering.
44

5-
Run `cargo run -p simple_ssr` and navigate to http://localhost:8080/ to
6-
view results.
5+
# How to run this example
6+
7+
1. build hydration bundle
8+
9+
`trunk build examples/simple_ssr/index.html`
10+
11+
2. Run the server
12+
13+
`cargo run --bin simple_ssr_server -- --dir examples/simple_ssr/dist`
14+
15+
3. Open Browser
16+
17+
Navigate to http://localhost:8080/ to view results.

‎examples/simple_ssr/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Yew SSR Example</title>
6+
7+
<link data-trunk rel="rust" data-bin="simple_ssr_hydrate" />
8+
</head>
9+
</html>

0 commit comments

Comments
 (0)