Remove x-* attributes from dom markup after parsing?

[jasonlfunk]

Is it possible to have the x-* attributes removed from the dom markup after it's parsed? Or is there a good reason that I should want them to stick around?

[HugoDF]

What problem are you trying to solve by removing them?

Removing the attributes would involve updating a bunch of attributes on a bunch of DOM Nodes, that's gonna have performance implications.

[jasonlfunk]

It's not really a problem to solve... just coming from vue when I opened the dev tools in my browser I wasn't expecting to see my DOM cluttered up with these attributes. I wanted to ask the question to see if there was a reason that it was decided not to remove them after reading them.

[HugoDF]

Sure so the difference in this case is that Vue.js takes the template, creates a virtual DOM (in-memory representation of what the template looks like) and then writes it to the actual DOM.

During the "create virtual DOM" step or the "write to DOM" step, it's very cheap to strip extra attributes since it's just a case of not putting them into the final DOM representation.

Alpine's templating is HTML-based and pretty much just watches the DOM and updates it, no virtual DOM. So stripping the attributes would require more code and effort since you would need to check attributes and remove them from the DOM as you walk through it.

I think we probably just need "Alpinejs devtools" that will give you the pretty view without the clutter 😊

[jasonlfunk]

Thanks for the info. :)

Just out of curiosity - isn't alpine already walking the DOM to find all the x-* attributes during initialization and generating some sort of internal model anyways? Is it really that much more of a performance hit to remove the attribute during initialization?

[SimoTod]

if you remove the x- attributes, with the current implementation, you will remove the reactivity as well. Alpine is still relying on those attributes when refreshing the component since it doesn't have a virtual DOM to map them.

[jasonlfunk]

Perfect. :+1:

Thanks!

[joydeep-bhowmik]

Alpine js is not as advanced as Vue yet....

[TxzK]

Alpine js is not as advanced as Vue yet....

Yes, and it'll never be, and that's by design. These two are for very different use cases. If you want something as advanced as Vue, you're better off with Vue.

[joydeep-bhowmik]

Alpine js is not as advanced as Vue yet....

Yes, and it'll never be, and that's by design. These two are for very different use cases. If you want something as advanced as Vue, you're better off with Vue.

I actually meant to say Petite Vue as it removes all the v-* attributes. Alpine could have done something similar but now I guess it's to late to do that cause both have different implementation in their core

[TxzK]

Oh okay. That makes sense. I assumed you meant the main version of Vue. Tho I wouldn't call Alpine less advanced than Petite Vue

[joydeep-bhowmik]

Oh okay. That makes sense. I assumed you meant the main version of Vue. Tho I wouldn't call Alpine less advanced than Petite Vue

I mean surely alpine js has more directives but v-pre v-once reactive() @vue:mounted & @vue:unmounted And also a component system

Don't have to write template tag for if else and for loop.

All attributes v-* are removed

Seems pretty ahead ....

but it's almost a abandoned project so doesn't matter