Attempt to unlock Livewire again

filamentphp · Feb 9, 2025 · af36dec · af36dec
1 parent e645de1
commit af36dec
Show file tree

Hide file tree

Showing 23 changed files with 315 additions and 280 deletions.
diff --git a/bin/build.js b/bin/build.js
@@ -84,13 +84,6 @@ corePackages.forEach((packageName) => {
     })
 })
 
-compile({
-    ...defaultOptions,
-    platform: 'browser',
-    entryPoints: [`./node_modules/async-alpine/dist/async-alpine.script.js`],
-    outfile: `./packages/support/dist/async-alpine.js`,
-})
-
 compile({
     ...defaultOptions,
     platform: 'browser',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
         "@tailwindcss/typography": "^0.5.9",
         "alpine-lazy-load-assets": "^1.3.0",
         "alpinejs": "^3.10.4",
-        "async-alpine": "v1.2.1",
+        "async-alpine": "^2.0",
         "autoprefixer": "^10.4.0",
         "chart.js": "^3.6.0",
         "chartjs-adapter-luxon": "^1.3.1",

diff --git a/packages/forms/dist/components/file-upload.js b/packages/forms/dist/components/file-upload.js
diff --git a/packages/forms/dist/index.css b/packages/forms/dist/index.css
diff --git a/packages/forms/resources/views/components/color-picker.blade.php b/packages/forms/resources/views/components/color-picker.blade.php
@@ -41,13 +41,12 @@
         "
     >
         <div
-            x-ignore
             @if (FilamentView::hasSpaMode())
-                {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+                {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
             @else
-                ax-load
+                x-load
             @endif
-            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('color-picker', 'filament/forms') }}"
+            x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('color-picker', 'filament/forms') }}"
             x-data="colorPickerFormComponent({
                         isAutofocused: @js($isAutofocused()),
                         isDisabled: @js($isDisabled),

diff --git a/packages/forms/resources/views/components/date-time-picker.blade.php b/packages/forms/resources/views/components/date-time-picker.blade.php
@@ -65,13 +65,12 @@
             />
         @else
             <div
-                x-ignore
                 @if (FilamentView::hasSpaMode())
-                    {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+                    {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
                 @else
-                    ax-load
+                    x-load
                 @endif
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('date-time-picker', 'filament/forms') }}"
+                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('date-time-picker', 'filament/forms') }}"
                 x-data="dateTimePickerFormComponent({
                             displayFormat:
                                 '{{ convert_date_format($getDisplayFormat())->to('day.js') }}',

diff --git a/packages/forms/resources/views/components/file-upload.blade.php b/packages/forms/resources/views/components/file-upload.blade.php
@@ -25,11 +25,11 @@
 >
     <div
         @if (FilamentView::hasSpaMode())
-            {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+            {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
         @else
-            ax-load
+            x-load
         @endif
-        ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('file-upload', 'filament/forms') }}"
+        x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('file-upload', 'filament/forms') }}"
         x-data="fileUploadFormComponent({
                     acceptedFileTypes: @js($getAcceptedFileTypes()),
                     imageEditorEmptyFillColor: @js($getImageEditorEmptyFillColor()),
@@ -101,7 +101,6 @@
                     },
                 })"
         wire:ignore
-        x-ignore
         {{
             $attributes
                 ->merge([

diff --git a/packages/forms/resources/views/components/key-value.blade.php b/packages/forms/resources/views/components/key-value.blade.php
@@ -34,16 +34,15 @@
     >
         <div
             @if (FilamentView::hasSpaMode())
-                {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+                {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
             @else
-                ax-load
+                x-load
             @endif
-            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('key-value', 'filament/forms') }}"
+            x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('key-value', 'filament/forms') }}"
             wire:ignore
             x-data="keyValueFormComponent({
                         state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
                     })"
