Skip to content

Releases: imacrayon/alpine-ajax

v0.1.3

04 Mar 18:36
Compare
Choose a tag to compare

Fixes submit button values not being included in GET requests.

v0.1.2

02 Mar 21:39
Compare
Choose a tag to compare
  1. Fixed focus regressions caused by the v0.1 initial-focus behavior.
  2. Renamed the undocumented initial-focus attribute to focus.

v0.1.1

27 Feb 21:46
Compare
Choose a tag to compare

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" to x-init="$ajax('/comments')"
  • Polling: Change x-load.600ms="/comments" to x-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:

  1. It created inconsistent experiences for users when JavaScript was unavailable
  2. 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 and x-load can be used like x-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

20 Feb 01:10
Compare
Choose a tag to compare

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

30 Dec 22:33
Compare
Choose a tag to compare

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

21 Dec 22:00
Compare
Choose a tag to compare

When an x-load event is fired the triggered request will ignore x-sync elements. x-load is intended to handle "side effect" type requests and those requests shouldn't clobber the current state of x-sync elements on the page.

v0.0.17

20 Dec 22:54
Compare
Choose a tag to compare

noajax is now inherited from parent elements:

<div x-data x-ajax>
  <ul noajax>
    <li><a href="...">I will refresh the page!</a></li>
  </ul>
</div>

v0.0.16

17 Dec 02:08
Compare
Choose a tag to compare

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.

v0.0.15

05 Dec 15:20
Compare
Choose a tag to compare

Fixes missing X-AJAX-Request header regression and leaves focus management be handled by the Alpine morph plugin.

v0.0.14

02 Dec 23:58
Compare
Choose a tag to compare

AJAX enabled links are now progressively enhanced to be buttons. Check README.md for more info.