setAttribute error when morphing elements with Alpine.js shorthand syntax (@change, :class, etc.)

[Gloib]

When using Idiomorph with Alpine.js, morphing fails when server-returned content contains Alpine's shorthand attribute syntax (e.g., @change) on non-input elements (like div, span, etc.).

Error:
InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '@change' is not a valid attribute name.

<!-- Original -->
<div>Content</div>

<!-- Server returns morphed content with shorthand syntax -->
<div @change="doSomething()">Content</div>

The issue is that setAttribute() validates attribute names strictly, while the browser's HTML parser may have accepted invalid names when parsing the server response.

For now I'm using the full Alpine syntax x-on:change instead of shorthands @change in server responses. It would be nice to support shorthands since they work in the initial DOM and are idiomatic Alpine.js.

[botandrose]

Hi @Gloib Thanks for bringing this to our attention! I see the value in supporting the shorthand attributes, so if we can support them in a reasonable fashion, then I'd like to. The question then becomes, is this even possible?

Let's say we need to reuse an existing node to maintain its hidden state, perhaps a <video> element that is currently playing. If the morph were to want to add a @change attribute to this element, is it even possible to do so via some other mechanism than setAttribute? Maybe something like:

for (const a of Array.from(source.attributes)) {
  target.setAttributeNode(a.cloneNode());
}

That might work?

Failing that, maybe one could create some kind of plugin for Idiomorph and Alpine.js that interprets and rewrites the shorthand versions into their long html-compliant form?

What are your thoughts? I'm pretty busy here at the moment with Real Life stuff, and I have some big plans for the next version of Idiomorph that I want to tackle first. So if you have the time to experiment with finding a solution here that'd really help get this out the door sooner.