Download the PHP package idci/asset-loader-bundle without Composer

AssetLoaderBundle

Introduction

With the Symfony 2 (or 3) framework, we found it troublesome to load assets for custom form type widgets. A recurrent issue which comes up is the loading of front dependencies embedded to the widgets.

Issue 1 - dependencies order

Let's say you want to create a form type, child of the text form type, whose widget will color the background of the input type text; as soon as the input is empty. Your widget will look like this:

Form/fields.html.twig

As you can see, this javascript code requires jQuery. JQuery will not be available when this script will be executed (unless you place the Jquery script in the head of the html document, but we don't want that)

A possible solution would be to wrap this code with the following vanilla function

This way, when the code will be executed, Jquery should be ready to be used. But what if your widget is based on an entire library?

Issue 2 - dependencies duplication

Given the same form type as in the example above, if you have a page in your web application that render this form 3 times, you will end up with your scripts and stylesheets duplicated 3 times in the DOM. You only need it once.

This bundle attempts to solve those issues.

Installation

Add the dependency in your composer.json file:

Install these new dependencies in your application using composer:

Or with docker and docker-compose:

Register needed bundles in your application kernel:

If you want to activate the subscriber to load your assets automatically (more on that later, add the following in your config.yml file.

Usage

Asset declaration

Adding assets to your form type is pretty simple:

• Your AbstractType must implements the method getAssetCollection() from the AssetProviderInterface interface. The getAssetCollection contains an array of Asset Objects.
• You must define your type as a service and add the tag with name idci_asset_loader.asset_provider

In the example below, we load assets from a form type. An AssetProvider does not necessarily have to be a form type, any service will do the job.

AbstractType

If you have multiple assets which must be loaded in a predicatble order, you can add a priority to the Asset (-1 by default). The higher the priority, the sooner it will be load in the DOM.

Services.yml

Loading your assets manually

You can use the idci_asset_loader.asset_dom_loader service to load the asset for one or all the providers. This will register a subscriber which will append the assets to the dom (at the end of the body) on kernel response.

Loading your assets automatically

In most case, you will just want to let the subscriber load all the assets for you. To load all the assets from all providers:

You can also load some specific providers. If load_all is set to true, the following will have no impact.

Tests

Run the tests:

Or with docker and docker-compose: