updated the tutorial to use more novel Yew HTML

its-the-shrimp · its-the-shrimp · commit b8711422bf67 · 2025-07-19T11:37:00.000+01:00
diff --git a/tools/website-test/Cargo.toml b/tools/website-test/Cargo.toml
@@ -18,7 +18,7 @@ serde = { version = "1.0", features = ["derive"] }
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 weblog = "0.3.0"
-yew = { path = "../../packages/yew/", features = ["ssr", "csr"] }
+yew = { path = "../../packages/yew/", features = ["ssr", "csr", "serde"] }
 yew-autoprops = "0.4.1"
 yew-router = { path = "../../packages/yew-router/" }
 tokio = { version = "1.43.1", features = ["rt", "macros"] }
diff --git a/website/docs/tutorial/index.mdx b/website/docs/tutorial/index.mdx
@@ -224,9 +224,9 @@ We create a simple `struct` (in `main.rs` or any file of our choice) that will h
 #[derive(Clone, PartialEq)]
 struct Video {
     id: usize,
-    title: String,
-    speaker: String,
-    url: String,
+    title: AttrValue,
+    speaker: AttrValue,
+    url: AttrValue,
 }
 ```
 
@@ -238,52 +238,35 @@ fn app() -> Html {
 +   let videos = vec![
 +       Video {
 +           id: 1,
-+           title: "Building and breaking things".to_string(),
-+           speaker: "John Doe".to_string(),
-+           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
++           title: "Building and breaking things".into(),
++           speaker: "John Doe".into(),
++           url: "https://youtu.be/PsaFVLr8t4E".into(),
 +       },
 +       Video {
 +           id: 2,
-+           title: "The development process".to_string(),
-+           speaker: "Jane Smith".to_string(),
-+           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
++           title: "The development process".into(),
++           speaker: "Jane Smith".into(),
++           url: "https://youtu.be/PsaFVLr8t4E".into(),
 +       },
 +       Video {
 +           id: 3,
-+           title: "The Web 7.0".to_string(),
-+           speaker: "Matt Miller".to_string(),
-+           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
++           title: "The Web 7.0".into(),
++           speaker: "Matt Miller".into(),
++           url: "https://youtu.be/PsaFVLr8t4E".into(),
 +       },
 +       Video {
 +           id: 4,
-+           title: "Mouseless development".to_string(),
-+           speaker: "Tom Jerry".to_string(),
-+           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
++           title: "Mouseless development".into(),
++           speaker: "Tom Jerry".into(),
++           url: "https://youtu.be/PsaFVLr8t4E".into(),
 +       },
 +   ];
 +
 ```
 
-To display them, we need to convert the `Vec` into `Html`. We can do that by creating an iterator,
-mapping it to `html!` and collecting it as `Html`:
+To display them, we can use a `for` loop right in the macro in place of the hardcoded HTML:
 
