From 84221f55a0aa4d87f33e48dc5d61b4e077e2833a Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Tue, 8 Apr 2025 16:01:21 -0500 Subject: [PATCH] Wait for the suspense boundary above the router to resolve before sending the first streaming chunk (#3891) * Change the suspense streaming context after suspense is resolved in the router * Wait for the suspense context before streaming the first chunk in ssr * forward more response parts * warn * extract the hydration format into a crate * Fix hydration when no data is sent * forward web and server features * Fix suspense that starts on the client * fix use_server_future on the client * Add documentation for fullstack hooks and protocol * downgrade rust edition * fix clippy * fix tests * fix clippy * Fix pure web compile * undo changes to the fullstack router example * fix formatting --- Cargo.lock | 29 +- Cargo.toml | 5 + examples/fullstack-router/src/main.rs | 34 +- packages/core/src/global_context.rs | 8 + packages/core/src/lib.rs | 16 +- packages/core/src/runtime.rs | 9 + packages/core/src/scope_context.rs | 12 +- packages/core/src/suspense/component.rs | 19 +- packages/core/src/suspense/mod.rs | 32 +- packages/fullstack-hooks/Cargo.toml | 29 ++ packages/fullstack-hooks/README.md | 32 ++ packages/fullstack-hooks/src/hooks/mod.rs | 4 + .../src/hooks/server_cached.rs | 17 +- .../src/hooks/server_future.rs | 29 +- packages/fullstack-hooks/src/lib.rs | 7 + packages/fullstack-hooks/src/streaming.rs | 105 +++++ packages/fullstack-protocol/Cargo.toml | 14 + packages/fullstack-protocol/README.md | 3 + packages/fullstack-protocol/src/lib.rs | 401 ++++++++++++++++++ packages/fullstack/Cargo.toml | 7 +- packages/fullstack/src/axum_core.rs | 16 +- packages/fullstack/src/document/mod.rs | 6 + packages/fullstack/src/document/server.rs | 4 +- packages/fullstack/src/document/web.rs | 6 +- packages/fullstack/src/hooks/mod.rs | 2 - packages/fullstack/src/html_storage/mod.rs | 117 ----- .../fullstack/src/html_storage/serialize.rs | 116 ----- packages/fullstack/src/lib.rs | 13 +- packages/fullstack/src/render.rs | 144 +++++-- packages/fullstack/src/serve_config.rs | 6 +- packages/fullstack/src/server_context.rs | 38 +- packages/fullstack/src/streaming.rs | 7 +- packages/hooks/src/lib.rs | 3 + .../hooks/src/use_after_suspense_resolved.rs | 20 + .../playwright-tests/fullstack/src/main.rs | 5 +- .../nested-suspense/src/lib.rs | 3 + .../suspense-carousel/src/main.rs | 2 + .../test-results/.last-run.json | 8 + packages/router/Cargo.toml | 2 + packages/router/src/components/router.rs | 5 + packages/web/Cargo.toml | 4 +- packages/web/src/hydration/deserialize.rs | 161 ------- packages/web/src/hydration/hydrate.rs | 9 +- packages/web/src/hydration/mod.rs | 4 - packages/web/src/lib.rs | 8 +- 45 files changed, 988 insertions(+), 533 deletions(-) create mode 100644 packages/fullstack-hooks/Cargo.toml create mode 100644 packages/fullstack-hooks/README.md create mode 100644 packages/fullstack-hooks/src/hooks/mod.rs rename packages/{fullstack => fullstack-hooks}/src/hooks/server_cached.rs (77%) rename packages/{fullstack => fullstack-hooks}/src/hooks/server_future.rs (85%) create mode 100644 packages/fullstack-hooks/src/lib.rs create mode 100644 packages/fullstack-hooks/src/streaming.rs create mode 100644 packages/fullstack-protocol/Cargo.toml create mode 100644 packages/fullstack-protocol/README.md create mode 100644 packages/fullstack-protocol/src/lib.rs delete mode 100644 packages/fullstack/src/hooks/mod.rs delete mode 100644 packages/fullstack/src/html_storage/mod.rs delete mode 100644 packages/fullstack/src/html_storage/serialize.rs create mode 100644 packages/hooks/src/use_after_suspense_resolved.rs create mode 100644 packages/playwright-tests/test-results/.last-run.json delete mode 100644 packages/web/src/hydration/deserialize.rs diff --git a/Cargo.lock b/Cargo.lock index 42014375f..f77344a3d 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3905,6 +3905,8 @@ dependencies = [ "dioxus-cli-config", "dioxus-desktop", "dioxus-devtools", + "dioxus-fullstack-hooks", + "dioxus-fullstack-protocol", "dioxus-history", "dioxus-interpreter-js", "dioxus-isrg", @@ -3938,6 +3940,30 @@ dependencies = [ "web-sys", ] +[[package]] +name = "dioxus-fullstack-hooks" +version = "0.6.3" +dependencies = [ + "dioxus-core", + "dioxus-fullstack", + "dioxus-fullstack-protocol", + "dioxus-hooks", + "dioxus-signals", + "futures-channel", + "serde", +] + +[[package]] +name = "dioxus-fullstack-protocol" +version = "0.6.3" +dependencies = [ + "base64 0.22.1", + "ciborium", + "dioxus-core", + "serde", + "tracing", +] + [[package]] name = "dioxus-history" version = "0.6.3" @@ -4177,6 +4203,7 @@ dependencies = [ "criterion", "dioxus", "dioxus-cli-config", + "dioxus-fullstack-hooks", "dioxus-history", "dioxus-lib", "dioxus-router-macro", @@ -4291,13 +4318,13 @@ name = "dioxus-web" version = "0.6.3" dependencies = [ "async-trait", - "ciborium", "dioxus", "dioxus-cli-config", "dioxus-core", "dioxus-core-types", "dioxus-devtools", "dioxus-document", + "dioxus-fullstack-protocol", "dioxus-history", "dioxus-html", "dioxus-interpreter-js", diff --git a/Cargo.toml b/Cargo.toml index aa0a8e247..8bcd9c208 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -38,6 +38,8 @@ members = [ "packages/document", "packages/extension", "packages/fullstack", + "packages/fullstack-hooks", + "packages/fullstack-protocol", "packages/generational-box", "packages/history", "packages/hooks", @@ -103,6 +105,7 @@ members = [ "packages/playwright-tests/nested-suspense", "packages/playwright-tests/cli-optimization", "packages/playwright-tests/wasm-split-harness", + "packages/playwright-tests/wasm-split-harness", "packages/playwright-tests/default-features-disabled" ] @@ -142,6 +145,8 @@ dioxus-cli-opt = { path = "packages/cli-opt", version = "0.6.2" } dioxus-devtools = { path = "packages/devtools", version = "0.6.2" } dioxus-devtools-types = { path = "packages/devtools-types", version = "0.6.2" } dioxus-fullstack = { path = "packages/fullstack", version = "0.6.2" } +dioxus-fullstack-hooks = { path = "packages/fullstack-hooks", version = "0.6.3" } +dioxus-fullstack-protocol = { path = "packages/fullstack-protocol", version = "0.6.3" } dioxus_server_macro = { path = "packages/server-macro", version = "0.6.2", default-features = false } dioxus-dx-wire-format = { path = "packages/dx-wire-format", version = "0.6.2" } dioxus-logger = { path = "packages/logger", version = "0.6.2" } diff --git a/examples/fullstack-router/src/main.rs b/examples/fullstack-router/src/main.rs index af691f642..70a9898cf 100644 --- a/examples/fullstack-router/src/main.rs +++ b/examples/fullstack-router/src/main.rs @@ -52,24 +52,24 @@ fn Home() -> Element { let mut text = use_signal(|| "...".to_string()); rsx! { - Link { to: Route::Blog { id: count() }, "Go to blog" } - div { - h1 { "High-Five counter: {count}" } - button { onclick: move |_| count += 1, "Up high!" } - button { onclick: move |_| count -= 1, "Down low!" } - button { - onclick: move |_| async move { - if let Ok(data) = get_server_data().await { - println!("Client received: {}", data); - text.set(data.clone()); - post_server_data(data).await.unwrap(); - } - }, - "Run server function!" - } - "Server said: {text}" + Link { to: Route::Blog { id: count() }, "Go to blog" } + div { + h1 { "High-Five counter: {count}" } + button { onclick: move |_| count += 1, "Up high!" } + button { onclick: move |_| count -= 1, "Down low!" } + button { + onclick: move |_| async move { + if let Ok(data) = get_server_data().await { + println!("Client received: {}", data); + text.set(data.clone()); + post_server_data(data).await.unwrap(); + } + }, + "Run server function!" } - } + "Server said: {text}" + } + } } #[server(PostServerData)] diff --git a/packages/core/src/global_context.rs b/packages/core/src/global_context.rs index 73515dcb0..a8289151b 100644 --- a/packages/core/src/global_context.rs +++ b/packages/core/src/global_context.rs @@ -1,3 +1,4 @@ +use crate::prelude::SuspenseContext; use crate::runtime::RuntimeError; use crate::{innerlude::SuspendedFuture, runtime::Runtime, CapturedError, Element, ScopeId, Task}; use std::future::Future; @@ -40,6 +41,13 @@ pub fn throw_error(error: impl Into + 'static) { .throw_error(error) } +/// Get the suspense context the current scope is in +pub fn suspense_context() -> Option { + current_scope_id() + .unwrap_or_else(|e| panic!("{}", e)) + .suspense_context() +} + /// Consume context from the current scope pub fn try_consume_context() -> Option { Runtime::with_current_scope(|cx| cx.consume_context::()) diff --git a/packages/core/src/lib.rs b/packages/core/src/lib.rs index 97c5b0d94..3407814ab 100644 --- a/packages/core/src/lib.rs +++ b/packages/core/src/lib.rs @@ -96,14 +96,14 @@ pub mod prelude { fc_to_builder, generation, has_context, needs_update, needs_update_any, parent_scope, provide_context, provide_error_boundary, provide_root_context, queue_effect, remove_future, schedule_update, schedule_update_any, spawn, spawn_forever, spawn_isomorphic, suspend, - throw_error, try_consume_context, use_after_render, use_before_render, use_drop, use_hook, - use_hook_with_cleanup, with_owner, AnyValue, Attribute, Callback, Component, - ComponentFunction, Context, Element, ErrorBoundary, ErrorContext, Event, EventHandler, - Fragment, HasAttributes, IntoAttributeValue, IntoDynNode, OptionStringFromMarker, - Properties, ReactiveContext, RenderError, Runtime, RuntimeGuard, ScopeId, ScopeState, - SuperFrom, SuperInto, SuspendedFuture, SuspenseBoundary, SuspenseBoundaryProps, - SuspenseContext, SuspenseExtension, Task, Template, TemplateAttribute, TemplateNode, VNode, - VNodeInner, VirtualDom, + suspense_context, throw_error, try_consume_context, use_after_render, use_before_render, + use_drop, use_hook, use_hook_with_cleanup, with_owner, AnyValue, Attribute, Callback, + Component, ComponentFunction, Context, Element, ErrorBoundary, ErrorContext, Event, + EventHandler, Fragment, HasAttributes, IntoAttributeValue, IntoDynNode, + OptionStringFromMarker, Properties, ReactiveContext, RenderError, Runtime, RuntimeGuard, + ScopeId, ScopeState, SuperFrom, SuperInto, SuspendedFuture, SuspenseBoundary, + SuspenseBoundaryProps, SuspenseContext, SuspenseExtension, Task, Template, + TemplateAttribute, TemplateNode, VNode, VNodeInner, VirtualDom, }; } diff --git a/packages/core/src/runtime.rs b/packages/core/src/runtime.rs index d557cd2a0..1855ea09d 100644 --- a/packages/core/src/runtime.rs +++ b/packages/core/src/runtime.rs @@ -116,6 +116,15 @@ impl Runtime { result } + /// Run a closure with the rendering flag set to false + pub(crate) fn while_not_rendering(&self, f: impl FnOnce() -> T) -> T { + let previous = self.rendering.get(); + self.rendering.set(false); + let result = f(); + self.rendering.set(previous); + result + } + /// Create a scope context. This slab is synchronized with the scope slab. pub(crate) fn create_scope(&self, context: Scope) { let id = context.id; diff --git a/packages/core/src/scope_context.rs b/packages/core/src/scope_context.rs index 89e31c438..d57b9706d 100644 --- a/packages/core/src/scope_context.rs +++ b/packages/core/src/scope_context.rs @@ -447,7 +447,12 @@ impl Scope { let mut hooks = self.hooks.try_borrow_mut().expect("The hook list is already borrowed: This error is likely caused by trying to use a hook inside a hook which violates the rules of hooks."); if cur_hook >= hooks.len() { - hooks.push(Box::new(initializer())); + Runtime::with(|rt| { + rt.while_not_rendering(|| { + hooks.push(Box::new(initializer())); + }); + }) + .unwrap() } self.use_hook_inner::(hooks, cur_hook) @@ -620,4 +625,9 @@ impl ScopeId { pub fn throw_error(self, error: impl Into + 'static) { throw_into(error, self) } + + /// Get the suspense context the current scope is in + pub fn suspense_context(&self) -> Option { + Runtime::with_scope(*self, |cx| cx.suspense_boundary.suspense_context().cloned()).unwrap() + } } diff --git a/packages/core/src/suspense/component.rs b/packages/core/src/suspense/component.rs index cd9626138..8e3eb62a4 100644 --- a/packages/core/src/suspense/component.rs +++ b/packages/core/src/suspense/component.rs @@ -360,7 +360,7 @@ impl SuspenseBoundaryProps { SuspenseContext::downcast_suspense_boundary_from_scope(&dom.runtime, scope_id) .unwrap(); suspense_context.take_suspended_nodes(); - mark_suspense_resolved(dom, scope_id); + mark_suspense_resolved(&suspense_context, dom, scope_id); nodes_created }; @@ -437,6 +437,9 @@ impl SuspenseBoundaryProps { let props = Self::downcast_from_props(&mut *scope_state.props).unwrap(); props.children.clone_from(&children); scope_state.last_rendered_node = Some(children); + + // Run any closures that were waiting for the suspense to resolve + suspense_context.run_resolved_closures(&dom.runtime); }) } @@ -571,7 +574,7 @@ impl SuspenseBoundaryProps { // Set the last rendered node to the new children dom.scopes[scope_id.0].last_rendered_node = Some(new_children); - mark_suspense_resolved(dom, scope_id); + mark_suspense_resolved(&suspense_context, dom, scope_id); } } }) @@ -579,8 +582,14 @@ impl SuspenseBoundaryProps { } /// Move to a resolved suspense state -fn mark_suspense_resolved(dom: &mut VirtualDom, scope_id: ScopeId) { +fn mark_suspense_resolved( + suspense_context: &SuspenseContext, + dom: &mut VirtualDom, + scope_id: ScopeId, +) { dom.resolved_scopes.push(scope_id); + // Run any closures that were waiting for the suspense to resolve + suspense_context.run_resolved_closures(&dom.runtime); } /// Move from a resolved suspense state to an suspended state @@ -590,12 +599,12 @@ fn un_resolve_suspense(dom: &mut VirtualDom, scope_id: ScopeId) { impl SuspenseContext { /// Run a closure under a suspense boundary - pub fn under_suspense_boundary(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O { + pub(crate) fn under_suspense_boundary(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O { runtime.with_suspense_location(SuspenseLocation::UnderSuspense(self.clone()), f) } /// Run a closure under a suspense placeholder - pub fn in_suspense_placeholder(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O { + pub(crate) fn in_suspense_placeholder(&self, runtime: &Runtime, f: impl FnOnce() -> O) -> O { runtime.with_suspense_location(SuspenseLocation::InSuspensePlaceholder(self.clone()), f) } diff --git a/packages/core/src/suspense/mod.rs b/packages/core/src/suspense/mod.rs index 082d51722..ca44442f7 100644 --- a/packages/core/src/suspense/mod.rs +++ b/packages/core/src/suspense/mod.rs @@ -102,6 +102,7 @@ impl SuspenseContext { id: Cell::new(ScopeId::ROOT), suspended_nodes: Default::default(), frozen: Default::default(), + after_suspense_resolved: Default::default(), }), } } @@ -184,10 +185,26 @@ impl SuspenseContext { .find_map(|task| task.suspense_placeholder()) .map(std::result::Result::Ok) } + + /// Run a closure after suspense is resolved + pub fn after_suspense_resolved(&self, callback: impl FnOnce() + 'static) { + let mut closures = self.inner.after_suspense_resolved.borrow_mut(); + closures.push(Box::new(callback)); + } + + /// Run all closures that were queued to run after suspense is resolved + pub(crate) fn run_resolved_closures(&self, runtime: &Runtime) { + runtime.while_not_rendering(|| { + self.inner + .after_suspense_resolved + .borrow_mut() + .drain(..) + .for_each(|f| f()); + }) + } } /// A boundary that will capture any errors from child components -#[derive(Debug)] pub struct SuspenseBoundaryInner { suspended_tasks: RefCell>, id: Cell, @@ -195,6 +212,19 @@ pub struct SuspenseBoundaryInner { suspended_nodes: RefCell>, /// On the server, you can only resolve a suspense boundary once. This is used to track if the suspense boundary has been resolved and if it should be frozen frozen: Cell, + /// Closures queued to run after the suspense boundary is resolved + after_suspense_resolved: RefCell>>, +} + +impl Debug for SuspenseBoundaryInner { + fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { + f.debug_struct("SuspenseBoundaryInner") + .field("suspended_tasks", &self.suspended_tasks) + .field("id", &self.id) + .field("suspended_nodes", &self.suspended_nodes) + .field("frozen", &self.frozen) + .finish() + } } /// Provides context methods to [`Result`] to show loading indicators for suspended results diff --git a/packages/fullstack-hooks/Cargo.toml b/packages/fullstack-hooks/Cargo.toml new file mode 100644 index 000000000..bd0219fa5 --- /dev/null +++ b/packages/fullstack-hooks/Cargo.toml @@ -0,0 +1,29 @@ +[package] +name = "dioxus-fullstack-hooks" +authors = ["Jonathan Kelley", "Evan Almloff"] +version = { workspace = true } +edition = "2021" +description = "Hooks for serializing futures, values in dioxus-fullstack and other utilities" +license = "MIT OR Apache-2.0" +repository = "https://github.com/DioxusLabs/dioxus/" +homepage = "https://dioxuslabs.com" +keywords = ["web", "gui", "server"] +resolver = "2" + +[dependencies] +dioxus-core = { workspace = true } +dioxus-signals = { workspace = true } +dioxus-hooks = { workspace = true } +dioxus-fullstack-protocol = { workspace = true } +futures-channel = { workspace = true } +serde = { workspace = true } + +[dev-dependencies] +dioxus-fullstack = { workspace = true } + +[features] +web = [] +server = [] + +[package.metadata.docs.rs] +cargo-args = ["-Zunstable-options", "-Zrustdoc-scrape-examples"] diff --git a/packages/fullstack-hooks/README.md b/packages/fullstack-hooks/README.md new file mode 100644 index 000000000..f025fd32c --- /dev/null +++ b/packages/fullstack-hooks/README.md @@ -0,0 +1,32 @@ +# Dioxus Fullstack Hooks + +Dioxus fullstack hooks provides hooks and contexts for [`dioxus-fullstack`](https://crates.io/crates/dioxus-fullstack). Libraries that need to integrate with dioxus-fullstack should rely on this crate instead of the renderer for quicker build times. + +## Usage + +To start using this crate, you can run the following command: + +```bash +cargo add dioxus-fullstack-hooks +``` + +Then you can use hooks like `use_server_future` in your components: + +```rust +use dioxus::prelude::*; +async fn fetch_article(id: u32) -> String { + format!("Article {}", id) +} + +fn App() -> Element { + let mut article_id = use_signal(|| 0); + // `use_server_future` will spawn a task that runs on the server and serializes the result to send to the client. + // The future will rerun any time the + // Since we bubble up the suspense with `?`, the server will wait for the future to resolve before rendering + let article = use_server_future(move || fetch_article(article_id()))?; + + rsx! { + "{article().unwrap()}" + } +} +``` diff --git a/packages/fullstack-hooks/src/hooks/mod.rs b/packages/fullstack-hooks/src/hooks/mod.rs new file mode 100644 index 000000000..4de7ac967 --- /dev/null +++ b/packages/fullstack-hooks/src/hooks/mod.rs @@ -0,0 +1,4 @@ +mod server_cached; +pub use server_cached::*; +mod server_future; +pub use server_future::*; diff --git a/packages/fullstack/src/hooks/server_cached.rs b/packages/fullstack-hooks/src/hooks/server_cached.rs similarity index 77% rename from packages/fullstack/src/hooks/server_cached.rs rename to packages/fullstack-hooks/src/hooks/server_cached.rs index c651a155e..06f2e8a20 100644 --- a/packages/fullstack/src/hooks/server_cached.rs +++ b/packages/fullstack-hooks/src/hooks/server_cached.rs @@ -1,4 +1,5 @@ -use dioxus_lib::prelude::use_hook; +use dioxus_core::prelude::use_hook; +use dioxus_fullstack_protocol::SerializeContextEntry; use serde::{de::DeserializeOwned, Serialize}; /// This allows you to send data from the server to the client. The data is serialized into the HTML on the server and hydrated on the client. @@ -32,19 +33,21 @@ pub(crate) fn server_cached( value: impl FnOnce() -> O, #[allow(unused)] location: &'static std::panic::Location<'static>, ) -> O { + let serialize = dioxus_fullstack_protocol::serialize_context(); + #[allow(unused)] + let entry: SerializeContextEntry = serialize.create_entry(); #[cfg(feature = "server")] { - let serialize = crate::html_storage::serialize_context(); let data = value(); - serialize.push(&data, location); + entry.insert(&data, location); data } #[cfg(all(not(feature = "server"), feature = "web"))] { - dioxus_web::take_server_data() - .ok() - .flatten() - .unwrap_or_else(value) + match entry.get() { + Ok(value) => value, + Err(_) => value(), + } } #[cfg(not(any(feature = "server", feature = "web")))] { diff --git a/packages/fullstack/src/hooks/server_future.rs b/packages/fullstack-hooks/src/hooks/server_future.rs similarity index 85% rename from packages/fullstack/src/hooks/server_future.rs rename to packages/fullstack-hooks/src/hooks/server_future.rs index e2abaeebc..243dfa4cc 100644 --- a/packages/fullstack/src/hooks/server_future.rs +++ b/packages/fullstack-hooks/src/hooks/server_future.rs @@ -1,4 +1,6 @@ -use dioxus_lib::prelude::*; +use dioxus_core::prelude::{suspend, use_hook, RenderError}; +use dioxus_hooks::*; +use dioxus_signals::Readable; use serde::{de::DeserializeOwned, Serialize}; use std::future::Future; @@ -64,27 +66,24 @@ where T: Serialize + DeserializeOwned + 'static, F: Future + 'static, { - #[cfg(feature = "server")] - let serialize_context = crate::html_storage::use_serialize_context(); + let serialize_context = use_hook(dioxus_fullstack_protocol::serialize_context); // We always create a storage entry, even if the data isn't ready yet to make it possible to deserialize pending server futures on the client - #[cfg(feature = "server")] - let server_storage_entry = use_hook(|| serialize_context.create_entry()); + #[allow(unused)] + let storage_entry: dioxus_fullstack_protocol::SerializeContextEntry = + use_hook(|| serialize_context.create_entry()); #[cfg(feature = "server")] let caller = std::panic::Location::caller(); // If this is the first run and we are on the web client, the data might be cached #[cfg(feature = "web")] - let initial_web_result = use_hook(|| { - std::rc::Rc::new(std::cell::RefCell::new(Some( - dioxus_web::take_server_data::(), - ))) - }); + let initial_web_result = + use_hook(|| std::rc::Rc::new(std::cell::RefCell::new(Some(storage_entry.get())))); let resource = use_resource(move || { #[cfg(feature = "server")] - let serialize_context = serialize_context.clone(); + let storage_entry = storage_entry.clone(); let user_fut = future(); @@ -97,10 +96,12 @@ where #[cfg(feature = "web")] match initial_web_result.take() { // The data was deserialized successfully from the server - Some(Ok(Some(o))) => return o, + Some(Ok(o)) => return o, // The data is still pending from the server. Don't try to resolve it on the client - Some(Ok(None)) => std::future::pending::<()>().await, + Some(Err(dioxus_fullstack_protocol::TakeDataError::DataPending)) => { + std::future::pending::<()>().await + } // The data was not available on the server, rerun the future Some(Err(_)) => {} @@ -114,7 +115,7 @@ where // If this is the first run and we are on the server, cache the data in the slot we reserved for it #[cfg(feature = "server")] - serialize_context.insert(server_storage_entry, &out, caller); + storage_entry.insert(&out, caller); out } diff --git a/packages/fullstack-hooks/src/lib.rs b/packages/fullstack-hooks/src/lib.rs new file mode 100644 index 000000000..e83a83ebf --- /dev/null +++ b/packages/fullstack-hooks/src/lib.rs @@ -0,0 +1,7 @@ +#![warn(missing_docs)] +#![doc = include_str!("../README.md")] + +mod hooks; +pub use hooks::*; +mod streaming; +pub use streaming::*; diff --git a/packages/fullstack-hooks/src/streaming.rs b/packages/fullstack-hooks/src/streaming.rs new file mode 100644 index 000000000..5f3e3c011 --- /dev/null +++ b/packages/fullstack-hooks/src/streaming.rs @@ -0,0 +1,105 @@ +use dioxus_core::prelude::try_consume_context; +use dioxus_signals::{Readable, Signal, Writable}; + +/// The status of the streaming response +#[derive(Clone, Copy, Debug, PartialEq)] +pub enum StreamingStatus { + /// The initial chunk is still being rendered. The http response parts can still be modified with + /// [DioxusServerContext::response_parts_mut](https://docs.rs/dioxus-fullstack/0.6.3/dioxus_fullstack/prelude/struct.DioxusServerContext.html#method.response_parts_mut). + RenderingInitialChunk, + /// The initial chunk has been committed and the response is now streaming. The http response parts + /// have already been sent to the client and can no longer be modified. + InitialChunkCommitted, +} + +/// The context dioxus fullstack provides for the status of streaming responses on the server +#[derive(Clone, Copy, Debug, PartialEq)] +pub struct StreamingContext { + current_status: Signal, +} + +impl Default for StreamingContext { + fn default() -> Self { + Self::new() + } +} + +impl StreamingContext { + /// Create a new streaming context. You should not need to call this directly. Dioxus fullstack will + /// provide this context for you. + pub fn new() -> Self { + Self { + current_status: Signal::new(StreamingStatus::RenderingInitialChunk), + } + } + + /// Commit the initial chunk of the response. This will be called automatically if you are using the + /// dioxus router when the suspense boundary above the router is resolved. Otherwise, you will need + /// to call this manually to start the streaming part of the response. + /// + /// Once this method has been called, the http response parts can no longer be modified. + pub fn commit_initial_chunk(&mut self) { + self.current_status + .set(StreamingStatus::InitialChunkCommitted); + } + + /// Get the current status of the streaming response. This method is reactive and will cause + /// the current reactive context to rerun when the status changes. + pub fn current_status(&self) -> StreamingStatus { + *self.current_status.read() + } +} + +/// Commit the initial chunk of the response. This will be called automatically if you are using the +/// dioxus router when the suspense boundary above the router is resolved. Otherwise, you will need +/// to call this manually to start the streaming part of the response. +/// +/// On the client, this will do nothing. +/// +/// # Example +/// ```rust, no_run +/// # use dioxus::prelude::*; +/// # use dioxus_fullstack_hooks::*; +/// # fn Children() -> Element { unimplemented!() } +/// fn App() -> Element { +/// // This will start streaming immediately after the current render is complete. +/// use_hook(commit_initial_chunk); +/// +/// rsx! { Children {} } +/// } +/// ``` +pub fn commit_initial_chunk() { + if let Some(mut streaming) = try_consume_context::() { + streaming.commit_initial_chunk(); + } +} + +/// Get the current status of the streaming response. This method is reactive and will cause +/// the current reactive context to rerun when the status changes. +/// +/// On the client, this will always return `StreamingStatus::InitialChunkCommitted`. +/// +/// # Example +/// ```rust, no_run +/// # use dioxus::prelude::*; +/// # use dioxus_fullstack_hooks::*; +/// #[component] +/// fn MetaTitle(title: String) -> Element { +/// // If streaming has already started, warn the user that the meta tag will not show +/// // up in the initial chunk. +/// use_hook(|| { +/// if current_status() == StreamingStatus::InitialChunkCommitted { +/// log::warn!("Since `MetaTitle` was rendered after the initial chunk was committed, the meta tag will not show up in the head without javascript enabled."); +/// } +/// }); +/// +/// rsx! { meta { property: "og:title", content: title } } +/// } +/// ``` +pub fn current_status() -> StreamingStatus { + if let Some(streaming) = try_consume_context::() { + streaming.current_status() + } else { + StreamingStatus::InitialChunkCommitted + } +} diff --git a/packages/fullstack-protocol/Cargo.toml b/packages/fullstack-protocol/Cargo.toml new file mode 100644 index 000000000..60a859241 --- /dev/null +++ b/packages/fullstack-protocol/Cargo.toml @@ -0,0 +1,14 @@ +[package] +name = "dioxus-fullstack-protocol" +edition = "2021" +version.workspace = true + +[dependencies] +ciborium.workspace = true +dioxus-core = { workspace = true } +base64 = { workspace = true } +serde = { workspace = true } +tracing.workspace = true + +[features] +web = [] \ No newline at end of file diff --git a/packages/fullstack-protocol/README.md b/packages/fullstack-protocol/README.md new file mode 100644 index 000000000..cd0f68c0c --- /dev/null +++ b/packages/fullstack-protocol/README.md @@ -0,0 +1,3 @@ +# Fullstack Protocol + +Dioxus-fullstack-protocol is the internal protocol the dioxus web and server renderers use to communicate with each other in dioxus fullstack. It is used to send futures and values from the server to the client during fullstack rendering. diff --git a/packages/fullstack-protocol/src/lib.rs b/packages/fullstack-protocol/src/lib.rs new file mode 100644 index 000000000..eb9e0f332 --- /dev/null +++ b/packages/fullstack-protocol/src/lib.rs @@ -0,0 +1,401 @@ +#![warn(missing_docs)] +#![doc = include_str!("../README.md")] + +use base64::Engine; +use dioxus_core::CapturedError; +use serde::Serialize; +use std::{cell::RefCell, io::Cursor, rc::Rc}; + +#[cfg(feature = "web")] +thread_local! { + static CONTEXT: RefCell> = const { RefCell::new(None) }; +} + +/// Data shared between the frontend and the backend for hydration +/// of server functions. +#[derive(Default, Clone)] +pub struct HydrationContext { + #[cfg(feature = "web")] + /// Is resolving suspense done on the client + suspense_finished: bool, + data: Rc>, +} + +impl HydrationContext { + /// Create a new serialize context from the serialized data + pub fn from_serialized( + data: &[u8], + debug_types: Option>, + debug_locations: Option>, + ) -> Self { + Self { + #[cfg(feature = "web")] + suspense_finished: false, + data: Rc::new(RefCell::new(HTMLData::from_serialized( + data, + debug_types, + debug_locations, + ))), + } + } + + /// Serialize the data in the context to be sent to the client + pub fn serialized(&self) -> SerializedHydrationData { + self.data.borrow().serialized() + } + + /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready. + pub fn create_entry(&self) -> SerializeContextEntry { + let entry_index = self.data.borrow_mut().create_entry(); + + SerializeContextEntry { + index: entry_index, + context: self.clone(), + phantom: std::marker::PhantomData, + } + } + + /// Get the entry for the error in the suspense boundary + pub fn error_entry(&self) -> SerializeContextEntry> { + // The first entry is reserved for the error + let entry_index = self.data.borrow_mut().create_entry_with_id(0); + + SerializeContextEntry { + index: entry_index, + context: self.clone(), + phantom: std::marker::PhantomData, + } + } + + /// Extend this data with the data from another [`HydrationContext`] + pub fn extend(&self, other: &Self) { + self.data.borrow_mut().extend(&other.data.borrow()); + } + + #[cfg(feature = "web")] + /// Run a closure inside of this context + pub fn in_context(&self, f: impl FnOnce() -> T) -> T { + CONTEXT.with(|context| { + let old = context.borrow().clone(); + *context.borrow_mut() = Some(self.clone()); + let result = f(); + *context.borrow_mut() = old; + result + }) + } + + pub(crate) fn insert( + &self, + id: usize, + value: &T, + location: &'static std::panic::Location<'static>, + ) { + self.data.borrow_mut().insert(id, value, location); + } + + pub(crate) fn get( + &self, + id: usize, + ) -> Result { + // If suspense is finished on the client, we can assume that the data is available + #[cfg(feature = "web")] + if self.suspense_finished { + return Err(TakeDataError::DataNotAvailable); + } + self.data.borrow().get(id) + } +} + +/// An entry into the serialized context. The order entries are created in must be consistent +/// between the server and the client. +pub struct SerializeContextEntry { + /// The index this context will be inserted into inside the serialize context + index: usize, + /// The context this entry is associated with + context: HydrationContext, + phantom: std::marker::PhantomData, +} + +impl Clone for SerializeContextEntry { + fn clone(&self) -> Self { + Self { + index: self.index, + context: self.context.clone(), + phantom: std::marker::PhantomData, + } + } +} + +impl SerializeContextEntry { + /// Insert data into an entry that was created with [`SerializeContext::create_entry`] + pub fn insert(self, value: &T, location: &'static std::panic::Location<'static>) + where + T: Serialize, + { + self.context.insert(self.index, value, location); + } + + /// Grab the data from the serialize context + pub fn get(&self) -> Result + where + T: serde::de::DeserializeOwned, + { + self.context.get(self.index) + } +} + +/// Get or insert the current serialize context. On the client, the hydration context this returns +/// will always return `TakeDataError::DataNotAvailable` if hydration of the current chunk is finished. +pub fn serialize_context() -> HydrationContext { + #[cfg(feature = "web")] + // On the client, the hydration logic provides the context in a global + if let Some(current_context) = CONTEXT.with(|context| context.borrow().clone()) { + current_context + } else { + // If the context is not set, then suspense is not active + HydrationContext { + suspense_finished: true, + ..Default::default() + } + } + #[cfg(not(feature = "web"))] + { + // On the server each scope creates the context lazily + dioxus_core::prelude::has_context() + .unwrap_or_else(|| dioxus_core::prelude::provide_context(HydrationContext::default())) + } +} + +pub(crate) struct HTMLData { + /// The position of the cursor in the data. This is only used on the client + pub(crate) cursor: usize, + /// The data required for hydration + pub data: Vec>>, + /// The types of each serialized data + /// + /// NOTE: we don't store this in the main data vec because we don't want to include it in + /// release mode and we can't assume both the client and server are built with debug assertions + /// matching + #[cfg(debug_assertions)] + pub debug_types: Vec>, + /// The locations of each serialized data + #[cfg(debug_assertions)] + pub debug_locations: Vec>, +} + +impl Default for HTMLData { + fn default() -> Self { + Self { + cursor: 1, + data: Vec::new(), + #[cfg(debug_assertions)] + debug_types: Vec::new(), + #[cfg(debug_assertions)] + debug_locations: Vec::new(), + } + } +} + +impl HTMLData { + fn from_serialized( + data: &[u8], + debug_types: Option>, + debug_locations: Option>, + ) -> Self { + let data = ciborium::from_reader(Cursor::new(data)).unwrap(); + Self { + cursor: 1, + data, + #[cfg(debug_assertions)] + debug_types: debug_types + .unwrap_or_default() + .into_iter() + .map(Some) + .collect(), + #[cfg(debug_assertions)] + debug_locations: debug_locations + .unwrap_or_default() + .into_iter() + .map(Some) + .collect(), + } + } + + /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready. + fn create_entry(&mut self) -> usize { + let id = self.cursor; + self.cursor += 1; + self.create_entry_with_id(id) + } + + fn create_entry_with_id(&mut self, id: usize) -> usize { + while id + 1 > self.data.len() { + self.data.push(None); + #[cfg(debug_assertions)] + { + self.debug_types.push(None); + self.debug_locations.push(None); + } + } + id + } + + /// Insert data into an entry that was created with [`Self::create_entry`] + fn insert( + &mut self, + id: usize, + value: &T, + location: &'static std::panic::Location<'static>, + ) { + let mut serialized = Vec::new(); + ciborium::into_writer(value, &mut serialized).unwrap(); + self.data[id] = Some(serialized); + #[cfg(debug_assertions)] + { + self.debug_types[id] = Some(std::any::type_name::().to_string()); + self.debug_locations[id] = Some(location.to_string()); + } + } + + /// Get the data from the serialize context + fn get(&self, index: usize) -> Result { + if index >= self.data.len() { + tracing::trace!( + "Tried to take more data than was available, len: {}, index: {}; This is normal if the server function was started on the client, but may indicate a bug if the server function result should be deserialized from the server", + self.data.len(), + index + ); + return Err(TakeDataError::DataNotAvailable); + } + let bytes = self.data[index].as_ref(); + match bytes { + Some(bytes) => match ciborium::from_reader(Cursor::new(bytes)) { + Ok(x) => Ok(x), + Err(err) => { + #[cfg(debug_assertions)] + { + let debug_type = self.debug_types.get(index); + let debug_locations = self.debug_locations.get(index); + + if let (Some(Some(debug_type)), Some(Some(debug_locations))) = + (debug_type, debug_locations) + { + let client_type = std::any::type_name::(); + let client_location = std::panic::Location::caller(); + // We we have debug types and a location, we can provide a more helpful error message + tracing::error!( + "Error deserializing data: {err:?}\n\nThis type was serialized on the server at {debug_locations} with the type name {debug_type}. The client failed to deserialize the type {client_type} at {client_location}.", + ); + return Err(TakeDataError::DeserializationError(err)); + } + } + // Otherwise, just log the generic deserialization error + tracing::error!("Error deserializing data: {:?}", err); + Err(TakeDataError::DeserializationError(err)) + } + }, + None => Err(TakeDataError::DataPending), + } + } + + /// Extend this data with the data from another [`HTMLData`] + pub(crate) fn extend(&mut self, other: &Self) { + // Make sure this vectors error entry exists even if it is empty + if self.data.is_empty() { + self.data.push(None); + #[cfg(debug_assertions)] + { + self.debug_types.push(None); + self.debug_locations.push(None); + } + } + + let mut other_data_iter = other.data.iter().cloned(); + #[cfg(debug_assertions)] + let mut other_debug_types_iter = other.debug_types.iter().cloned(); + #[cfg(debug_assertions)] + let mut other_debug_locations_iter = other.debug_locations.iter().cloned(); + + // Merge the error entry from the other context + if let Some(Some(other_error)) = other_data_iter.next() { + self.data[0] = Some(other_error.clone()); + #[cfg(debug_assertions)] + { + self.debug_types[0] = other_debug_types_iter.next().unwrap_or(None); + self.debug_locations[0] = other_debug_locations_iter.next().unwrap_or(None); + } + } + + // Don't copy the error from the other context + self.data.extend(other_data_iter); + #[cfg(debug_assertions)] + { + self.debug_types.extend(other_debug_types_iter); + self.debug_locations.extend(other_debug_locations_iter); + } + } + + /// Encode data as base64. This is intended to be used in the server to send data to the client. + pub(crate) fn serialized(&self) -> SerializedHydrationData { + let mut serialized = Vec::new(); + ciborium::into_writer(&self.data, &mut serialized).unwrap(); + + let data = base64::engine::general_purpose::STANDARD.encode(serialized); + + let format_js_list_of_strings = |list: &[Option]| { + let body = list + .iter() + .map(|s| match s { + Some(s) => format!(r#""{s}""#), + None => r#""unknown""#.to_string(), + }) + .collect::>() + .join(","); + format!("[{}]", body) + }; + + SerializedHydrationData { + data, + #[cfg(debug_assertions)] + debug_types: format_js_list_of_strings(&self.debug_types), + #[cfg(debug_assertions)] + debug_locations: format_js_list_of_strings(&self.debug_locations), + } + } +} + +/// Data that was serialized on the server for hydration on the client. This includes +/// extra information about the types and sources of the serialized data in debug mode +pub struct SerializedHydrationData { + /// The base64 encoded serialized data + pub data: String, + /// A list of the types of each serialized data + #[cfg(debug_assertions)] + pub debug_types: String, + /// A list of the locations of each serialized data + #[cfg(debug_assertions)] + pub debug_locations: String, +} + +/// An error that can occur when trying to take data from the server +#[derive(Debug)] +pub enum TakeDataError { + /// Deserializing the data failed + DeserializationError(ciborium::de::Error), + /// No data was available + DataNotAvailable, + /// The server serialized a placeholder for the data, but it isn't available yet + DataPending, +} + +impl std::fmt::Display for TakeDataError { + fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { + match self { + Self::DeserializationError(e) => write!(f, "DeserializationError: {}", e), + Self::DataNotAvailable => write!(f, "DataNotAvailable"), + Self::DataPending => write!(f, "DataPending"), + } + } +} + +impl std::error::Error for TakeDataError {} diff --git a/packages/fullstack/Cargo.toml b/packages/fullstack/Cargo.toml index d63f50f8f..b192cb5f7 100644 --- a/packages/fullstack/Cargo.toml +++ b/packages/fullstack/Cargo.toml @@ -25,7 +25,9 @@ generational-box = { workspace = true } # Dioxus + SSR dioxus-ssr = { workspace = true, optional = true } dioxus-isrg = { workspace = true, optional = true } -dioxus-router = { workspace = true, optional = true } +dioxus-router = { workspace = true, features = ["streaming"], optional = true } +dioxus-fullstack-hooks = { workspace = true } +dioxus-fullstack-protocol = { workspace = true } hyper = { workspace = true, optional = true } http = { workspace = true, optional = true } @@ -83,7 +85,7 @@ devtools = ["dioxus-web?/devtools", "dep:dioxus-devtools"] mounted = ["dioxus-web?/mounted"] file_engine = ["dioxus-web?/file_engine"] document = ["dioxus-web?/document"] -web = ["dep:dioxus-web", "dep:web-sys"] +web = ["dep:dioxus-web", "dep:web-sys", "dioxus-fullstack-hooks/web"] desktop = ["dep:dioxus-desktop", "server_fn/reqwest", "dioxus_server_macro/reqwest"] mobile = ["dep:dioxus-mobile", "server_fn/reqwest", "dioxus_server_macro/reqwest"] default-tls = ["server_fn/default-tls"] @@ -103,6 +105,7 @@ axum = [ server = [ "server_fn/ssr", "dioxus_server_macro/server", + "dioxus-fullstack-hooks/server", "dep:tokio", "dep:tokio-util", "dep:tokio-stream", diff --git a/packages/fullstack/src/axum_core.rs b/packages/fullstack/src/axum_core.rs index 162b6ada1..ba752d98e 100644 --- a/packages/fullstack/src/axum_core.rs +++ b/packages/fullstack/src/axum_core.rs @@ -202,8 +202,7 @@ async fn handle_server_fns_inner( } // apply the response parts from the server context to the response - let mut res_options = server_context.response_parts_mut(); - res.headers_mut().extend(res_options.headers.drain()); + server_context.send_response(&mut res); Ok(res) } else { @@ -237,16 +236,6 @@ pub(crate) fn add_server_context( } } -fn apply_request_parts_to_response( - headers: hyper::header::HeaderMap, - response: &mut axum::response::Response, -) { - let mut_headers = response.headers_mut(); - for (key, value) in headers.iter() { - mut_headers.insert(key, value.clone()); - } -} - /// State used by [`render_handler`] to render a dioxus component with axum #[derive(Clone)] pub struct RenderHandleState { @@ -367,8 +356,7 @@ pub async fn render_handler( Ok((freshness, rx)) => { let mut response = axum::response::Html::from(Body::from_stream(rx)).into_response(); freshness.write(response.headers_mut()); - let headers = server_context.response_parts().headers.clone(); - apply_request_parts_to_response(headers, &mut response); + server_context.send_response(&mut response); Result::, StatusCode>::Ok(response) } Err(SSRError::Incremental(e)) => { diff --git a/packages/fullstack/src/document/mod.rs b/packages/fullstack/src/document/mod.rs index 173b58b97..153cb0d85 100644 --- a/packages/fullstack/src/document/mod.rs +++ b/packages/fullstack/src/document/mod.rs @@ -2,7 +2,13 @@ #[cfg(feature = "server")] pub mod server; +use dioxus_fullstack_protocol::SerializeContextEntry; #[cfg(feature = "server")] pub use server::ServerDocument; #[cfg(all(feature = "web", feature = "document"))] pub mod web; + +#[allow(unused)] +pub(crate) fn head_element_hydration_entry() -> SerializeContextEntry { + dioxus_fullstack_protocol::serialize_context().create_entry() +} diff --git a/packages/fullstack/src/document/server.rs b/packages/fullstack/src/document/server.rs index 067dc1889..ab7afa2bb 100644 --- a/packages/fullstack/src/document/server.rs +++ b/packages/fullstack/src/document/server.rs @@ -64,8 +64,8 @@ impl ServerDocument { // We only serialize the head elements if the web document feature is enabled #[cfg(feature = "document")] { - let serialize = crate::html_storage::serialize_context(); - serialize.push(&!self.0.borrow().streaming, std::panic::Location::caller()); + super::head_element_hydration_entry() + .insert(&!self.0.borrow().streaming, std::panic::Location::caller()); } } } diff --git a/packages/fullstack/src/document/web.rs b/packages/fullstack/src/document/web.rs index 27e9d4ed6..c57cb17ee 100644 --- a/packages/fullstack/src/document/web.rs +++ b/packages/fullstack/src/document/web.rs @@ -4,10 +4,12 @@ use dioxus_lib::{document::*, prelude::queue_effect}; use dioxus_web::WebDocument; +use super::head_element_hydration_entry; + fn head_element_written_on_server() -> bool { - dioxus_web::take_server_data() + head_element_hydration_entry() + .get() .ok() - .flatten() .unwrap_or_default() } diff --git a/packages/fullstack/src/hooks/mod.rs b/packages/fullstack/src/hooks/mod.rs deleted file mode 100644 index f42ce3f78..000000000 --- a/packages/fullstack/src/hooks/mod.rs +++ /dev/null @@ -1,2 +0,0 @@ -pub mod server_cached; -pub mod server_future; diff --git a/packages/fullstack/src/html_storage/mod.rs b/packages/fullstack/src/html_storage/mod.rs deleted file mode 100644 index c3c0bc84e..000000000 --- a/packages/fullstack/src/html_storage/mod.rs +++ /dev/null @@ -1,117 +0,0 @@ -#![cfg(feature = "server")] - -use dioxus_lib::prelude::{has_context, provide_context, use_hook}; -use serde::Serialize; -use std::{cell::RefCell, rc::Rc}; - -pub(crate) mod serialize; - -#[derive(Default, Clone)] -pub(crate) struct SerializeContext { - data: Rc>, -} - -impl SerializeContext { - /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready. - pub(crate) fn create_entry(&self) -> usize { - self.data.borrow_mut().create_entry() - } - - /// Insert data into an entry that was created with [`Self::create_entry`] - pub(crate) fn insert( - &self, - id: usize, - value: &T, - location: &'static std::panic::Location<'static>, - ) { - self.data.borrow_mut().insert(id, value, location); - } - - /// Push resolved data into the serialized server data - pub(crate) fn push( - &self, - data: &T, - location: &'static std::panic::Location<'static>, - ) { - self.data.borrow_mut().push(data, location); - } -} - -pub(crate) fn use_serialize_context() -> SerializeContext { - use_hook(serialize_context) -} - -pub(crate) fn serialize_context() -> SerializeContext { - has_context().unwrap_or_else(|| provide_context(SerializeContext::default())) -} - -#[derive(Default)] -pub(crate) struct HTMLData { - /// The data required for hydration - pub data: Vec>>, - /// The types of each serialized data - /// - /// NOTE: we don't store this in the main data vec because we don't want to include it in - /// release mode and we can't assume both the client and server are built with debug assertions - /// matching - #[cfg(debug_assertions)] - pub debug_types: Vec>, - /// The locations of each serialized data - #[cfg(debug_assertions)] - pub debug_locations: Vec>, -} - -impl HTMLData { - /// Create a new entry in the data that will be sent to the client without inserting any data. Returns an id that can be used to insert data into the entry once it is ready. - fn create_entry(&mut self) -> usize { - let id = self.data.len(); - self.data.push(None); - #[cfg(debug_assertions)] - { - self.debug_types.push(None); - self.debug_locations.push(None); - } - id - } - - /// Insert data into an entry that was created with [`Self::create_entry`] - fn insert( - &mut self, - id: usize, - value: &T, - location: &'static std::panic::Location<'static>, - ) { - let mut serialized = Vec::new(); - ciborium::into_writer(value, &mut serialized).unwrap(); - self.data[id] = Some(serialized); - #[cfg(debug_assertions)] - { - self.debug_types[id] = Some(std::any::type_name::().to_string()); - self.debug_locations[id] = Some(location.to_string()); - } - } - - /// Push resolved data into the serialized server data - fn push(&mut self, data: &T, location: &'static std::panic::Location<'static>) { - let mut serialized = Vec::new(); - ciborium::into_writer(data, &mut serialized).unwrap(); - self.data.push(Some(serialized)); - #[cfg(debug_assertions)] - { - self.debug_types - .push(Some(std::any::type_name::().to_string())); - self.debug_locations.push(Some(location.to_string())); - } - } - - /// Extend this data with the data from another [`HTMLData`] - pub(crate) fn extend(&mut self, other: &Self) { - self.data.extend_from_slice(&other.data); - #[cfg(debug_assertions)] - { - self.debug_types.extend_from_slice(&other.debug_types); - self.debug_locations - .extend_from_slice(&other.debug_locations); - } - } -} diff --git a/packages/fullstack/src/html_storage/serialize.rs b/packages/fullstack/src/html_storage/serialize.rs deleted file mode 100644 index a96dd0c79..000000000 --- a/packages/fullstack/src/html_storage/serialize.rs +++ /dev/null @@ -1,116 +0,0 @@ -use base64::Engine; -use dioxus_lib::prelude::dioxus_core::DynamicNode; -use dioxus_lib::prelude::{has_context, ErrorContext, ScopeId, SuspenseContext, VNode, VirtualDom}; - -use super::SerializeContext; - -impl super::HTMLData { - /// Walks through the suspense boundary in a depth first order and extracts the data from the context API. - /// We use depth first order instead of relying on the order the hooks are called in because during suspense on the server, the order that futures are run in may be non deterministic. - pub(crate) fn extract_from_suspense_boundary(vdom: &VirtualDom, scope: ScopeId) -> Self { - let mut data = Self::default(); - data.serialize_errors(vdom, scope); - data.take_from_scope(vdom, scope); - data - } - - /// Get the errors from the suspense boundary - fn serialize_errors(&mut self, vdom: &VirtualDom, scope: ScopeId) { - // If there is an error boundary on the suspense boundary, grab the error from the context API - // and throw it on the client so that it bubbles up to the nearest error boundary - let error = vdom.in_runtime(|| { - scope - .consume_context::() - .and_then(|error_context| error_context.errors().first().cloned()) - }); - self.push(&error, std::panic::Location::caller()); - } - - fn take_from_scope(&mut self, vdom: &VirtualDom, scope: ScopeId) { - vdom.in_runtime(|| { - scope.in_runtime(|| { - // Grab any serializable server context from this scope - let context: Option = has_context(); - if let Some(context) = context { - self.extend(&context.data.borrow()); - } - }); - }); - - // then continue to any children - if let Some(scope) = vdom.get_scope(scope) { - // If this is a suspense boundary, move into the children first (even if they are suspended) because that will be run first on the client - if let Some(suspense_boundary) = - SuspenseContext::downcast_suspense_boundary_from_scope(&vdom.runtime(), scope.id()) - { - if let Some(node) = suspense_boundary.suspended_nodes() { - self.take_from_vnode(vdom, &node); - } - } - if let Some(node) = scope.try_root_node() { - self.take_from_vnode(vdom, node); - } - } - } - - fn take_from_vnode(&mut self, vdom: &VirtualDom, vnode: &VNode) { - for (dynamic_node_index, dyn_node) in vnode.dynamic_nodes.iter().enumerate() { - match dyn_node { - DynamicNode::Component(comp) => { - if let Some(scope) = comp.mounted_scope(dynamic_node_index, vnode, vdom) { - self.take_from_scope(vdom, scope.id()); - } - } - DynamicNode::Fragment(nodes) => { - for node in nodes { - self.take_from_vnode(vdom, node); - } - } - _ => {} - } - } - } - - #[cfg(feature = "server")] - /// Encode data as base64. This is intended to be used in the server to send data to the client. - pub(crate) fn serialized(&self) -> SerializedHydrationData { - let mut serialized = Vec::new(); - ciborium::into_writer(&self.data, &mut serialized).unwrap(); - - let data = base64::engine::general_purpose::STANDARD.encode(serialized); - - let format_js_list_of_strings = |list: &[Option]| { - let body = list - .iter() - .map(|s| match s { - Some(s) => format!(r#""{s}""#), - None => r#""unknown""#.to_string(), - }) - .collect::>() - .join(","); - format!("[{}]", body) - }; - - SerializedHydrationData { - data, - #[cfg(debug_assertions)] - debug_types: format_js_list_of_strings(&self.debug_types), - #[cfg(debug_assertions)] - debug_locations: format_js_list_of_strings(&self.debug_locations), - } - } -} - -#[cfg(feature = "server")] -/// Data that was serialized on the server for hydration on the client. This includes -/// extra information about the types and sources of the serialized data in debug mode -pub(crate) struct SerializedHydrationData { - /// The base64 encoded serialized data - pub data: String, - /// A list of the types of each serialized data - #[cfg(debug_assertions)] - pub debug_types: String, - /// A list of the locations of each serialized data - #[cfg(debug_assertions)] - pub debug_locations: String, -} diff --git a/packages/fullstack/src/lib.rs b/packages/fullstack/src/lib.rs index 975d4fcd0..9284d8a2e 100644 --- a/packages/fullstack/src/lib.rs +++ b/packages/fullstack/src/lib.rs @@ -4,16 +4,8 @@ #![deny(missing_docs)] #![cfg_attr(docsrs, feature(doc_cfg))] -use std::sync::Arc; - pub use once_cell; -mod html_storage; - -#[allow(unused)] -pub(crate) type ContextProviders = - Arc Box + Send + Sync + 'static>>>; - #[cfg(feature = "axum")] #[cfg_attr(docsrs, doc(cfg(feature = "axum")))] pub mod server; @@ -22,8 +14,6 @@ pub mod server; #[cfg_attr(docsrs, doc(cfg(feature = "axum_core")))] pub mod axum_core; -mod hooks; - pub mod document; #[cfg(feature = "server")] mod render; @@ -41,8 +31,7 @@ mod server_context; /// A prelude of commonly used items in dioxus-fullstack. pub mod prelude { - use crate::hooks; - pub use hooks::{server_cached::use_server_cached, server_future::use_server_future}; + pub use dioxus_fullstack_hooks::*; #[cfg(feature = "axum")] #[cfg_attr(docsrs, doc(cfg(feature = "axum")))] diff --git a/packages/fullstack/src/render.rs b/packages/fullstack/src/render.rs index 9586868d0..564eb2ea3 100644 --- a/packages/fullstack/src/render.rs +++ b/packages/fullstack/src/render.rs @@ -1,11 +1,13 @@ //! A shared pool of renderers for efficient server side rendering. use crate::document::ServerDocument; -use crate::html_storage::serialize::SerializedHydrationData; use crate::streaming::{Mount, StreamingRenderer}; use dioxus_cli_config::base_path; +use dioxus_fullstack_hooks::{StreamingContext, StreamingStatus}; +use dioxus_fullstack_protocol::{HydrationContext, SerializedHydrationData}; use dioxus_interpreter_js::INITIALIZE_STREAMING_JS; use dioxus_isrg::{CachedRender, IncrementalRendererError, RenderFreshness}; use dioxus_lib::document::Document; +use dioxus_lib::prelude::dioxus_core::DynamicNode; use dioxus_router::prelude::ParseRouteError; use dioxus_ssr::Renderer; use futures_channel::mpsc::Sender; @@ -51,6 +53,10 @@ where } } +fn in_root_scope(virtual_dom: &VirtualDom, f: impl FnOnce() -> T) -> T { + virtual_dom.in_runtime(|| ScopeId::ROOT.in_runtime(f)) +} + /// Errors that can occur during server side rendering before the initial chunk is sent down pub enum SSRError { /// An error from the incremental renderer. This should result in a 500 code @@ -180,7 +186,7 @@ impl SsrRendererPool { let myself = self.clone(); let streaming_mode = cfg.streaming_mode; - let join_handle = spawn_platform(move || async move { + let create_render_future = move || async move { let mut virtual_dom = virtual_dom_factory(); let document = std::rc::Rc::new(crate::document::server::ServerDocument::default()); virtual_dom.provide_root_context(document.clone()); @@ -196,27 +202,47 @@ impl SsrRendererPool { } else { history = dioxus_history::MemoryHistory::with_initial_path(&route); } + let streaming_context = in_root_scope(&virtual_dom, StreamingContext::new); virtual_dom.provide_root_context(Rc::new(history) as Rc); virtual_dom.provide_root_context(document.clone() as std::rc::Rc); + virtual_dom.provide_root_context(streaming_context); - // rebuild the virtual dom, which may call server_context() - with_server_context(server_context.clone(), || virtual_dom.rebuild_in_place()); + // rebuild the virtual dom + virtual_dom.rebuild_in_place(); // If streaming is disabled, wait for the virtual dom to finish all suspense work // before rendering anything if streaming_mode == StreamingMode::Disabled { - ProvideServerContext::new(virtual_dom.wait_for_suspense(), server_context.clone()) - .await + virtual_dom.wait_for_suspense().await; } + // Otherwise, just wait for the streaming context to signal the initial chunk is ready + else { + loop { + // Check if the router has finished and set the streaming context to finished + let streaming_context_finished = + in_root_scope(&virtual_dom, || streaming_context.current_status()) + == StreamingStatus::InitialChunkCommitted; + // Or if this app isn't using the router and has finished suspense + let suspense_finished = !virtual_dom.suspended_tasks_remaining(); + if streaming_context_finished || suspense_finished { + break; + } + + // Wait for new async work that runs during suspense (mainly use_server_futures) + virtual_dom.wait_for_suspense_work().await; + + // Do that async work + virtual_dom.render_suspense_immediate().await; + } + } + // check if there are any errors - let errors = with_server_context(server_context.clone(), || { - virtual_dom.in_runtime(|| { - let error_context: ErrorContext = ScopeId::APP - .consume_context() - .expect("The root should be under an error boundary"); - let errors = error_context.errors(); - errors.to_vec() - }) + let errors = virtual_dom.in_runtime(|| { + let error_context: ErrorContext = ScopeId::APP + .consume_context() + .expect("The root should be under an error boundary"); + let errors = error_context.errors(); + errors.to_vec() }); if errors.is_empty() { // If routing was successful, we can return a 200 status and render into the stream @@ -282,16 +308,8 @@ impl SsrRendererPool { // After the initial render, we need to resolve suspense while virtual_dom.suspended_tasks_remaining() { - ProvideServerContext::new( - virtual_dom.wait_for_suspense_work(), - server_context.clone(), - ) - .await; - let resolved_suspense_nodes = ProvideServerContext::new( - virtual_dom.render_suspense_immediate(), - server_context.clone(), - ) - .await; + virtual_dom.wait_for_suspense_work().await; + let resolved_suspense_nodes = virtual_dom.render_suspense_immediate().await; // Just rerender the resolved nodes for scope in resolved_suspense_nodes { @@ -369,6 +387,10 @@ impl SsrRendererPool { renderer.reset_render_components(); myself.renderers.write().unwrap().push(renderer); + }; + + let join_handle = spawn_platform(move || { + ProvideServerContext::new(create_render_future(), server_context) }); // Wait for the initial result which determines the status code @@ -464,13 +486,83 @@ fn start_capturing_errors(suspense_scope: ScopeId) { fn serialize_server_data(virtual_dom: &VirtualDom, scope: ScopeId) -> SerializedHydrationData { // After we replace the placeholder in the dom with javascript, we need to send down the resolved data so that the client can hydrate the node // Extract any data we serialized for hydration (from server futures) - let html_data = - crate::html_storage::HTMLData::extract_from_suspense_boundary(virtual_dom, scope); + let html_data = extract_from_suspense_boundary(virtual_dom, scope); // serialize the server state into a base64 string html_data.serialized() } +/// Walks through the suspense boundary in a depth first order and extracts the data from the context API. +/// We use depth first order instead of relying on the order the hooks are called in because during suspense on the server, the order that futures are run in may be non deterministic. +pub(crate) fn extract_from_suspense_boundary( + vdom: &VirtualDom, + scope: ScopeId, +) -> HydrationContext { + let data = HydrationContext::default(); + serialize_errors(&data, vdom, scope); + take_from_scope(&data, vdom, scope); + data +} + +/// Get the errors from the suspense boundary +fn serialize_errors(context: &HydrationContext, vdom: &VirtualDom, scope: ScopeId) { + // If there is an error boundary on the suspense boundary, grab the error from the context API + // and throw it on the client so that it bubbles up to the nearest error boundary + let error = vdom.in_runtime(|| { + scope + .consume_context::() + .and_then(|error_context| error_context.errors().first().cloned()) + }); + context + .error_entry() + .insert(&error, std::panic::Location::caller()); +} + +fn take_from_scope(context: &HydrationContext, vdom: &VirtualDom, scope: ScopeId) { + vdom.in_runtime(|| { + scope.in_runtime(|| { + // Grab any serializable server context from this scope + let other: Option = has_context(); + if let Some(other) = other { + context.extend(&other); + } + }); + }); + + // then continue to any children + if let Some(scope) = vdom.get_scope(scope) { + // If this is a suspense boundary, move into the children first (even if they are suspended) because that will be run first on the client + if let Some(suspense_boundary) = + SuspenseContext::downcast_suspense_boundary_from_scope(&vdom.runtime(), scope.id()) + { + if let Some(node) = suspense_boundary.suspended_nodes() { + take_from_vnode(context, vdom, &node); + } + } + if let Some(node) = scope.try_root_node() { + take_from_vnode(context, vdom, node); + } + } +} + +fn take_from_vnode(context: &HydrationContext, vdom: &VirtualDom, vnode: &VNode) { + for (dynamic_node_index, dyn_node) in vnode.dynamic_nodes.iter().enumerate() { + match dyn_node { + DynamicNode::Component(comp) => { + if let Some(scope) = comp.mounted_scope(dynamic_node_index, vnode, vdom) { + take_from_scope(context, vdom, scope.id()); + } + } + DynamicNode::Fragment(nodes) => { + for node in nodes { + take_from_vnode(context, vdom, node); + } + } + _ => {} + } + } +} + /// State used in server side rendering. This utilizes a pool of [`dioxus_ssr::Renderer`]s to cache static templates between renders. #[derive(Clone)] pub struct SSRState { diff --git a/packages/fullstack/src/serve_config.rs b/packages/fullstack/src/serve_config.rs index 0bf075732..65b0c7935 100644 --- a/packages/fullstack/src/serve_config.rs +++ b/packages/fullstack/src/serve_config.rs @@ -8,7 +8,9 @@ use std::io::Read; use std::path::PathBuf; use std::sync::Arc; -use crate::ContextProviders; +#[allow(unused)] +pub(crate) type ContextProviders = + Arc Box + Send + Sync + 'static>>>; /// A ServeConfig is used to configure how to serve a Dioxus application. It contains information about how to serve static assets, and what content to render with [`dioxus-ssr`]. #[derive(Clone, Default)] @@ -486,6 +488,8 @@ pub enum StreamingMode { pub struct ServeConfig { pub(crate) index: IndexHtml, pub(crate) incremental: Option, + // This is used in the axum integration + #[allow(unused)] pub(crate) context_providers: ContextProviders, pub(crate) streaming_mode: StreamingMode, } diff --git a/packages/fullstack/src/server_context.rs b/packages/fullstack/src/server_context.rs index 1d4d5c479..a160828e9 100644 --- a/packages/fullstack/src/server_context.rs +++ b/packages/fullstack/src/server_context.rs @@ -23,9 +23,10 @@ type SendSyncAnyMap = std::collections::HashMap; /// ``` #[derive(Clone)] pub struct DioxusServerContext { - shared_context: std::sync::Arc>, - response_parts: std::sync::Arc>, + shared_context: Arc>, + response_parts: Arc>, pub(crate) parts: Arc>, + response_sent: Arc, } enum ContextType { @@ -46,11 +47,12 @@ impl ContextType { impl Default for DioxusServerContext { fn default() -> Self { Self { - shared_context: std::sync::Arc::new(RwLock::new(HashMap::new())), - response_parts: std::sync::Arc::new(RwLock::new( + shared_context: Arc::new(RwLock::new(HashMap::new())), + response_parts: Arc::new(RwLock::new( http::response::Response::new(()).into_parts().0, )), - parts: std::sync::Arc::new(RwLock::new(http::request::Request::new(()).into_parts().0)), + parts: Arc::new(RwLock::new(http::request::Request::new(()).into_parts().0)), + response_sent: Arc::new(std::sync::atomic::AtomicBool::new(false)), } } } @@ -69,6 +71,7 @@ mod server_fn_impl { response_parts: std::sync::Arc::new(RwLock::new( http::response::Response::new(()).into_parts().0, )), + response_sent: Arc::new(std::sync::atomic::AtomicBool::new(false)), } } @@ -81,6 +84,7 @@ mod server_fn_impl { response_parts: std::sync::Arc::new(RwLock::new( http::response::Response::new(()).into_parts().0, )), + response_sent: Arc::new(std::sync::atomic::AtomicBool::new(false)), } } @@ -192,6 +196,14 @@ mod server_fn_impl { /// } /// ``` pub fn response_parts_mut(&self) -> RwLockWriteGuard<'_, http::response::Parts> { + if self + .response_sent + .load(std::sync::atomic::Ordering::Relaxed) + { + tracing::error!("Attempted to modify the request after the first frame of the response has already been sent. \ + You can read the response, but modifying the response will not change the response that the client has already received. \ + Try modifying the response before the suspense boundary above the router is resolved."); + } self.response_parts.write() } @@ -261,6 +273,22 @@ mod server_fn_impl { pub async fn extract>(&self) -> Result { T::from_request(self).await } + + /// Copy the response parts to a response and mark this server context as sent + #[cfg(feature = "axum")] + pub(crate) fn send_response(&self, response: &mut http::response::Response) { + self.response_sent + .store(true, std::sync::atomic::Ordering::Relaxed); + let parts = self.response_parts.read(); + + let mut_headers = response.headers_mut(); + for (key, value) in parts.headers.iter() { + mut_headers.insert(key, value.clone()); + } + *response.status_mut() = parts.status; + *response.version_mut() = parts.version; + response.extensions_mut().extend(parts.extensions.clone()); + } } } diff --git a/packages/fullstack/src/streaming.rs b/packages/fullstack/src/streaming.rs index b8133e2ad..263fffe05 100644 --- a/packages/fullstack/src/streaming.rs +++ b/packages/fullstack/src/streaming.rs @@ -26,6 +26,7 @@ //! //! ``` +use dioxus_fullstack_protocol::SerializedHydrationData; use futures_channel::mpsc::Sender; use std::{ @@ -33,8 +34,6 @@ use std::{ sync::{Arc, RwLock}, }; -use crate::html_storage::serialize::SerializedHydrationData; - /// Sections are identified by a unique id based on the suspense path. We only track the path of suspense boundaries because the client may render different components than the server. #[derive(Clone, Debug, Default)] struct MountPath { @@ -127,10 +126,10 @@ impl StreamingRenderer { // 2. The serialized data required to hydrate those components // 3. (in debug mode) The type names of the serialized data // 4. (in debug mode) The locations of the serialized data - let raw_data = resolved_data.data; write!( into, - r#"