Omit conditional elements without an else branch when present in children

Author: texodus

packages/yew-macro/src/html_tree/html_if.rs

@@ -1,6 +1,6 @@
 use boolinator::Boolinator;
 use proc_macro2::TokenStream;
-use quote::{quote_spanned, ToTokens};
+use quote::{quote, quote_spanned, ToTokens};
 use syn::buffer::Cursor;
 use syn::parse::{Parse, ParseStream};
 use syn::spanned::Spanned;
@@ -139,3 +139,32 @@ impl ToTokens for HtmlRootBracedOrIf {
         }
     }
 }
+
+pub struct HtmlIfIterItem<'a>(pub &'a HtmlIf);
+
+impl<'a> ToNodeIterator for HtmlIfIterItem<'a> {
+    fn to_node_iterator_stream(&self) -> Option<TokenStream> {
+        let HtmlIf {
+            if_token,
+            cond,
+            then_branch,
+            else_branch,
+            ..
+        } = &self.0;
+
+        if else_branch.is_none() {
+            let new_tokens = quote_spanned! {if_token.span()=>
+                if #cond {
+                    Some(::std::convert::Into::into(#then_branch))
+                } else {
+                    None
+                }
+            };
+
+            Some(new_tokens)
+        } else {
+            let new_tokens = self.0.to_node_iterator_stream().unwrap();
+            Some(quote! { Some(#new_tokens) })
+        }
+    }
+}

packages/yew-macro/src/html_tree/mod.rs

@@ -241,23 +241,56 @@ impl HtmlChildrenTree {
         if self.only_single_node_children() {
             // optimize for the common case where all children are single nodes (only using literal
             // html).
-            let children_into = children
-                .iter()
-                .map(|child| quote_spanned! {child.span()=> ::std::convert::Into::into(#child) });
+            let children_into = children.iter().map(|child| {
+                if let HtmlTree::If(if_clause) = child {
+                    html_if::HtmlIfIterItem(&**if_clause)
+                        .to_node_iterator_stream()
+                        .unwrap()
+                } else {
+                    quote_spanned! {child.span()=> Some(::std::convert::Into::into(#child)) }
+                }
+            });
+
             return quote! {
-                ::std::vec![#(#children_into),*]
+                ::std::vec![#(#children_into),*].into_iter().filter_map(|x| x).collect::<Vec<_>>()
             };
         }
 
         let vec_ident = Ident::new("__yew_v", Span::mixed_site());
         let add_children_streams = children.iter().map(|child| {
             if let Some(node_iterator_stream) = child.to_node_iterator_stream() {
-                quote! {
-                    ::std::iter::Extend::extend(&mut #vec_ident, #node_iterator_stream);
+                if let HtmlTree::If(if_clause) = child {
+                    let tokens = html_if::HtmlIfIterItem(&**if_clause)
+                        .to_node_iterator_stream()
+                        .unwrap();
+
+                    quote! {
+                        if let Some(iter) = #tokens {
+                            ::std::iter::Extend::extend(&mut #vec_ident, iter)
+                        } else {
+                            #vec_ident
+                        }
+                    }
+                } else {
+                    quote! {
+                        ::std::iter::Extend::extend(&mut #vec_ident, #node_iterator_stream);
+                    }
                 }
             } else {
-                quote_spanned! {child.span()=>
-                    #vec_ident.push(::std::convert::Into::into(#child));
+                if let HtmlTree::If(if_clause) = child {
+                    let tokens = html_if::HtmlIfIterItem(&**if_clause)
+                        .to_node_iterator_stream()
+                        .unwrap();
+
+                    quote! {child.span()=>
+                        if let Some(iter) = #tokens {
+                            #vec_ident.push(iter)
+                        }
+                    }
+                } else {
+                    quote_spanned! {child.span()=>
+                        #vec_ident.push(::std::convert::Into::into(#child));
+                    }
                 }
             }
         });

packages/yew/tests/children.rs

@@ -0,0 +1,58 @@
+#![cfg(not(target_arch = "wasm32"))]
+
+use yew::prelude::*;
+
+#[tokio::test]
+async fn conditional_children_are_omitted() {
+    #[derive(Properties, PartialEq)]
+    pub struct Props {
+        #[prop_or_default]
+        pub children: Children,
+    }
+
+    #[function_component]
+    pub fn Problem(p: &Props) -> Html {
+        html! {
+            <div class="container">
+                {
+                    for p.children.iter().enumerate().map(|(i, x)| {
+                        html! {
+                            <div>
+                                <span>{x}</span>
+                                <span>{i}</span>
+                            </div>
+                        }
+                    })
+                }
+            </div>
+        }
+    }
+
+    #[function_component]
+    fn App() -> Html {
+        let b = false;
+        html! {
+            <Problem>
+                <span>{ "A" }</span>
+                <span>{ "B" }</span>
+                if b {
+                    <span>{ "C" }</span>
+                }
+                <span>{ "D" }</span>
+            </Problem>
+        }
+    }
+
+    let mut s = String::new();
+    yew::ServerRenderer::<App>::new()
+        .render_to_string(&mut s)
+        .await;
+
+    assert_eq!(
+        s,
+        "<!--<[children::App]>--><!--<[children::Problem]>--><div \
+         class=\"container\"><div><span><span>A</span></span><span>0</span></\
+         div><div><span><span>B</span></span><span>1</span></div><div><span><span>D</span></\
+         span><span>2</span></div></div><!--</[children::Problem]>--><!--</[children::App]>-->"
+    );
+}