Компонент Alpine в Filament

Давайте добавим компонент Alpine. Скрипт соберём отдельным файлом и подгрузим на странице через x-load. Результат смотрим на /admin.

Файл компонента лежит в clock.js и обновляет текст каждую секунду:

export default function clockComponent() {
	return {
		time: new Date().toLocaleTimeString(),
		init() {
			setInterval(() => {
				this.time = new Date().toLocaleTimeString();
			}, 1000);
		},
	};
}

В packageBooted зарегистрируем AlpineComponent::make с тем же именем пакета:

<?php

use Filament\Support\Assets\AlpineComponent;

FilamentAsset::register([
	AlpineComponent::make(
		'greeting-clock',
		__DIR__ . '/../resources/js/components/clock.js',
	),
], static::$name);
?>

В шаблоне на /admin укажем x-load, x-load-src и x-data с именем функции:

<div
	x-load
	x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('greeting-clock', 'greeting') }}"
	x-data="clockComponent()"
>
	<span x-text="time"></span>
</div>

Покажите на странице время, которое обновляет скрипт пакета.