Yew: Experiment: shtml!

[limira]

Continuation of the experiment #259, and as a way to learn how rust macro work, I build a whole macro shtml! (square-bracketed html), that can work as alternative to html! (you can use both of them in your project), its usage like:

let options = vec.iter().map(|item| {
    shtml! { [option value=item.id()] item.to_string(); [/option] }
});

shtml! {
   [div]
        [p]
            "This is first content portion of p";
            some_data.some_method();
        [/p]
        [select size="4"]
              [option value="None"] "No selection"; [/option]
              for options;
        [/select]
        [ Comp: with props, field1=1 ];
   [/div]
}

You can give this macro a test by adding:
yew-shtml = { git="https://gitlab.com/limira-rs/yew-shtml.git" }

shtml! has some advantage over html!, but most of them can be implemented for the later.

The only advantage that can not provided by html! for now:

• Work with or without trailing comma. (This is the major reason that I start to create shtml!. Html rarely be used in my project, so I just keep forgetting to add the trailing comma)

I think, by using compiler-plugin, we can improve html! to allow it work without require trailing comma. But for now it require rust nightly and also need a great amount of work (because we must parse the macro content by ourselves?). While for shtml, by using [ and ], it is very easy to achieve this.

Advantages that can be implemented for html!:

1. Checking tag closing at compile-time (unmatched close-tag, unbalanced open-close tags, multi tags at root)
2. Better performance (due to 1.)
3. Better usage of expression: expression; instead of {expression}
4. class = "a" "b" "c" instead of class=("a","b")
5. Force with props be the first for component properties.

*Feature mentioned in #259 but not implemented in this experiment: *

• enum HtmlTag for html tags (this can further improve performance). This requires modification in yew.

If @DenisKolodin like this, I will start implementing applicable-features into html! (in my free-time, of course, and I will keep it backward compatible)

[limira]

@xianghx, @krircc: What make you confused? Or my words/English bad (difficult to understand)?

[limira]

I accidentally closed this, but there seems no interest in the idea, so I left this closed.

I think you are confused because you think that I want to change html! to use [ ] instead of < >. If this is your thought, then I must repeat the last few words of my first comment above: I will keep it backward compatible. This means html! will still use < > (therefore we can not make it work without trailing comma (on current stable Rust) as I mentioned in the section: The only advantage that can not provided by html!

[xianghx]

Sorry, It's so difficult to read. use<> instead of [] is ok.

May be can use the emmet way,

div[id="foo" class="bar foobar"]{
content
}

[limira]

I am sorry if my text/English is not good enough to be easy to understand. But unlike positive emojis, a negative emoji is very unhelpful. Poor language cause you little confusion, but a negative emoji cause absolute/complete confusion! If you want clarification you can always ask!

As the syntax you mentioned, @ndarilek also propose it here. I really like it and I am trying to implement it!

[DenisKolodin]

@limira It's sad you're upset. I think this is a great experiment and you should release it :+1:
I know that some developers like shtml! style. Also it's awesome that you've learned and understand macros. It means you could improve html! version.

What about to release shtml! as a separate crate? I think it's cool to have more than a single way to express templates in apps. I even think that move html! macro to a separate crate also a good idea for future.

[anga]

@DenisKolodin Why do not mention extensions like this one into README (or wiki?)?. I think the both projects may have more visibility if someone enter and see that there are people like @limira adding external features, making yew a real community.
As yew user, see projects like that make me thing that is is going in the right direction :smiley:

[xianghx]

Sorry for causing you trouble. A separate crate? I think that's a best way.

[limira]

shtml! is just an experiment (I do not like it myself). I have no intention to release it. Because most of its advantages can be implemented for html! (of course, html! still keep using < >). Therefore, eventually, shtml! is just an ugly-syntax version of html! with only a minor advantage (no trailing comma) over html!. I think the idea by @xianghx above and in this comment fully deserve to be an alternative to html! because it do not need closing-tags (which is required extra attention, editor do not autocomplete it because we are in a .rs file).

One thing related to this experiment is PR #290. The only solution (that I can figure out) for that PR is to track all open tags (as I do in this experiment), then use appropriate method to set_value/add_attribute for input/option/select base on its tag. When tracking open tags, it just requires one more step to check closing-tags at compile-time. All these changes sum up a big change, but backward compatible, no breaking-change on html!'s user side. Do you, @DenisKolodin, like these changes or are you able to figure out a different way to solve the problem in PR #290?

I even think that move html! macro to a separate crate also a good idea for future.

If you want this, I think you should do it now. There are breaking changes (PR #272) in yew 0.5 now. Extracting html! to a separate crate also breaks all projects that use yew 0.4. I think it is better to do all together in yew 0.5.

[kellytk]

Should this issue be reopened? IMHO interest in the experiment continues.