feat: wire components together
This commit is contained in:
parent
b692c12e7e
commit
224db2aa05
|
@ -503,6 +503,8 @@ dependencies = [
|
||||||
"leptos_actix",
|
"leptos_actix",
|
||||||
"leptos_meta",
|
"leptos_meta",
|
||||||
"leptos_router",
|
"leptos_router",
|
||||||
|
"serde",
|
||||||
|
"uuid",
|
||||||
"wasm-bindgen",
|
"wasm-bindgen",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
@ -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"]
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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:"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
80
src/app.rs
80
src/app.rs
|
@ -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>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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());
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
pub mod item_form;
|
||||||
|
pub mod items_list;
|
|
@ -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]
|
||||||
|
|
66
src/main.rs
66
src/main.rs
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
pub mod item;
|
Loading…
Reference in New Issue