Allow attributes with special characters

[edg-l]

body {
    button @click="open = true" { "Open" }
}

I think you should be able to somehow use "@click" as an attribute name, this comes in handy when using a library like alpinejs

[lambda-fairy]

Hi @edg-l!

According to the Alpine.js docs, you can use:

button x-on:click="open = true" { "Open" }

As mentioned in #134, I'd rather not add special syntax to support languages other than HTML. So I'll go ahead and close this. Let me know if you have any other questions!

[charlesvdv]

Hello @lambda-fairy,

I just stumbled another incompatibility between maud and alpine. In alpine, you can use modifiers which customise the event handler. For example, you can do x-on:click.outside="foo()" to call foo() when the user click outside of the DOM element.

In Maud, the dot character is used to denote a class. Using modifiers in maud templates leads to syntax errors.

I'm thinking maud could support quoted attribute name like this:

div "x-on:click.outside"="foo()" "@click"="bar()" {}

As you can see this could as well solve the problem explained by @edg-l.

What do you think? If looks ok to you, I could look into integrating the proposal in maud.

Thanks a lot!

[spiffytech]

As another data point, HTMX is working on a very useful extension that uses numbers and asterisks in element attributes.

Its usage looks like this:

<button hx-post="/register"
            hx-target="#response-div"
            hx-target-5*="#serious-errors"
            hx-target-404="#not-found">
        Register!
    </button>

It looks like the * isn't valid HTML, but numbers appear to be valid characters for attributes, which Maud doesn't accept right now.

I'm unsure how to proceed in cases like this. Should I fall back to stuffing a hand-written PreEscaped HTML string in the middle of my template?

Would you consider reopening this? @charlesvdv's proposed syntax appears to solve this.

[josdelien]

Hello @lambda-fairy,

I just stumbled another incompatibility between maud and alpine. In alpine, you can use modifiers which customise the event handler. For example, you can do x-on:click.outside="foo()" to call foo() when the user click outside of the DOM element.

In Maud, the dot character is used to denote a class. Using modifiers in maud templates leads to syntax errors.

I'm thinking maud could support quoted attribute name like this:

div "x-on:click.outside"="foo()" "@click"="bar()" {}

As you can see this could as well solve the problem explained by @edg-l.

What do you think? If looks ok to you, I could look into integrating the proposal in maud.

Thanks a lot!

I ran into the same issue with <form @submit.prevent="searchOrg"> @lambda-fairy

[lambda-fairy]

Hi all, sorry for the delayed response.

I guess that given how many people use Maud with Alpine/HTMX/etc. it's worth supporting their weird syntaxes (despite it being technically invalid HTML 😔).

I'll be happy to take a PR with @charlesvdv's suggestion.

Thanks!

[drdo]

Just to add to this. It's not even possible to use regular htmx as of today. For example the attribute hx-on:htmx:before-swap (or hx-on::before-swap) is not accepted by maud.

This prevents us from using hx-on with any htmx events.

[fraschm1998]

Also doesn't work for alpine custom events: https://alpinejs.dev/directives/on

x-on:scroll.window="showBar = (window.pageYOffset > 20) ? true : false"

[lambda-fairy]

As mentioned in https://github.com/lambda-fairy/maud/pull/396#discussion_r1391957844, the current implementation accepts a bit too much. Let's restrict the syntax before cutting a release.