anp / moxie

lightweight platform-agnostic tools for declarative UI
https://moxie.rs
Apache License 2.0
828 stars 27 forks source link

Support tags with dynamic/variable children #230

Open anp opened 3 years ago

anp commented 3 years ago

In the dom-hacking example, we ensure we can add children in a loop (which also works for a conditional):

https://github.com/anp/moxie/blob/dfca4be659c6d981269acd2432a2394abe6507a5/dom/examples/hacking/src/lib.rs#L26-L39

It would be nice to be able to write the whole example as a single mox invocation, maybe something like:

mox! {
    <div>
        <div>{% "hello world from moxie! ({})", &count }</div>
        <button type="button" onclick={move |_| set_count.update(|c| Some(c + 1))}>
            "increment"
        </button>
        |mut root: Div| -> Div {
            for t in &["first", "second", "third"] {
                root = root.child(mox! { <div>{% "{}", t }</div> });
            }
            root
        }
    </div>
}
zetanumbers commented 3 years ago

Maybe we could pass impl Iterator into .child(iter.into_child()). That would allow to implement fragments.

zetanumbers commented 3 years ago

Passing closure would allow to transform for example Div into something completely else. While this is an interesting possibly, closing tag </div> would make confusion. Thus this kind of behaviour should be disallowed, while using mox! macro.

zetanumbers commented 3 years ago

Example from above redone:

mox! {
    <div>
        <div>{% "hello world from moxie! ({})", &count }</div>
        <button type="button" onclick={move |_| set_count.update(|c| Some(c + 1))}>
            "increment"
        </button>
        { ["first", "second", "third"].iter().map(|t| mox! { <div>{ *t }</div> }) }
    </div>
}
anp commented 3 years ago

I hadn't thought of supporting iterators directly, I like that idea a lot.

anp commented 3 years ago

Not sure if that should replace the ability to write your own loop, but maybe it's enough?

zetanumbers commented 3 years ago

Not sure if that should replace the ability to write your own loop, but maybe it's enough?

If you would like to use loops, then use generators.