Sonata Extra Bundle: gestión de recursos front-end

Presentación

El paquete SonataExtra introduce una forma flexible y poderosa de gestionar los recursos CSS y JavaScript en los bloques de Sonata. Esta funcionalidad permite a los desarrolladores incluir de manera fácil y eficiente archivos CSS y JS externos, así como estilos y scripts en línea.

Integración

Carga eficiente

Los recursos (CSS/JS) se cargan en la página solo si se utiliza el bloque correspondiente. Esto asegura una carga eficiente y evita sobrecargas innecesarias, lo cual es especialmente beneficioso para la optimización del rendimiento.

Servicio de gestión de recursos front-end

El servicio AssetsHandler está en el corazón de esta funcionalidad. Es responsable de la gestión de la adición de recursos CSS y JS a tus bloques de Sonata. Este servicio se encarga de la adición de recursos relacionados y en línea y permite especificar índices personalizados para la agrupación de recursos.

Declarar recursos en los bloques

Para usar el servicio AssetsHandler en sus bloques, siga estos pasos:

Inyectar dependencias:

Inyectar el AssetsHandler y Environment servicios en su servicio de bloque usando el autowireDependencies método.

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;
}

Agregar activos en el método execute:

Use el addCss, addJs, addJsInline, y addCssInline métodos para añadir activos a su bloque.

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 ...
}

Representación de recursos en los modelos

Para renderizar los recursos en tus plantillas Twig, utiliza las siguientes funciones de Twig proporcionadas por el 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' El índice se utiliza por defecto si el valor no está definido, pero se pueden especificar índices personalizados durante el desarrollo de bloques personalizados.
El |raw El filtro se utiliza para garantizar la representación correcta de las etiquetas HTML.
Puede usar el parámetro de compresión (booleano por defecto false) para comprimir sonata_extra_get_blocks_css_inline y sonata_extra_get_blocks_js_inline

Personalización

Los desarrolladores pueden crear índices personalizados para agrupar los recursos durante el desarrollo de sus bloques. Esto ofrece flexibilidad en la gestión de los recursos a través de diferentes partes de la aplicación.

Adaptar el ejemplo a la versión instalada

Los ejemplos de Symfony y Sonata permanecen ligados a las versiones indicadas en el artículo. Symfony 4.x y Symfony 6.2 ya no se mantienen: para un proyecto actual, utilice una rama mantenida y la documentación que corresponda exactamente a sus dependencias.

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

Antes de retomar el código, controle las firmas, los servicios, las rutas y las plantillas correspondientes. Después, agregue una prueba funcional que cubra los permisos, el código HTTP y el resultado visible.

Referencia: versiones de Symfony mantenidas.