Parlons de votre projet
Partitech Sonata Extra Bundle

Sonata Extra Bundle : gestion des ressources front-end

Présentation Le bundle SonataExtra introduit un moyen flexible et puissant de gérer les ressources CSS et JavaScript dans les blocs Sonata. Cette fonctionnalité permet aux développeurs d'inclure facilement et efficacement des fichiers CSS et JS externes, a...

Écrit par Thomas Bourdin 3 min de lecture
Contrôles de compatibilité Symfony et Sonata

Présentation

Le bundle SonataExtra introduit un moyen flexible et puissant de gérer les ressources CSS et JavaScript dans les blocs Sonata. Cette fonctionnalité permet aux développeurs d'inclure facilement et efficacement des fichiers CSS et JS externes, ainsi que des styles et scripts en ligne.

Intégration

Chargement efficace

Les assets (CSS/JS) sont chargés dans la page seulement si le bloc correspondant est utilisé. Cela assure un chargement efficace et évite les surcharges inutiles, ce qui est particulièrement bénéfique pour l'optimisation des performances.

Service de gestion des ressources front-end

Le service AssetsHandler est au cœur de cette fonctionnalité. Il est responsable de la gestion de l'ajout des ressources CSS et JS à vos blocs Sonata. Ce service prend en charge l'ajout de ressources liées et en ligne et permet de spécifier des index personnalisés pour le regroupement des ressources.

Déclarer des ressources dans les blocs

Pour utiliser le service AssetsHandler dans vos blocs, suivez ces étapes :

  1. Injecter des dépendances :

Injecter le AssetsHandler et Environment services dans votre service de bloc en utilisant le autowireDependencies méthode.

use Partitech\SonataExtra\Service\AssetsHandler;
use Twig\Environment;
use Symfony\Contracts\Service\Attribute\Required;

private $assetsHandler;

#[Required]
public function autowireDependencies(Environment $twig, AssetsHandler $assetsHandler): void {
    parent::__construct($twig);
    $this->assetsHandler = $assetsHandler;
}
  1. Ajouter des actifs dans la méthode execute :

Utilisez le addCss, addJs, addJsInline, et addCssInline méthodes pour ajouter des actifs à votre bloc.

public function execute(BlockContextInterface $blockContext, Response $response = null)
{
    // Adding external CSS
    $this->assetsHandler->addCss('https://unpkg.com/library@latest/dist/style.css', 'default');

    // Adding external JS with @bool defer parameter (default false)
    $this->assetsHandler->addJs('https://unpkg.com/library@latest/dist/script.js', true, 'default');

    // Adding inline JS 
    $this->assetsHandler->addJsInline('console.log(window)', true, 'default');

    // Adding inline CSS
    $this->assetsHandler->addCssInline('.class{ }', 'default');

    // ... rest of the execute method ...
}

Rendu des ressources dans les modèles

Pour rendre les ressources dans vos templates Twig, utilisez les fonctions Twig suivantes fournies par le bundle SonataExtra :

{{ sonata_extra_get_blocks_css('default')|raw }}
{{ sonata_extra_get_blocks_css_inline('default', true)|raw }}
{{ sonata_extra_get_blocks_js('default')|raw }}
{{ sonata_extra_get_blocks_js_inline('default', true)|raw }}
  • 'default' L'index est utilisé par défaut si la valeur n'est pas définie, mais des index personnalisés peuvent être spécifiés lors du développement de blocs personnalisés.
  • Le |raw Le filtre est utilisé pour garantir le rendu correct des balises HTML.
  • Vous pouvez utiliser le paramètre de compression (booléen par défaut false) pour rendre compressé sonata_extra_get_blocks_css_inline et sonata_extra_get_blocks_js_inline

Personnalisation

Les développeurs peuvent créer des index personnalisés pour regrouper les ressources lors du développement de leurs blocs. Cela offre une flexibilité dans la gestion des ressources à travers différentes parties de l'application.

Contrôles de compatibilité Symfony et Sonata

Adapter l’exemple à la version installée

Les exemples Symfony et Sonata restent attachés aux versions indiquées dans l’article. Symfony 4.x et Symfony 6.2 ne sont plus maintenus : pour un projet actuel, utilisez une branche maintenue et la documentation correspondant exactement à vos dépendances.

php bin/console about
composer show symfony/framework-bundle sonata-project/admin-bundle

Avant de reprendre le code, contrôlez les signatures, les services, les routes et les templates concernés. Ajoutez ensuite un test fonctionnel couvrant les autorisations, le code HTTP et le résultat visible.

Référence : versions Symfony maintenues.

Partager cet article