Upgrade leptos template to version 0.7 (#694)

rafiyq · web-flow · commit 9e3a5afa539c · 2025-06-13T19:21:10.000-07:00
diff --git a/templates/leptos/.gitignore b/templates/leptos/.gitignore
@@ -1,5 +1,4 @@
 target
 node_modules
 .wrangler
-public/pkg
-build
+build
diff --git a/templates/leptos/Cargo.toml b/templates/leptos/Cargo.toml
@@ -14,72 +14,69 @@ codegen-units = 1
 crate-type = ["cdylib"]
 
 [dependencies]
-worker = { version="0.5.0", features=['http', 'axum', 'd1'], optional = true }
-axum  = { version = "0.7", default-features = false, optional = true }
+axum = { version = "0.7", default-features = false, optional = true }
+console_error_panic_hook = "0.1"
+getrandom = { version = "0.2.15", features = ["js"]}
+leptos = { version = "0.7"{% if use_nightly %}, features = ["nightly"]{% endif %} }
+leptos_axum = { version = "0.7", default-features = false, features = ["wasm"], optional = true }
+leptos_meta = { version = "0.7" }
+leptos_router = { version = "0.7"{% if use_nightly %}, features = ["nightly"]{% endif %} }
 tower-service = "0.3"
-console_error_panic_hook = { version = "0.1" }
-console_log = { version = "1.0", optional = true }
-gloo-net = { version = "0.6", features = ["http"] }
-gloo-timers = { version = "0.3", features = ["futures"] }
-leptos = "0.6"
-leptos_axum = { version = "0.6", default-features = false, features = [
-  "wasm",
-], optional = true }
-leptos_meta = "0.6"
-leptos_router = "0.6"
-leptos_dom = "0.6"
-log = "0.4"
-once_cell = "1.19"
-serde = { version = "1.0", features = ["derive"] }
-serde_json = "1.0"
-tower = { version = "0.5", optional = true }
-wasm-bindgen = { version = "0.2.92", optional = true }
-wasm-bindgen-futures = "0.4"
+wasm-bindgen = "=0.2.100"
+worker = { version = "0.5", features = ["http", "axum", "d1"], optional = true }
 
 [features]
-hydrate = [
-  "dep:console_log",
-  "leptos/hydrate",
-  "leptos_meta/hydrate",
-  "leptos_router/hydrate",
-  "leptos_dom/hydrate",
-  "dep:wasm-bindgen",
-]
+hydrate = ["leptos/hydrate"]
 ssr = [
   "dep:axum",
+  "dep:leptos_axum",
+  "dep:worker",
   "leptos/ssr",
   "leptos_meta/ssr",
   "leptos_router/ssr",
-  "leptos_dom/ssr",
-  "dep:leptos_axum",
-  "dep:worker",
 ]
 
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
-output-name = "leptos_worker"
-# The site root folder is where cargo-leptos generate all output. WARNING all content of this folder will be erased on a rebuild. Use it in your server setup.
-site-root = "public"
+output-name = "{{project-name}}"
+
+# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
+site-root = "target/site"
+
 # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
 # Defaults to pkg
 site-pkg-dir = "pkg"
+
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
-#style-file = "./style.css"
-# [Optional] Files in the asset-dir will be copied to the site-root directory
+style-file = "style/main.css"
+
+# Assets source dir. All files found here will be copied and synchronized to site-root.
+# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
+#
+# Optional. Env: LEPTOS_ASSETS_DIR.
 assets-dir = "assets"
+
 # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
 site-addr = "127.0.0.1:8787"
+
 # The port to use for automatic reload monitoring
 reload-port = 3001
+
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+#   [Windows] for non-WSL use "npx.cmd playwright test"
+#   This binary name can be checked in Powershell with Get-Command npx
 end2end-cmd = "cargo make test-ui"
-end2end-dir = "e2e"
+end2end-dir = "end2end"
+
 #  The browserlist query used for optimizing the CSS.
 browserquery = "defaults"
+
 # Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
 watch = false
+
 # The environment Leptos will run in, usually either "DEV" or "PROD"
 env = "DEV"
+
 # The features to use when compiling the bin target
 #
 # Optional. Can be over-ridden with the command line parameter --bin-features
@@ -98,4 +95,4 @@ lib-features = ["hydrate"]
 # If the --no-default-features flag should be used when compiling the lib target
 #
 # Optional. Defaults to false.
-lib-default-features = false
+lib-default-features = false
diff --git a/templates/leptos/cargo-generate.toml b/templates/leptos/cargo-generate.toml
@@ -1,2 +1,2 @@
-[template]
-exclude = ["*.ico"]
+[placeholders]
+use_nightly = { prompt = "Use nightly features?", default = false, type = "bool" }
diff --git a/templates/leptos/public/favicon.ico b/templates/leptos/public/favicon.ico
diff --git a/templates/leptos/src/api/mod.rs b/templates/leptos/src/api/mod.rs
diff --git a/templates/leptos/src/api/say_hello.rs b/templates/leptos/src/api/say_hello.rs
diff --git a/templates/leptos/src/app.rs b/templates/leptos/src/app.rs
@@ -1,11 +1,56 @@
-use leptos::*;
+use leptos::prelude::*;
+use leptos_meta::{provide_meta_context, MetaTags, Stylesheet};
+use leptos_router::{
+    components::{Route, Router, Routes},
+    StaticSegment,
+};
 
 use crate::components::show_data_from_api::ShowDataFromApi;
 
+pub fn shell(options: LeptosOptions) -> impl IntoView {
+    view! {
+        <!DOCTYPE html>
+        <html lang="en">
+            <head>
+                <meta charset="utf-8"/>
+                <meta name="viewport" content="width=device-width, initial-scale=1"/>
+                <AutoReload options=options.clone() />
+                <HydrationScripts options/>
+                <MetaTags/>
+            </head>
+            <body>
+                <App/>
+            </body>
+        </html>
+    }
+}
+
 #[component]
 pub fn App() -> impl IntoView {
+    // Provides context that manages stylesheets, titles, meta tags, etc.
+    provide_meta_context();
+
+    view! {
+        // injects a stylesheet into the document <head>
+        // id=leptos means cargo-leptos will hot-reload this stylesheet
+        <Stylesheet id="leptos" href="/pkg/{{project-name}}.css"/>
+
+        // content for this welcome page
+        <Router>
+            <main>
+                <Routes fallback=|| "Page not found.".into_view()>
+                    <Route path=StaticSegment("") view=HomePage/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+/// Renders the home page of your application.
+#[component]
+fn HomePage() -> impl IntoView {
     view! {
         <h1>"Hello world!"</h1>
         <ShowDataFromApi />
     }
-}
+}
diff --git a/templates/leptos/src/components.rs b/templates/leptos/src/components.rs
@@ -0,0 +1 @@
+pub mod show_data_from_api;
diff --git a/templates/leptos/src/components/mod.rs b/templates/leptos/src/components/mod.rs
diff --git a/templates/leptos/src/components/show_data_from_api.rs b/templates/leptos/src/components/show_data_from_api.rs
@@ -1,14 +1,17 @@
-use leptos::*;
+use leptos::prelude::*;
 
-use crate::api::say_hello::say_hello;
+#[server(SayHello)]
+pub async fn say_hello(num: i32) -> Result<String, ServerFnError> {
+    Ok(format!("Hello from the API!!! I got {num}"))
+}
 
 #[component]
 pub fn ShowDataFromApi() -> impl IntoView {
-    let value = create_rw_signal("".to_string());
-    let counter = create_rw_signal(0);
+    let value = RwSignal::new("".to_string());
+    let counter = RwSignal::new(0);
 
     let on_click = move |_| {
-        spawn_local(async move {
+        leptos::task::spawn_local(async move {
             let api_said = say_hello(counter.get()).await.unwrap();
             value.set(api_said);
             counter.update(|v| *v += 1);
@@ -21,4 +24,4 @@ pub fn ShowDataFromApi() -> impl IntoView {
             <p>{value}</p>
         </div>
     }
-}
+}
diff --git a/templates/leptos/src/lib.rs b/templates/leptos/src/lib.rs
@@ -1,49 +1,38 @@
-//! Setup our Cloudflare worker (`feature == "ssr"`) and our leptos hydration function (`feature ==
-//! "hydrate"`)
-
 #[cfg(feature = "ssr")]
 use worker::*;
 
-use leptos::*;
+use crate::app::*;
 
-mod api;
-mod app;
+pub mod app;
 mod components;
 
-use crate::app::App;
+#[cfg(feature = "ssr")]
+pub fn register_server_functions() {
+    use leptos::server_fn::axum::register_explicit;
+
+    // Add all of your server functions here
+    register_explicit::<components::show_data_from_api::SayHello>();
+}
 
 #[cfg(feature = "ssr")]
 async fn router(env: Env) -> axum::Router {
     use std::sync::Arc;
 
-    use axum::{routing::post, Extension};
+    use axum::{Extension, Router};
+    use leptos::prelude::*;
     use leptos_axum::{generate_route_list, LeptosRoutes};
 
-    use crate::api::register_server_functions;
-
-    // Match what's in Cargo.toml
-    // Doesn't seem to be able to do this automatically
-    let leptos_options = LeptosOptions {
-        output_name: "leptos_worker".into(),
-        site_root: "public".into(),
-        site_pkg_dir: "pkg".into(),
-        env: leptos_config::Env::DEV,
-        site_addr: "127.0.0.1:8787".parse().unwrap(),
-        reload_port: 3001,
-        reload_external_port: None,
-        reload_ws_protocol: leptos_config::ReloadWSProtocol::WS,
-        not_found_path: "/404".into(),
-        hash_file: "hash.txt".into(),
-        hash_files: false,
-    };
-    let routes = generate_route_list(|| view! { <App /> });
-
+    let conf = get_configuration(None).unwrap();
+    let leptos_options = conf.leptos_options;
+    let routes = generate_route_list(App);
     register_server_functions();
 
     // build our application with a route
-    axum::Router::new()
-        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
-        .leptos_routes(&leptos_options, routes, || view! { <App/> })
+    Router::new()
+        .leptos_routes(&leptos_options, routes, {
+            let leptos_options = leptos_options.clone();
+            move || shell(leptos_options.clone())
+        })
         .with_state(leptos_options)
         .layer(Extension(Arc::new(env))) // <- Allow leptos server functions to access Worker stuff
 }
@@ -65,8 +54,6 @@ async fn fetch(
 #[cfg(feature = "hydrate")]
 #[wasm_bindgen::prelude::wasm_bindgen]
 pub fn hydrate() {
-    _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
-
-    leptos::mount_to_body(|| view! { <App/> });
-}
+    leptos::mount::hydrate_body(App);
+}
diff --git a/templates/leptos/src/main.rs b/templates/leptos/src/main.rs
@@ -1,4 +1,5 @@
-//! This file only exists to make `cargo-leptos` happy. It doesn't do anything.
-fn main() {
-    println!("not used");
-}
+pub fn main() {
+    // no client-side main function
+    // unless we want this to work with e.g., Trunk for pure client-side testing
+    // see lib.rs for hydration function instead
+}
diff --git a/templates/leptos/style/main.css b/templates/leptos/style/main.css
@@ -0,0 +1 @@
+/* Add your CSS code here */
diff --git a/templates/leptos/wrangler.toml b/templates/leptos/wrangler.toml
@@ -1,9 +1,9 @@
-name = "leptos-worker"
+name = "{{project-name}}"
 main = "build/worker/shim.mjs"
-compatibility_date = "2024-09-01"
+compatibility_date = "{{ "now" | date: "%Y-%m-%d" }}"
 
 [build]
-command = "cargo leptos build --release && LEPTOS_OUTPUT_NAME=start-axum worker-build --release --features ssr"
+command = "cargo leptos build --release && LEPTOS_OUTPUT_NAME={{project-name}} worker-build --release --features ssr"
 
 [assets]
-directory = "./public"
+directory = "./target/site"
