Symfony UX est un ensemble de librairies pour intégrer facilement les outils JavaScript à vos projets : par exemple pour afficher un graph avec chart.js en utilisant UX Chart.js. JS est automatiquement géré. Il exploite Stimulus pour JavaScript et peut s'intégrer à AssetMapper ou Webpack Encore. La version 3.5 vient d'être annoncée par Symfony. Cette version intègre 90 pull requests et est une des mises à jour les plus importantes. Une des principales évolutiosn est le nouveau package Pagination qui donne le rendu à Twig.
1 / Pagination
Il permet de paginer les arrays et les requêtes Doctrine ORM et DBAL ou toute source de données. La requête est gérée par PHP, la navigation accessible est rendue par Twig et le navigateur suit les liens classiques : aucun JavaScript, Stimulus ou Turbo n'est requis.
Exemple :
// src/Controller/ProductController.php
#[Route('/products', name: 'product_index')]
public function __invoke(
ProductRepository $repository,
PaginatorInterface $paginator,
): Response {
$products = $paginator
->cursor($repository->createQueryBuilder('product'))
->orderBy(['createdAt', 'id'], 'DESC')
->perPage(20)
->paginate();
return $this->render('product/index.html.twig', ['products' => $products]);
}
2 / UX ICons, UX Map : même règle
`ux_icon()`, `<twig:ux:icon>`, `ux_map()` et `<twig:ux:map>` affichent leurs attributs via le même chemin de code. Les valeurs typées de `html_attr_type()` et `tailwind_classes` sont désormais également prises en charge.
3 / Commentaires
Twig 3.29 introduit les "document comments". Il s'agit d'une syntaxe standard pour ajouter un commentaire lisible aux constructeurs de template et aux déclarations de varitables. TwigCompoment peut les lire : ajoutez un commentaire ## au-dessus d'une prop dans {% props %}, ou un commentaire {## ... ##} au-dessus d'un bloc, et la description sera prise en compte lors de la compilation.
{%- props
## 'default'|'sm' Size variant of the card.
size = 'default'
-%}
<div {{ attributes }}>
{##- The card content, typically includes `Card:Header` and `Card:Footer`. -#}
{%- block content %}{% endblock -%}
</div>
Quelques autres nouveautés :
- support de Twig 4
- une drop zone peut accepter plusieurs fichiers en même temps
- UX Icons peut parser un SVG avec l'API DON de PHP 8.4
