rybakit/twig-deferred-extension

An extension for Twig that allows to defer block rendering.

Maintainers

👁 rybakit

Package info

github.com/rybakit/twig-deferred-extension

pkg:composer/rybakit/twig-deferred-extension

Fund package maintenance!

rybakit

Statistics

Installs: 2 795 230

Dependents: 4

Suggesters: 0

Stars: 109

Open Issues: 2

v3.0.5 2024-04-04 09:38 UTC

Requires

Requires (Dev)

Suggests

None

Provides

None

Conflicts

None

Replaces

None

MIT 3e5d00ccd27863f25e87f2af05a1430f3039e480

  • Eugene Leonovich <gen.work.woop@gmail.com>

twigextensiondeferlazyoverride

README

👁 Quality Assurance
👁 Scrutinizer Code Quality
👁 Mentioned in Awesome Twig

An extension for Twig that allows to defer block rendering.

Installation

composer require rybakit/twig-deferred-extension

Note that this extension requires Twig 3 or above. If you need support for older versions of Twig, please refer to the legacy repository.

Initialization

use Twig\DeferredExtension\DeferredExtension;
use Twig\Environment;

...

$twig = new Environment($loader);
$twig->addExtension(new DeferredExtension());

Simple example

{% block foo deferred %}
 {{ bar }}
{% endblock %}

{% set bar = 'bar' %}

The foo block will output "bar".

Advanced example

Just for example purposes, first create a global twig variable:

use Twig\Environment;

...

$twig = new Environment($loader);
$twig->addGlobal('assets', new \ArrayObject());

Then build the following set of templates:

{# layout.html.twig #}
<!DOCTYPE html>
<html>
 <head>
 ...
 </head>
 <body>
 {% block content '' %}

 {{ assets.append('/js/layout-header.js') }}

 {% block javascripts deferred %}
 {% for asset in assets %}
 <script src="{{ asset }}"></script>
 {% endfor %}
 {% endblock %}

 {{ assets.append('/js/layout-footer.js') }}
 </body>
</html>


{# page.html.twig #}
{% extends "layout.html.twig" %}

{% block content %}
 {{ assets.append('/js/page-header.js') }}

 {% if foo is defined %}
 {{ include("subpage1.html.twig") }}
 {% else %}
 {{ include("subpage2.html.twig") }}
 {% endif %}

 {{ assets.append('/js/page-footer.js') }}
{% endblock %}


{# subpage1.html.twig #}
{{ assets.append('/js/subpage1.js') }}


{# subpage2.html.twig #}
{{ assets.append('/js/subpage2.js') }}

The resulting html will be the following:

<!DOCTYPE html>
<html>
 <head>
 ...
 </head>
 <body>
 <script src="/js/layout-header.js"></script>
 <script src="/js/page-header.js"></script>
 <script src="/js/subpage2.js"></script>
 <script src="/js/page-footer.js"></script>
 <script src="/js/layout-footer.js"></script>
 </body>
</html>

Block overriding

{# index.twig #}
{% extends "base.twig" %}
{% block foo %}foo is not deferred anymore{% endblock %}
{% block bar deferred %}bar is deferred now{% endblock %}

{# base.twig #}
{% block foo deferred %}foo is deferred{% endblock %}
{% block bar %}bar is not deferred{% endblock %}

License

The library is released under the MIT License. See the bundled LICENSE file for details.