Releases: imacrayon/alpine-ajax
v0.1.3
v0.1.2
v0.1.1
Broke
There's four breaking changes in this release, but the upgrade path should be fairly painless.
1. Decoupled Alpine Morph
The Alpine morph plugin is now decoupled from the codebase (#5).
You'll need to include the separate Alpine morph plugin before Alpine AJAX. Check the docs for updated installation instructions and code examples.
2. Renamed x-target
to target
Do a find and replace: x-target
is now target
.
3. Simplified x-load
x-load
has been reworked to function like an AJAX version of x-init
, check the updated x-load
docs for more info.
You can recreate all the old functionality that x-load
provided by using the new $ajax
magic:
- Lazy loading: Change
x-load="/comments"
tox-init="$ajax('/comments')"
- Polling: Change
x-load.600ms="/comments"
tox-init="setTimeout(() => $ajax('/comments'), 600)"
- Listening for events: Change
x-load:comment_added="/comments"
to@comment_added.window="$ajax('/comments')"
. Note the.window
after the event name.
4. Links are links
Before this release, links inside an AJAX component were transformed into buttons. This was removed for two reasons:
- It created inconsistent experiences for users when JavaScript was unavailable
- It broke compatibility with link pre fetching libraries Instant Page and Google's Quicklink.
If your code relied on links being converted to buttons you'll need to update your code.
Added
- New
$ajax
magic for issuing AJAX requests programmatically. x-ajax
andx-load
can be used likex-init, without an accompanying
x-data`.- A new ESM build is included in the
/dist
directory. - A
ajax:missing
event now fires when a matching target is not found in an AJAX response. - The page will now redirect to the requested endpoint if an AJAX response returns a 400 or 500 status and a matching target is not found.
- Improved focus management, you can use the
initial-focus
attribute to set focus after a target has rendered. - All new features and changes have been added to the docs.
Changed
- Refactored and modularized the code base
- Switched from Rollup to esbuild for bundling
- Bumped the Cypress version and cleaned up some test files
v0.0.22
Fixes
- Fixed regression when importing
@imacrayon/alpine-ajax
Added
- Form submit buttons are automatically disabled during an AJAX request
- The
aria-busy
attribute is added to targets while an AJAX request is processing. - Added Loading States to the documentation
- Added Loading Indicator example to the documentation
v0.0.19
Add polling capabilities to x-load
:
<div id="jobs" x-data x-load.600ms="/jobs/1">
</div>
Will poll the endpoint and update the <div>
after 600ms.
Added new documentation site! Check it out at https://imacrayon.github.io/alpine-ajax/
v0.0.18
v0.0.17
v0.0.16
Additions
x-target
marks one or more content targets to update.
x-sync
targets an element to update on every request that contains the element.
x-load
allows lazy loading remote content via an event.
Fixes
ajax:error
now correctly fires on non-200 responses.
Breaking Changes
x-ajax
now acts as a boolean, specify AJAX targets with the new x-target
attribute.
<!-- Old -->
<form x-ajax="comments">
<!-- New -->
<form x-ajax x-target="comments">
Updated elements are given a data-source
attribute with a value set to the URL that the content was loaded from. This data-source
URL is then used as the referrer
when subsequent requests are made within that content. This is intended to mimic the referrer
that would be passed along to the server if the page was performing a full refresh on every request.