v0.6.0
This update refactors a lot of the Alpine AJAX internals to make it more compact and predictable. We've shaved some code to make room for new automatic pre-fetching and optimistic UI features coming soon. We've also sorted out some edge cases and improved compatible with Alpine's reactivity features.
Breaking Change
There's a single breaking change in this release: $ajax
no longer inherits options from other Alpine AJAX attributes. Mixing $ajax
with attributes has been a point of confusion and code complexity, so we're simplifying how things work.
If you have an element that's mixing $ajax
with attributes like this:
<div @click="$ajax('https://...')" x-target.push="my_target" x-headers="{ 'x-csrf': 'token' }">
Refactor to this:
<div @click="$ajax('https://...', {
target: 'my_target',
history: 'push',
headers: { 'x-csrf': 'token' }
})">
The Infinite Scroll Example previously mixed x-target
and $ajax
to handle pagination, so if you've used that example in the past, be sure to update your code.
What's Changed
- Polyfills for
HTMLFormElement.requestSubmit
andSubmitEvent.submitter
have been removed since they have broad browser support. $ajax
emits all the same lifecycle events asx-target
- The
x-target
"submit" and "click" events are delegated to event listeners on thewindow.document
. These global listeners can be toggled by callingAlpine.ajax.stop()
andAlpine.ajax.start()
if you need to do that for some reason. - Renamed “Missing Target”
Error
to “TargetError” - Renamed “Missing ID”
Error
to “IDError”
Additions
- Added
x-target:dynamic
for dynamically generating target IDs - Added
x-merge:dynamic
for dynamically generating a merge strategy - Added
Alpine.ajax.stop()
andAlpine.ajax.start()
to globally disable/enablex-target
event listeners
Fixes
- Fixed an edge case where form controls named
id
would break rendering (#64) - Fixed URL query parameters not merging correctly when changing history state
x-headers
now respectsx-data
values
Full Changelog: v0.5.1...v0.6.0