[TwigComponent] Add 'require ** as **' to alias components

[maelanleborgne]

Q	A
Bug fix?	no
New feature?	yes
Tickets	Fix #1108
License	MIT

As suggested in #1108 and #801, this PR adds a new step in TwigPreLexer to replace components aliases by there full name. This will be useful when reusing many times the same components in your template, especially when making extensive use of components : having a well organized component folder will lead to longer component names.

What do you think ?

TODO:

• [ ] Handle the case when require declaration is commented
• [ ] Handle the case when require declaration is in a verbatim block

[norkunas]

Sadly still have to prefix with <twig: 🥲

[WebMamba]

@norkunas what do you propose then? I feel like people like this syntax

[norkunas]

See my issue :)

[norkunas]

For me it's too much of the prefix when using many components..

[smnandre]

I love the idea... but i'd like to solve our problems with the two lexers first if you're OK to wait a couple of days :|

We may stop resolving the component names at prelex time, so your implementation could be much easier ... or almost impossible depending on what we want to do :)

Currently with your implementation, i fear the following use case would break, no ?

{{ component(a_var) }}

{% verbatim %}
    {{ component('foo') }}
{% endverbatim %}

{% embed %}
    {% block 'inside' %}
        {{ component('foo') }}
    {% endblock %}
    {{ component('foo') }}
{% endembed %}

It seems to me that we would be safer with a NodeVisitor (like trans_domain for example)

[smnandre]

Another complex case

{% require Foo:Bar as Bar %}
{% require Bar as Foo %}


<twig:Foo:Bar />
<twig:Foo />
<twig:Bar />

[smnandre]

Another case

{#  templates/_blocks.html.twig  #}

{% block sidebar_top %}
    <twig:Crocodile:BigCroco />
{% endblock %}

{% block sidebar_bottom %}
    <twig:Crocodile:LittleCroco />
{% endblock %}

{#  templates/homepage.html.twig  #}

{% require Fake:Crocodile as Crocodile %}
{% require Plastic:BigCroco as Crocodile:BigCroco %}

{% use '_blocks.html.twig' %}

<twig:Crocodile:LittleCroco />

{% bloc sidebar_top %}
    <twig:Crocodile:BigCroco />
    {{ parent() }}
{% endblock %}

{% bloc sidebar_bottom %}
    <twig:Crocodile:LittleCroco />
{% endblock %}

(side note: this one is another reminder we should not pre-resolve names before the render @weaverryan ... anything done before the render is a risk some Twig feature stop working)

[jungleman12]

Nice feature! I hope it will be merged soon! It will help me a lot in the structure of my components :).

[tibobaldwin]

Ah yes, this kind of functionality is interesting for organizing components in files. For example, this will save me from making a <twig:Sidebar:Sidebar>.

[Kocal]

Ah yes, this kind of functionality is interesting for organizing components in files. For example, this will save me from making a <twig:Sidebar:Sidebar>.

You can create a templates/components/Sidebar.html.twig file for that

[tibobaldwin]

The idea is to structure the Sidebar component like this:

• templates/components/Sidebar/Sidebar.html.twig
• templates/components/Sidebar/SidebarHeader.html.twig
• templates/components/Sidebar/SidebarBody.html.twig
• templates/components/Sidebar/SidebarItem.html.twig
• templates/components/Sidebar/SidebarLabel.html.twig
• ...

[Kocal]

Why not the following structure?

• templates/components/Sidebar.html.twig
• templates/components/Sidebar/Header.html.twig
• templates/components/Sidebar/Body.html.twig
• templates/components/Sidebar/Item.html.twig
• templates/components/Sidebar/Label.html.twig

It would allow you to use components like this:

<twig:Sidebar>
    <twig:Sidebar:Header></twig:Sidebar:Header>
    <twig:Sidebar:Body></twig:Sidebar:Body>
    <twig:Sidebar:Item></twig:Sidebar:Item>
    <twig:Sidebar:Label></twig:Sidebar:Label>
</twig:Sidebar>

[tibobaldwin]

I understand your logic and that works :). The idea I propose is to group the related components within a single directory.

[Kocal]

I am closing due to inactivity, feel free to re-open the PR if necessary. Thanks for the contribution!