`rsx` syntax enhancements

[Dashurai]

rsx syntax enhancements

This is more to open discussion about the possibility, but I think there are some areas where rsx could improve :

• A class shorthand (div {class="a b"} to div.a .b {}), as typing classes is extremely common, especially for tailwind users.
• Furthermore, omitting div when qualified by a class (div .a {} to .a {}).
• Support for hyphens in idents, this can only be done by replacing the "prop-a": value syntax by a HTML one prop-a="value", because some users will heavily use props with hyphens (data attributes, htmx). This avoids quotes around the attribute name in these cases.
• Putting the attribute list before the content of the node (div {a: "b"} to div a="b" {}), this may be the most subjective one, but it allows omitting commas between attributes (assuming the previous point) and draws a line between what qualifies a node and what is inside.

I think the maud library and its html macro is a good source of inspiration. I acknowledge the subjective nature of the proposal but I think there are improvements to be find regarding DX. I'm interested in hearing your opinions.

[ealmloff]

rsx syntax enhancements

This is more to open discussion about the possibility, but I think there are some areas where rsx could improve :

• Support for hyphens in idents, this can only be done by replacing the "prop-a": value syntax by a HTML one prop-a="value", because some users will heavily use props with hyphens (data attributes, htmx). This avoids quotes around the attribute name in these cases.

There are two cases where this would be nice to support:

1. attributes for web components
2. attributes that start with data-*

Outside of those two cases, I'm worried this would make it too easy to default to untyped html attributes

div {
    // This is clearly untyped
    "aria-relevant": "value",
    // Without knowing dioxus, it isn't clear which of these are typed
    aria-relevant: "value",
    aria_relevant: "value",
}

• A class shorthand (div {class="a b"} to div.a .b {}), as typing classes is extremely common, especially for tailwind users.
• Furthermore, omitting div when qualified by a class (div .a {} to .a {}).

I'm hesitant to introduce special syntax that hides the attribute/element names because it makes it more difficult to learn rsx coming from html

• Putting the attribute list before the content of the node (div {a: "b"} to div a="b" {}), this may be the most subjective one, but it allows omitting commas between attributes (assuming the previous point) and draws a line between what qualifies a node and what is inside.

I think we could provide better autocomplete with this syntax? You can differentiate between attributes and elements more easily with this syntax which lets you autocomplete one or the other

There was an article about improving dioxus autocomplete published a while ago.

[rathod-sahaab]

Currently, tailwind cli is used to parse the files and generate css, so stock tailwind is suffice to process classes, with this syntax that might not work so a wrapper or something have to be maintained a hope for us in this case is that tailwind guys wrote a rust engine in tailwind 4. we might be able to leverage that.

Tailwind also has wildcard-ish constructs like w-[<custom-value>] so that has to be accounted for to make sure other dioxus constructs don't clash