Add for-loops to `html!` #3498

its-the-shrimp · 2023-10-29T00:10:44Z

Description

Adds the following syntax:

html! {
  for x in 0 .. 10 {
    <span>{x}</span>
  }
}

Disallows top-level {for x}, i.e. the following is no longer valid:

html! { for x }

To disambiguate it and the new for loops, it'll be required to wrap the expression in braces like so:

html! { {for x} }

Checklist

I have reviewed my own code
I have added tests

futursolo · 2023-10-29T02:06:31Z

Thanks for the pull request, however, I do not think an ordinary for-loop should be supported.

What would happen for the following expression?

html! {
  for x in 0..10 {
    <span>{break x}</span>
  }
}

github-actions · 2023-10-29T10:25:24Z

Benchmark - core

Yew Master

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.402 ns      │ 3.65 ns       │ 2.407 ns      │ 2.431 ns      │ 100     │ 1000000000

Pull Request

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.401 ns      │ 4.446 ns      │ 2.403 ns      │ 2.457 ns      │ 100     │ 1000000000

github-actions · 2023-10-29T10:25:28Z

Visit the preview URL for this PR (updated for commit c6c1ffe):

https://yew-rs--pr3498-add-html-for-6g530ixs.web.app

_{(expires Mon, 21 Jul 2025 20:43:18 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

github-actions · 2023-10-29T10:30:08Z

Benchmark - SSR

Yew Master

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	290.874	310.262	292.921	6.094
Hello World	10	485.024	491.947	488.444	2.140
Function Router	10	1577.849	1595.337	1583.533	5.019
Concurrent Task	10	1005.750	1007.183	1006.472	0.526
Many Providers	10	1054.408	1094.138	1072.483	11.907

Pull Request

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	310.447	311.225	310.722	0.223
Hello World	10	469.060	500.601	477.091	11.230
Function Router	10	1643.048	1651.667	1648.178	3.055
Concurrent Task	10	1006.070	1007.165	1006.710	0.320
Many Providers	10	1072.592	1107.600	1089.331	11.480

github-actions · 2023-10-29T10:31:00Z

Size Comparison

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)
async_clock	99.914	99.914	0	0.000%
boids	168.757	168.778	+0.021	+0.013%
communication_child_to_parent	92.069	92.069	0	0.000%
communication_grandchild_with_grandparent	103.230	103.230	0	0.000%
communication_grandparent_to_grandchild	98.222	98.222	0	0.000%
communication_parent_to_child	87.926	87.926	0	0.000%
contexts	104.172	104.172	0	0.000%
counter	84.729	84.729	0	0.000%
counter_functional	85.062	85.079	+0.017	+0.020%
dyn_create_destroy_apps	87.614	87.655	+0.041	+0.047%
file_upload	98.909	98.909	0	0.000%
function_memory_game	170.597	170.597	0	0.000%
function_router	338.873	338.842	-0.031	-0.009%
function_todomvc	163.421	163.421	0	0.000%
futures	236.384	236.409	+0.025	+0.011%
game_of_life	104.850	104.850	0	0.000%
immutable	194.118	194.195	+0.077	+0.040%
inner_html	80.297	80.297	0	0.000%
js_callback	107.759	107.812	+0.054	+0.050%
keyed_list	195.972	196.013	+0.041	+0.021%
mount_point	83.604	83.604	0	0.000%
nested_list	112.979	112.979	0	0.000%
node_refs	90.975	90.975	0	0.000%
password_strength	1785.237	1785.237	0	0.000%
portals	92.886	92.921	+0.035	+0.038%
router	308.132	307.692	-0.439	-0.143%
suspense	111.856	111.856	0	0.000%
timer	88.877	88.896	+0.019	+0.021%
timer_functional	94.950	94.986	+0.036	+0.038%
todomvc	143.516	143.516	0	0.000%
two_apps	86.018	86.018	0	0.000%
web_worker_fib	135.138	135.159	+0.021	+0.016%
web_worker_prime	185.577	185.613	+0.036	+0.019%
webgl	83.154	83.154	0	0.000%

✅ None of the examples has changed their size significantly.

its-the-shrimp · 2023-10-29T11:22:18Z

Fixed it, now an error is raised when trying to break out of a for loop or continue it

futursolo · 2023-10-29T11:59:23Z

If we block break and continue, then code like the following will no longer work, which should be allowed.

#[function_component]
fn Comp() -> Html {
    html! {
        for i in 0..5 {
            <div>
                {{
                    loop {
                        let a = rand_number();
                        if a % 2 == 0 {
                            break a;
                        }
                    }
                }}
            </div>
        }
    }
}

I am fine with asking users to write the following:

let children = (0..5).map(
    html! { <span key={x}>{x}</span> }
);

html! { for x }

There are 2 reasons:

As mentioned in Parse blocks in html! as Rust block expressions #3466, we want to discourage users to write rust code in html! as much as possible. I think this also extends to complex html expressions.
Elements generated in the for-loop requires elements to be keyed, this further complicates the keying requirements. If you think the current keying requirement is peculiar (as mentioned in Make key fall back to id for VTags #3480). We should not add more rules to it.

The current key requirement can be summarised in 1 sentence:

Everything defined in html! is keyless-safe, with the exception of the top-most ancestor element if it is created from an iterator.

(I consider current {for expr} as a bug.)

ranile · 2023-10-29T12:09:01Z

I'm fine with supporting loops. This was discussed on discord as well.

I agree that breaks and continues can be problematic but we could disallow those. These loops can be a for-loop over an iterator that always yields a VNode. This allows us to also lint for presence of keys at compile time.

(I consider current {for expr} as a bug.)

I also agree, however it's not possible to impl Into<Html> for any Iterator type that can be collected into an Html, so it's kinda a necessary evil

futursolo · 2023-10-29T12:12:47Z

I also agree, however it's not possible to impl Into for any Iterator type that can be collected into an Html, so it's kinda a necessary evil

I am specifically referring to the {for expr} rendering html! key required.
Each {...} should result in exactly 1 expression and not many.

{for expr} can be fixed by casting a VList at the top of the expression and not expanding it to the parent VList.

futursolo · 2023-10-29T12:16:22Z

This allows us to also lint for presence of keys at compile time.

html! {
    for i in fragments {
        {i.to_html()}
    }
}

I think it would be kind of difficult to lint this at compile time.

its-the-shrimp · 2023-10-29T12:35:12Z

we want to discourage users to write rust code in html! as much as possible. I think this also extends to complex html expressions

Which is why we can just not care about the peculiar case of nested loops shown above, it'll be rejected anyway.

Elements generated in the for-loop requires elements to be keyed

Not necessarily, unlike {for x}, the new for loops expand into a VList and are not inlined into the parent which discards the problem with keys.

Another argument that can be made in favour of the new for-loops are the possible optimisations and checks, of course one can always just

{for iter.into_iter().map(|x| html!{...})}

Yet, even ignoring how unreadable it can get, which is subjective in a way, calling html! inside html! makes the context unclear, I'll try to add more optimisations & checks to the new for-loops to demonstrate this

futursolo · 2023-10-29T12:48:28Z

Which is why we can just not care about the peculiar case of nested loops shown above, it'll be rejected anyway.

We need to ensure that our implementation is sound. If it is a valid Rust expression, we should accept it. If we wish to reject complex expressions, it needs to be rejected based on complexity and not a limitation introduced by blocking expressions.

Not necessarily, unlike {for x}, the new for loops expand into a VList and are not inlined into the parent which discards the problem with keys.

If you reconcile a for-generated VList of 4 items into 5 items, the renderer will not understand which one you are trying to remove. (That's why you need to key the iterator expression.)

The keying requirement always presents for VList items with a non-fixed length.

The syntax proposed in this pull request (for i in 0..10 { <span key={i}>{i}</span> }) is actually a syntax sugar for (0..10).map(|i| html! {<span key={i}>{i}</span>}).
So everything that applies to an iterator also applies to for-loop.

You can read the React documentation, which explains the keying requirement for Lists in detail: https://react.dev/learn/rendering-lists

The bug for {for expr} is because it renders its adjacent elements to be non keyless-safe as it expands into a parent VList and not items yielded by expr needs keying.

Another argument that can be made in favour of the new for-loops are the possible optimisations and checks, of course one can always just

{for iter.into_iter().map(|x| html!{...})}

Optimisation is also possible for iterators-based implementations with helpers like size_hint().
I do not recommend users do this for readability, but that is also kinda a necessary evil.
However, what is in our control is to simplify and ensure soundness of the html syntax, so we do become part of that evilness.

its-the-shrimp · 2023-10-29T15:00:26Z

Added a check to outlaw the following cases:

html!{
  for i in 0 .. 10 {
    <div key="duplicate" />
  }
}

Outlaws the most obvious cases of incorrect keying: when a key is a complex path (i.e. smth::VALUE) or a literal.

Also added an optimisation which allows for avoiding calling recheck_fully_keyed when creating a VList from a for-loop.

Regarding break & continue, I chose a dumb but durable approach of compiling the loop to a call to for_each so that any attempt to break the loop will raise a "break in a closure" error. Not the most straightforward approach but a bug-free one, an alternative would be to basically parse all the expressions by ourselves and run complex AST visitors on them.

its-the-shrimp · 2023-10-30T10:25:17Z

There's some problem with the benchmarks again, some file missing...

Madoshakalaka · 2025-07-08T05:29:50Z

@its-the-shrimp I'm for merging this. Can you bring this PR up to date? for loops in html makes user code a lot more concise. @ranile 's concern for complex rust code in the macro was rustfmt's inability to format, which is now alleviated by yew-fmt. And @futursolo 's concern for break/continue is kind of addressed too.

Madoshakalaka · 2025-07-08T05:34:08Z

website/docs/concepts/html/lists.mdx

+An alternative is to use the `for` keyword, which is not native Rust syntax and instead is used by
+the HTML macro to output the needed code to display the iterator.
+This approach is better than the first one when the iterator is already computed and the only thing left to do
+is to pass it to the macro.


It's not clear how this approach is different from the collect::<Html> approach. Can you expand a bit more about what the for keyword does in the to_tokens method, maybe mentioning the performance impact and keying?

{for x} appends elements as children of the enclosing element, e.g. <div>{"Hi"}{for [html!("a")].into_iter()}</div> will become <div>{"Hi"}{"a"}</div>.
The problem with that is that now all children of the element require a key, not just the ones generated dynamically. new for loops expand into a separate VList

…f a for loop, added a check for duplicate keys, added keyed state compile-time inference

…de per iteration

website/versioned_docs/version-0.20/concepts/html/components.mdx

Madoshakalaka · 2025-07-15T06:28:39Z

thanks for the contribution 🚀

Madoshakalaka reviewed Jul 8, 2025

View reviewed changes

its-the-shrimp and others added 14 commits July 9, 2025 15:40

added for loops to html macro

66d1a30

disallowed divrging expressions in for loops

87a2b82

updated the docs

e493464

updated the docs

5bc6d68

fixed tests

cdd7366

fix docs

cb1e3ba

fix docs

1604da9

delegated divergence prohibition to rustc by using for_each instead o…

ff4936a

…f a for loop, added a check for duplicate keys, added keyed state compile-time inference

fixed formatting

647c648

fixed a bug, optimised fragments' creation

a1b0204

removed an allocation optimisation for for-nodes generating only 1 no…

41e185e

…de per iteration

fixed formatting

78dc9db

let else was stablized in 1.65

61ab198

update tests

1df6511

its-the-shrimp force-pushed the add-html-for branch from 1133944 to 1df6511 Compare July 9, 2025 15:01

fix formatting

6d64cd8

Madoshakalaka requested changes Jul 12, 2025

View reviewed changes

website/versioned_docs/version-0.20/concepts/html/components.mdx Outdated Show resolved Hide resolved

remove incorrect modifications of the docs

c6c1ffe

Madoshakalaka approved these changes Jul 15, 2025

View reviewed changes

Madoshakalaka merged commit fd96a9a into yewstack:master Jul 15, 2025
26 checks passed

Uh oh!

Add for-loops to html! #3498

Add for-loops to html! #3498

Uh oh!

Conversation

its-the-shrimp commented Oct 29, 2023

Description

Checklist

Uh oh!

futursolo commented Oct 29, 2023

Uh oh!

github-actions bot commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Benchmark - core

Yew Master

Pull Request

Uh oh!

github-actions bot commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Benchmark - SSR

Yew Master

Pull Request

Uh oh!

github-actions bot commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Comparison

Uh oh!

its-the-shrimp commented Oct 29, 2023

Uh oh!

futursolo commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ranile commented Oct 29, 2023

Uh oh!

futursolo commented Oct 29, 2023

Uh oh!

futursolo commented Oct 29, 2023

Uh oh!

its-the-shrimp commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

futursolo commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

its-the-shrimp commented Oct 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

its-the-shrimp commented Oct 30, 2023

Uh oh!

Madoshakalaka commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Madoshakalaka Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

its-the-shrimp Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Madoshakalaka commented Jul 15, 2025

Uh oh!

Uh oh!

Uh oh!

Add for-loops to `html!` #3498

Add for-loops to `html!` #3498

github-actions bot commented Oct 29, 2023 •

edited

Loading

github-actions bot commented Oct 29, 2023 •

edited

Loading

github-actions bot commented Oct 29, 2023 •

edited

Loading

github-actions bot commented Oct 29, 2023 •

edited

Loading

futursolo commented Oct 29, 2023 •

edited

Loading

its-the-shrimp commented Oct 29, 2023 •

edited

Loading

futursolo commented Oct 29, 2023 •

edited

Loading

its-the-shrimp commented Oct 29, 2023 •

edited

Loading

Madoshakalaka commented Jul 8, 2025 •

edited

Loading