Sonata Extra Bundle: front-end resource management

Presentation

The SonataExtra bundle introduces a flexible and powerful way to manage CSS and JavaScript resources in Sonata blocks. This feature allows developers to easily and efficiently include external CSS and JS files, as well as inline styles and scripts.

Integration

Efficient loading

Assets (CSS/JS) are loaded on the page only if the corresponding block is used. This ensures efficient loading and avoids unnecessary overloads, which is particularly beneficial for performance optimization.

Front-end resource management service

The AssetsHandler service is at the heart of this feature. It is responsible for managing the addition of CSS and JS resources to your Sonata blocks. This service handles the addition of both linked and inline resources and allows specifying custom indexes for resource grouping.

Declare resources in blocks

To use the AssetsHandler service in your blocks, follow these steps:

1. Inject dependencies:

Inject the AssetsHandler and Environment services in your block service using the autowireDependencies method.

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

2. Add assets in the execute method:

Use the addCss, addJs, addJsInline, and addCssInline methods to add assets to your block.

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

Rendering of resources in models

To render resources in your Twig templates, use the following Twig functions provided by the SonataExtra bundle:

{{ 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' The index is used by default if the value is not set, but custom indexes can be specified when developing custom blocks.
• The |raw The filter is used to ensure the correct rendering of HTML tags.
• You can use the compression parameter (boolean, default false) to make it compressed sonata_extra_get_blocks_css_inline and sonata_extra_get_blocks_js_inline

Personalization

Developers can create custom indexes to group resources when developing their blocks. This provides flexibility in managing resources across different parts of the application.

Adapt the example to the installed version

The Symfony and Sonata examples remain tied to the versions indicated in the article. Symfony 4.x and Symfony 6.2 are no longer maintained: for a current project, use a maintained branch and the documentation that exactly matches your dependencies.

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

Before resuming the code, check the signatures, services, routes, and templates concerned. Then add a functional test covering permissions, HTTP code, and the visible result.

Reference: maintained Symfony versions.