Welcome to Alpine.js Weekly
Welcome to the first Alpine.js Weekly edition. You can expect it in your inbox every Friday.
This week Alpine.js crossed 5000 GitHub stars.
Tailwind UI adopts Alpine.js for examples Alpine.js ❤️ Tailwind and the love is mutual. Due to their shared HTML-centric approach, Adam Wathan started creating Tailwind UI components with Alpine syntax with discussions ensuing and, once more, the dominance of React coming into play.
awesome-alpine was launched, head there for a list of awesome resources related to Alpine curated by Ryan Chandler.
In a similar space, alpinetoolbox.com by Amrit Nagi is going strong and aggregating new examples, posts, components & more.
Articles & tutorials
Introducing Alpine.js: A Tiny JavaScript Framework. A compelling introduction to Alpine.js. As always quality work by Smashing Magazine & Phil Smith.
Using Alpine.js components in React one of the complaints that Tailwind UI customers had for Adam is that they use React, well Alpine supports this use case already despite JSX compilers acting up.
Practical Alpine.js: x-data data access & data fetching examples a walkthrough of a more JS-centric approach to Alpine.js not showcased in the docs.
Code & tools
livewire alpine-plugin Caleb being core to Alpine.js and Livewire, it would make sense that he brings the 2 libraries together. For anyone looking at how to sync data into a running Alpine.js component, this is a good example.
2.1.1/2.1.2 Release
New:
- reference the method name in an event handler, eg.
@click="myHandler".
Fixes:
- IE11 build is back
- Checkbox ":value" bindings improvement
- Support binding for all Boolean attributes ("open", "disabled" & co)
- More prescriptive matching of
x-attributes.
2.1.0 Release
New:
- adoption of a third-party proxy: Salesforce's
observable-membranefixed a bunch of reactivity bugs
Fixes:
- global event listeners are being unregistered correctly
- support for binding to the "open" boolean attribute