Description

Various macro improvements that help users write concise Yew code.

Automatic root-level fragments:

The html! macro now accepts multiple root nodes directly:

html! {
    <h1>{"Title"}</h1>
    <p>{"Paragraph"}</p>
}

Streamlined match arms

Previously, match required a block wrapper and nested html! calls per arm:

html! {
    <div>{
        match status {
            Status::Loading => html! { <Spinner /> },
            Status::Ready(data) => html! { <DataView data={data} /> },
        }
    }</div>
}

Now match works directly, following the same pattern as the existing if/else support, with let binding allowed:

html! {
    match status {
        Status::Ready(data) => {
            let data_pretty = format!("My data: {data}");
            let class = if data.important { "highlight" } else { "normal" };
            <DataView data={data_pretty} class={class} />
        }
        _ => <Spinner/>
    }
}

As shown above, match arms with a single element don't require braces:

html! {
    match status {
        Status::Loading => <Spinner/>,
        Status::Error(e) => <p class="error">{e}</p>,
        Status::Ready(data) => {
            <DataView data={data} />
        }
    }
}

Note, even the commas are omittable but due to users' familarity with Rust match statements, I have preserved the commas in code examples for now.

let bindings in for bodies:

Previously, let bindings inside for loops required a nested block with an inner html! call:

html! {
    for item in items {
        {{ let processed = transform(&item); html! { <div>{processed.name}</div> } }}
    }
}

Now let bindings can appear directly before html children:

html! {
    for item in items {
        let processed = transform(&item);
        let class = if processed.active { "active" } else { "inactive" };
        <div class={class}>{processed.name}</div>
    }
}

let bindings must appear before any html children (not interleaved). This avoids parsing ambiguity since let is not a valid start for any HtmlTree variant. The bindings are emitted inside the Iterator::for_each closure, scoped to each iteration.

If statements let-binding and bare return node support

This now just works:

html! {
    if condition {
        let label = format!("count: {count}");
        <span>{label}</span>
    } else {
        "nothing"
    }
}

Note:

Both worked on master:

html! { "foo" }

html! { <div>{"foo"}</div>  }

however, only the first of the two below worked:

html!{
  if foo {
    <div>{"foo"}</div>
  }
}

html!{
  if foo {
    "foo"
  }
}

I consider this a bug, which is fixed now.

Multi-children arms, multi-children for-loop bodies, and multi-children if-else bodies

Example:

html!{
  if foo {
    <span>{"123"}</span>
    <span>{"234"}</span>
  }
}

we now protest against old patterns

Patterns like this are now hated against with a suggestion to remove the <></>:

html!{
  if foo {
    <>
      <span>{"123"}</span>
      <span>{"234"}</span>
    </>
  }
}

Keyed fragments (<key="...">) are unaffected.

Patterns like this are hated against with a suggestion to remove the inner html!:

html!{
  match foo {
    0 => {
      html!{
        // ...
      }
    }
    // ...
  }
}

On stable, these are hard errors. On nightly, these are warnings.

I must note, these deprecation lints are vibe-coding friendly. Agents can work with a clear feedback and correct macro errors in closed loops. (note errors reported by proc_macro_error::emit_error! will batch together, unlike compiler_error!'s early stop behavior. This will help accelerate adoption of the new syntax across user applications.

That said, these lints actually increase code complexity and slow down compilation.
We can remove them X versions later, when users have caught up with the newer syntax. Then, we can remove old pattern parsing code too.

Observation

The new macro brings a 22% reduction to applicable code, as it brings real code size reduction to our examples (+443 / −565 (net −122 lines) across 38 files under examples/).

Prior Art

Focusing on some features we haven't adopted yet:

@kirillsemyonkin's yew-alt-html has a super dry syntax that allows closing tag omission and brace omission:

html!{
  <h1 style=italic_style>"Hello " name "!"</>
}

closing tag omission is neat because component names can become very long compared to html tags especially with genenrics.

@its-the-shrimp's yew-html-ext supports let-else statments that enable early return.

    html! {
        <ul>
            let Ok(iter) = read_dir(&props.path) else {
                return html!("oops :P")
            };
            for entry in iter {
                let Ok(entry) = entry else {
                    return html!("oops :p")
                };
                <li>{ format!("{:?}", entry.path()) }</li>
            }
        </ul>
    }

It also supports cfg attributes on props and components:

    html! {
        <code #[cfg(debug_assertions)] style="color: green;">
            { "Make sure this is not green" }
        </code>
    }

Checklist

• I have reviewed my own code
• I have added tests