[RFC][Twig] "Anonymous" components

[kbond]

Q	A
Bug fix?	no
New feature?	yes
Tickets	n/a
License	MIT

This is pretty rough still but looking for input. This is basically include() but with the attributes system available.

{# path/to/template.html.twig #}
<div{{ attributes }}>{{ prop1 }}</div>


{# render: (attributes *must* be sent as a "sub-key" #}
{{ component('path/to/template.html.twig', { prop1: 'value', { attributes: { class: 'mb-1' } } }) }}

This feature will be much more useful once/if embedded components are added. You'd be able to have anonymous components with slots.

TODO:

• since we have the convention of component templates living in templates/components/*, I think we should allow:

  {# if no "alert" component class, use "templates/components/alert.html.twig" #}
  {{ component('alert', {message: 'message...'}) }}

[94noni]

seem weird to have direct html, what about something like this?
that way we can have one templates/component/anonymous-components.html.twig defining n components

{# path/to/template.html.twig #}
- <div{{ attributes }}>{{ prop1 }}</div>
+ {% component 'my_component' %}<div{{ attributes }}>{{ prop1 }}</div>{% endcomponent %}


{# render: (attributes *must* be sent as a "sub-key" #}
- {{ component('path/to/template.html.twig', { prop1: 'value', { attributes: { class: 'mb-1' } } }) }}
+ {{ component('my_component', { prop1: 'value', { attributes: { class: 'mb-1' } } }) }} 

[weaverryan]

This feature will be much more useful once/if embedded components are added. You'd be able to have anonymous components with slots.

I'd love to see a rough example of what this might look like with anonymous components to give more context :)

[kbond]

I'm shelving this for now. There is currently little benefit to using this over Twig's standard include/embed. Using the attributes feature is the only useful thing but they have to be passed as an attributes key which is a bummer.

If anything, we could explore adding an attributes() Twig function so this feature can be used anywhere.