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 and SubmitEvent.submitter have been removed since they have broad browser support.
• $ajax emits all the same lifecycle events as x-target
• The x-target "submit" and "click" events are delegated to event listeners on the window.document. These global listeners can be toggled by calling Alpine.ajax.stop() and Alpine.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() and Alpine.ajax.start() to globally disable/enable x-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 respects x-data values

Full Changelog: v0.5.1...v0.6.0