::new()
+ .hydratable(false)
+ .render()
+ .await;
assert_eq!(
s,
diff --git a/packages/yew/tests/failed_tests/base_component_impl-fail.stderr b/packages/yew/tests/failed_tests/base_component_impl-fail.stderr
index 563ac8e341e..a7e774e1dc7 100644
--- a/packages/yew/tests/failed_tests/base_component_impl-fail.stderr
+++ b/packages/yew/tests/failed_tests/base_component_impl-fail.stderr
@@ -1,12 +1,12 @@
error[E0277]: the trait bound `Comp: yew::Component` is not satisfied
- --> tests/failed_tests/base_component_impl-fail.rs:6:6
- |
-6 | impl BaseComponent for Comp {
- | ^^^^^^^^^^^^^ the trait `yew::Component` is not implemented for `Comp`
- |
- = note: required because of the requirements on the impl of `html::component::sealed::SealedBaseComponent` for `Comp`
+ --> tests/failed_tests/base_component_impl-fail.rs:6:6
+ |
+6 | impl BaseComponent for Comp {
+ | ^^^^^^^^^^^^^ the trait `yew::Component` is not implemented for `Comp`
+ |
+ = note: required because of the requirements on the impl of `html::component::sealed::SealedBaseComponent` for `Comp`
note: required by a bound in `BaseComponent`
- --> src/html/component/mod.rs
- |
- | pub trait BaseComponent: sealed::SealedBaseComponent + Sized + 'static {
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ required by this bound in `BaseComponent`
+ --> src/html/component/mod.rs
+ |
+ | pub trait BaseComponent: sealed::SealedBaseComponent + Sized + 'static {
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ required by this bound in `BaseComponent`
diff --git a/packages/yew/tests/hydration.rs b/packages/yew/tests/hydration.rs
new file mode 100644
index 00000000000..6becd1c9678
--- /dev/null
+++ b/packages/yew/tests/hydration.rs
@@ -0,0 +1,542 @@
+#![cfg(feature = "hydration")]
+
+use std::rc::Rc;
+use std::time::Duration;
+
+mod common;
+
+use common::{obtain_result, obtain_result_by_id};
+
+use gloo::timers::future::sleep;
+use wasm_bindgen::JsCast;
+use wasm_bindgen_futures::spawn_local;
+use wasm_bindgen_test::*;
+use web_sys::{HtmlElement, HtmlTextAreaElement};
+use yew::prelude::*;
+use yew::suspense::{Suspension, SuspensionResult};
+use yew::{Renderer, ServerRenderer};
+
+wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser);
+
+#[wasm_bindgen_test]
+async fn hydration_works() {
+ #[function_component]
+ fn Comp() -> Html {
+ let ctr = use_state_eq(|| 0);
+
+ let onclick = {
+ let ctr = ctr.clone();
+
+ Callback::from(move |_| {
+ ctr.set(*ctr + 1);
+ })
+ };
+
+ html! {
+
+ {"Counter: "}{*ctr}
+ {"+1"}
+
+ }
+ }
+
+ #[function_component]
+ fn App() -> Html {
+ html! {
+
+
+ }
+ }
+
+ let s = ServerRenderer::::new().render().await;
+
+ gloo::utils::document()
+ .query_selector("#output")
+ .unwrap()
+ .unwrap()
+ .set_inner_html(&s);
+
+ sleep(Duration::ZERO).await;
+
+ Renderer::::with_root(gloo_utils::document().get_element_by_id("output").unwrap())
+ .hydrate();
+
+ sleep(Duration::ZERO).await;
+
+ let result = obtain_result_by_id("output");
+
+ // no placeholders, hydration is successful.
+ assert_eq!(
+ result,
+ r#""#
+ );
+
+ gloo_utils::document()
+ .query_selector(".increase")
+ .unwrap()
+ .unwrap()
+ .dyn_into::()
+ .unwrap()
+ .click();
+
+ sleep(Duration::ZERO).await;
+
+ let result = obtain_result_by_id("output");
+
+ assert_eq!(
+ result,
+ r#""#
+ );
+}
+
+#[wasm_bindgen_test]
+async fn hydration_with_suspense() {
+ #[derive(PartialEq)]
+ pub struct SleepState {
+ s: Suspension,
+ }
+
+ impl SleepState {
+ fn new() -> Self {
+ let (s, handle) = Suspension::new();
+
+ spawn_local(async move {
+ sleep(Duration::from_millis(50)).await;
+
+ handle.resume();
+ });
+
+ Self { s }
+ }
+ }
+
+ impl Reducible for SleepState {
+ type Action = ();
+
+ fn reduce(self: Rc, _action: Self::Action) -> Rc {
+ Self::new().into()
+ }
+ }
+
+ #[hook]
+ pub fn use_sleep() -> SuspensionResult> {
+ let sleep_state = use_reducer(SleepState::new);
+
+ if sleep_state.s.resumed() {
+ Ok(Rc::new(move || sleep_state.dispatch(())))
+ } else {
+ Err(sleep_state.s.clone())
+ }
+ }
+
+ #[function_component(Content)]
+ fn content() -> HtmlResult {
+ let resleep = use_sleep()?;
+
+ let value = use_state(|| 0);
+
+ let on_increment = {
+ let value = value.clone();
+
+ Callback::from(move |_: MouseEvent| {
+ value.set(*value + 1);
+ })
+ };
+
+ let on_take_a_break = Callback::from(move |_: MouseEvent| (resleep.clone())());
+
+ Ok(html! {
+
+
{*value}
+
{"increase"}
+
+ {"Take a break!"}
+
+
{"wait..."}
};
+
+ html! {
+
+
+
+
+ }
+ }
+
+ let s = ServerRenderer::::new().render().await;
+
+ gloo::utils::document()
+ .query_selector("#output")
+ .unwrap()
+ .unwrap()
+ .set_inner_html(&s);
+
+ sleep(Duration::ZERO).await;
+
+ Renderer::::with_root(gloo_utils::document().get_element_by_id("output").unwrap())
+ .hydrate();
+
+ sleep(Duration::from_millis(10)).await;
+
+ let result = obtain_result();
+
+ // still hydrating, during hydration, the server rendered result is shown.
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+
+ sleep(Duration::from_millis(50)).await;
+
+ let result = obtain_result();
+
+ // hydrated.
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+
+ gloo_utils::document()
+ .query_selector(".increase")
+ .unwrap()
+ .unwrap()
+ .dyn_into::()
+ .unwrap()
+ .click();
+
+ sleep(Duration::from_millis(50)).await;
+
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+
+ gloo_utils::document()
+ .query_selector(".take-a-break")
+ .unwrap()
+ .unwrap()
+ .dyn_into::()
+ .unwrap()
+ .click();
+
+ sleep(Duration::from_millis(10)).await;
+ let result = obtain_result();
+ assert_eq!(result.as_str(), "wait...
");
+
+ sleep(Duration::from_millis(50)).await;
+
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+}
+
+#[wasm_bindgen_test]
+async fn hydration_with_suspense_not_suspended_at_start() {
+ #[derive(PartialEq)]
+ pub struct SleepState {
+ s: Option,
+ }
+
+ impl SleepState {
+ fn new() -> Self {
+ Self { s: None }
+ }
+ }
+
+ impl Reducible for SleepState {
+ type Action = ();
+
+ fn reduce(self: Rc, _action: Self::Action) -> Rc {
+ let (s, handle) = Suspension::new();
+
+ spawn_local(async move {
+ sleep(Duration::from_millis(50)).await;
+
+ handle.resume();
+ });
+
+ Self { s: Some(s) }.into()
+ }
+ }
+
+ #[hook]
+ pub fn use_sleep() -> SuspensionResult> {
+ let sleep_state = use_reducer(SleepState::new);
+
+ let s = match sleep_state.s.clone() {
+ Some(m) => m,
+ None => return Ok(Rc::new(move || sleep_state.dispatch(()))),
+ };
+
+ if s.resumed() {
+ Ok(Rc::new(move || sleep_state.dispatch(())))
+ } else {
+ Err(s)
+ }
+ }
+
+ #[function_component(Content)]
+ fn content() -> HtmlResult {
+ let resleep = use_sleep()?;
+
+ let value = use_state(|| "I am writing a long story...".to_string());
+
+ let on_text_input = {
+ let value = value.clone();
+
+ Callback::from(move |e: InputEvent| {
+ let input: HtmlTextAreaElement = e.target_unchecked_into();
+
+ value.set(input.value());
+ })
+ };
+
+ let on_take_a_break = Callback::from(move |_| (resleep.clone())());
+
+ Ok(html! {
+
+
+
+ {"Take a break!"}
+
+
{"wait..."}
};
+
+ html! {
+
+
+
+
+ }
+ }
+
+ let s = ServerRenderer::::new().render().await;
+
+ gloo::utils::document()
+ .query_selector("#output")
+ .unwrap()
+ .unwrap()
+ .set_inner_html(&s);
+
+ sleep(Duration::ZERO).await;
+
+ Renderer::::with_root(gloo_utils::document().get_element_by_id("output").unwrap())
+ .hydrate();
+
+ sleep(Duration::from_millis(10)).await;
+
+ let result = obtain_result();
+
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+ gloo_utils::document()
+ .query_selector(".take-a-break")
+ .unwrap()
+ .unwrap()
+ .dyn_into::()
+ .unwrap()
+ .click();
+
+ sleep(Duration::from_millis(10)).await;
+
+ let result = obtain_result();
+ assert_eq!(result.as_str(), "wait...
");
+
+ sleep(Duration::from_millis(50)).await;
+
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+}
+
+#[wasm_bindgen_test]
+async fn hydration_nested_suspense_works() {
+ #[derive(PartialEq)]
+ pub struct SleepState {
+ s: Suspension,
+ }
+
+ impl SleepState {
+ fn new() -> Self {
+ let (s, handle) = Suspension::new();
+
+ spawn_local(async move {
+ sleep(Duration::from_millis(50)).await;
+
+ handle.resume();
+ });
+
+ Self { s }
+ }
+ }
+
+ impl Reducible for SleepState {
+ type Action = ();
+
+ fn reduce(self: Rc, _action: Self::Action) -> Rc {
+ Self::new().into()
+ }
+ }
+
+ #[hook]
+ pub fn use_sleep() -> SuspensionResult> {
+ let sleep_state = use_reducer(SleepState::new);
+
+ if sleep_state.s.resumed() {
+ Ok(Rc::new(move || sleep_state.dispatch(())))
+ } else {
+ Err(sleep_state.s.clone())
+ }
+ }
+
+ #[function_component(InnerContent)]
+ fn inner_content() -> HtmlResult {
+ let resleep = use_sleep()?;
+
+ let on_take_a_break = Callback::from(move |_: MouseEvent| (resleep.clone())());
+
+ Ok(html! {
+
+
+ {"Take a break!"}
+
+
{"wait...(inner)"}
};
+
+ let on_take_a_break = Callback::from(move |_: MouseEvent| (resleep.clone())());
+
+ Ok(html! {
+
+
+ {"Take a break!"}
+
+
+
+
{"wait...(outer)"}
};
+
+ html! {
+
+
+
+
+ }
+ }
+
+ let s = ServerRenderer::::new().render().await;
+
+ gloo::utils::document()
+ .query_selector("#output")
+ .unwrap()
+ .unwrap()
+ .set_inner_html(&s);
+
+ sleep(Duration::ZERO).await;
+
+ Renderer::::with_root(gloo_utils::document().get_element_by_id("output").unwrap())
+ .hydrate();
+
+ // outer suspense is hydrating...
+ sleep(Duration::from_millis(10)).await;
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+
+ sleep(Duration::from_millis(50)).await;
+
+ // inner suspense is hydrating...
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+
+ sleep(Duration::from_millis(50)).await;
+
+ // hydrated.
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+
+ gloo_utils::document()
+ .query_selector(".take-a-break")
+ .unwrap()
+ .unwrap()
+ .dyn_into::()
+ .unwrap()
+ .click();
+
+ sleep(Duration::from_millis(10)).await;
+
+ let result = obtain_result();
+ assert_eq!(result.as_str(), "wait...(outer)
");
+
+ sleep(Duration::from_millis(50)).await;
+
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#""#
+ );
+
+ gloo_utils::document()
+ .query_selector(".take-a-break2")
+ .unwrap()
+ .unwrap()
+ .dyn_into::()
+ .unwrap()
+ .click();
+
+ sleep(Duration::from_millis(10)).await;
+ let result = obtain_result();
+ assert_eq!(
+ result.as_str(),
+ r#"Take a break!
wait...(inner)
{"Hello, World!"}
}
+}
+
+fn main() {
+ let renderer = Renderer::::new();
+
+ // hydrates everything under body element, removes trailing
+ // elements (if any).
+ renderer.hydrate();
+}
+```
+
Example: [simple\_ssr](https://github.com/yewstack/yew/tree/master/examples/simple_ssr)
+Example: [ssr\_router](https://github.com/yewstack/yew/tree/master/examples/ssr_router)
:::caution
-Server-side rendering is experiemental and currently has no hydration support.
-However, you can still use it to generate static websites.
+Server-side rendering is currently experiemental. If you find a bug, please file
+an issue on [GitHub](https://github.com/yewstack/yew/issues/new?assignees=&labels=bug&template=bug_report.md&title=).
:::