-            x-ignore
             {{
                 $attributes
                     ->merge($getExtraAlpineAttributes(), escape: false)

diff --git a/packages/forms/resources/views/components/markdown-editor.blade.php b/packages/forms/resources/views/components/markdown-editor.blade.php
@@ -20,9 +20,9 @@ class="fi-fo-markdown-editor fi-disabled prose block w-full max-w-none rounded-l
             "
         >
             <div
-                {{-- prettier-ignore-start --}}ax-load="visible || event (ax-modal-opened)"
+                {{-- prettier-ignore-start --}}x-load="visible || event (ax-modal-opened)"
                 {{-- prettier-ignore-end --}}
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('markdown-editor', 'filament/forms') }}"
+                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('markdown-editor', 'filament/forms') }}"
                 x-data="markdownEditorFormComponent({
                             canAttachFiles: @js($hasToolbarButton('attachFiles')),
                             isLiveDebounced: @js($isLiveDebounced()),
@@ -48,7 +48,6 @@ class="fi-fo-markdown-editor fi-disabled prose block w-full max-w-none rounded-l
                                 })
                             },
                         })"
-                x-ignore
                 wire:ignore
                 {{ $getExtraAlpineAttributeBag() }}
             >

diff --git a/packages/forms/resources/views/components/rich-editor.blade.php b/packages/forms/resources/views/components/rich-editor.blade.php
@@ -24,15 +24,14 @@ class="fi-fo-rich-editor fi-disabled prose block w-full max-w-none rounded-lg bg
         >
             <div
                 @if (FilamentView::hasSpaMode())
-                    {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+                    {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
                 @else
-                    ax-load
+                    x-load
                 @endif
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('rich-editor', 'filament/forms') }}"
+                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('rich-editor', 'filament/forms') }}"
                 x-data="richEditorFormComponent({
                             state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')", isOptimisticallyLive: false) }},
                         })"
-                x-ignore
                 x-on:trix-attachment-add="
                     if (! $event.attachment.file) return
 

diff --git a/packages/forms/resources/views/components/select.blade.php b/packages/forms/resources/views/components/select.blade.php
@@ -110,13 +110,12 @@ class="hidden"
                 }"
             ></div>
             <div
-                x-ignore
                 @if (FilamentView::hasSpaMode())
-                    {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+                    {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
                 @else
-                    ax-load
+                    x-load
                 @endif
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('select', 'filament/forms') }}"
+                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('select', 'filament/forms') }}"
                 x-data="selectFormComponent({
                             canSelectPlaceholder: @js($canSelectPlaceholder),
                             isHtmlAllowed: @js($isHtmlAllowed()),

diff --git a/packages/forms/resources/views/components/tags-input.blade.php b/packages/forms/resources/views/components/tags-input.blade.php
@@ -52,16 +52,15 @@
     >
         <div
             @if (FilamentView::hasSpaMode())
-                {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+                {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
             @else
-                ax-load
+                x-load
             @endif
-            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('tags-input', 'filament/forms') }}"
+            x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('tags-input', 'filament/forms') }}"
             x-data="tagsInputFormComponent({
                         state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
                         splitKeys: @js($getSplitKeys()),
                     })"
-            x-ignore
             {{ $getExtraAlpineAttributeBag() }}
         >
             <x-filament::input

diff --git a/packages/forms/resources/views/components/textarea.blade.php b/packages/forms/resources/views/components/textarea.blade.php
@@ -35,13 +35,12 @@
     >
         <div wire:ignore.self style="height: '{{ $initialHeight . 'rem' }}'">
             <textarea
-                x-ignore
                 @if (FilamentView::hasSpaMode())
-                    {{-- format-ignore-start --}}ax-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
+                    {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"{{-- format-ignore-end --}}
                 @else
-                    ax-load
+                    x-load
                 @endif
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('textarea', 'filament/forms') }}"
+                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('textarea', 'filament/forms') }}"
                 x-data="textareaFormComponent({
                             initialHeight: @js($initialHeight),
                             shouldAutosize: @js($shouldAutosize),

diff --git a/packages/support/composer.json b/packages/support/composer.json
@@ -16,7 +16,7 @@
         "illuminate/support": "^10.45|^11.0",
         "illuminate/view": "^10.45|^11.0",
         "kirschbaum-development/eloquent-power-joins": "^3.0|^4.0",
