Live Components

src/Twig/SearchPackagesComponent.php

use App\Service\PackageRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent('search_packages')]
class SearchPackagesComponent
{
    use DefaultActionTrait;

    #[LiveProp(writable: true)]
    public ?string $query = null;

    public function __construct(private PackageRepository $packageRepo)
    {
    }

    public function getPackages(): array
    {
        return $this->packageRepo->findAll($this->query);
    }
}

templates/components/search_packages.html.twig

<div{{ attributes }}>
    <input
        type="text"
        data-model="query"
        value="{{ query }}"
        data-action="live#update"
    >

    {% if this.packages|length > 0 %}
        <div data-loading="addClass(opacity-50)">
            {% for package in this.packages %}
                <div>
                    <h4>{{ package.humanName }}</h4>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div>Ah! No packages found matching "{{ query }}"</div>
    {% endif %}
</div>