feat: all-you-can-inline html! overhaul

Cargo.toml

@@ -30,6 +30,7 @@ unexpected_cfgs = { level = "warn", check-cfg = [
     "cfg(verbose_tests)",
     "cfg(yew_lints)",
     "cfg(nightly_yew)",
+    "cfg(yew_macro_nightly)",
     "cfg(wasm_bindgen_unstable_test_coverage)"
 ]}
 [workspace.dependencies]

examples/boids/src/main.rs

@@ -66,11 +66,9 @@ impl Component for App {
         } = *self;
 
         html! {
-            <>
-                <h1 class="title">{ "Boids" }</h1>
-                <Simulation settings={settings.clone()} {generation} {paused} />
-                { self.view_panel(ctx.link()) }
-            </>
+            <h1 class="title">{ "Boids" }</h1>
+            <Simulation settings={settings.clone()} {generation} {paused} />
+            { self.view_panel(ctx.link()) }
         }
     }
 }

examples/counter_functional/src/main.rs

@@ -15,11 +15,9 @@ fn App() -> Html {
     };
 
     html! {
-        <>
-            <p> {"current count: "} {*state} </p>
-            <button onclick={incr_counter}> {"+"} </button>
-            <button onclick={decr_counter}> {"-"} </button>
-        </>
+        <p> {"current count: "} {*state} </p>
+        <button onclick={incr_counter}> {"+"} </button>
+        <button onclick={decr_counter}> {"-"} </button>
     }
 }
 

examples/dyn_create_destroy_apps/src/counter.rs

@@ -44,19 +44,17 @@ impl Component for CounterModel {
         let destroy_callback = ctx.props().destroy_callback.clone();
 
         html! {
-            <>
-                // Display the current value of the counter
-                <p class="counter">
-                    { "App has lived for " }
-                    { self.counter }
-                    { " ticks" }
-                </p>
+            // Display the current value of the counter
+            <p class="counter">
+                { "App has lived for " }
+                { self.counter }
+                { " ticks" }
+            </p>
 
-                // Add button to send a destroy command to the parent app
-                <button class="destroy" onclick={Callback::from(move |_| destroy_callback.emit(()))}>
-                    { "Destroy this app" }
-                </button>
-            </>
+            // Add button to send a destroy command to the parent app
+            <button class="destroy" onclick={Callback::from(move |_| destroy_callback.emit(()))}>
+                { "Destroy this app" }
+            </button>
         }
     }
 

examples/dyn_create_destroy_apps/src/main.rs

@@ -89,20 +89,18 @@ impl Component for App {
         // We will only render once, and then do the rest of the DOM changes
         // by mounting/destroying appinstances of CounterModel
         html! {
-            <>
-                <div class="panel">
-                    // Create button to create a new app
-                    <button
-                        class="create"
-                        onclick={ctx.link().callback(|_| Msg::SpawnCounterAppInstance)}
-                    >
-                        { "Spawn new CounterModel app" }
-                    </button>
-                </div>
-                // Create a container for all the app instances
-                <div ref={self.apps_container_ref.clone()}>
-                </div>
-            </>
+            <div class="panel">
+                // Create button to create a new app
+                <button
+                    class="create"
+                    onclick={ctx.link().callback(|_| Msg::SpawnCounterAppInstance)}
+                >
+                    { "Spawn new CounterModel app" }
+                </button>
+            </div>
+            // Create a container for all the app instances
+            <div ref={self.apps_container_ref.clone()}>
+            </div>
         }
     }
 }

examples/function_delayed_input/src/main.rs

