JonathanLorimer / htmx

14 stars 3 forks source link

camelCase vs kebab-case #6

Closed xave closed 2 months ago

xave commented 2 months ago

Is there any reason the instances for Render are in camelCase.

instance Render HtmxEvent where
    render = \case
        Abort -> "abort"
        ...
        AfterRequest -> "afterRequest"

I realize it's valid htmx, though I am getting a transformation (from the browser itself, it seems) that turns my html to all lowercase

hx-on::afterrequest="this.reset()"
            ^

My page initially loads everything just fine.

hx-on::afterRequest="this.reset()"

I have checked all the rendering functions I'm using Haskell side, and they seem to preserve the camelCase. Some browser event seems to be lowercasing everything. I'm testing on Safari, but this type of thing could happen on any browser at any time, I think.

It seems to me that it is safer to use the alternative kebab-case syntax.

instance Render HtmxEvent where
    render = \case
        Abort -> "abort"
        ...
        AfterRequest -> "after-request"
JonathanLorimer commented 2 months ago

@xave Thank you for the issue, you seem to be absolutely right (from the htmx docs):

One gotcha to note is that DOM attributes do not preserve case. This means, unfortunately, an attribute like hx-on:htmx:beforeRequest will not work, because the DOM lowercases the attribute names. Fortunately, htmx supports both camel case event names and also kebab-case event names, so you can use hx-on:htmx:before-request instead.

I was originally following the htmx event reference which uses camel case, but it seems that kebab case is more appropriate.

I will try to have a change up tonight!

JonathanLorimer commented 2 months ago

@xave Live in htmx@0.1.0.1