Support for dynamic HTML element tags inside html macro

[cit117]

Please support for dynamic changes to the HTML elements inside html macro,so that the following compiles:

fn view(&self) -> Html {
        html! {
                <{self.props.tag}>
                <h2>{self.props.title}</h2>
                </{self.props.tag}>
            }
    }

[jstarry]

I think this would be a fun issue to take on for someone interested in how the macro works! I think we would probably need to require that the expression inside the curly braces is exactly the same for the open and close tags to have proper compile time error checks.

[captain-yossarian]

@jstarry I'd like to work on it

[jstarry]

Alright, have fun!

[captain-yossarian]

@jstarry Could you please give me start point?
Like I understand, html! macro defined here, am I right?

Should I treat computable tag name as a tag, or I should add new type HtmlTree::Computable?

Should parsing logic go here?

How you debug your changes?
I tried to use wasm_log, but every time I'm receiving use of undeclared type or module wasm_logger`` when I want to initialize it.

Also, I've tried to use console service, but

use cfg_if::cfg_if;
use cfg_match::cfg_match;

above code don't work

Thanks!

[jstarry]

Should I treat computable tag name as a tag, or I should add new type HtmlTree::Computable?

Treat it as a tag 👍

Should parsing logic go here?

Yes 😄

How you debug your changes?

For this stuff, I try to write tests first. If you want to do debug printing, you will have to add a dependency to wasm logger on the yew-macro crate

[jstarry]

We can't rely on expressions resolving to the same string for start and end tags. I think we will need to special case end tags to something like </{}>

[siku2]

@jstarry I was just toying around with this a bit over at siku2/yew@dynamic-tag and I noticed this exact problem:

We can't rely on expressions resolving to the same string for start and end tags.

However, my approach introduces a new syntax using the @ token.
It looks like this:

let wrapper_tag  = "div";
let mut extra_iter = vec!["a", "b"].into_iter();
html! {
    <@{wrapper_tag}>
        <span>"Hello World"</span>
    </@>

    <@{extra_iter.next().unwrap()} class="extra-a"/>
    <@{extra_iter.next().unwrap()} class="extra-b"/>
}

The benefit of doing it this way is that it's immediately obvious that it's not a normal HTML tag and personally I think the closing tag </@> is much nicer than </{}>.
What do you think?

[jstarry]

@siku2 sounds reasonable to me. I'm not too worried about the syntax here since I don't expect this to be super common. Using @ is very unlikely to interfere with anything else 👍