Use the syn-rsx crate to create a better JSX-like syntax

[KSXGitHub]

syn-rsx: https://github.com/stoically/syn-rsx

If compile time is a concern, use Cargo feature flag.

The syntax of syn-rsx may not be backward compatible with the current html! syntax, if that's really the case, create a new macro (called rsx! or something).

[futursolo]

Thank you for the idea.

I have glanced through the syntax of the syn-rsx crate.
I think this crate has some syntax that we have specifically migrated away from (e.g.: #1769, no braces around attribute values).

Could you please describe the reason why you think syn-rsx is better than the html! macro?

[KSXGitHub]

HTML syntax doesn't have good a write ergonomic (you have to write <, >, and tag name twice), but Yew chooses to have a macro resembling HTML instead of something like that of maud or syscamore. What was the reason if not familiarity? Yet, you guys don't want to go all the ways. This resulted in a syntax that is neither familiar nor ergonomic. Completely defeat the goal Yew macro syntax aims to achieve in the first place.

I understand if Yew can't yet adopt 100% HTML-like syntax due to technical limitations, but please don't make it your intentional philosophy. And I wouldn't complain if Yew completely stops pretending to be JSX and starts adopting maud/syscamore syntax. A half-ass HTML-like syntax would be a surprise to beginners who are familiar with HTML and JSX.

[ranile]

Have you tried to write any complex layout with a syntax like with maud or sycamore (or even Kotlinx HTML)? It gets very verbose, very quickly.

div {
    class = "wrapper"
    div {
         id = "top"
         img {
             src = "link"
             alt = "alt text"
         }
         h1 { "title }
     }
     div {
          id = "bottom"
          p { tag_line } 
     }
}

If you add event listeners and more attributes/properties, it gets even worse. The above would be much more concise if written as HTML

[KSXGitHub]

@hamza1311 It appears verbose because it has more lines? Maud syntax is not something well-known, so it's not our obligation to copy its exact syntax. We could tweak its syntax. I prefer a hybrid between pug and maud:

div(class = "wrapper") {
  div(id = "top") {
    img(src = "link", alt = "alt text")
    h1 { "title" }
  }
  div(id = "bottom) {
    p { tag_line }
  }
}

[KSXGitHub]

@hamza1311 I have double checked the code snippets in both maud and syscamore, and they look nothing like your code snippet. The syscamore code examples look exactly like my comment above. And the maud syntax look even simpler:

div.wrapper {
  div#top {
    img src="link" alt="alt text"
    h1 { "title" }
  }
  div#bottom {
    p { tag_line }
  }
}

[ranile]

Not necessarily more verbose because it has more lines, it's more text to parse and understand. It's also unfamiliar syntax for those who haven't worked with it (unlike HTML, which closely mimics standard HTML)

I don't disagree that there is space is for more/different syntax, it's just yew-macro is not it (a big reason being maintenance burden). If you'd like, you can create a macro yourself using the APIs exposed in yew::virtual_dom.

[ranile]

In addition to what @futursolo has said, we also have syntax that syn-rsx doesn't support, such as dynamic tags and setting to properties. It also does not support components

It's totally possible to build another crate that provides a macro for Yew using syn-rsx. It wouldn't be part of Yew though