-```rust {4-7}
-        },
-    ];
-
-+   let videos = videos.iter().map(|video| html! {
-+       <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
-+   }).collect::<Html>();
-+
-```
-
-:::tip
-Keys on list items help Yew keep track of which items have changed in the list, resulting in faster re-renders. [It is always recommended to use keys in lists](/concepts/html/lists.mdx#keyed-lists).
-:::
-
-And finally, we need to replace the hardcoded list of videos with the `Html` we created from the data:
-
-```rust {6-10}
+```rust {6-12}
     html! {
         <>
             <h1>{ "RustConf Explorer" }</h1>
@@ -293,13 +276,20 @@ And finally, we need to replace the hardcoded list of videos with the `Html` we
 -               <p>{ "Jane Smith: The development process" }</p>
 -               <p>{ "Matt Miller: The Web 7.0" }</p>
 -               <p>{ "Tom Jerry: Mouseless development" }</p>
-+               { videos }
++               for video in &videos {
++                   <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
++               }
             </div>
             // ...
         </>
     }
 ```
 
+:::tip
+Keys on list items help Yew keep track of which items have changed in the list, resulting in faster re-renders.
+[It is always recommended to use keys in lists](/concepts/html/lists.mdx#keyed-lists).
+:::
+
 ## Components
 
 Components are the building blocks of Yew applications. By combining components, which can be made of other components,
@@ -325,9 +315,11 @@ struct VideosListProps {
 
 #[function_component(VideosList)]
 fn videos_list(VideosListProps { videos }: &VideosListProps) -> Html {
-    videos.iter().map(|video| html! {
-        <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
-    }).collect()
+    html! {
+        for video in videos {
+            <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
+        }
+    }
 }
 ```
 
@@ -345,17 +337,15 @@ Now, we can update our `App` component to make use of `VideosList` component.
 #[function_component(App)]
 fn app() -> Html {
     // ...
--   let videos = videos.iter().map(|video| html! {
--       <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
--   }).collect::<Html>();
--
     html! {
         <>
             <h1>{ "RustConf Explorer" }</h1>
             <div>
                 <h3>{ "Videos to watch" }</h3>
--               { videos }
-+               <VideosList videos={videos} />
+-               for video in &videos {
+-                   <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
+-               }
++               <VideosList {videos} />
             </div>
             // ...
         </>
@@ -387,22 +377,20 @@ Then we modify the `VideosList` component to "emit" the selected video to the ca
 #[function_component(VideosList)]
 -fn videos_list(VideosListProps { videos }: &VideosListProps) -> Html {
 +fn videos_list(VideosListProps { videos, on_click }: &VideosListProps) -> Html {
--   videos.iter().map(|video| html! {
--       <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
-+   let on_click = on_click.clone();
-+   videos.iter().map(|video| {
-+       let on_video_select = {
-+           let on_click = on_click.clone();
-+           let video = video.clone();
-+           Callback::from(move |_| {
-+               on_click.emit(video.clone())
-+           })
-+       };
++   let on_select = |video: &Video| {
++       let on_click = on_click.clone();
++       let video = video.clone();
++       Callback::from(move |_| {
++           on_click.emit(video.clone())
++       })
++   };
 +
-+       html! {
-+            <p key={video.id} onclick={on_video_select}>{format!("{}: {}", video.speaker, video.title)}</p>
-+       }
-    }).collect()
+    html! {
+        for video in videos {
+-           <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
++           <p key={video.id} onclick={on_select(video)}>{format!("{}: {}", video.speaker, video.title)}</p>
+        }
+    }
 }
 ```
 
@@ -440,20 +428,18 @@ Now, modify the `App` component to display `VideoDetails` component whenever a v
 +           selected_video.set(Some(video))
 +       })
 +   };
-+
-+   let details = selected_video.as_ref().map(|video| html! {
-+       <VideoDetails video={video.clone()} />
-+   });
 
     html! {
         <>
             <h1>{ "RustConf Explorer" }</h1>
             <div>
                 <h3>{ "Videos to watch" }</h3>
--               <VideosList videos={videos} />
-+               <VideosList videos={videos} on_click={on_video_select.clone()} />
+-               <VideosList {videos} />
++               <VideosList {videos} on_click={on_video_select.clone()} />
             </div>
-+           { for details }
++           if let Some(video) = &*selected_video {
++               <VideoDetails video={video.clone()} />
++           }
 -           <div>
 -               <h3>{ "John Doe: Building and breaking things" }</h3>
 -               <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
@@ -463,11 +449,6 @@ Now, modify the `App` component to display `VideoDetails` component whenever a v
 }
 ```
 
-Do not worry about the `use_state` right now, we will come back to that later.
-Note the trick we pulled with `{ for details }`. `Option<_>` implements `Iterator` so we can use it to display the only
-element returned by the `Iterator` with a special `{ for ... }` syntax
-[supported by the `html!` macro](concepts/html/lists).
-
 ### Handling state
 
 Remember the `use_state` used earlier? That is a special function, called a "hook". Hooks are used to "hook" into
@@ -492,13 +473,18 @@ videos list from an external source. For this we will need to add the following
 
 Let's update the dependencies in `Cargo.toml` file:
 
-```toml title="Cargo.toml"
+```toml title="Cargo.toml" {2-6}
 [dependencies]
-gloo-net = "0.6"
-serde = { version = "1.0", features = ["derive"] }
-wasm-bindgen-futures = "0.4"
+-yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
++yew = { git = "https://github.com/yewstack/yew/", features = ["csr", "serde"] }
++gloo-net = "0.6"
++serde = { version = "1.0", features = ["derive"] }
++wasm-bindgen-futures = "0.4"
 ```
 
+Yew's `serde` feature enables integration with the `serde` crate, the important point for us is that
+it adds a `serde::Deserialize` impl to `AttrValue`.
+
 :::note
 When choosing dependencies make sure they are `wasm32` compatible!
 Otherwise you won't be able to run your application.
@@ -514,9 +500,9 @@ use yew::prelude::*;
 +#[derive(Clone, PartialEq, Deserialize)]
 struct Video {
     id: usize,
-    title: String,
-    speaker: String,
-    url: String,
+    title: AttrValue,
+    speaker: AttrValue,
+    url: AttrValue,
 }
 ```
 
@@ -531,27 +517,27 @@ fn app() -> Html {
 -   let videos = vec![
 -       Video {
 -           id: 1,
--           title: "Building and breaking things".to_string(),
--           speaker: "John Doe".to_string(),
--           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
+-           title: "Building and breaking things".into(),
+-           speaker: "John Doe".into(),
+-           url: "https://youtu.be/PsaFVLr8t4E".into(),
 -       },
 -       Video {
 -           id: 2,
--           title: "The development process".to_string(),
--           speaker: "Jane Smith".to_string(),
--           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
+-           title: "The development process".into(),
+-           speaker: "Jane Smith".into(),
+-           url: "https://youtu.be/PsaFVLr8t4E".into(),
 -       },
 -       Video {
 -           id: 3,
--           title: "The Web 7.0".to_string(),
--           speaker: "Matt Miller".to_string(),
--           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
+-           title: "The Web 7.0".into(),
+-           speaker: "Matt Miller".into(),
+-           url: "https://youtu.be/PsaFVLr8t4E".into(),
 -       },
 -       Video {
 -           id: 4,
--           title: "Mouseless development".to_string(),
--           speaker: "Tom Jerry".to_string(),
--           url: "https://youtu.be/PsaFVLr8t4E".to_string(),
+-           title: "Mouseless development".into(),
+-           speaker: "Tom Jerry".into(),
+-           url: "https://youtu.be/PsaFVLr8t4E".into(),
 -       },
 -   ];
 -
@@ -581,10 +567,10 @@ fn app() -> Html {
             <h1>{ "RustConf Explorer" }</h1>
             <div>
                 <h3>{ "Videos to watch" }</h3>
--               <VideosList videos={videos} on_click={on_video_select.clone()} />
+-               <VideosList {videos} on_click={on_video_select.clone()} />
 +               <VideosList videos={(*videos).clone()} on_click={on_video_select.clone()} />
             </div>
-            { for details }
+            // ...
         </>
     }
 }
