examples: use ShowLet where appropriate in examples (#4467)

maccesch · web-flow · commit 1aaa716dfcfb · 2025-11-28T12:00:26.000-05:00
diff --git a/examples/axum_js_ssr/Cargo.toml b/examples/axum_js_ssr/Cargo.toml
@@ -27,7 +27,7 @@ tokio = { version = "1.39", features = [
 ], optional = true }
 tower = { version = "0.4.13", optional = true }
 tower-http = { version = "0.5.2", features = ["fs"], optional = true }
-wasm-bindgen = "0.2.92"
+wasm-bindgen = "0.2.105"
 web-sys = { version = "0.3.69", features = [
   "AddEventListenerOptions",
   "Document",
diff --git a/examples/axum_js_ssr/src/app.rs b/examples/axum_js_ssr/src/app.rs
@@ -510,11 +510,9 @@ if (window.hljs) {
             });
             view! {
                 <pre><code class="language-rust">{code.await}</code></pre>
-                {
-                    move || script.get().map(|script| {
-                        view! { <Script>{script}</Script> }
-                    })
-                }
+                <ShowLet some=script let:script>
+                    <Script>{script}</Script>
+                </ShowLet>
             }
         })
     };
@@ -567,11 +565,9 @@ if (window.hljs) {
             });
             view! {
                 <pre><code class="language-rust">{code.await}</code></pre>
-                {
-                    move || script.get().map(|script| {
-                        view! { <Script>{script}</Script> }
-                    })
-                }
+                <ShowLet some=script let:script>
+                    <Script>{script}</Script>
+                </ShowLet>
             }
         })
     };
diff --git a/examples/hackernews/Cargo.toml b/examples/hackernews/Cargo.toml
@@ -25,7 +25,7 @@ log = "0.4.22"
 serde = { version = "1.0", features = ["derive"] }
 gloo-net = { version = "0.6.0", features = ["http"] }
 reqwest = { version = "0.12.5", features = ["json"] }
-wasm-bindgen = "0.2.93"
+wasm-bindgen = "0.2.105"
 web-sys = { version = "0.3.70", features = ["AbortController", "AbortSignal"] }
 send_wrapper = "0.6.0"
 
@@ -46,12 +46,12 @@ denylist = ["actix-files", "actix-web", "leptos_actix"]
 skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"], []]
 
 [package.metadata.leptos]
-# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name   
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
 output-name = "hackernews"
 # The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
 site-root = "target/site"
 # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
-# Defaults to pkg	
+# Defaults to pkg
 site-pkg-dir = "pkg"
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
 style-file = "./style.css"
