Discussion on: Emulating Components in Twig

View post

Replies for: Hey Gert, thanks for asking! That's a really interesting approach. The main thing it's missing IMO is the ability to pass chunks of markup into the...

Ah, interesting thought about passing markup! We do actually do that occassionally. for 'container'-like components:

{# Add all tabs to a tabs bar ... #}

{{ render_component('ui.tabs', {
    items: [ 'general' ]
}) }}

{# Render the tab contents ... #}

{{ render_component('ui.tab', {
    id: 'general',
    content: include('@Sales/partial/general.html.twig', { 'order': salesOrder })
}) }}

{# Render more tabs ... #}

with the Tab-component implementation looking like this:

{% component tab {
    id:      { type: 'string',
               comment: 'Tab id (match with tabs)',
               preview: 'tab_one' },
    content: { type: 'string',
               comment: 'Your tab contents' }
} with options %}

<div class="ui tab" data-tab="{{ tab.id }}">
    {{ tab.content|raw }}
</div>

Although that of course uses Includes instead of Embeds...

You could, for instance, include a render_component() or block() function call inside a component, like this:

    {{ render_component('ui.tab', {
        id: datatable.name,
        content: render_component('ui.datatable', {
            data_table: datatable
        })
    }) }}

Is this sort of what you were thinking of? Do you have any suggestions for further fleshing out? Would love to see our approach find some traction 😉