Alpine.js Weekly - Alpine.js Weekly #71

Tips

Did you know that @Alpine_JS has an undocumented “destroy” lifestyle method that gets called when you remove a component? Just add it to your component the same way you would use init Try it out here: https://t.co/e1Rwfec9Wl

— Kevin Batdorf (@kevinbatdorf) August 16, 2021

Remember scrollspy from bootstrap? (Remember bootstrap? 🤣) Today I replicated it using @Alpine_JS‘s new x-intersect plugin (V3).

Docs: https://alpinejs.dev/plugins/intersect

Initially it threw me off because it doesn’t tracking leaving, but then I changed xdata from boolean to a value and💥

— David A. Lindahl (@austriker27) August 6, 2021

This newsletter supported by my GitHub Sponsors.

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:

• bigbadcon.com is live, built with Alpine, Eleventy, Tailwind, hosted on Netlify, by @colinaut
• alpine-simon.vercel.app - a game experiment made with Alpine, Tailwind and Vite, by @niklaspostulart
• sayso.co is built with Alpine, Eleventy and Tailwind, hosted on Netlify by @SAYSOco

Demos:

• v3 upgrade to a datatable component by @IliassSalmi
• polls.adonisjs.dev is an Adonis + Alpine poll demo, source code: github.com/adonisjs-community/polls-app by @AmanVirk1
• interactable heart button in Alpine by @icesofty
• Shoelace + Alpine by @richeklein
• Alpine.js x-teleport by @AmanVirk1

Articles & Tutorials

[Podcast] Alpine.js, microservices, code completion and getting paid for open source with Caleb Porzio

New Alpine.js Plugins: Intersect, Persist, and Trap by @jasonlbeggs

Fancy a modern alternative to jQuery? Meet AlpineJS

Code & Tools

3.2.4

Features:

• x-intersect:enter/x-intersect:leave
• x-on:[event-name].dot modifier

Fixes:

• x-trap crawl bugs
• Safari autofill bug
• regression in x-transition

Community

github.com/thetutlage/alpine-teleport by @AmanVirk1 adds an x-teleport directive.

Adopter Reactions

When ideas pop in my head, it’s amazing how easy it is to go from idea to a functional web app using @laravelphp @tailwindcss and depending on need, @LaravelLivewire @Alpine_JS and @vuejs or @reactjs

— Jimmy Aldape (@jimmyaldape) August 10, 2021