[LiveComponent] Using turbo-frame

[xorgxx]

Hi i'm trying to use turbo-frame in live-components :

Twig :

    <div class="container" >
            <twig:Sortable :class="class"/>
    </div>

<turbo-frame id="sortable-container">
    <div {{ attributes }}>
        ....
    </div>
</turbo-frame>

this it block all components logic, but if we use this way all is back

Twig :

    <div class="container" >
        <turbo-frame id="sortable-container">
            <twig:Sortable :class="class"/>
        </turbo-frame>
    </div>

   <div {{ attributes }}>
        ....
    </div>

can it be possible to use mix live-components with turbo-frame ?

Thank

[smnandre]

LiveComponent won't work if you don't set the {{ attributes }} on the root tag of the template.

{# templates/components/ProductSearch.html.twig #}
{# for the Live Component to work, there must be a single root element
   (e.g. a <div>) where the attributes are applied to #}
   
   ...

( https://symfony.com/bundles/ux-live-component/current/index.html )

For this reason, i guess none of your examples could work correctly with live components.

Then I'm not sure to understand the use case you want to implement... Could you maybe give an example of what you would like to do in the template, and what would happen when the LiveComponent re-renders ?

[xorgxx]

Here’s the message translated into English:

My idea is to have a live component that offers an experience similar to a Single Page Application (SPA), but with the ability to display forms or other elements in place of the current component. For example, a table that shows data from an entity with CRUD buttons for each item. When you click a button, a form is displayed, and after submitting, it returns to the live component. I’ve already implemented this effect, and it works well. However, for security reasons, I want to integrate the turbo-frame tag into the component’s Twig template, like this:

Controller :

        ........
        #[Route('/sortable-content', name: 'sortable_content', methods: ['GET'])]
        public function getSortableContent(): Response
        {
            return $this->render('renderTest/sortable.html.twig', [
                'class'     => post::class,
            ]);
        }
        .......

Twig to call components :

{% extends 'base.html.twig' %}

{% block title %}Hello Controller!{% endblock %}

{% block body %}
    <div class="container" >
        <turbo-frame id="sortable-container">       <------ this the point : this way all work find !!! 
            <twig:Sortable :class="class"/>
        </turbo-frame>
    </div>

{% endblock %}

templates/components

{#<turbo-frame id="sortable-container">#}      <---- i wanted to put here ------
    <div {{ attributes }}>
          .........
    </div>
{#</turbo-frame>#}

But if I place it like this, the component stops working.

I hope this makes it easier to understand what I’m trying to do.

[xorgxx]

so for fun i have just try this :

    <turbo-frame id="sortable-container" {{ attributes }}>
          .......
    </turbo-frame>

And it seems to be working well again!

With this type of code, we can do much more by integrating components, all while maintaining the SPA effect.