v2.0.2

2.0.2 is a minor bugfix release. You can update it in your project using:

npm install async-alpine@latest

What's Changed

• Fixed component being downloaded and activated when it has left the DOM tree. Fixes #52 raised by @ralphjsmit.

New Contributors

• @ralphjsmit raised this issue and suggested a fix in #52

Full Changelog: 2.0.1...2.0.2

v1.2.3

1.2.3 is a minor bugfix release to the 1.x version. You can update it in your project using:

npm install async-alpine@^1.2.3

What's Changed

• Fixed component being downloaded and activated when it has left the DOM tree. Fixes #52 raised by @ralphjsmit.

New Contributors

• @ralphjsmit raised this issue and suggested a fix in #52

Full Changelog: 1.2.2...1.2.3

v2.0.1

2.0.1 is a minor bugfix release. You can update it in your project using:

npm install async-alpine@latest

What's Changed

• Fix x-ignore being added after using Alpine.morph by @SimoTod in #47
• Setup CI by @SimoTod in #49

New Contributors

• @SimoTod made their first contribution in #47

Full Changelog: 2.0.0...2.0.1

v2.0.0

I'm thrilled to announce Async Alpine 2, a complete rewrite based on Alpine's plugin system. This reduces the library size and improves performance*, and makes it much easier to install and use. 🚀

Async Alpine 2 has all the great functionality of v1, however there are some syntax changes so it’s not backwards-compatible. Upgrading is relatively easy with straightforward changes that are often possible with a simple search & replace.

🚀 How to upgrade

To make upgrading as seamless as possible, I’ve put together an Upgrade Guide with everything you need to know. Here's a quick overview:

1. Update your CDN link to 2.x.x or run npm install async-alpine@latest for the latest version.

2. Adjust the plugin initialisation in your JavaScript:

  import AsyncAlpine from 'async-alpine';
  import Alpine from 'alpinejs';
- AsyncAlpine.init(Alpine);
- AsyncAlpine.start();
+ Alpine.plugin(AsyncAlpine);
  Alpine.start();

3. Switch the old attributes from ax-load to the new x-load format:

  <div
    x-data="myComponent"
-   ax-load="visible"
-   ax-load-src="/assets/path-to-component.js"
+   x-load="visible"
+   x-load-src="/assets/path-to-component.js"
  ></div>

4. Update your JS APIs for component loading:

• AsyncAlpine.url → Alpine.asyncUrl
• AsyncAlpine.data → Alpine.asyncData
• AsyncAlpine.alias → Alpine.asyncAlias

Other changes

• Removed prefix and alpinePrefix options — use Alpine.prefix instead;
• x-ignore is now optional, even for dynamically inserted components.
• New keepRelativeURLs option to maintain JS-relative URLs;
• Added Playwright for automated testing.
• Simplified the build process for easier maintenance and reduced dependencies.
• Adopted new style rules and updated ESLint.

Full Changelog: 1.2.2...2.0.0

* The ESM file (unminified, uncompressed) has reduced to 7.63kB, a 22% improvement from v1.2.2. Runtime performance improvement comes from the removal of functionality duplicated by Async Alpine and Alpine.js core, most significantly mutation observers.

v1.2.2

1.2.2 is a minor bugfix release. You can update it in your project using:

npm install async-alpine@latest

What's Changed

• Fix: race condition in nested components by @helio3197 in #40
• Tests: added test for nested component race conditions

New Contributors

• @helio3197 made their first contribution in #40

Full Changelog: 1.2.1...1.2.2

v1.2.1

1.2.1 is a minor bugfix release. You can update it in your project using:

npm install async-alpine@latest

What's Changed

• Fix: Destroy existing element tree on re-initialization by @awcodes in #38

New Contributors

• @awcodes made their first contribution in #38

Full Changelog: 1.2.0...1.2.1

v1.2.0

What's Changed

• Enable multiple [name] replacements in AsyncAlpine.alias(). Fixes #32 by @scruffymongrel in #34
• Use IIFE format for the CDN build. Fixes #33 by @iniznet in #35
• Adds ability to use alias with a function by @whitter in #36

New Contributors

Thank you to everyone who contributed to this release!

• @scruffymongrel made their first contribution in #34
• @iniznet made their first contribution in #35
• @whitter made their first contribution in #36

Full Changelog: 1.1.0...1.2.0

v1.1.0

New Features

Strategy combination

This release overhauls how we parse the ax-load strategies parameter, allowing for more complex expressions using && (and), || (or) and brackets to group strategies!

For example you want a component to only load when idle, visible and either an event has been fired or the screen with is greater than 1024px? You can now create a strategy to do just that!

<div
    ax-load="idle && visible && (event || media (min-width: 1024px))"
    x-data="component"
    x-ignore
    ...
></div>

Read more about combining strategies in the documentation.

Custom event names

We also now allow for custom event names with the event strategy, rather than needing to fire Async Alpine's built-in ones. This gives you more control and makes it easier to integrate with other services:

<div
  ax-load="event (custom-event-name)"
  x-data="component"
  x-ignore
></div>

Read more about custom event names in the documentation.

v1.0.0

Async Alpine is finally 1.0! 🚀 🎉 🥳

This update doesn't bring any changes to the package, but I've built a website for the project including significantly improved documentation and examples, including with various build tools.

v0.5.4

Fixes

• .url() didn't have the functionality fixing how cross-origin module loading worked