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.
— 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”
$watchnow supports array mutations (push, pop, etc…)x-textwasn’t working on SVG elements since it used.innerTextand not.textContent