Alpine.js?

[nelsonic]

Alpine.js is the "A" in PETAL Stack: #87
It's a way to add interaction enhancements like transitions on the client-side
https://alpinejs.dev/start-here

The biggest advantages are:

1. Tiny API: 18 Directives
   x-data
   x-init
   x-show
   x-bind
   x-on
   x-text
   x-html
   x-model
   x-modelable
   x-for
   x-transition
   x-effect
   x-ignore
   x-ref
   x-cloak
   x-teleport
   x-if
   x-id
2. Declarative in-line code so all enhancements are in the HTML (.heex) Template so we don't have to look in multiple places to understand the code.

There is also a component library: https://alpinejs.dev/components

It't $129:

This seems perfectly reasonable if its mobile-first and fully responsive. 📱

Crucially there are already quite a few people using in the Phoenix LiveView space.
e.g: https://petal.build/

https://petal.build/#pricing

quite a lot more expensive than the Alpine.js Components above ...
but again, offers a lot more for the money. 💭

Not going to spend anymore time on this right now.
My only "concern" is the testing ... but will need to read into this more later.

[nelsonic]

Stopwatch: https://dwyl.github.io/learn-alpine.js/stopwatch.html ⏱️ 🚀

[nelsonic]

@SimonLab can you please take a look at https://github.com/dwyl/learn-alpine.js and provide feedback. 🙏
Our objective is just to have an intro to the topic for now. Just enough for us to understand how to use it. 💭
If you can extend it even better. 🤞