imacrayon / alpine-ajax

An Alpine.js plugin for building server-powered frontends.
https://alpine-ajax.js.org
MIT License
558 stars 11 forks source link

v.0.6.0 broke the usual x-target behavior #72

Open vladstudio opened 4 months ago

vladstudio commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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

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

imacrayon commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

good catch! I will disable view transitions meanwhile.