From b7ea3580c21cdc5b8e745fbfdc78a9e55e116a9b Mon Sep 17 00:00:00 2001 From: Evan Almloff Date: Thu, 6 Jul 2023 10:52:09 -0700 Subject: [PATCH] add static generation hydrated example --- Cargo.toml | 1 + .../examples/static-hydrated/.gitignore | 3 + .../examples/static-hydrated/Cargo.toml | 20 +++++ .../examples/static-hydrated/Dioxus.toml | 46 ++++++++++ .../examples/static-hydrated/src/main.rs | 83 +++++++++++++++++++ 5 files changed, 153 insertions(+) create mode 100644 packages/fullstack/examples/static-hydrated/.gitignore create mode 100644 packages/fullstack/examples/static-hydrated/Cargo.toml create mode 100644 packages/fullstack/examples/static-hydrated/Dioxus.toml create mode 100644 packages/fullstack/examples/static-hydrated/src/main.rs diff --git a/Cargo.toml b/Cargo.toml index 540fc8148..785562f35 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -30,6 +30,7 @@ members = [ "packages/fullstack/examples/axum-desktop", "packages/fullstack/examples/salvo-hello-world", "packages/fullstack/examples/warp-hello-world", + "packages/fullstack/examples/static-hydrated", "docs/guide", "docs/router", # Full project examples diff --git a/packages/fullstack/examples/static-hydrated/.gitignore b/packages/fullstack/examples/static-hydrated/.gitignore new file mode 100644 index 000000000..c7f237de8 --- /dev/null +++ b/packages/fullstack/examples/static-hydrated/.gitignore @@ -0,0 +1,3 @@ +docs +target +static \ No newline at end of file diff --git a/packages/fullstack/examples/static-hydrated/Cargo.toml b/packages/fullstack/examples/static-hydrated/Cargo.toml new file mode 100644 index 000000000..97776dc54 --- /dev/null +++ b/packages/fullstack/examples/static-hydrated/Cargo.toml @@ -0,0 +1,20 @@ +[package] +name = "static-hydrated" +version = "0.1.0" +edition = "2021" +publish = false + +# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html + +[dependencies] +dioxus-web = { workspace = true, features = ["hydrate"], optional = true } +dioxus = { workspace = true } +dioxus-fullstack = { workspace = true, features = ["router"] } +dioxus-router = { workspace = true} +tokio = { workspace = true, features = ["full"], optional = true } +serde = "1.0.159" + +[features] +default = [] +ssr = ["tokio", "dioxus-fullstack/ssr"] +web = ["dioxus-web"] diff --git a/packages/fullstack/examples/static-hydrated/Dioxus.toml b/packages/fullstack/examples/static-hydrated/Dioxus.toml new file mode 100644 index 000000000..7a44ff71f --- /dev/null +++ b/packages/fullstack/examples/static-hydrated/Dioxus.toml @@ -0,0 +1,46 @@ +[application] + +# App (Project) Name +name = "Dioxus" + +# Dioxus App Default Platform +# desktop, web, mobile, ssr +default_platform = "web" + +# `build` & `serve` dist path +out_dir = "docs" + +# resource (public) file folder +asset_dir = "public" + +[web.app] + +# HTML title tag content +title = "dioxus | ⛺" + +[web.watcher] + +# when watcher trigger, regenerate the `index.html` +reload_html = true + +# which files or dirs will be watcher monitoring +watch_path = ["src", "public"] + +# include `assets` in web platform +[web.resource] + +# CSS style file +style = ["tailwind.css"] + +# Javascript code file +script = [] + +[web.resource.dev] + +# serve: [dev-server] only + +# CSS style file +style = [] + +# Javascript code file +script = [] diff --git a/packages/fullstack/examples/static-hydrated/src/main.rs b/packages/fullstack/examples/static-hydrated/src/main.rs new file mode 100644 index 000000000..371e6b47b --- /dev/null +++ b/packages/fullstack/examples/static-hydrated/src/main.rs @@ -0,0 +1,83 @@ +//! Run with: +//! +//! ```sh +//! dioxus build --features web +//! cargo run --features ssr +//! ``` + +#![allow(non_snake_case, unused)] +use dioxus::prelude::*; +use dioxus_fullstack::{launch, prelude::*}; +use dioxus_router::prelude::*; +use serde::{Deserialize, Serialize}; + +// Generate all routes and output them to the docs path +#[cfg(feature = "ssr")] +#[tokio::main] +async fn main() { + pre_cache_static_routes_with_props( + &ServeConfigBuilder::new_with_router(dioxus_fullstack::router::FullstackRouterConfig::< + Route, + >::default()) + .assets_path("docs") + .incremental(IncrementalRendererConfig::default().static_dir("docs")) + .build(), + ) + .await + .unwrap(); +} + +// Hydrate the page +#[cfg(feature = "web")] +fn main() { + dioxus_web::launch_with_props( + dioxus_fullstack::router::RouteWithCfg::, + dioxus_fullstack::prelude::get_root_props_from_document() + .expect("Failed to get root props from document"), + dioxus_web::Config::default().hydrate(true), + ); +} + +#[derive(Clone, Routable, Debug, PartialEq, Serialize, Deserialize)] +enum Route { + #[route("/")] + Home {}, + #[route("/blog")] + Blog, +} + +#[inline_props] +fn Blog(cx: Scope) -> Element { + render! { + Link { target: Route::Home {}, "Go to counter" } + table { + tbody { + for _ in 0..100 { + tr { + for _ in 0..100 { + td { "hello world!" } + } + } + } + } + } + } +} + +#[inline_props] +fn Home(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); + let text = use_state(cx, || "...".to_string()); + + cx.render(rsx! { + Link { + target: Route::Blog {}, + "Go to blog" + } + div { + h1 { "High-Five counter: {count}" } + button { onclick: move |_| count += 1, "Up high!" } + button { onclick: move |_| count -= 1, "Down low!" } + } + }) +}