v.0.6.0 broke the usual x-target behavior

[vladstudio]

Just wanted to let you know that upgrading from 0.5.1 to 0.6.0 broke things for me. No errors in console, just not working. Am I unlucky? Here's the screencast:

https://github.com/imacrayon/alpine-ajax/assets/914320/bee9dfb3-51e9-4da6-ad87-e28c3173afbb

[imacrayon]

Thanks for the quick feedback!

Sorry, I think you might have found a loophole in v0.5. x-target was intended to only work on <a> and <form> elements, but I think there was a regression recently that allowed it to unintentionally work on <button>s too. 😓

I'm assuming that the <Button> component in your project compiles down to a plain <button>? If that's not the case, let me know, but switching to an <a href="..."> or wrapping that button in a <form action="..."> should make it work again. We support only those two elements so that they can gracefully degrade without JavaScript.

[vladstudio]

I'm afraid it's a , not button!

https://github.com/imacrayon/alpine-ajax/assets/914320/fba0a4eb-501d-4fc0-871d-b47223dcc61d

[imacrayon]

Ok, thanks for the clarification. I'm wondering if the link click events aren't bubbling up to document in Astro for some reason. I created a "debug" branch that logs a bunch of debug messages to the console. Would you mind trying it out and taking a look at the results:

npm install "https://github.com/imacrayon/alpine-ajax.git#debug"

You should see output in the console when loading the page and clicking a link like this:

[x-target]  (Element)
Event: "click" captured 
Requesting [...arguments]
Rendering [..arguments]

Thanks for your help!

[vladstudio]

Hey, so sorry for the delay, got drowned in work. Anyway, here's what the console said:

[astro] Prefetching http://localhost:8002/partials/clicked/?id=tgt-1 with fetch
@imacrayon_alpine-ajax.js?v=1c33ba91:14 Event: "click" captured
 Abort: Insignificant click event
Navigated to http://localhost:8002/partials/clicked/?id=tgt-1

Here's the code: https://github.com/vladstudio/aaui/tree/main/src/pages

[vladstudio]

Also if I'm the only one experiencing this, I think you can safely ignore the bug. I'm not (yet) using this code in any real product, so the impact is minimal.

[imacrayon]

No worries! I got this spun up on my machine just now, I'm gonna try to figure out what's going on. Thanks for sharing the repo.

[imacrayon]

Ok, so the problem is caused by Astro's View Transitions feature, specifically, this line. When view transitions are enabled, the framework listens for link clicks and navigates to the next page before Alpine AJAX has a chance to perform an AJAX request.

If you remove <ViewTransitions /> in Layout.astro things will start working again.

In v0.5 Alpine AJAX registered link click listeners before Astro's click listeners, but in v0.6 we deferred the click listeners so that other libraries have a chance to handle the click event before Alpine AJAX handles it.

We made the change to event listeners in v0.6 to support some future client-side routing features, but I might have to rethink that approach to make sure we can stay compatible with frameworks like Astro...

[vladstudio]

good catch! I will disable view transitions meanwhile.

[imacrayon]

Following up on this: We reworked event handling a bit so that Alpine AJAX will work if you install it using the installation instructions in the Alpine AJAX docs. Using the Astro Alpine.js integration will break Alpine AJAX because Astro integrations are initialized after Astro View Transitions. I think this is the best we’re able to do without requesting changes to the Astro repo.