Support for conditional html elements: Option<VNode> should work inside html macro

[Boscop]

Please support conditional html elements by allowing Option<VNode> inside the html macro, so that the following compiles:

html! {
	<div>
		{
			condition.then(|| html! {
				<span>{"foo"}</span>
			})
		}
	</div>
}

(This example uses bool::then to turn a bool into an Option<VNode> but that's just an example how I use it.)

[liquidnya]

Since Option<T> implements IntoIterator<Item=T> (https://doc.rust-lang.org/std/option/enum.Option.html#impl-IntoIterator-1), you can alternatively write the following code:

html! {
	<div>
		{
			for condition.then(|| html! {
				<span>{"foo"}</span>
			})
		}
	</div>
}

Yew supports iterators of VNodes, see https://yew.rs/docs/concepts/html/lists#iterators Syntax Type 2.

I was always using

let inner = if condition {
    html! { <div>{ "Hello" }</div> }
} else {
    html! { }
};
html! { inner }

but i am going to use the for-syntax together with Option<VNode> in the future.

In the meantime maybe adding an explicit example for optional VNodes in the example using the for syntax would be a good idea.

[ModProg]

I feel like it would also be nice to be able to do conditionals without the smth.then(|| ..).
Something similar to the for syntax.

Naively, I imagined something like this, but there would probably be some issues here I'm not seeing.:

html!{
   {if condition {
      <p>{"Hello"}</p>
   }}
}

[voidpumpkin]

@ModProg You can! https://yew.rs/docs/concepts/html/introduction#if-blocks

[ModProg]

@ModProg You can! https://yew.rs/docs/concepts/html/introduction#if-blocks

that is amazing, must have overlooked that :D

[ranile]

Closing this as this is already solved by syntax introduced in #1609. Of course, the html! { for option } "workaround" also works