Merge branch 'async-alpine' into 4.x

filamentphp · Dec 19, 2024 · 5279639 · 5279639
2 parents d11d59e + 216df0a
commit 5279639
Show file tree

Hide file tree

Showing 27 changed files with 70 additions and 89 deletions.
diff --git a/bin/build.js b/bin/build.js
@@ -91,13 +91,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/docs/07-advanced/02-assets.md b/docs/07-advanced/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/docs/08-plugins/02-build-a-panel-plugin.md b/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](../advanced/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](../advanced/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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,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.0",
         "autoprefixer": "^10.4.0",
         "chart.js": "^4.4.7",
         "chartjs-adapter-luxon": "^1.3.1",

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 (x-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 (x-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
@@ -26,11 +26,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 (x-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()),
@@ -116,7 +116,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 (x-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
@@ -21,9 +21,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 (x-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()),
@@ -52,7 +52,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
@@ -25,15 +25,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 (x-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
@@ -111,13 +111,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 (x-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 (x-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 (x-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
@@ -15,7 +15,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",
         "nette/php-generator": "^4.0",
         "ryangjchandler/blade-capture-directive": "^0.2|^0.3|^1.0",
         "spatie/color": "^1.5",

diff --git a/packages/support/dist/async-alpine.js b/packages/support/dist/async-alpine.js
diff --git a/packages/support/dist/index.js b/packages/support/dist/index.js
diff --git a/packages/support/resources/js/components/modal.js b/packages/support/resources/js/components/modal.js
@@ -19,7 +19,7 @@ export default ({ id }) => ({
         this.$nextTick(() => {
             this.isOpen = true
 
-            this.$dispatch('ax-modal-opened')
+            this.$dispatch('x-modal-opened')
         })
     },
 })