examples: porting to 0.7 and cleaning up

This commit is contained in:
Greg Johnston 2024-06-12 21:33:43 -04:00
parent 14b3877293
commit b5551863fe
18 changed files with 104 additions and 141 deletions

View File

@ -9,6 +9,4 @@ lto = true
[dependencies]
leptos = { path = "../../leptos", features = ["csr"] }
console_log = "1"
log = "0.4"
console_error_panic_hook = "0.1.7"

View File

@ -1,8 +1,6 @@
use leptos::prelude::*;
use spread::SpreadingExample;
pub fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount::mount_to_body(SpreadingExample)
leptos::mount::mount_to_body(SpreadingExample)
}

View File

@ -6,45 +6,22 @@ edition = "2021"
[lib]
crate-type = ["cdylib", "rlib"]
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
leptos = { path = "../../leptos" }
leptos_actix = { path = "../../integrations/actix", optional = true }
leptos_meta = { path = "../../meta" }
leptos_router = { path = "../../router" }
gloo-net = { version = "0.6", features = ["http"] }
log = "0.4"
# dependencies for client (enable when csr or hydrate set)
wasm-bindgen = { version = "0.2", optional = true }
console_log = { version = "1", optional = true }
# dependencies for browser (enable when hydrate set)
console_error_panic_hook = { version = "0.1", optional = true }
wasm-bindgen = { version = "0.2", optional = true }
# dependencies for server (enable when ssr set)
actix-files = { version = "0.6", optional = true }
actix-web = { version = "4", features = ["macros"], optional = true }
futures = { version = "0.3", optional = true }
simple_logger = { version = "4.0", optional = true }
[features]
default = ["csr"]
hydrate = [
"leptos/hydrate",
"leptos_meta/hydrate",
"leptos_router/hydrate",
"dep:wasm-bindgen",
"dep:console_log",
"dep:console_error_panic_hook",
]
csr = [
"leptos/csr",
"leptos_meta/csr",
"leptos_router/csr",
"dep:wasm-bindgen",
"dep:console_log",
"dep:console_error_panic_hook",
]
hydrate = ["leptos/hydrate", "dep:wasm-bindgen", "dep:console_error_panic_hook"]
ssr = [
"leptos/ssr",
"leptos_meta/ssr",
@ -52,8 +29,6 @@ ssr = [
"dep:leptos_actix",
"dep:actix-web",
"dep:actix-files",
"dep:futures",
"dep:simple_logger",
]
[package.metadata.cargo-all-features]
@ -61,10 +36,7 @@ denylist = [
"actix-files",
"actix-web",
"console_error_panic_hook",
"console_log",
"futures",
"leptos_actix",
"simple_logger",
"wasm-bindgen",
]
skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]

View File

