update hackernews_axum to 0.7

examples/hackernews_axum/Cargo.toml

@@ -11,14 +11,11 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-console_log = "1.0"
 console_error_panic_hook = "0.1"
 leptos = { path = "../../leptos" }
 leptos_axum = { path = "../../integrations/axum", optional = true }
 leptos_meta = { path = "../../meta" }
 leptos_router = { path = "../../router" }
-log = "0.4"
-simple_logger = "4.0"
 serde = { version = "1.0", features = ["derive"] }
 tracing = "0.1"
 gloo-net = { version = "0.6", features = ["http"] }
@@ -30,11 +27,12 @@ tokio = { version = "1", features = ["full"], optional = true }
 http = { version = "1.0", optional = true }
 web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }
 wasm-bindgen = "0.2"
+send_wrapper = { version = "0.6.0", features = ["futures"] }
 
 [features]
 default = ["csr"]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+csr = ["leptos/csr"]
+hydrate = ["leptos/hydrate"]
 ssr = [
   "dep:axum",
   "dep:tower",

examples/hackernews_axum/src/api.rs

@@ -1,4 +1,5 @@
-use leptos::Serializable;
+use leptos::logging;
+use serde::de::DeserializeOwned;
 use serde::{Deserialize, Serialize};
 
 pub fn story(path: &str) -> String {
@@ -10,46 +11,51 @@ pub fn user(path: &str) -> String {
 }
 
 #[cfg(not(feature = "ssr"))]
-pub async fn fetch_api<T>(path: &str) -> Option<T>
+pub fn fetch_api<T>(
+    path: &str,
+) -> impl std::future::Future<Output = Option<T>> + Send + '_
 where
-    T: Serializable,
+    T: Serialize + DeserializeOwned,
 {
-    let abort_controller = web_sys::AbortController::new().ok();
-    let abort_signal = abort_controller.as_ref().map(|a| a.signal());
+    use leptos::prelude::on_cleanup;
+    use send_wrapper::SendWrapper;
 
-    // abort in-flight requests if e.g., we've navigated away from this page
-    leptos::on_cleanup(move || {
-        if let Some(abort_controller) = abort_controller {
-            abort_controller.abort()
-        }
-    });
+    SendWrapper::new(async move {
+        let abort_controller =
+            SendWrapper::new(web_sys::AbortController::new().ok());
+        let abort_signal = abort_controller.as_ref().map(|a| a.signal());
 
-    let json = gloo_net::http::Request::get(path)
-        .abort_signal(abort_signal.as_ref())
-        .send()
-        .await
-        .map_err(|e| log::error!("{e}"))
-        .ok()?
-        .text()
-        .await
-        .ok()?;
+        // abort in-flight requests if, e.g., we've navigated away from this page
+        on_cleanup(move || {
+            if let Some(abort_controller) = abort_controller.take() {
+                abort_controller.abort()
+            }
+        });
 
-    T::de(&json).ok()
+        gloo_net::http::Request::get(path)
+            .abort_signal(abort_signal.as_ref())
+            .send()
+            .await
+            .map_err(|e| logging::error!("{e}"))
+            .ok()?
+            .json()
+            .await
+            .ok()
+    })
 }
 
 #[cfg(feature = "ssr")]
 pub async fn fetch_api<T>(path: &str) -> Option<T>
 where
-    T: Serializable,
+    T: Serialize + DeserializeOwned,
 {
-    let json = reqwest::get(path)
+    reqwest::get(path)
         .await
-        .map_err(|e| log::error!("{e}"))
+        .map_err(|e| logging::error!("{e}"))
         .ok()?
-        .text()
+        .json()
         .await
-        .ok()?;
-    T::de(&json).map_err(|e| log::error!("{e}")).ok()
+        .ok()
 }
 
 #[derive(Debug, Deserialize, Serialize, PartialEq, Eq, Clone)]

examples/hackernews_axum/src/fallback.rs

@@ -1,14 +1,15 @@
-use crate::error_template::error_template;
 use axum::{
     body::Body,
     extract::State,
     http::{Request, Response, StatusCode, Uri},
     response::{IntoResponse, Response as AxumResponse},
 };
-use leptos::LeptosOptions;
+use leptos::config::LeptosOptions;
 use tower::ServiceExt;
 use tower_http::services::ServeDir;
 
+use crate::shell;
+
 pub async fn file_and_error_handler(
     uri: Uri,
     State(options): State<LeptosOptions>,
@@ -21,9 +22,7 @@ pub async fn file_and_error_handler(
         res.into_response()
     } else {
         let handler =
-            leptos_axum::render_app_to_stream(options.to_owned(), || {
-                error_template(None)
-            });
+            leptos_axum::render_app_to_stream(move || shell(&options));
         handler(req).await.into_response()
     }
 }

examples/hackernews_axum/src/lib.rs

@@ -1,31 +1,57 @@
-use leptos::{component, view, IntoView};
-use leptos_meta::*;
-use leptos_router::*;
+use leptos::prelude::*;
 mod api;
-pub mod error_template;
 #[cfg(feature = "ssr")]
 pub mod fallback;
-#[cfg(feature = "ssr")]
-pub mod handlers;
 mod routes;
+use leptos_meta::{provide_meta_context, Link, Meta, MetaTags, Stylesheet};
+use leptos_router::{
+    components::{FlatRoutes, Route, Router, RoutingProgress},
+    ParamSegment, StaticSegment,
+};
 use routes::{nav::*, stories::*, story::*, users::*};
+use std::time::Duration;
+
+pub fn shell(leptos_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=leptos_options.clone() />
+                <HydrationScripts options=leptos_options.clone()/>
+                <MetaTags/>
+            </head>
+            <body>
+                <App/>
+            </body>
+        </html>
+    }
+}
 
 #[component]
 pub fn App() -> impl IntoView {
     provide_meta_context();
+    let (is_routing, set_is_routing) = signal(false);
 
     view! {
-        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
         <Stylesheet id="leptos" href="/pkg/hackernews_axum.css"/>
+        <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
         <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
-        <Router>
+        <Router set_is_routing>
+            // shows a progress bar while async data are loading
+            <div class="routing-progress">
+                <RoutingProgress is_routing max_time=Duration::from_millis(250)/>
+            </div>
             <Nav />
             <main>
-                <Routes>
-                    <Route path="users/:id" view=User/>
-                    <Route path="stories/:id" view=Story/>
-                    <Route path=":stories?" view=Stories/>
-                </Routes>
+                <FlatRoutes fallback=|| "Not found.">
+                    <Route path=(StaticSegment("users"), ParamSegment("id")) view=User/>
+                    <Route path=(StaticSegment("stories"), ParamSegment("id")) view=Story/>
+                    <Route path=ParamSegment("stories") view=Stories/>
+                    // TODO allow optional params without duplication
+                    <Route path=StaticSegment("") view=Stories/>
+                </FlatRoutes>
             </main>
         </Router>
     }
@@ -34,7 +60,6 @@ pub fn App() -> impl IntoView {
 #[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(App);
+    leptos::mount::hydrate_body(App);
 }

examples/hackernews_axum/src/main.rs

@@ -2,8 +2,9 @@
 #[tokio::main]
 async fn main() {
     use axum::{routing::get, Router};
-    use hackernews_axum::{fallback::file_and_error_handler, *};
-    use leptos::get_configuration;
+    use hackernews_axum::fallback::file_and_error_handler;
+    use hackernews_axum::{shell, App};
+    use leptos::config::get_configuration;
     use leptos_axum::{generate_route_list, LeptosRoutes};
 
     let conf = get_configuration(Some("Cargo.toml")).await.unwrap();
@@ -11,13 +12,13 @@ async fn main() {
     let addr = leptos_options.site_addr;
     let routes = generate_route_list(App);
 
-    simple_logger::init_with_level(log::Level::Debug)
-        .expect("couldn't initialize logging");
-
     // build our application with a route
     let app = Router::new()
         .route("/favicon.ico", get(file_and_error_handler))
-        .leptos_routes(&leptos_options, routes, App)
+        .leptos_routes(&leptos_options, routes, {
+            let leptos_options = leptos_options.clone();
+            move || shell(&leptos_options)
+        })
         .fallback(file_and_error_handler)
         .with_state(leptos_options);
 

examples/hackernews_axum/src/routes/nav.rs

@@ -1,12 +1,12 @@
-use leptos::{component, view, IntoView};
-use leptos_router::*;
+use leptos::prelude::*;
+use leptos_router::components::A;
 
 #[component]
 pub fn Nav() -> impl IntoView {
     view! {
         <header class="header">
             <nav class="inner">
-                <A href="/">
+                <A href="/home">
                     <strong>"HN"</strong>
                 </A>
                 <A href="/new">

examples/hackernews_axum/src/routes/stories.rs

@@ -1,6 +1,9 @@
 use crate::api;
-use leptos::prelude::*;
-use leptos_router::*;
+use leptos::{either::Either, prelude::*};
+use leptos_router::{
+    components::A,
+    hooks::{use_params_map, use_query_map},
+};
 
 fn category(from: &str) -> &'static str {
     match from {
@@ -18,62 +21,65 @@ pub fn Stories() -> impl IntoView {
     let params = use_params_map();
     let page = move || {
         query
-            .with(|q| q.get("page").and_then(|page| page.parse::<usize>().ok()))
+            .read()
+            .get("page")
+            .and_then(|page| page.parse::<usize>().ok())
             .unwrap_or(1)
     };
     let story_type = move || {
         params
-            .with(|p| p.get("stories").cloned())
+            .read()
+            .get("stories")
             .unwrap_or_else(|| "top".to_string())
     };
-    let stories = create_resource(
+    let stories = Resource::new(
         move || (page(), story_type()),
         move |(page, story_type)| async move {
             let path = format!("{}?page={}", category(&story_type), page);
             api::fetch_api::<Vec<api::Story>>(&api::story(&path)).await
         },
     );
-    let (pending, set_pending) = create_signal(false);
+    let (pending, set_pending) = signal(false);
 
-    let hide_more_link = move || {
-        stories.get().unwrap_or(None).unwrap_or_default().len() < 28
-            || pending.get()
-    };
+    let hide_more_link = move || match &*stories.read() {
+        Some(Some(stories)) => stories.len() < 28,
+        _ => true
+    } || pending.get();
 
     view! {
         <div class="news-view">
             <div class="news-list-nav">
                 <span>
                     {move || if page() > 1 {
-                        view! {
-
+                        Either::Left(view! {
                             <a class="page-link"
                                 href=move || format!("/{}?page={}", story_type(), page() - 1)
-                                attr:aria_label="Previous Page"
+                                aria-label="Previous Page"
                             >
                                 "< prev"
                             </a>
-                        }.into_any()
+                        })
                     } else {
-                        view! {
-
+                        Either::Right(view! {
                             <span class="page-link disabled" aria-hidden="true">
                                 "< prev"
                             </span>
-                        }.into_any()
+                        })
                     }}
                 </span>
                 <span>"page " {page}</span>
-                <span class="page-link"
-                    class:disabled=hide_more_link
-                    aria-hidden=hide_more_link
-                >
-                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
-                        aria-label="Next Page"
+                <Suspense>
+                    <span class="page-link"
+                        class:disabled=hide_more_link
+                        aria-hidden=hide_more_link
                     >
-                        "more >"
-                    </a>
-                </span>
+                        <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                            aria-label="Next Page"
+                        >
+                            "more >"
+                        </a>
+                    </span>
+                </Suspense>
             </div>
             <main class="news-list">
                 <div>
@@ -81,23 +87,19 @@ pub fn Stories() -> impl IntoView {
                         fallback=move || view! { <p>"Loading..."</p> }
                         set_pending
                     >
-                        {move || match stories.get() {
-                            None => None,
-                            Some(None) => Some(view! { <p>"Error loading stories."</p> }.into_any()),
-                            Some(Some(stories)) => {
-                                Some(view! {
-                                    <ul>
-                                        <For
-                                            each=move || stories.clone()
-                                            key=|story| story.id
-                                            let:story
-                                        >
-                                            <Story story/>
-                                        </For>
-                                    </ul>
-                                }.into_any())
-                            }
-                        }}
+                        <Show when=move || stories.read().as_ref().map(Option::is_none).unwrap_or(false)>
+                        >
+                            <p>"Error loading stories."</p>
+                        </Show>
+                        <ul>
+                            <For
+                                each=move || stories.get().unwrap_or_default().unwrap_or_default()
+                                key=|story| story.id
+                                let:story
+                            >
+                                <Story story/>
+                            </For>
+                        </ul>
                     </Transition>
                 </div>
             </main>
@@ -112,23 +114,23 @@ fn Story(story: api::Story) -> impl IntoView {
             <span class="score">{story.points}</span>
             <span class="title">
                 {if !story.url.starts_with("item?id=") {
-                    view! {
+                    Either::Left(view! {
                         <span>
                             <a href=story.url target="_blank" rel="noreferrer">
                                 {story.title.clone()}
                             </a>
                             <span class="host">"("{story.domain}")"</span>
                         </span>
-                    }.into_view()
+                    })
                 } else {
                     let title = story.title.clone();
-                    view! { <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/stories/{}", story.id)>{title}</A> })
                 }}
             </span>
             <br />
             <span class="meta">
                 {if story.story_type != "job" {
-                    view! {
+                    Either::Left(view! {
                         <span>
                             {"by "}
                             {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
@@ -141,10 +143,10 @@ fn Story(story: api::Story) -> impl IntoView {
                                 }}
                             </A>
                         </span>
-                    }.into_view()
+                    })
                 } else {
                     let title = story.title.clone();
-                    view! { <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                    Either::Right(view! { <A href=format!("/item/{}", story.id)>{title}</A> })
                 }}
             </span>
             {(story.story_type != "link").then(|| view! {

examples/hackernews_axum/src/routes/story.rs

@@ -1,13 +1,15 @@
 use crate::api;
+use leptos::either::Either;
 use leptos::prelude::*;
-use leptos_meta::*;
-use leptos_router::*;
+use leptos_meta::Meta;
+use leptos_router::components::A;
+use leptos_router::hooks::use_params_map;
 
 #[component]
 pub fn Story() -> impl IntoView {
     let params = use_params_map();
-    let story = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let story = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
         move |id| async move {
             if id.is_empty() {
                 None
@@ -17,19 +19,13 @@ pub fn Story() -> impl IntoView {
             }
         },
     );
-    let meta_description = move || {
-        story
-            .get()
-            .and_then(|story| story.map(|story| story.title))
-            .unwrap_or_else(|| "Loading story...".to_string())
-    };
 
-    view! {
-        <Suspense fallback=|| view! {  "Loading..." }>
-            <Meta name="description" content=meta_description/>
-            {move || story.get().map(|story| match story {
-                None => view! { <div class="item-view">"Error loading this story."</div> },
-                Some(story) => view! {
+    Suspense(SuspenseProps::builder().fallback(|| "Loading...").children(ToChildren::to_children(move || Suspend(async move {
+        match story.await.clone() {
+            None => Either::Left("Story not found."),
+            Some(story) => {
+                Either::Right(view! {
+                    <Meta name="description" content=story.title.clone()/>
                     <div class="item-view">
                         <div class="item-view-header">
                         <a href=story.url target="_blank">
@@ -38,7 +34,7 @@ pub fn Story() -> impl IntoView {
                         <span class="host">
                             "("{story.domain}")"
                         </span>
-                        {story.user.map(|user| view! { <p class="meta">
+                        {story.user.map(|user| view! {  <p class="meta">
                             {story.points}
                             " points | by "
                             <A href=format!("/users/{user}")>{user.clone()}</A>
@@ -46,32 +42,33 @@ pub fn Story() -> impl IntoView {
                         </p>})}
                         </div>
                         <div class="item-view-comments">
-                        <p class="item-view-comments-header">
-                            {if story.comments_count.unwrap_or_default() > 0 {
-                                format!("{} comments", story.comments_count.unwrap_or_default())
-                            } else {
-                                "No comments yet.".into()
-                            }}
-                        </p>
-                        <ul class="comment-children">
-                            <For
-                                each=move || story.comments.clone().unwrap_or_default()
-                                key=|comment| comment.id
-                                let:comment
-                            >
-                                <Comment comment />
-                            </For>
-                        </ul>
+                            <p class="item-view-comments-header">
+                                {if story.comments_count.unwrap_or_default() > 0 {
+                                    format!("{} comments", story.comments_count.unwrap_or_default())
+                                } else {
+                                    "No comments yet.".into()
+                                }}
+                            </p>
+                            <ul class="comment-children">
+                                <For
+                                    each=move || story.comments.clone().unwrap_or_default()
+                                    key=|comment| comment.id
+                                    let:comment
+                                >
+                                    <Comment comment />
+                                </For>
+                            </ul>
+                        </div>
                     </div>
-                </div>
-            }})}
-        </Suspense>
-    }
+                })
+            }
+        }
+    }))).build())
 }
 
 #[component]
 pub fn Comment(comment: api::Comment) -> impl IntoView {
-    let (open, set_open) = create_signal(true);
+    let (open, set_open) = signal(true);
 
     view! {
         <li class="comment">
@@ -80,10 +77,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
             {format!(" {}", comment.time_ago)}
         </div>
         <div class="text" inner_html=comment.content></div>
-        {(!comment.comments.is_empty()).then(move || {
+        {(!comment.comments.is_empty()).then(|| {
             view! {
                 <div>
-                    <div class="toggle" class:open=move ||open.get()>
+                    <div class="toggle" class:open=open>
                         <a on:click=move |_| set_open.update(|n| *n = !*n)>
                             {
                                 let comments_len = comment.comments.len();
@@ -113,7 +110,7 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
             }
         })}
         </li>
-    }
+    }.into_any()
 }
 
 fn pluralize(n: usize) -> &'static str {

examples/hackernews_axum/src/routes/users.rs

@@ -1,12 +1,13 @@
 use crate::api::{self, User};
-use leptos::prelude::*;
-use leptos_router::*;
+use leptos::server::Resource;
+use leptos::{either::Either, prelude::*};
+use leptos_router::hooks::use_params_map;
 
 #[component]
 pub fn User() -> impl IntoView {
     let params = use_params_map();
-    let user = create_resource(
-        move || params.get().get("id").cloned().unwrap_or_default(),
+    let user = Resource::new(
+        move || params.read().get("id").unwrap_or_default(),
         move |id| async move {
             if id.is_empty() {
                 None
@@ -17,12 +18,12 @@ pub fn User() -> impl IntoView {
     );
     view! {
         <div class="user-view">
-            <Suspense fallback=|| view! {  "Loading..." }>
-                {move || user.get().map(|user| match user {
-                    None => view! { <h1>"User not found."</h1> }.into_any(),
-                    Some(user) => view! {
+            <Suspense fallback=|| view! { "Loading..." }>
+                {move || Suspend(async move { match user.await.clone() {
+                    None => Either::Left(view! {  <h1>"User not found."</h1> }),
+                    Some(user) => Either::Right(view! {
                         <div>
-                            <h1>"User: " {&user.id}</h1>
+                            <h1>"User: " {user.id.clone()}</h1>
                             <ul class="meta">
                                 <li>
                                     <span class="label">"Created: "</span> {user.created}
@@ -30,7 +31,7 @@ pub fn User() -> impl IntoView {
                                 <li>
                                 <span class="label">"Karma: "</span> {user.karma}
                                 </li>
-                                {user.about.as_ref().map(|about| view! { <li inner_html=about class="about"></li> })}
+                                <li inner_html={user.about} class="about"></li>
                             </ul>
                             <p class="links">
                                 <a href=format!("https://news.ycombinator.com/submitted?id={}", user.id)>"submissions"</a>
@@ -38,8 +39,8 @@ pub fn User() -> impl IntoView {
                                 <a href=format!("https://news.ycombinator.com/threads?id={}", user.id)>"comments"</a>
                             </p>
                         </div>
-                    }.into_any()
-                })}
+                    })
+                }})}
             </Suspense>
         </div>
     }