belaustegui

Phoenix Components attributes don't replace underscores with dashes anymore

Hi.

I am updating a project from Phoenix LiveView 0.18.18 to 0.20 and I’ve noticed a behaviour change that is breaking my application.

We are using HTMX and in some places we need the same hx- attributes repeated in multiple components. To avoid repeating the same attributes in multiple components we have a variable that then pass to the appropriate components.

In Phoenix LiveView 0.18.18 the underscores are converted to dashes when rendering, but in Phoenix LiveView 0.20 that doesn’t happen anymore. Here is a small example:

<div {[hx_get: ""]}></div>

# In Phoenix LiveView 0.18.18 this renders:
<div hx-get=""></div>

# But in Phoenix LiveView 0.20 this renders:
<div hx_get=""></div>

I’ve been reading the changelog but did not find any references to this behaviour change so I’m wondering if it is intentional or should be reported as a bug.

EDIT: this behaviour is still working fine in the old helpers such as content_tag and so on.

5 comments

/phoenix #liveview #component

1 1056 5

2023-11-15 13:35:12 UTC

First 5 of 5 Posts!

LostKobrakai

I think the change was done knowingly, though I guess it should be documented in the changelog. Converting underscores to dashes is problematic because underscores are completely valid characters for html attributes albeit rarely used. Converting them to something else is therefore not a generally safe operation.

Post #1

belaustegui

This seems a little bit surprising. I was looking around and trying to find where this conversion happens for old Phoenix.HTML and it turns out that it is done by the Phoenix.HTML.attributes_escape/1 function.

The documentation says that:

The keys and values can be of any shape, as long as they implement the Phoenix.HTML.Safe protocol. In addition, if the key is an atom, it will be “dasherized”. In other words, :phx_value_id will be converted to phx-value-id .

So, while I understand the reasoning about underscores being valid characters for HTML attributes I think that this is a backwards incompatible change that could be potentially categorised as a bug as it breaks the previous version behaviour and is inconsistent with the past and current behaviour of Phoenix.HTML.

In my opinion keeping the “dasherization” limited to atoms is safe as long as it is documented just like in Phoenix.HTML. String keys should be left unmodified though.

I am not familiar on how the process would work to report this to the Phoenix team. Should I open an issue right away? Is there a mailing list I where I should ask first?

This has a very big impact for my team as we have thousands of templates and hundreds of view modules and we would have to check every _ usage as it may be potentially problematic.

Post #2

LostKobrakai

LiveView is pre 1.0. There can be breaking changes. Also I’m not sure how much HEEx is actually meant to be compatible with Phoenix.HTML.

I can see this being a frustrating change, but to me <div hx_get=""></div> and <div {[hx_get: ""]}></div> being equal seems to be important as well. Especially given those can be custom attributes on components, which might be sensitive to dash vs. underscore and not actually be rendered to the final html.

It’s actually one of my pet peves with liveview that custom attributes cannot use dashes to conform better with common html attributes. You couldn’t write @"my-attr" in the template - that just doesn’t work. But it seems like Chris’ stance on that is not doing automatic conversion – I did ask at some point.

Post #3

belaustegui

I see what you mean and I agree that this consistent behaviour would be ideal if this was a new library written from scratch.

The issue that I have is that, while Phoenix LiveView is pre 1.0, it is automatically used by every new Phoenix project, even in the stable version. So many people are affected by this changes even though they didn’t consciously choose to use a unstable dependency which can experience such changes.

This change is particularly hard as there is no help such as deprecated function warnings and so on. Instead it silently breaks the application behaviour while the application seems to work just fine with no errors.

Furthermore, fixing it is very hard as you have to find and replace an extremely common character such as the underscore.

In case anyone is interested I was able to pinpoint the issue and merge request that changed this behaviour. This was released with Phoenix LiveView 0.19.0.

Post #4

belaustegui

After discussing this in the Phoenix LiveView issue José confirmed @LostKobrakai explanation: this has been an intentional change.

We ended up finding and replacing every usage of hx_ and data_. Took a while but it is already done.

For future reference, the Phoenix LiveView changelog has been updated to reflect this breaking change so others won’t be caught by surprise as it happened to us.

Post #5