-        "livewire/livewire": "3.5.12",
+        "livewire/livewire": "^3.5",
         "ryangjchandler/blade-capture-directive": "^0.2|^0.3|^1.0",
         "spatie/color": "^1.5",
         "spatie/invade": "^1.0|^2.0",

diff --git a/packages/support/dist/index.js b/packages/support/dist/index.js
diff --git a/packages/support/docs/02-assets.md b/packages/support/docs/02-assets.md
@@ -334,13 +334,12 @@ FilamentAsset::register([
 
 When you run `php artisan filament:assets`, the compiled file will be copied into the `/public` directory.
 
-Finally, you can load this asynchronous Alpine component in your view using `ax-load` attributes and the `FilamentAsset::getAlpineComponentSrc()` method:
+Finally, you can load this asynchronous Alpine component in your view using `x-load` attributes and the `FilamentAsset::getAlpineComponentSrc()` method:
 
 ```blade
 <div
-    x-ignore
-    ax-load
-    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('test-component') }}"
+    x-load
+    x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('test-component') }}"
     x-data="testComponent({
         state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
     })"
@@ -351,7 +350,7 @@ Finally, you can load this asynchronous Alpine component in your view using `ax-
 
 This example is for a [custom form field](../forms/fields/custom). It passes the `state` in as a parameter to the `testComponent()` function, which is entangled with a Livewire component property. You can pass in any parameters you want, and access them in the `testComponent()` function. If you're not using a custom form field, you can ignore the `state` parameter in this example.
 
-The `ax-load` attributes come from the [Async Alpine](https://async-alpine.dev/docs/strategies) package, and any features of that package can be used here.
+The `x-load` attributes come from the [Async Alpine](https://async-alpine.dev/docs/strategies) package, and any features of that package can be used here.
 
 ### Registering script data
 

diff --git a/packages/support/docs/08-plugins/02-build-a-panel-plugin.md b/packages/support/docs/08-plugins/02-build-a-panel-plugin.md
@@ -144,7 +144,7 @@ class ClockWidget extends Widget
 
 Next, we'll need to create the view for our widget. Create a new file at `resources/views/widget.blade.php` and add the following code. We'll make use of Filament's blade components to save time on writing the html for the widget.
 
-We are using async Alpine to load our Alpine component, so we'll need to add the `x-ignore` attribute to the div that will load our component. We'll also need to add the `ax-load` attribute to the div to tell Alpine to load our component. You can learn more about this in the [Core Concepts](/docs/3.x/support/assets#asynchronous-alpinejs-components) section of the docs.
+We are using async Alpine to load our Alpine component, so we'll need to add the `x-load` attribute to the div to tell Alpine to load our component. You can learn more about this in the [Core Concepts](/docs/3.x/support/assets#asynchronous-alpinejs-components) section of the docs.
 
 ```blade
 <x-filament-widgets::widget>
@@ -154,9 +154,8 @@ We are using async Alpine to load our Alpine component, so we'll need to add the
         </x-slot>
 
         <div
-            x-ignore
-            ax-load
-            ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('clock-widget', 'awcodes/clock-widget') }}"
+            x-load
+            x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('clock-widget', 'awcodes/clock-widget') }}"
             x-data="clockWidget()"
             class="text-center"
         >

diff --git a/packages/support/resources/js/index.js b/packages/support/resources/js/index.js
@@ -1,5 +1,6 @@
 import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
 import AlpineLazyLoadAssets from 'alpine-lazy-load-assets'
+import AsyncAlpine from 'async-alpine'
 import { md5 } from 'js-md5'
 import Sortable from './sortable'
 import Tooltip from '@ryangjchandler/alpine-tooltip'
@@ -9,9 +10,28 @@ import 'tippy.js/dist/tippy.css'
 import 'tippy.js/themes/light.css'
 import '../css/sortable.css'
 
+const upgradeAsyncAlpine = () => {
+    document.querySelectorAll('[ax-load][x-ignore]').forEach((el) => {
+        el.removeAttribute('x-ignore')
+        el.setAttribute('x-load', el.getAttribute('ax-load'))
+        el.setAttribute('x-load-src', el.getAttribute('ax-load-src'))
+    })
+
+    document.querySelectorAll('[ax-load]').forEach((el) => {
+        el.setAttribute('x-load', el.getAttribute('ax-load'))
+        el.setAttribute('x-load-src', el.getAttribute('ax-load-src'))
+    })
+}
+
+upgradeAsyncAlpine()
+
+const observer = new MutationObserver(upgradeAsyncAlpine)
+observer.observe(document.body, { childList: true, subtree: true })
+
 document.addEventListener('alpine:init', () => {
     window.Alpine.plugin(AlpineFloatingUI)
     window.Alpine.plugin(AlpineLazyLoadAssets)
+    window.Alpine.plugin(AsyncAlpine)
     window.Alpine.plugin(Sortable)
     window.Alpine.plugin(Tooltip)
 })

diff --git a/packages/support/src/SupportServiceProvider.php b/packages/support/src/SupportServiceProvider.php
@@ -60,7 +60,6 @@ public function configurePackage(Package $package): void
     public function packageBooted(): void
     {
         FilamentAsset::register([
-            Js::make('async-alpine', __DIR__ . '/../dist/async-alpine.js'),
             Css::make('support', __DIR__ . '/../dist/index.css'),
             Js::make('support', __DIR__ . '/../dist/index.js'),
         ], 'filament/support');

diff --git a/packages/tables/resources/views/index.blade.php b/packages/tables/resources/views/index.blade.php
@@ -113,13 +113,12 @@
     @if (! $isLoaded)
         wire:init="loadTable"
     @endif
-    x-ignore
     @if (FilamentView::hasSpaMode())
-        ax-load="visible"
+        x-load="visible"
     @else
-        ax-load
+        x-load
     @endif
-    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('table', 'filament/tables') }}"
+    x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('table', 'filament/tables') }}"
     x-data="table"
     @class([
         'fi-ta',

diff --git a/packages/widgets/resources/views/chart-widget.blade.php b/packages/widgets/resources/views/chart-widget.blade.php
@@ -37,18 +37,17 @@ class="w-max sm:-my-2"
         >
             <div
                 @if (FilamentView::hasSpaMode())
-                    ax-load="visible"
+                    x-load="visible"
                 @else
-                    ax-load
+                    x-load
                 @endif
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
+                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
                 wire:ignore
                 x-data="chart({
                             cachedData: @js($this->getCachedData()),
                             options: @js($this->getOptions()),
                             type: @js($this->getType()),
                         })"
-                x-ignore
                 @class([
                     match ($color) {
                         'gray' => null,

diff --git a/packages/widgets/resources/views/stats-overview-widget/stat.blade.php b/packages/widgets/resources/views/stats-overview-widget/stat.blade.php
@@ -102,15 +102,15 @@ class="fi-wi-stats-overview-stat-value text-3xl font-semibold tracking-tight tex
     </div>
 
     @if ($chart = $getChart())
-        {{-- An empty function to initialize the Alpine component with until it's loaded with `ax-load`. This removes the need for `x-ignore`, allowing the chart to be updated via Livewire polling. --}}
+        {{-- An empty function to initialize the Alpine component with until it's loaded with `x-load`. This removes the need for `x-ignore`, allowing the chart to be updated via Livewire polling. --}}
         <div x-data="{ statsOverviewStatChart: function () {} }">
             <div
                 @if (FilamentView::hasSpaMode())
-                    ax-load="visible"
+                    x-load="visible"
                 @else
-                    ax-load
+                    x-load
                 @endif
-                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('stats-overview/stat/chart', 'filament/widgets') }}"
+                x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('stats-overview/stat/chart', 'filament/widgets') }}"
                 x-data="statsOverviewStatChart({
                             dataChecksum: @js($dataChecksum),
                             labels: @js(array_keys($chart)),