Créer un composant Twig avec Symfony UX

Avec Symfony UX et les composants Twig il est facile de créer des éléments réutilisables, nous allons voir comment cela fonctionne.

L'exemple utilisé dans cet article s'appuie sur mon projet Github Symfony Basics qui présente simplement différentes fonctionnalités du framework.

Partons d'un exemple simple qui ressemble à ceci :

Dont le code est le suivant :

Un élément HTML avec une classe nommée info-wrapper dans un fichier templates/admin/index.html.twig :

<div class="info-wrapper">
    <h1>Exemple de page d'accueil</h1>
    Cette page provient de :
    <ul>
        <li>Le controlleur dans <code>/src/Controller/SiteController.php</code></li>
        <li>Le template dans<code>/templates/site/index.html.twig</code></li>
    </ul>
</div>

Qui possède pour CSS :

.info-wrapper { 
    margin: 1em auto;
    max-width: 800px;
    width: 95%;
    font: 18px/1.5 sans-serif;
}
.info-wrapper code { 
    background: #F5F5F5;
    padding: 2px 6px;
}

La question qui se pose est, comment faire si nous souhaitons utiliser cet élément à plusieurs endroits différents avec des chemins et titres qui ne sont pas les mêmes ? La réponse se trouve dans l'utilisation de composants Twig.

Créer le composant Twig

Pour créer le composant, nous allons ajouter un fichier src/Twig/Components/Wrapper.php à notre projet qui aura pour base de code :

namespace App\Twig\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent]
class Wrapper
{
}

Nous allons ajouter une variable pour chaque élément que nous voulons pouvoir modifier :

namespace App\Twig\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent]
class Wrapper
{
    public string $title;
    public string $controller;
    public string $template;
}

Pour finir, il faut créer le template templates/components/Wrapper.html.twig qui correspond (pour en savoir plus sur le nommage et les templates des composants, voir la documentation officielle) :

<div class="info-wrapper">
    <h1>{{ title }}</h1>

    Ce message provient de :
    <ul>
        <li>Le controlleur dans <code>{{ controller }}</code></li>
        <li>Le template dans <code>{{ template }}</code></li>
    </ul>
</div>

Il ne reste plus qu'à remplacer le code existant de notre page (templates/admin/index.html.twig ici) par le composant qui vient d'être créé :

{{ component('Wrapper', {
    title: "Exemple de page d'accueil",
    controller: "/src/Controller/SiteController.php",
    template: "/templates/site/index.html.twig"
}) }}

A partir de maintenant, il sera facile de créer un nouveau Wrapper avec un contenu unique et un code réutilisable.