warn

Author: ealmloff

Cargo.lock

@@ -38,6 +38,8 @@ members = [
     "packages/document",
     "packages/extension",
     "packages/fullstack",
+    "packages/fullstack-hooks",
+    "packages/fullstack-data",
     "packages/generational-box",
     "packages/history",
     "packages/hooks",
@@ -102,7 +104,7 @@ members = [
     "packages/playwright-tests/suspense-carousel",
     "packages/playwright-tests/nested-suspense",
     "packages/playwright-tests/cli-optimization",
-    "packages/playwright-tests/wasm-split-harness", "packages/streaming-context",
+    "packages/playwright-tests/wasm-split-harness"
 ]
 
 [workspace.package]
@@ -141,7 +143,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-streaming-context = { path = "packages/streaming-context", version = "0.6.3" }
+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" }

Cargo.toml

@@ -9,11 +9,13 @@ publish = false
 [dependencies]
 dioxus = { workspace = true, features = ["fullstack", "router"] }
 axum = { workspace = true, optional = true }
-tokio = {workspace = true, features = ["full"], optional = true }
+tokio = { workspace = true, features = ["full"], optional = true }
 serde = { version = "1.0.159", features = ["derive"] }
+reqwest = { workspace = true, features = ["json"] }
+http = { workspace = true, optional = true }
 
 [features]
 default = []
-server = ["axum", "dioxus/server"]
+server = ["axum", "dioxus/server", "dep:tokio", "dep:http"]
 web = ["dioxus/web"]
 

examples/fullstack-router/Cargo.toml

@@ -8,10 +8,9 @@ use dioxus::prelude::*;
 
 fn main() {
     dioxus::LaunchBuilder::new()
-        .with_cfg(server_only!(ServeConfig::builder().incremental(
-            IncrementalRendererConfig::default()
-                .invalidate_after(std::time::Duration::from_secs(120)),
-        )))
+        .with_cfg(server_only!(
+            ServeConfig::builder().enable_out_of_order_streaming()
+        ))
         .launch(app);
 }
 
@@ -24,62 +23,97 @@ enum Route {
     #[route("/")]
     Home {},
 
-    #[route("/blog/:id/")]
-    Blog { id: i32 },
+    #[route("/:breed")]
+    Breed { breed: String },
 }
 
 #[component]
-fn Blog(id: i32) -> Element {
+fn Home() -> Element {
     rsx! {
-        Link { to: Route::Home {}, "Go to counter" }
-        table {
-            tbody {
-                for _ in 0..id {
-                    tr {
-                        for _ in 0..id {
-                            td { "hello world!" }
-                        }
-                    }
-                }
-            }
+        Link { to: Route::Breed { breed: "hound".to_string() }, "Hound" }
+    }
+}
+
+#[component]
+fn Breed(breed: String) -> Element {
+    rsx! {
+        BreedGallery { breed: "{breed}", slow: false }
+        SuspenseBoundary {
+            fallback: |_| rsx! { "Loading..." },
+            DoesNotSuspend {}
+            BreedGallery { breed, slow: true }
         }
     }
 }
 
 #[component]
-fn Home() -> Element {
-    let mut count = use_signal(|| 0);
-    let mut text = use_signal(|| "...".to_string());
+fn DoesNotSuspend() -> Element {
+    rsx! { "404" }
+}
+
+#[derive(serde::Deserialize, serde::Serialize)]
+struct BreedResponse {
+    message: Vec<String>,
+}
+
+#[component]
+fn BreedGallery(breed: ReadOnlySignal<String>, slow: bool) -> Element {
+    // use_server_future is very similar to use_resource, but the value returned from the future
+    // must implement Serialize and Deserialize and it is automatically suspended
+    let response = use_server_future(move || async move {
+        if slow {
+            #[cfg(feature = "server")]
+            tokio::time::sleep(std::time::Duration::from_secs(5)).await;
+        }
+        #[cfg(feature = "server")]
+        {
+            use http::StatusCode;
+            let context = server_context();
+            let mut write = context.response_parts_mut();
+            write.status = StatusCode::NOT_FOUND;
+            write.extensions.insert("error???");
+            write.version = http::Version::HTTP_2;
+            write
+                .headers
+                .insert("x-custom-header", http::HeaderValue::from_static("hello"));
+        }
+        // The future will run on the server during SSR and then get sent to the client
+        reqwest::Client::new()
+            .get(format!("https://dog.ceo/api/breed/{breed}/images"))
+            .send()
+            .await
+            // reqwest::Result does not implement Serialize, so we need to map it to a string which
+            // can be serialized
+            .map_err(|err| err.to_string())?
+            .json::<BreedResponse>()
+            .await
+            .map_err(|err| err.to_string())
+        // use_server_future calls `suspend` internally, so you don't need to call it manually, but you
+        // do need to bubble up the suspense variant with `?`
+    })?;
+
+    // If the future was still pending, it would have returned suspended with the `?` above
+    // we can unwrap the None case here to get the inner result
+    let response_read = response.read();
+    let response = response_read.as_ref().unwrap();
 
+    // Then you can just handle the happy path with the resolved future
     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();
+            display: "flex",
+            flex_direction: "row",
+            match response {
+                Ok(urls) => rsx! {
+                    for image in urls.message.iter().take(3) {
+                        img {
+                            src: "{image}",
+                            width: "100px",
+                            height: "100px",
+                        }
                     }
                 },
-                "Run server function!"
+                Err(err) => rsx! { "Failed to fetch response: {err}" },
             }
-            "Server said: {text}"
         }
     }
 }
-
-#[server(PostServerData)]
-async fn post_server_data(data: String) -> Result<(), ServerFnError> {
-    println!("Server received: {}", data);
-
-    Ok(())
-}
-
-#[server(GetServerData)]
-async fn get_server_data() -> Result<String, ServerFnError> {
-    Ok("Hello from the server!".to_string())
-}

examples/fullstack-router/src/main.rs

@@ -1,9 +1,9 @@
 [package]
-name = "dioxus-streaming-context"
+name = "dioxus-fullstack-hooks"
 authors = ["Jonathan Kelley", "Evan Almloff"]
 version = { workspace = true }
 edition = "2021"
-description = "Fullstack streaming status context for Dioxus"
+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"
@@ -12,8 +12,18 @@ resolver = "2"
 
 [dependencies]
 dioxus-core = { workspace = true }
-dioxus-signals.workspace = true
+dioxus-signals = { workspace = true }
+dioxus-hooks = { workspace = true }
+dioxus-web = { workspace = true, optional = true }
 futures-channel = { workspace = true }
+serde = { workspace = true }
+
+[dev-dependencies]
+dioxus-fullstack = { workspace = true, features = ["server"] }
+
+[features]
+web = ["dep:dioxus-web"]
+server = []
 
 [package.metadata.docs.rs]
 cargo-args = ["-Zunstable-options", "-Zrustdoc-scrape-examples"]

packages/streaming-context/Cargo.toml renamed to packages/fullstack-hooks/Cargo.toml

@@ -0,0 +1,9 @@
+# Dioxus Streaming Context
+
+This crate provides a context for [`dioxus-fullstack`](https://crates.io/crates/dioxus-fullstack) about the context of the html stream. If streaming rendering is enabled, the context can be used to check if the first http chunk has been sent and the response metadata cannot be changed.
+
+## Usage
+
+```rust
+todo
+```

packages/fullstack-hooks/README.md

@@ -0,0 +1,4 @@
+mod server_cached;
+pub use server_cached::*;
+mod server_future;
+pub use server_future::*;

packages/fullstack-hooks/src/hooks/mod.rs

@@ -1,4 +1,4 @@
-use dioxus_lib::prelude::use_hook;
+use dioxus_core::prelude::use_hook;
 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.
@@ -34,7 +34,7 @@ pub(crate) fn server_cached<O: 'static + Clone + Serialize + DeserializeOwned>(
 ) -> O {
     #[cfg(feature = "server")]
     {
-        let serialize = crate::html_storage::serialize_context();
+        let serialize = html_storage::serialize_context();
         let data = value();
         serialize.push(&data, location);
         data

packages/fullstack/src/hooks/server_cached.rs renamed to packages/fullstack-hooks/src/hooks/server_cached.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;
 

packages/fullstack/src/hooks/server_future.rs renamed to packages/fullstack-hooks/src/hooks/server_future.rs

@@ -0,0 +1,7 @@
+#![warn(missing_docs)]
+#![doc = include_str!("../README.md")]
+
+mod hooks;
+pub use hooks::*;
+mod streaming;
+pub use streaming::*;