@@ -68,13 +68,13 @@ fn App() -> Html {
               </form>
             </div>
             <div class="p-2 border border-black rounded">
-                <p>{
+                <p>
                     match &*search {
-                        Search::Idle => "Type something to search...".into(),
-                        Search::Fetching(query) => format!("Searching for: {}", query).into(),
+                        Search::Idle => "Type something to search...",
+                        Search::Fetching(query) => format!("Searching for: {}", query),
                         Search::Fetched(response) => response.clone(),
                     }
-                }</p>
+                </p>
             </div>
           </div>
       </div>

examples/function_memory_game/src/components/chessboard.rs

@@ -1,5 +1,4 @@
 use yew::prelude::*;
-use yew::{Properties, function_component, html};
 
 use crate::components::chessboard_card::ChessboardCard;
 use crate::state::{Card, RawCard};
@@ -9,15 +8,13 @@ pub struct Props {
     pub cards: Vec<Card>,
     pub on_flip: Callback<RawCard>,
 }
-#[function_component]
+#[component]
 pub fn Chessboard(props: &Props) -> Html {
     html! {
         <div class="chess-board">
-        { for props.cards.iter().map(|card|
-            html! {
-                <ChessboardCard card={card.clone()} on_flip={&props.on_flip} />
-            }
-        ) }
+        for card in &props.cards {
+            <ChessboardCard card={card.clone()} on_flip={&props.on_flip} />
+        }
         </div>
     }
 }

examples/function_memory_game/src/components/game_status_board.rs

@@ -12,28 +12,19 @@ pub struct Props {
 
 #[function_component]
 pub fn GameStatusBoard(props: &Props) -> Html {
-    let get_content = {
-        let onclick = props.on_reset.reform(move |e: MouseEvent| {
-            e.stop_propagation();
-            e.prevent_default();
-        });
-
+    html! {
+      <div class="game-status-container">
         match props.status {
-            Status::Ready => html! {
-                <span>{"Ready"}</span>
-            },
-            Status::Playing => html! {
-                <span>{"Playing"}</span>
-            },
-            Status::Passed => html! {
+            Status::Ready => <span>{"Ready"}</span>,
+            Status::Playing => <span>{"Playing"}</span>,
+            Status::Passed => {
+                let onclick = props.on_reset.reform(move |e: MouseEvent| {
+                    e.stop_propagation();
+                    e.prevent_default();
+                });
                 <button class="play-again-btn" {onclick}>{"Play again"}</button>
-            },
+            }
         }
-    };
-
-    html! {
-      <div class="game-status-container">
-        {get_content}
         <span class="sec-past">{ props.sec_past}{" s"}</span>
     </div>
     }

examples/function_router/src/app.rs

@@ -94,24 +94,14 @@ pub fn ServerApp(props: &ServerAppProps) -> Html {
 }
 
 fn switch(routes: Route) -> Html {
-    match routes {
-        Route::Post { id } => {
-            html! { <Post seed={id} /> }
-        }
-        Route::Posts => {
-            html! { <PostList /> }
-        }
-        Route::Author { id } => {
-            html! { <Author seed={id} /> }
-        }
-        Route::Authors => {
-            html! { <AuthorList /> }
-        }
-        Route::Home => {
-            html! { <Home /> }
-        }
-        Route::NotFound => {
-            html! { <PageNotFound /> }
+    html! {
+        match routes {
+            Route::Post { id } => <Post seed={id} />,
+            Route::Posts => <PostList />,
+            Route::Author { id } => <Author seed={id} />,
+            Route::Authors => <AuthorList />,
+            Route::Home => <Home />,
+            Route::NotFound => <PageNotFound />,
         }
     }
 }

examples/function_router/src/components/pagination.rs

@@ -29,24 +29,22 @@ pub fn RelNavButtons(props: &Props) -> Html {
     } = props.clone();
 
     html! {
-        <>
-            <Link<Route, PageQuery>
-                classes={classes!("pagination-previous")}
-                disabled={page==1}
-                query={Some(PageQuery{page: page - 1})}
-                to={to.clone()}
-            >
-                { "Previous" }
-            </Link<Route, PageQuery>>
-            <Link<Route, PageQuery>
-                classes={classes!("pagination-next")}
-                disabled={page==total_pages}
-                query={Some(PageQuery{page: page + 1})}
-                {to}
-            >
-                { "Next page" }
-            </Link<Route, PageQuery>>
-        </>
+        <Link<Route, PageQuery>
+            classes={classes!("pagination-previous")}
+            disabled={page==1}
+            query={Some(PageQuery{page: page - 1})}
+            to={to.clone()}
+        >
+            { "Previous" }
+        </Link<Route, PageQuery>>
+        <Link<Route, PageQuery>
+            classes={classes!("pagination-next")}
+            disabled={page==total_pages}
+            query={Some(PageQuery{page: page + 1})}
+            {to}
+        >
+            { "Next page" }
+        </Link<Route, PageQuery>>
     }
 }
 
@@ -70,18 +68,13 @@ pub fn RenderLinks(props: &RenderLinksProps) -> Html {
     let mut range = range;
 
     if len > max_links {
-        let last_link =
-            html! {<RenderLink to_page={range.next_back().unwrap()} props={props.clone()} />};
-        // remove 1 for the ellipsis and 1 for the last link
-        let links = range
-            .take(max_links - 2)
-            .map(|page| html! {<RenderLink to_page={page} props={props.clone()} />});
+        let last_page = range.next_back().unwrap();
         html! {
-            <>
-                { for links }
-                <li><span class="pagination-ellipsis">{ ELLIPSIS }</span></li>
-                { last_link }
-            </>
+            for page in range.take(max_links - 2) {
+                <RenderLink to_page={page} props={props.clone()} />
+            }
+            <li><span class="pagination-ellipsis">{ ELLIPSIS }</span></li>
+            <RenderLink to_page={last_page} props={props.clone()} />
         }
     } else {
         html! {
@@ -140,11 +133,9 @@ pub fn Links(props: &Props) -> Html {
     let links_right = 2 * LINKS_PER_SIDE - links_left;
 
     html! {
-        <>
-            <RenderLinks range={ 1..page } len={pages_prev} max_links={links_left} props={props.clone()} />
-            <RenderLink to_page={page} props={props.clone()} />
-            <RenderLinks range={ page + 1..total_pages + 1 } len={pages_next} max_links={links_right} props={props.clone()} />
-        </>
+        <RenderLinks range={ 1..page } len={pages_prev} max_links={links_left} props={props.clone()} />
+        <RenderLink to_page={page} props={props.clone()} />
+        <RenderLinks range={ page + 1..total_pages + 1 } len={pages_next} max_links={links_right} props={props.clone()} />
     }
 }
 

examples/function_router/src/pages/author.rs

@@ -41,7 +41,9 @@ pub fn Author(props: &Props) -> Html {
                         <article class="tile is-child notification">
                             <p class="title">{ "Interests" }</p>
                             <div class="tags">
-                                { for author.keywords.iter().map(|tag| html! { <span class="tag is-info">{ tag }</span> }) }
+                                for tag in &author.keywords {
+                                    <span class="tag is-info">{ tag }</span>
+                                }
                             </div>
                         </article>
                     </div>

examples/function_router/src/pages/author_list.rs

@@ -11,16 +11,6 @@ const CAROUSEL_DELAY_MS: u32 = 15000;
 pub fn AuthorList() -> Html {
     let seeds = use_state(random_author_seeds);
 
-    let authors = seeds.iter().map(|&seed| {
-        html! {
-            <div class="tile is-parent">
-                <div class="tile is-child">
-                    <AuthorCard {seed} />
-                </div>
-            </div>
-        }
-    });
-
     let on_complete = {
         let seeds = seeds.clone();
 
@@ -50,7 +40,13 @@ pub fn AuthorList() -> Html {
             </p>
             <div class="section">
                 <div class="tile is-ancestor">
-                    { for authors }
+                    for seed in seeds.iter() {
+                        <div class="tile is-parent">
+                            <div class="tile is-child">
+                                <AuthorCard {seed} />
+                            </div>
+                        </div>
+                    }
                 </div>
                 <ProgressDelay duration_ms={CAROUSEL_DELAY_MS} on_complete={on_complete} />
             </div>