[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]

Whoooo thanks @maelanleborgne to get into this 🧡

[WebMamba]

What do you think about dispatching an event PostTwigPrelexing and putting the processRequires function's content in a Subscriber?

[WebMamba]

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

[norkunas]

See my issue :)

[WebMamba]

@maelanleborgne I was thinking again about your PR. And I don't think to use regex is not the good path here. You have to replicate some logic like verbatim or comment blocks... And if for exemple someone made a typo like so {% require Foo as Bar } we not gonna deliver a proper errors. I think we should do the logic from the TwigPrelexer directly. When the TwigPrelexer find {% require then he look for componentName and his alias, store this in property. Then when the TwigPrelexer is opening a component he looks via his property if an alias doesn't exist for this componentName. What you think ?

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