DEV Community

Discussion on: Emulating Components in Twig

Collapse
 
jakedohm_34 profile image
Jake Dohm

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 component like you can do with Embeds. That's the main gist of the article, pushing to use Embeds instead of Includes.

I love the prop checking, that's a neat feature!

Overall, I think you're on to something and I'd love to see it further fleshed out 😄

Collapse
 
cinamo profile image
Gert Wijnalda

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 😉