Handling of special characters in attribute names

[ggranger]

Hi,

As a lot of my fellow pythonistas, I've been playing a lot lately with frontend frameworks that play well with server side rendering, namely htmx and alpinejs. And like most of other frontend frameworks, those rely on adding some html element attributes that are not standard and contain non alpha characters. Luckily htpy handles this just fine with the help of dict attributes but my OCD is striking again as I hate to have one or two attributes styled differently from the others.

From my experience, 90% of the time, you need to switch to dict attributes to handle just 2 special characters : at sign @ and colon sign :. Knowing that with most frontend frameworks that I know of (Alpine, HTMX, Vue), the @ sign is syntactic sugar and can be replaced with another syntax involving the colon sign :, I would consider that handling the colon sign : alone would in fact avoid having to switch to the dict attribute syntax 90% of the time.

Now my proposal is the following: allow element attributes to contain upper case chars and consider that an upper case char is in fact the lower case equivalent preceded by a colon sign :.

Here's what it would look like in the end:

Framework	Syntax	Alternative Syntax	htpy
HTMX	@click	hx-on:click	hx_onClick
HTMX	hx-on:htmx:config-request		hx_onHtmxConfig_request
AlpineJS	@click	x-on:click	x_onClick
VueJS	v-bind:src	:src	v_bindSrc or Src

Happy to discuss about this proposal that I think would be a great quality of life improvement for htpy.

[jodal]

I'd argue that in these examples - has a higher precedence than :. The right way to read hx-on:htmx:config-request is "on htmx config-request", not "on-htmx-config request".

To make certain the htpy variation of this reads with the right precedence rules, I'd like the replacement for : to bind looser than _.

One alternative is to use double underscore:

Framework	Syntax	Alternative Syntax	htpy
HTMX	@click	hx-on:click	hx_on__click
HTMX	hx-on:htmx:config-request		hx_on__htmx__config_request
AlpineJS	@click	x-on:click	x_on__click
VueJS	v-bind:src	:src	v_bind__src or __src

[ggranger]

You're right, the initial idea came to me while wrapping my head around the click use case and the onClick syntax kind of immediately made sense, but I think your argument is perfectly valid and I support your proposal.

[ggranger]

With an afterthought, I think we could reuse my initial proposal to have Uppercase letter to emulate the dot . syntax in attributes.
As far as I know, HTMX doesn't use them at all; in Alpine and Vue, the dot is used to specify what they call event modifiers (cf. Vue docs / Alpine docs).
Uppercase syntax would be a good fit for those as most modifiers are single word and would fit with the precedence requirements that @jodal raised earlier.
Here's an updated table of some examples on how translating complex attributes to htpy could look like (and with this, I think we would be 99% covered without dict attributes):

Framework	Shorthand Syntax	Regular Syntax	htpy
HTMX	@click	hx-on:click	hx_on__click
HTMX		hx-on:htmx:config-request	hx_on__htmx__config_request
AlpineJS	@click	x-on:click	x_on__click
AlpineJS	@keyup.escape.window	x-on:keyup.escape.window	x_on__keyupEscapeWindow
VueJS	:src	v-bind:src	v_bind__src or __src
VueJS	@click.stop.prevent	v-on:click.stop.prevent	v_on__clickStopPrevent

[pelme]

I am a huge fan of both AlpineJS and htmx. I love the creative use of @, : and . and use it extensively myself.

However, I think these rules are not obvious enough and do not think htpy should bee too opinionated for specific frameworks/libraries. Other libraries for sure have their own rules/syntax for similar things where other people would argue for different rules.

Yes - htpy already does magic replacements converting _ to -. _ is even a valid character in attribute names. The reason for that is that html builtin attributes only ever uses a-z and -. So without that replacement, you would have to switch to the dict syntax for even specifying native html attributes (aria and data attributes). Python is kind of the opposite of HTML when it comes to _/-. Python uses _ in a lot of names but never -. Switching a single underscore to a single dash is still "magic" but it feels more straightforward/intuitive and is easy to explain/learn.

It would be possible to create small helpers like this for library specific rules:

def _htmx_key(key: str) -> str:
    return key.replace("__", ":").replace('_', '-') # or anything else

def htmx(**kwargs):
    return {_htmx_key(key): value for key, value in kwargs.items()}

and then div(htmx(hx_on__click="foo"))

I would personally probably still just use div({'hx-on:click': "foo"}) though since it is fewer characters and I do not need to learn/remember any new rules or syntax to use it.

In summary: I think it is a reasonable limitation that htpy supports creating native HTML elements but avoiding being too opinionated on library specific syntax. Wherever possible, htpy should make it easy to extend it yourself, either via improving htpy itself or by documenting common patterns.