[badbotty]

Surely, when you are writing little 150+ line js programs in your html attributes you have to start considering if Alpine.js is the right tool for the job.

https://devdojo.com/pines/docs/select

[danjac]

With Alpine if you start having anything bigger than a snippet you should pull the JS out into a component using Alpine.data()[1] which can live in a <script> tag or a JS module.

[1] https://alpinejs.dev/globals/alpine-data

[jostylr]

In particular, scan past the data in that example and you will see things like @keydown.down="if(selectOpen){ selectableItemActiveNext(); } else { selectOpen=true; } event.preventDefault();"

which tells you what is happening right there. So if you eliminate the data outside the component, as one should, I think it becomes a very nice readable interface.

[badbotty]

That looks like a better way of doing it.

[mhitza]

That is ridiculous amount of javascript within an html attribute. Do all major editors/IDE have proper Alpine plugins in order to highlight autocomplete js code within those html attributes?

[iambateman]

It's possible to extract the data-attribute out to it's own thing:

document.addEventListener('alpine:init', () => { Alpine.data('video', () => ({ 'show_video': false, ...

That way there's code highlighting and syntax checking for JS.

I definitely go this route for Alpine about half the time.

[selcuka]

> Do all major editors/IDE have proper Alpine plugins

PyCharm doesn't seem to have one (I hope I'm wrong). That being said, it is possible to put the code into a proper <script> block. I personally only a trivial amount of code in html attributes such as checking a boolean value with `x-show`.

[badbotty]

No idea

[tannhaeuser]

You might also want to consider whether markup/HTML is the right tool for the job in the first place. Don't get me wrong - I'm as much of an SGML geek as it gets - but there's no point in using multiple serialization formats (HTML and CSS and JS) just for the sake of it when you're coding an "app" as opposed to writing a "doc" and the app ultimately needs JS, and not just for progressive enhancement anyway.

[toddmorey]

I’m not sure you could implement the same level of functionality in less JavaScript using React or even Svelte. So you’re talking more about the shape of the API than amount of code.

[lolinder]

Yes, they are. Their comment identifies the problem as being: "little 150+ line js programs in your html attributes".

HTML attributes are fine, 150+ line JS programs are fine, 150+ lines crammed into your HTML attributes is not fine.

[crooked-v]

From a brief scan, there's also a bunch of stuff in there that seems like it would be more straightforward as `data-` attributes, since you can easily use those as arbitrary selectors for Tailwind styling. I don't know if it's actually more efficient, but it sure seems easier to read to me than dynamically generating the class string based on state.

[teaearlgraycold]

Gotta be honest with you. React is still king.