Unlock Livewire version

[danharrin]

From #15062:

The Async Alpine (v1) version was locked a while ago due to issues released in a minor version. We cannot receive updates to this package.

2 weeks ago we locked Livewire in v3.2.125 as it caused issues when using tables.

A discussion revealed the reason the tables broke was because Alpine.js started not initialising components within x-ignored elements.

The x-ignore needs to be present when using Async Alpine v1, and our tables use Async Alpine and contain nested Alpine.js components.

Since it does not look like this change is going to be reverted in Alpine.js, and it is not great having the Livewire version locked in Filament as it prevents users from being able to use new Livewire features elsewhere in their apps, I am removing Async Alpine from the tables so I can remove the x-ignore and unlock Livewire.

Simply removing Async Alpine from tables did not fix the problem, and using Async Alpine v1 seems completely incompatible with Livewire > v3.5.12. We had to revert #15062. Livewire has remained locked to this version since then.

While locking Livewire hasn't caused too many complaints for us to far, there have been several comments and issues about it. I imagine this problem will get worse over time as more dependencies bump their minimum Livewire version. It looks like Flux has already done this, and Flux is due to be included in the new Laravel starter kit. When the new starter kits are released, people using them and installing Filament at the same time will probably end up with a broken version of Filament before Livewire was locked. The same issue may be encountered by people using Flux without the starter kit. I would like it if Flux and Filament can both be installed in the same Laravel project and still work.

We need to take other action to unlock the Livewire version. This is the first attempt at doing so. This PR upgrades Async Alpine to v2. We were not planning to do this before Filament v4 as there are breaking changes in the package, so Filament plugins would break if they are not using the new Async Alpine syntax:

• ax-load attributes need renaming to x-load
• ax-load-src attributes need renaming to x-load-src
• x-ignore attributes need removing from Async Alpine component root elements

One method of action that we could take is using the Blade compiler to perform these replacements at render time. A regex would be required to identify this attributes, which could be inaccurate depending on the content of the view - Alpine.js attribute values could contain many unpredictable characters and mess with identification.

This PR introduces JavaScript to identify attributes that need to be upgraded, and do so on page render and when the mutation observer detects changes to the DOM. I hope that this allows plugins to continue to use the Async Alpine v1 syntax while fixing its incompatibility with Livewire.

[tominal]

... Filament plugins would break if they are not using the new Async Alpine syntax:

• ax-load attributes need renaming to x-load
• ax-load-src attributes need renaming to x-load-src
• x-ignore attributes need removing from Async Alpine component root elements

Hey @danharrin, I noticed our whole app broke after getting to this version with SPA disabled ( we had to disable SPA because users on macOS were having issues #9089 ).

The first error I see is table is not defined and I noticed the component is now using x-load-src. Should I throw this in a GitHub issue? I'm not sure if I have an actual bug here or if it's a simple caching issue on my end..

[danharrin]

Hi, I haven't had many similar reports to make sure your Filament assets are up to date and your browser cache is clear.

[denizaygundev]

@danharrin quite a few of us are also having a similar issue, we're basically unable to upgrade past v3.2.136

saade/filament-autograph#24

[ziming]

wire:confirm seem to have stop working for me after livewire is unlocked (my button is a filament button at the last step of a form wizard)

but could just be coincidence too

[danharrin]

@denizaygundev I am sure that your local env or server does not have an up to date support.js. Ensure filament:upgrade is run after each update.

[denizaygundev]

@danharrin even after manually running filament:upgrade i'm still getting the same error, it's a bit problematic because there's some fixes in newer versions of filament that I need.

Also this is quite a subtle failure so it might be affecting more apps than what filament users realise.

And I have it as part of my post-autoload-dump as suggested by the docs:

[danharrin]

Please post a link here to your support.js.

[denizaygundev]

@danharrin https://privatebin.net/?4a7789ecb4538592#HQ51qSizPH573FDuub6HfjhrdXeZr1KAZnhM7TzV4RQE

[danharrin]

How did you download this file, was it from your local filesystem or directly from the browser that is having issues? Are you sure it's not cached as an old version?

[denizaygundev]

@danharrin from my local filesystem and I'm sure it's not cached as there's a big git-diff

[danharrin]

You should open the browser tools in production, find support.js in Sources, right click it and Save As. Then compare it to your local file. The correct version should contain "ax-load" somewhere in the code.

[denizaygundev]

@danharrin so I found the support.js from my working prod and then compared it to my local 'broken' support.js, and actually the working one doesn't have any ax-load but the broken one does.

A bit stuck now

[danharrin]

Sorry, I can't help you further with this information. There is obviously something going wrong with files not being deployed correctly to your server or being cached. Filament updates rely on all Filament assets being kept up to date at all times.