diff --git a/examples/hackernews/src/routes/stories.rs b/examples/hackernews/src/routes/stories.rs
@@ -145,14 +145,11 @@ fn Story(story: api::Story) -> impl IntoView {
                     Either::Left(
                         view! {
                             <span>
-                                {"by "}
-                                {story
-                                    .user
-                                    .map(|user| {
-                                        view! {
-                                            <A href=format!("/users/{user}")>{user.clone()}</A>
-                                        }
-                                    })} {format!(" {} | ", story.time_ago)}
+                                "by "
+                                <ShowLet some=story.user let:user>
+                                    <A href=format!("/users/{user}")>{user.clone()}</A>
+                                </ShowLet>
+                                {format!(" {} | ", story.time_ago)}
                                 <A href=format!(
                                     "/stories/{}",
                                     story.id,
diff --git a/examples/hackernews/src/routes/story.rs b/examples/hackernews/src/routes/story.rs
@@ -30,17 +30,13 @@ pub fn Story() -> impl IntoView {
                                 <h1>{story.title}</h1>
                             </a>
                             <span class="host">"(" {story.domain} ")"</span>
-                            {story
-                                .user
-                                .map(|user| {
-                                    view! {
-                                        <p class="meta">
-                                            {story.points} " points | by "
-                                            <A href=format!("/users/{user}")>{user.clone()}</A>
-                                            {format!(" {}", story.time_ago)}
-                                        </p>
-                                    }
-                                })}
+                            <ShowLet some=story.user let:user>
+                                <p class="meta">
+                                    {story.points} " points | by "
+                                    <A href=format!("/users/{user}")>{user.clone()}</A>
+                                    {format!(" {}", story.time_ago)}
+                                </p>
+                            </ShowLet>
                         </div>
                         <div class="item-view-comments">
                             <p class="item-view-comments-header">
diff --git a/examples/hackernews_axum/Cargo.toml b/examples/hackernews_axum/Cargo.toml
@@ -26,7 +26,7 @@ tower-http = { version = "0.5.2", features = ["fs"], optional = true }
 tokio = { version = "1.39", features = ["full"], optional = true }
 http = { version = "1.1", optional = true }
 web-sys = { version = "0.3.70", features = ["AbortController", "AbortSignal"] }
-wasm-bindgen = "0.2.93"
+wasm-bindgen = "0.2.105"
 send_wrapper = { version = "0.6.0", features = ["futures"] }
 
 [features]
diff --git a/examples/hackernews_axum/src/routes/stories.rs b/examples/hackernews_axum/src/routes/stories.rs
@@ -133,7 +133,9 @@ fn Story(story: api::Story) -> impl IntoView {
                     Either::Left(view! {
                         <span>
                             {"by "}
-                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
+                            <ShowLet some=story.user let:user>
+                                <A href=format!("/users/{user}")>{user.clone()}</A>
+                            </ShowLet>
                             {format!(" {} | ", story.time_ago)}
                             <A href=format!("/stories/{}", story.id)>
                                 {if story.comments_count.unwrap_or_default() > 0 {
diff --git a/examples/hackernews_axum/src/routes/story.rs b/examples/hackernews_axum/src/routes/story.rs
@@ -40,18 +40,20 @@ impl LazyRoute for StoryRoute {
                     <Meta name="description" content=story.title.clone()/>
                     <div class="item-view">
                         <div class="item-view-header">
-                        <a href=story.url target="_blank">
-                            <h1>{story.title}</h1>
-                        </a>
-                        <span class="host">
-                            "("{story.domain}")"
-                        </span>
-                        {story.user.map(|user| view! {  <p class="meta">
-                            {story.points}
-                            " points | by "
-                            <A href=format!("/users/{user}")>{user.clone()}</A>
-                            {format!(" {}", story.time_ago)}
-                        </p>})}
+                            <a href=story.url target="_blank">
+                                <h1>{story.title}</h1>
+                            </a>
+                            <span class="host">
+                                "("{story.domain}")"
+                            </span>
+                            <ShowLet some=story.user let:user>
+                                <p class="meta">
+                                    {story.points}
+                                    " points | by "
+                                    <A href=format!("/users/{user}")>{user.clone()}</A>
+                                    {format!(" {}", story.time_ago)}
+                                </p>
+                            </ShowLet>
                         </div>
                         <div class="item-view-comments">
                             <p class="item-view-comments-header">
diff --git a/examples/hackernews_islands_axum/src/routes/stories.rs b/examples/hackernews_islands_axum/src/routes/stories.rs
@@ -143,8 +143,10 @@ fn Story(story: api::Story) -> impl IntoView {
                 {if story.story_type != "job" {
                     Either::Left(view! {
                         <span>
-                            {"by "}
-                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
+                            "by "
+                            <ShowLet some=story.user let:user>
+                                <A href=format!("/users/{user}")>{user.clone()}</A>
+                            </ShowLet>
                             {format!(" {} | ", story.time_ago)}
                             <A href=format!("/stories/{}", story.id)>
                                 {if story.comments_count.unwrap_or_default() > 0 {
diff --git a/examples/hackernews_islands_axum/src/routes/story.rs b/examples/hackernews_islands_axum/src/routes/story.rs
@@ -32,18 +32,20 @@ pub fn Story() -> impl IntoView {
                     <Meta name="description" content=story.title.clone()/>
                     <div class="item-view">
                         <div class="item-view-header">
-                        <a href=story.url target="_blank">
-                            <h1>{story.title}</h1>
-                        </a>
-                        <span class="host">
-                            "("{story.domain}")"
-                        </span>
-                        {story.user.map(|user| view! {  <p class="meta">
-                            {story.points}
-                            " points | by "
-                            <A href=format!("/users/{user}")>{user.clone()}</A>
-                            {format!(" {}", story.time_ago)}
-                        </p>})}
+                            <a href=story.url target="_blank">
+                                <h1>{story.title}</h1>
+                            </a>
+                            <span class="host">
+                                "("{story.domain}")"
+                            </span>
+                            <ShowLet some=story.user let:user>
+                                <p class="meta">
+                                    {story.points}
+                                    " points | by "
+                                    <A href=format!("/users/{user}")>{user.clone()}</A>
+                                    {format!(" {}", story.time_ago)}
+                                </p>
+                            </ShowLet>
                         </div>
                         <div class="item-view-comments">
                             <p class="item-view-comments-header">
diff --git a/examples/hackernews_js_fetch/src/routes/stories.rs b/examples/hackernews_js_fetch/src/routes/stories.rs
@@ -139,14 +139,11 @@ fn Story(story: api::Story) -> impl IntoView {
                     Either::Left(
                         view! {
                             <span>
-                                {"by "}
-                                {story
-                                    .user
-                                    .map(|user| {
-                                        view! {
-                                            <A href=format!("/users/{user}")>{user.clone()}</A>
-                                        }
-                                    })} {format!(" {} | ", story.time_ago)}
+                                "by "
+                                <ShowLet some=story.user let:user>
+                                    <A href=format!("/users/{user}")>{user.clone()}</A>
+                                </ShowLet>
+                                {format!(" {} | ", story.time_ago)}
                                 <A href=format!(
                                     "/stories/{}",
                                     story.id,
diff --git a/examples/hackernews_js_fetch/src/routes/story.rs b/examples/hackernews_js_fetch/src/routes/story.rs
@@ -35,17 +35,13 @@ pub fn Story() -> impl IntoView {
                                 <h1>{story.title}</h1>
                             </a>
                             <span class="host">"("{story.domain}")"</span>
-                            {story
-                                .user
-                                .map(|user| {
-                                    view! {
-                                        <p class="meta">
-                                            {story.points} " points | by "
-                                            <A href=format!("/users/{user}")>{user.clone()}</A>
-                                            {format!(" {}", story.time_ago)}
-                                        </p>
-                                    }
-                                })}
+                            <ShowLet some=story.user let:user>
+                                <p class="meta">
+                                    {story.points} " points | by "
+                                    <A href=format!("/users/{user}")>{user.clone()}</A>
+                                    {format!(" {}", story.time_ago)}
+                                </p>
+                            </ShowLet>
                         </div>
                         <div class="item-view-comments">
                             <p class="item-view-comments-header">
diff --git a/examples/server_fns_axum/src/app.rs b/examples/server_fns_axum/src/app.rs
@@ -564,17 +564,12 @@ pub fn FileUploadWithProgress() -> impl IntoView {
             <input type="submit" />
         </form>
         {move || filename.get().map(|filename| view! { <p>Uploading {filename}</p> })}
-        {move || {
-            max.get()
-                .map(|max| {
-                    view! {
-                        <progress
-                            max=max
-                            value=move || current.get().unwrap_or_default()
-                        ></progress>
-                    }
-                })
-        }}
+        <ShowLet some=max let:max>
+            <progress
+                max=max
+                value=move || current.get().unwrap_or_default()
+            ></progress>
+        </ShowLet>
     }
 }
 #[component]
diff --git a/examples/suspense_tests/src/instrumented.rs b/examples/suspense_tests/src/instrumented.rs
@@ -663,26 +663,24 @@ impl From<Vec<FieldNavItem>> for FieldNavCtx {
 #[component]
 pub fn FieldNavPortlet() -> impl IntoView {
     let ctx = expect_context::<ReadSignal<Option<FieldNavCtx>>>();
-    move || {
-        let ctx = ctx.get();
-        ctx.map(|ctx| {
-            view! {
-                <div id="FieldNavPortlet">
-                    <span>"FieldNavPortlet:"</span>
-                    <nav>
-                        {ctx
-                            .0
-                            .map(|ctx| {
-                                ctx.into_iter()
-                                    .map(|FieldNavItem { href, text }| {
-                                        view! { <A href=href>{text}</A> }
-                                    })
-                                    .collect_view()
-                            })}
-                    </nav>
-                </div>
-            }
-        })
+
+    view! {
+        <ShowLet some=ctx let:ctx>
+            <div id="FieldNavPortlet">
+                <span>"FieldNavPortlet:"</span>
+                <nav>
+                    {ctx
+                        .0
+                        .map(|ctx| {
+                            ctx.into_iter()
+                                .map(|FieldNavItem { href, text }| {
+                                    view! { <A href=href>{text}</A> }
+                                })
+                                .collect_view()
+                        })}
+                </nav>
+            </div>
+        </ShowLet>
     }
 }
 
diff --git a/leptos/src/show_let.rs b/leptos/src/show_let.rs
@@ -160,3 +160,16 @@ where
         OptionGetter(Arc::new(move || cloned.get()))
     }
 }
+
+/// Marker type for creating an `OptionGetter` from a static value.
+/// Used so that the compiler doesn't complain about double implementations of the trait `IntoOptionGetter`.
+pub struct StaticMarker;
+
+impl<T> IntoOptionGetter<T, StaticMarker> for Option<T>
+where
+    T: Clone + Send + Sync + 'static,
+{
+    fn into_option_getter(self) -> OptionGetter<T> {
+        OptionGetter(Arc::new(move || self.clone()))
+    }
+}
