feat: wire components together

This commit is contained in:
Ryan Mwangi 2024-12-05 16:50:25 +03:00
parent b692c12e7e
commit 224db2aa05
12 changed files with 53 additions and 121 deletions

2
Cargo.lock generated
View File

@ -503,6 +503,8 @@ dependencies = [
"leptos_actix", "leptos_actix",
"leptos_meta", "leptos_meta",
"leptos_router", "leptos_router",
"serde",
"uuid",
"wasm-bindgen", "wasm-bindgen",
] ]

View File

@ -16,6 +16,8 @@ leptos_meta = { version = "0.6" }
leptos_actix = { version = "0.6", optional = true } leptos_actix = { version = "0.6", optional = true }
leptos_router = { version = "0.6" } leptos_router = { version = "0.6" }
wasm-bindgen = "=0.2.96" wasm-bindgen = "=0.2.96"
uuid = { version = "1.3", features = ["v4"] }
serde = { version = "1.0", features = ["derive"] }
[features] [features]
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"] csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]

View File

@ -8,6 +8,9 @@
"name": "end2end", "name": "end2end",
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": {
"end2end": "file:"
},
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.44.1", "@playwright/test": "^1.44.1",
"@types/node": "^20.12.12", "@types/node": "^20.12.12",
@ -40,6 +43,10 @@
"undici-types": "~5.26.4" "undici-types": "~5.26.4"
} }
}, },
"node_modules/end2end": {
"resolved": "",
"link": true
},
"node_modules/fsevents": { "node_modules/fsevents": {
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",

View File

@ -11,5 +11,8 @@
"@playwright/test": "^1.44.1", "@playwright/test": "^1.44.1",
"@types/node": "^20.12.12", "@types/node": "^20.12.12",
"typescript": "^5.4.5" "typescript": "^5.4.5"
},
"dependencies": {
"end2end": "file:"
} }
} }

View File

@ -1,63 +1,33 @@
use leptos::*; use leptos::*;
use leptos_meta::*; use crate::components::{item_form::ItemForm, items_list::ItemsList};
use leptos_router::*; use crate::models::item::Item;
use std::thread::Scope;
#[component] // Define the props struct
pub fn App() -> impl IntoView { #[derive(Debug, Clone)]
// Provides context that manages stylesheets, titles, meta tags, etc. pub struct AppProps {
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/compareware.css"/>
// sets the document title
<Title text="Welcome to Leptos"/>
// content for this welcome page
<Router>
<main>
<Routes>
<Route path="" view=HomePage/>
<Route path="/*any" view=NotFound/>
</Routes>
</main>
</Router>
}
} }
/// Renders the home page of your application.
#[component] #[component]
fn HomePage() -> impl IntoView { pub fn App(cx: Scope<'_, '_>) -> impl IntoView {
// Creates a reactive value to update the button let items = create_signal(Vec::<Item>::new());
let (count, set_count) = create_signal(0);
let on_click = move |_| set_count.update(|count| *count += 1);
view! { let add_item = move |name: String, description: String, tags: Vec<(String, String)>| {
<h1>"Welcome to Leptos!"</h1> items.update(|items| {
<button on:click=on_click>"Click Me: " {count}</button> items.push(Item {
} id: uuid::Uuid::new_v4().to_string(),
} name,
description,
/// 404 - Not Found tags,
#[component] });
fn NotFound() -> impl IntoView { });
// set an HTTP status code 404 };
// this is feature gated because it can only be done during
// initial server-side rendering view! { cx,
// if you navigate to the 404 page subsequently, the status <div>
// code will not be set because there is not a new HTTP request <h1>{ "CompareWare" }</h1>
// to the server <ItemForm on_submit=add_item />
#[cfg(feature = "ssr")] <ItemsList items=items.get().clone() />
{ </div>
// this can be done inline because it's synchronous
// if it were async, we'd use a server function
let resp = expect_context::<leptos_actix::ResponseOptions>();
resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
}
view! {
<h1>"Not Found"</h1>
} }
} }

View File

@ -1,10 +1,11 @@
use leptos::*; use leptos::*;
use std::thread::Scope;
#[component] #[component]
pub fn ItemForm(cx: Scope, on_submit: Box<dyn Fn(String, String, Vec<(String, String)>)>) -> impl IntoView { pub fn ItemForm(cx: Scope, on_submit: Box<dyn Fn(String, String, Vec<(String, String)>)>) -> impl IntoView {
let name = create_signal(cx, String::new()); let name = create_signal(String::new());
let description = create_signal(cx, String::new()); let description = create_signal(String::new());
let tags = create_signal(cx, vec![]); let tags = create_signal(vec![]);
let handle_submit = move |_| { let handle_submit = move |_| {
on_submit(name.get().clone(), description.get().clone(), tags.get().clone()); on_submit(name.get().clone(), description.get().clone(), tags.get().clone());

View File

@ -1,5 +1,6 @@
use leptos::*; use leptos::*;
use crate::models::item::Item; use crate::models::item::Item;
use std::thread::Scope;
#[component] #[component]
pub fn ItemsList(cx: Scope, items: Vec<Item>) -> impl IntoView { pub fn ItemsList(cx: Scope, items: Vec<Item>) -> impl IntoView {

2
src/components/mod.rs Normal file
View File

@ -0,0 +1,2 @@
pub mod item_form;
pub mod items_list;

View File

@ -1,4 +1,7 @@
pub mod app; pub mod app;
pub mod components;
pub mod models;
#[cfg(feature = "hydrate")] #[cfg(feature = "hydrate")]
#[wasm_bindgen::prelude::wasm_bindgen] #[wasm_bindgen::prelude::wasm_bindgen]

View File

@ -1,66 +1,6 @@
#[cfg(feature = "ssr")] use leptos::*;
#[actix_web::main] use crate::app::App;
async fn main() -> std::io::Result<()> {
use actix_files::Files;
use actix_web::*;
use leptos::*;
use leptos_actix::{generate_route_list, LeptosRoutes};
use compareware::app::*;
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(App);
println!("listening on http://{}", &addr);
HttpServer::new(move || {
let leptos_options = &conf.leptos_options;
let site_root = &leptos_options.site_root;
App::new()
// serve JS/WASM/CSS from `pkg`
.service(Files::new("/pkg", format!("{site_root}/pkg")))
// serve other assets from the `assets` directory
.service(Files::new("/assets", site_root))
// serve the favicon from /favicon.ico
.service(favicon)
.leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
.app_data(web::Data::new(leptos_options.to_owned()))
//.wrap(middleware::Compress::default())
})
.bind(&addr)?
.run()
.await
}
#[cfg(feature = "ssr")]
#[actix_web::get("favicon.ico")]
async fn favicon(
leptos_options: actix_web::web::Data<leptos::LeptosOptions>,
) -> actix_web::Result<actix_files::NamedFile> {
let leptos_options = leptos_options.into_inner();
let site_root = &leptos_options.site_root;
Ok(actix_files::NamedFile::open(format!(
"{site_root}/favicon.ico"
))?)
}
#[cfg(not(any(feature = "ssr", feature = "csr")))]
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
// see optional feature `csr` instead
}
#[cfg(all(not(feature = "ssr"), feature = "csr"))]
pub fn main() {
// a client-side main function is required for using `trunk serve`
// prefer using `cargo leptos serve` instead
// to run: `trunk serve --open --features csr`
use compareware::app::*;
console_error_panic_hook::set_once();
fn main() {
leptos::mount_to_body(App); leptos::mount_to_body(App);
} }

1
src/models/mod.rs Normal file
View File

@ -0,0 +1 @@
pub mod item;