Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
September 11, 2020

v2.7.0 - a small but might Alpine.js release

Tips

Tip for bigger Alpine.js components, “x-if” allows you to not evaluate them at all.

🔥 Running into an issue with too many @Alpine_JS components on the page slowing things down? 🐌

If they’re inside a tab or accordion that’s not visible initially, consider putting them in a <template x-if="..."> tag to defer the loading of them until later.

pic.twitter.com/eogTXPQsQ2

— Liam Hammett (@LiamHammett) September 9, 2020


The Alpine.js codebase is a great showcase of modern Web API usage.

@Alpine_JS is an absolutely beautiful project.

Make sure to view the source code for some sweet DOM & observable relations #javascript #webdevelopment https://github.com/alpinejs/alpine

— Leo Milman (@MilmanLeo) September 8, 2020

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

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:

  • seveneleven.netlify.app by @mdwp is an Eleventy theme using TailwindCSS and Alpine.js
  • pendragon.com.pe/salaverry-2675-san-isidro by @kennyhorna is a microsite built with Alpine.js and TailwindCSS.

Demos:

  • a Deno course using Alpine.js and TailwindCSS by @ampsantos0
  • a teaser of a new package for Laravel, Alpine & Tailwind by @LarsKlopstra

Articles & Tutorials

Extract UI Components with AlpineJS and TailwindCSS using x-spread and @apply by @praveenjuge

Cool JavaScript Framework – Alpine.js by @agamitech2011

[Podcast] devMode podcast episode 86: “Dynamic HTML with htmx” is out by @devmodefm, this contains a discussion about Alpine.js.

[StackOverflow] How to replicate Alpine.js `$dispatch` in vanilla JS by @hugo__df

Simple and effective: Unit-testing Alpine.js components with Jest ⏱️⏩ by @pthormeier

Writing Reusable Alpine Components by @ryangjchandler

For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

laravel-frontend-presets/tall/releases/tag/v2.0.0, v2 of the TALL stack preset by by @ryangjchandler, @LiamHammett and @danjharrin. Supports new Laravel features & Livewire v2 + bugfixes.

alpine-collective/alpine-magic-helpers by @kevinbatdorf has a new update with fixes relating to $parent/$component and reactivity when watching from multiple components.

If you’re interested in new magic-helpers, discussions are now enabled on the Alpine Magic Helpers repo (credit to @kevinbatdorf).

There’s also a fresh release of alpine-turbolinks-adapater alpine-turbolinks-adapter/releases/tag/v0.2.1 with a bug fix for the mutation observer not starting in some Livewire + Turbolink scenarios.

v2.7.0

Features:

  • support for ranges in x-for, eg. x-for="i in 10"

Fixed:

  • IE11 was erroneously warning about “multiple root in x-for”
  • $watch now supports array mutations (push, pop, etc…)
  • x-text wasn’t working on SVG elements since it used .innerText and not .textContent
Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.