@ -1,26 +1,28 @@
use leptos::prelude::*;
use leptos_meta::*;
use leptos_router::*;
use leptos_router::{
components::{FlatRoutes, Route, Router},
StaticSegment,
};
#[component]
pub fn App() -> impl IntoView {
provide_meta_context();
view! {
<Stylesheet id="leptos" href="/pkg/tailwind_actix.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Router>
<Routes>
<Route path="" view= move || view! { <Home/> }/>
</Routes>
<FlatRoutes fallback=|| "Page not found.">
<Route path=StaticSegment("") view=Home/>
</FlatRoutes>
</Router>
}
}
#[component]
fn Home() -> impl IntoView {
let (count, set_count) = create_signal(0);
let (count, set_count) = signal(0);
view! {
<main class="my-0 mx-auto max-w-3xl text-center">

View File

@ -4,24 +4,6 @@ mod app;
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
use crate::app::App;
use leptos::{logging, mount_to_body};
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
logging::log!("hydrate mode - hydrating");
mount_to_body(App);
}
#[cfg(feature = "csr")]
#[wasm_bindgen::prelude::wasm_bindgen(start)]
pub fn main() {
use crate::app::App;
use leptos::{logging, mount_to_body};
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
logging::log!("csr mode - mounting to body");
mount_to_body(App);
leptos::mount::hydrate_body(App);
}

View File

@ -5,27 +5,41 @@ use actix_files::Files;
use actix_web::*;
use leptos::prelude::*;
use leptos_actix::{generate_route_list, LeptosRoutes};
use leptos_meta::MetaTags;
#[actix_web::main]
async fn main() -> std::io::Result<()> {
// Setting this to None means we'll be using cargo-leptos and its env vars.
let conf = get_configuration(None).await.unwrap();
let addr = conf.leptos_options.site_addr;
// Generate the list of routes in your Leptos App
let routes = generate_route_list(|| view! { <App/> });
HttpServer::new(move || {
// Generate the list of routes in your Leptos App
let routes = generate_route_list(App);
let leptos_options = &conf.leptos_options;
let site_root = &leptos_options.site_root;
let routes = &routes;
App::new()
.leptos_routes(
leptos_options.to_owned(),
routes.to_owned(),
|| view! { <App/> },
)
.leptos_routes(routes, {
let leptos_options = leptos_options.clone();
move || {
use leptos::prelude::*;
view! {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<AutoReload options=leptos_options.clone() />
<HydrationScripts options=leptos_options.clone()/>
<MetaTags/>
</head>
<body>
<App/>
</body>
</html>
}
}})
.service(Files::new("/", site_root))
.wrap(middleware::Compress::default())
})

View File

@ -9,13 +9,10 @@ crate-type = ["cdylib", "rlib"]
[dependencies]
axum = { version = "0.7", optional = true }
console_error_panic_hook = "0.1"
console_log = "1"
leptos = { path = "../../leptos" }
leptos_meta = { path = "../../meta" }
leptos_axum = { path = "../../integrations/axum", optional = true }
leptos_router = { path = "../../router" }
log = "0.4.17"
simple_logger = "4"
tokio = { version = "1", features = ["rt-multi-thread", "macros"], optional = true }
tower = { version = "0.4", optional = true }
tower-http = { version = "0.5", features = ["fs"], optional = true }
@ -25,7 +22,7 @@ tracing = { version = "0.1", optional = true }
http = "1.0"
[features]
hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
hydrate = ["leptos/hydrate"]
ssr = [
"dep:axum",
"dep:tokio",

View File

@ -1,6 +1,9 @@
use leptos::prelude::*;
use leptos_meta::*;
use leptos_router::*;
use leptos_router::{
components::{FlatRoutes, Route, Router},
StaticSegment,
};
#[component]
pub fn App() -> impl IntoView {
@ -10,16 +13,16 @@ pub fn App() -> impl IntoView {
<Stylesheet id="leptos" href="/pkg/leptos_tailwind.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Router>
<Routes>
<Route path="" view= move || view! { <Home/> }/>
</Routes>
<FlatRoutes fallback=|| "Page not found.">
<Route path=StaticSegment("") view=Home/>
</FlatRoutes>
</Router>
}
}
#[component]
fn Home() -> impl IntoView {
let (value, set_value) = create_signal(0);
let (value, set_value) = signal(0);
// thanks to https://tailwindcomponents.com/component/blue-buttons-example for the showcase layout
view! {

View File

@ -1,14 +1,15 @@
use crate::app::App;
use axum::{
body::Body,
extract::State,
http::{Request, Response, StatusCode, Uri},
response::{IntoResponse, Response as AxumResponse},
};
use leptos::{view, LeptosOptions};
use leptos::prelude::*;
use tower::ServiceExt;
use tower_http::services::ServeDir;
use crate::app::App;
pub async fn file_and_error_handler(
uri: Uri,
State(options): State<LeptosOptions>,
@ -20,10 +21,7 @@ pub async fn file_and_error_handler(
if res.status() == StatusCode::OK {
res.into_response()
} else {
let handler = leptos_axum::render_app_to_stream(
options.to_owned(),
move || view! { <App/> },
);
let handler = leptos_axum::render_app_to_stream(App);
handler(req).await.into_response()
}
}

View File

@ -7,10 +7,6 @@ pub mod fallback;
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
use crate::app::App;
// initializes logging using the `log` crate
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
leptos::mount_to_body(App);
leptos::mount::mount_to_body(App);
}

View File

@ -1,36 +1,50 @@
#[cfg(feature = "ssr")]
use axum::Router;
use leptos::prelude::*;
use leptos_axum::{generate_route_list, LeptosRoutes};
use leptos_meta::MetaTags;
use leptos_tailwind::app::App;
use leptos_tailwind::fallback::file_and_error_handler;
#[tokio::main]
async fn main() {
use axum::Router;
use leptos::prelude::*;
use leptos_axum::{generate_route_list, LeptosRoutes};
use leptos_tailwind::{app::*, fallback::file_and_error_handler};
use log::info;
simple_logger::init_with_level(log::Level::Info)
.expect("couldn't initialize logging");
// Setting get_configuration(None) means we'll be using cargo-leptos's env values
// For deployment these variables are:
// <https://github.com/leptos-rs/start-axum#executing-a-server-on-a-remote-machine-without-the-toolchain>
// Alternately a file can be specified such as Some("Cargo.toml")
// The file would need to be included with the executable when moved to deployment
// Setting this to None means we'll be using cargo-leptos and its env vars
let conf = get_configuration(None).await.unwrap();
let addr = conf.leptos_options.site_addr;
let leptos_options = conf.leptos_options;
// Generate the list of routes in your Leptos App
let addr = leptos_options.site_addr;
let routes = generate_route_list(App);
// build our application with a route
let app = Router::new()
.leptos_routes(&leptos_options, routes, App)
.leptos_routes(&leptos_options, routes, {
let leptos_options = leptos_options.clone();
move || {
use leptos::prelude::*;
view! {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
// <AutoReload options=app_state.leptos_options.clone() />
<HydrationScripts options=leptos_options.clone()/>
<link rel="stylesheet" id="leptos" href="/pkg/benwis_leptos.css"/>
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<MetaTags/>
</head>
<body>
<App/>
</body>
</html>
}
}})
.fallback(file_and_error_handler)
.with_state(leptos_options);
// run our app with hyper
// `axum::Server` is a re-export of `hyper::Server`
info!("listening on http://{}", &addr);
let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
println!("listening on http://{}", &addr);
axum::serve(listener, app.into_make_service())
.await
.unwrap();

View File

@ -5,12 +5,7 @@ edition = "2021"
[dependencies]
leptos = { path = "../../leptos", features = ["csr"] }
leptos_meta = { path = "../../meta", features = ["csr"] }
leptos_router = { path = "../../router", features = ["csr"] }
log = "0.4"
leptos_meta = { path = "../../meta" }
leptos_router = { path = "../../router" }
gloo-net = { version = "0.6", features = ["http"] }
# dependencies for client (enable when csr or hydrate set)
wasm-bindgen = { version = "0.2" }
console_log = { version = "1" }
console_error_panic_hook = { version = "0.1" }

View File

@ -1,18 +1,20 @@
use leptos::prelude::*;
use leptos_meta::*;
use leptos_router::*;
use leptos_router::{
components::{Route, Router, Routes},
StaticSegment,
};
#[component]
pub fn App() -> impl IntoView {
provide_meta_context();
view! {
<Stylesheet id="leptos" href="/style/output.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Router>
<Routes>
<Route path="" view= move || view! { <Home/> }/>
<Routes fallback=|| "Page not found.">
<Route path=StaticSegment("") view=Home/>
</Routes>
</Router>
}
@ -20,7 +22,7 @@ pub fn App() -> impl IntoView {
#[component]
fn Home() -> impl IntoView {
let (count, set_count) = create_signal(0);
let (count, set_count) = signal(0);
view! {
<div class="my-0 mx-auto max-w-3xl text-center">

View File

@ -1,15 +1,10 @@
mod app;
use app::*;
use leptos::prelude::*;
use leptos::{logging, mount};
pub fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
logging::log!("csr mode - mounting to body");
mount_to_body(|| {
view! { <App /> }
});
mount::mount_to_body(App);
}

View File

@ -74,6 +74,7 @@ pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
}
}
#[server]
pub async fn delete_todo(id: u16) -> Result<(), ServerFnError> {
use self::ssr::*;
let mut conn = db().await?;

View File

@ -8,9 +8,7 @@ codegen-units = 1
lto = true
[dependencies]
leptos = { path = "../../leptos", features = ["serde"] }
log = "0.4"
console_log = "1"
leptos = { path = "../../leptos" }
console_error_panic_hook = "0.1.7"
uuid = { version = "1", features = ["v4", "js", "serde"] }
serde = { version = "1", features = ["derive"] }
@ -23,8 +21,6 @@ wasm-bindgen-test = "0.3.0"
[features]
default = ["csr"]
csr = ["leptos/csr"]
hydrate = ["leptos/hydrate"]
ssr = ["leptos/ssr"]
[package.metadata.cargo-all-features]
skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]

View File

@ -138,7 +138,7 @@ pub fn TodoMVC() -> impl IntoView {
// We provide a context that each <Todo/> component can use to update the list
// Here, I'm just passing the `WriteSignal`; a <Todo/> doesn't need to read the whole list
// (and shouldn't try to, as that would cause each individual <Todo/> to re-render when
// a new todo is added! This kind of hygiene is why `create_signal` defaults to read-write
// a new todo is added! This kind of hygiene is why `signal` defaults to read-write
// segregation.)
provide_context(set_todos);
@ -201,7 +201,9 @@ pub fn TodoMVC() -> impl IntoView {
let json = serde_json::to_string(&todos)
.expect("couldn't serialize Todos");
if storage.set_item(STORAGE_KEY, &json).is_err() {
log::error!("error while trying to set item in localStorage");
leptos::logging::error!(
"error while trying to set item in localStorage"
);
}
}
});
@ -301,7 +303,6 @@ pub fn Todo(todo: Todo) -> impl IntoView {
let todo_input = NodeRef::<Input>::new();
let save = move |value: &str| {
leptos::tachys::log("saving...");
let value = value.trim();
if value.is_empty() {
set_todos.update(|t| t.remove(todo.id));

View File

@ -1,7 +1,6 @@
use leptos::prelude::*;
pub use todomvc::*;
fn main() {
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to_body(TodoMVC)
leptos::mount::mount_to_body(TodoMVC)
}