feat: update to newest leptos

Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
Kasper Juul Hermansen 2023-10-20 23:06:21 +02:00
parent 8ee2ca5c14
commit a7986e304c
Signed by: kjuulh
GPG Key ID: 57B6E1465221F912
15 changed files with 733 additions and 831 deletions

1325
Cargo.lock generated

File diff suppressed because it is too large Load Diff

View File

@ -19,18 +19,18 @@ console_error_panic_hook = "0.1"
console_log = "0.2"
cfg-if = "1"
lazy_static = "1"
leptos = { version = "*", default-features = false, features = ["serde"] }
leptos_dom = { version = "*", default-features = false }
leptos_meta = { version = "*", default-features = false }
leptos_axum = { version = "*", default-features = false, optional = true }
leptos_router = { version = "*", default-features = false }
leptos = { version = "*", features = ["serde"] }
leptos_dom = { version = "*" }
leptos_meta = { version = "*" }
leptos_axum = { version = "*", optional = true }
leptos_router = { version = "*" }
log = "0.4"
simple_logger = "4"
thiserror = "1"
axum = { version = "0.6.1", optional = true }
tower = { version = "0.4.13", optional = true }
tower-http = { version = "0.3.4", features = ["fs"], optional = true }
tokio = { version = "1", features = ["time"], optional = true }
tokio = { version = "1", features = ["rt-multi-thread", "macros", "time"], optional = true }
wasm-bindgen = "0.2"
tracing-subscriber = { version = "0.3.16", optional = true, features = [
"env-filter",
@ -61,6 +61,10 @@ ssr = [
"dep:tracing",
]
[package.metadata.cargo-all-features]
denylist = ["axum", "tower", "tower-http", "tokio", "sqlx", "leptos_axum"]
skip_feature_sets = [["ssr", "hydrate"]]
[package.metadata.leptos]
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
output-name = "como_web"

View File

@ -1,20 +1,6 @@
#!/bin/bash
tmux new-window -n dev
zellij run -- sh -c "cuddle x leptos:dev"
# allow for user input
tmux split-window -h
# leptos
tmux send-keys -t dev "cuddle x leptos:dev" C-m
tmux split-window -v
# tailwind
tmux send-keys -t dev "cuddle x tailwind:watch" C-m
# set user input to first
tmux select-pane -t 0
tmux attach-session -t dev
zellij run -- sh -c "cuddle x tailwind:watch"

View File

@ -8,44 +8,44 @@ use crate::routes::features_view::FeaturesView;
use crate::routes::home::HomePage;
#[component]
pub fn App(cx: Scope) -> impl IntoView {
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context(cx);
provide_meta_context();
view! { cx,
view! {
<Stylesheet id="leptos" href="/pkg/como_web.css"/>
<Router>
<main>
<Routes>
<Route
path=""
view=|cx| {
view! { cx, <HomePage/> }
view=|| {
view! { <HomePage/> }
}
/>
<Route
path="/dash"
view=|cx| {
view! { cx, <DashboardLayout/> }
view=|| {
view! { <DashboardLayout/> }
}
>
<Route
path=""
view=|cx| {
view! { cx, <DashHomePage/> }
view=|| {
view! { <DashHomePage/> }
}
/>
<Route
path="home"
view=|cx| {
view! { cx, <DashHomePage/> }
view=|| {
view! { <DashHomePage/> }
}
/>
</Route>
<Route
path="/features"
view=|cx| {
view! { cx, <FeaturesView/> }
view=|| {
view! { <FeaturesView/> }
}
/>
</Routes>

View File

@ -5,8 +5,8 @@ use crate::features::command_line::CommandLine;
use crate::features::navbar_projects::NavbarProjects;
#[component]
pub fn DashNav(cx: Scope) -> impl IntoView {
view! { cx,
pub fn DashNav() -> impl IntoView {
view! {
<nav class="min-w-[200px] p-4 space-y-4 h-screen sticky top-0 select-none bg-gray-800">
<div>
<a href="/dash/home" class="text-xl">
@ -35,8 +35,8 @@ pub fn DashNav(cx: Scope) -> impl IntoView {
}
#[component]
pub fn DashboardLayout(cx: Scope) -> impl IntoView {
view! { cx,
pub fn DashboardLayout() -> impl IntoView {
view! {
<div class="flex flex-row">
<DashNav/>
<div id="content" class="px-0.5 flex-grow">

View File

@ -3,19 +3,17 @@ use cfg_if::cfg_if;
cfg_if! { if #[cfg(feature = "ssr")] {
use axum::{
body::{boxed, Body, BoxBody},
extract::Extension,
extract::State,
response::IntoResponse,
http::{Request, Response, StatusCode, Uri},
};
use axum::response::Response as AxumResponse;
use tower::ServiceExt;
use tower_http::services::ServeDir;
use std::sync::Arc;
use leptos::{LeptosOptions, Errors, view};
use crate::app::{App, AppProps};
use leptos::{LeptosOptions, view};
use crate::app::App;
pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
let options = &*options;
pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
let root = options.site_root.clone();
let res = get_static_file(uri.clone(), &root).await.unwrap();
@ -24,7 +22,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
} else{
let handler = leptos_axum::render_app_to_stream(
options.to_owned(),
move |cx| view!{ cx, <App/> }
move || view!{ <App/> }
);
handler(req).await.into_response()
}

View File

@ -6,50 +6,50 @@ pub struct CommandLineState {
}
#[component]
pub fn CommandLineModalView(cx: Scope) -> impl IntoView {
view! { cx, <div>"modal"</div> }
pub fn CommandLineModalView() -> impl IntoView {
view! { <div>"modal"</div> }
}
#[component]
pub fn CommandLineModal(cx: Scope) -> impl IntoView {
pub fn CommandLineModal() -> impl IntoView {
let state =
use_context::<RwSignal<CommandLineState>>(cx).expect("command line state must be provided");
use_context::<RwSignal<CommandLineState>>().expect("command line state must be provided");
let (hidden, _) = create_slice(cx, state, |state| state.hidden, |state, n| state.hidden = n);
let (hidden, _) = create_slice(state, |state| state.hidden, |state, n| state.hidden = n);
view! { cx,
view! {
{move || {
if !hidden.get() {
view! { cx, <CommandLineModalView/> }
view! { <CommandLineModalView/> }
} else {
view! { cx, }
view! { }.into_view()
}
}}
}
}
#[component]
pub fn CommandLine(cx: Scope, children: Children) -> impl IntoView {
let state = create_rw_signal(cx, CommandLineState { hidden: true });
provide_context(cx, state);
pub fn CommandLine(children: Children) -> impl IntoView {
let state = create_rw_signal(CommandLineState { hidden: true });
provide_context(state);
let (hidden, set_hidden) =
create_slice(cx, state, |state| state.hidden, |state, n| state.hidden = n);
create_slice(state, |state| state.hidden, |state, n| state.hidden = n);
leptos_dom::helpers::window_event_listener(ev::keypress, move |event| {
if event.ctrl_key() {
match event.code().as_str() {
"KeyK" => {
set_hidden(!hidden.get());
log!("toggle command")
set_hidden.set(!hidden.get());
//log!("toggle command")
}
_ => {}
}
}
});
view! { cx,
view! {
<div>
<div>{children(cx)}</div>
<div>{children()}</div>
<CommandLineModal/>
</div>
}

View File

@ -24,16 +24,13 @@ pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetPro
}
#[component]
pub fn DashboardItemView(cx: Scope, item: GetProjectsListViewGetProjectsItems) -> impl IntoView {
view! { cx, <div class="dashboard-list-item dashboard-item">{item.title}</div> }
pub fn DashboardItemView(item: GetProjectsListViewGetProjectsItems) -> impl IntoView {
view! { <div class="dashboard-list-item dashboard-item">{item.title}</div> }
}
#[component]
pub fn DashboardProjectItemView(
cx: Scope,
project: GetProjectsListViewGetProjects,
) -> impl IntoView {
view! { cx,
pub fn DashboardProjectItemView(project: GetProjectsListViewGetProjects) -> impl IntoView {
view! {
<div class="dashboard-list-item dashboard-list-project">
<a href=format!("/dash/project/{}", & project.id) class="project-item flex flex-row">
<div class="space-x-2">
@ -48,20 +45,24 @@ pub fn DashboardProjectItemView(
#[component]
pub fn DashboardListView(
cx: Scope,
projects: Resource<(), Vec<GetProjectsListViewGetProjects>>,
) -> impl IntoView {
let projects_view = move || {
projects.with(cx, |projects| {
projects.with(|projects| {
if projects.is_none() {
return Vec::new();
}
let projects = projects.as_ref().unwrap();
if projects.is_empty() {
return vec![view! { cx, <div class="project-item">"No projects"</div> }.into_any()];
return vec![view! { <div class="project-item">"No projects"</div> }.into_any()];
}
projects
.into_iter()
.filter(|project| !project.items.is_empty())
.map(|project| {
view! { cx,
view! {
<div>
<DashboardProjectItemView project=project.clone()/>
{&project
@ -69,10 +70,10 @@ pub fn DashboardListView(
.clone()
.into_iter()
.map(|item| {
view! { cx, <DashboardItemView item=item/> }
view! { <DashboardItemView item=item/> }
})
.collect::<Vec<_>>()
.into_view(cx)}
.into_view()}
</div>
}
.into_any()
@ -81,13 +82,12 @@ pub fn DashboardListView(
})
};
view! { cx, <div class="project-items">{projects_view}</div> }
view! {<div class="project-items">{projects_view}</div> }
}
#[component]
pub fn DashboardList(cx: Scope) -> impl IntoView {
let projects =
create_local_resource(cx, || (), |_| async { get_projects_list().await.unwrap() });
pub fn DashboardList() -> impl IntoView {
let projects = create_local_resource(|| (), |_| async { get_projects_list().await.unwrap() });
view! { cx, <DashboardListView projects=projects/> }
view! {<DashboardListView projects=projects/> }
}

View File

@ -25,20 +25,24 @@ pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetPro
#[component]
pub fn NavbarProjectsView(
cx: Scope,
projects: Resource<(), Vec<GetProjectsListViewGetProjects>>,
) -> impl IntoView {
let projects_view = move || {
projects.with(cx, |projects| {
projects.with(|projects| {
if projects.is_none() {
return Vec::new()
}
let projects = projects.as_ref().unwrap();
if projects.is_empty() {
return vec![view! { cx, <div class="project-item">"No projects"</div> }.into_any()];
return vec![view! { <div class="project-item">"No projects"</div> }.into_any()];
}
projects
.into_iter()
.map(|project| {
view! { cx,
view! {
<a href=format!("/dash/project/{}", & project.id) class="project-item">
@ -53,13 +57,13 @@ pub fn NavbarProjectsView(
})
};
view! { cx, <div class="project-items space-y-1">{projects_view}</div> }
view! { <div class="project-items space-y-1">{projects_view}</div> }
}
#[component]
pub fn NavbarProjects(cx: Scope) -> impl IntoView {
pub fn NavbarProjects() -> impl IntoView {
let projects =
create_local_resource(cx, || (), |_| async { get_projects_list().await.unwrap() });
create_local_resource(|| (), |_| async { get_projects_list().await.unwrap() });
view! { cx, <NavbarProjectsView projects=projects/> }
view! { <NavbarProjectsView projects=projects/> }
}

View File

@ -19,8 +19,8 @@ if #[cfg(feature = "hydrate")] {
console_error_panic_hook::set_once();
leptos::mount_to_body(move |cx| {
view! { cx, <App/> }
leptos::mount_to_body(move || {
view! { <App/> }
});
}
}

View File

@ -18,19 +18,19 @@ async fn main() {
let addr = conf.leptos_options.site_addr;
let leptos_options = conf.leptos_options;
// Generate the list of routes in your Leptos App
let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
let routes = generate_route_list(App);
como_web::api::register();
let app = Router::new()
.route("/api/*fn_name", post(leptos_axum::handle_server_fns))
.leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> })
.leptos_routes(&leptos_options.clone(), routes, || view! { <App/> })
.fallback(file_and_error_handler)
.layer(Extension(Arc::new(leptos_options)));
.with_state(leptos_options);
// run our app with hyper
// `axum::Server` is a re-export of `hyper::Server`
log!("listening on http://{}", &addr);
// log!("listening on http://{}", &addr);
axum::Server::bind(&addr)
.serve(app.into_make_service())
.await

View File

@ -3,8 +3,8 @@ use leptos::*;
use crate::features::dashboard_list_view::DashboardList;
#[component]
pub fn DashHomePage(cx: Scope) -> impl IntoView {
view! { cx,
pub fn DashHomePage() -> impl IntoView {
view! {
<div class="home-dash">
<DashboardList/>
</div>

View File

@ -5,9 +5,8 @@ use crate::features::navbar_projects::gen::queries::get_projects_list_view::GetP
use crate::features::navbar_projects::NavbarProjectsView;
#[component]
pub fn FeaturesView(cx: Scope) -> impl IntoView {
pub fn FeaturesView() -> impl IntoView {
let projects = create_local_resource(
cx,
|| (),
|_| async {
vec![
@ -24,9 +23,9 @@ pub fn FeaturesView(cx: Scope) -> impl IntoView {
);
let emptyProjects: Resource<(), Vec<GetProjectsListViewGetProjects>> =
create_local_resource(cx, || (), |_| async { Vec::new() });
create_local_resource(|| (), |_| async { Vec::new() });
view! { cx,
view! {
<div>
<div class="space-y-5 p-2">
<h1>"NavbarProjects"</h1>

View File

@ -1,8 +1,8 @@
use leptos::*;
#[component]
pub fn Navbar(cx: Scope) -> impl IntoView {
view! { cx,
pub fn Navbar() -> impl IntoView {
view! {
<div class="flex flex-row justify-between items-center bg-gray-800 p-4">
<div class="flex flex-row items-center">
<div class="text-2xl text-white font-bold">"Como - Todo"</div>
@ -19,8 +19,8 @@ pub fn Navbar(cx: Scope) -> impl IntoView {
}
#[component]
pub fn HomePage(cx: Scope) -> impl IntoView {
view! { cx,
pub fn HomePage() -> impl IntoView {
view! {
<Navbar/>
<h1 class="text-xl text-red-50">"Welcome to Leptos!"</h1>
}

View File

@ -1,5 +1,5 @@
/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
*/
/*
@ -191,6 +191,10 @@ select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
@ -341,6 +345,14 @@ menu {
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/