Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support tags with dynamic/variable children #230

Open
anp opened this issue Jan 2, 2021 · 6 comments
Open

Support tags with dynamic/variable children #230

anp opened this issue Jan 2, 2021 · 6 comments
Labels
mox Related to our mockery of XML
Milestone

Comments

@anp
Copy link
Owner

anp commented Jan 2, 2021

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

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

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>
}
@anp anp added the mox Related to our mockery of XML label Jan 2, 2021
@anp anp added this to the mox 1.0 milestone Jan 2, 2021
@zetanumbers
Copy link
Contributor

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

@zetanumbers
Copy link
Contributor

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
Copy link
Contributor

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>{ *}</div> }) }
    </div>
}

@anp
Copy link
Owner Author

anp commented Jan 10, 2021

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

@anp
Copy link
Owner Author

anp commented Jan 10, 2021

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

@zetanumbers
Copy link
Contributor

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.

@anp anp modified the milestones: mox 1.0, moxie-dom 0.3.0 Apr 25, 2021
@anp anp modified the milestones: moxie-dom 0.3.0, moxie-dom 1.0 Jul 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
mox Related to our mockery of XML
Projects
None yet
Development

No branches or pull requests

2 participants