Alpine.js Weekly - Alpine.js Weekly #65

v3 is picking up some steam, if you’ve missed it, here are the launch tweets:

🎉 If you didn’t catch it, Alpine Version 3 has been officially released!

You can watch the Alpine Day keynote where I show all the changes and show off the new features here:

✌️⛷️https://alpinejs.dev/upgrade-guide

— Caleb Porzio (@calebporzio) June 17, 2021

Hey folks, still lots to do so I’ll put something more official out soon, but for now…

Alpine V3 has been released. Install instructions here: https://alpinejs.dev/essentials/installation

Livewire v2.5.1 now has built-in support for Alpine V3 as well!

— Caleb Porzio (@calebporzio) June 15, 2021

And some benchmarks from Ryan Carniato:

So playing around with the latest @Alpine_JS. V3 is 16kb vs V2’s 8.5kb. That’s mostly since it now uses @vuejs‘s reactivity (~6kb). But on the positive in tentative testing performance is way better.

V2(left), V3(right) vs VanillaJS

— Ryan Carniato (@RyanCarniato) June 14, 2021

This newsletter supported by my GitHub Sponsors.

Tips

Basic support for turbo with Alpine:

At least from mine and Jack’s quick pair, this is all you need to make Alpine V3 and TL work:

https://gist.github.com/calebporzio/20cf74af4a015644c7bef5166cffd86c

— Caleb Porzio (@calebporzio) June 16, 2021

@Alpine_JS pro tip: 🚀🚀
If you are like me a forgot x-cloak all the time
Am I missing something @calebporzio 🤔

— Wali Razzaq (@Wali_Razzaq) June 17, 2021

Just learned about click.stop with @Alpine_JS 🧡

— Tim L. (@timuism) June 15, 2021

Made with Alpine.js

If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.

Here are this week’s Alpine.js adopters:

• mam.org.mm Medical Action Myanmar is a non profit organisation aiming to improve healthcare for all people in Myanmar. Built with Statamic, Tailwind and Alpine, designed & built by @studio1902.
• stop-contrat.com is using Alpine.js as part of the TALL stack, good spot by @HenocKhouilla
• peshcash.af is a website for sharing best offers and discounts in Afghanistan, built with Laravel and AlpineJS, by @ahangarha
• alpine-cart.herokuapp.com, Sinatra + Tailwind + Alpine JS by @soulchildpls

Demos:

• Drag and Drop example using AlpineJS and TailwindCSS by @soulchildpls
• Windows 11 UI in the browser with Alpine and Tailwind by @pixelcave_john
• Demoing out the built-in state functionality of Alpine.js with a notes app by @alexjgarrett

Articles & Tutorials

The Magic Behind Reactivity - Proxies by @ryangjchandler

[Video] SeaJUG Front End Java 2021 - easy full stack Java web apps with Spring Boot, Alpine, Tailwind and HTMX by @wiverson

The Benefits of Container Queries by @robmcfadden (code samples use Alpine)

Code & Tools

v3.0.6

Initial v3 release as demo-ed at Alpine Day (or close to it).

Features/breaking changes from v2: https://alpinejs.dev/upgrade-guide

v3.0.7

Features:

• “alpine:init” event which is an alias of “alpine:initializing”

Fixes:

• binding the value of a missing nested object value to be empty string
• x-bind:class directive using object syntax
• store’s init() function not receiving reactive “this” context

Plugins & extensions

Fern - Persisted global stores for Alpine 3.x. by @ryangjchandler

Tailwind Layouts now supports Alpine, see https://tailwind-layouts.vercel.app/patterns/image?environment=alpinejs, by @lxsmnsyc

@inxilpro has submitted some bugfixes to the IntellijAlpine plugin: github.com/inxilpro/Intel…

[github.com/imacrayon/alpine-ajax]https://github.com/imacrayon/alpine-ajax) adds turbo-frame-like behavior to components by @ima_crayon

Adopter Reactions

Converted some of jQuery code last night over to @Alpine_JS. First time using it. Excellent!

— Latency (@latentuser) June 18, 2021

After some tinkering tonight with some @Alpine_JS and reading the docs I’ve decided that I really like it! Lightweight but so powerful. Top work by @calebporzio and the community. It’s going to be perfect for my side project.🙂

— Greg Robson (@GregRobson_UK) June 16, 2021

LOL @Alpine_JS “x-html was a seldom used directive in Alpine V2. In an effort to keep the API slimmed down to only valued features, V3 is removing this directive.”https://t.co/KrXVrQ5NqH

They never developed with WordPress, apparently 😂😂

— Alex Standiford (@AlexStandiford) June 14, 2021