loading...

re: Emulating Components in Twig VIEW POST

TOP OF THREAD FULL DISCUSSION
re: Hey Jake, I'm curious what you think about our approach: github.com/redantnl/twig-components. I've published an article in php|architect a few mont...
 

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 😄

 

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 😉

code of conduct - report abuse