[Turbo] Passing turbo_stream_listen with components

[gremo]

Right now turbo_stream_listen returns a string. The StimulusAttributes is casted to a string (it's actually a DTO with toArray function too).

This make impossibile to use it with custom components because we can't pass a string representing the attribute set:

<twig:Code id="attendance" {{ ...turbo_stream_listen("attendance") }}>
</twig:Code>

Is there any solution or workaround to pass the attribute set?

EDIT: I can only think to this to make it DRY. Any better solution?

{# Code.html.twig #}
<div
    {{ attributes
        .defaults({
            class: "mockup-code",
        })
    }}
    {% block attributes %}{% endblock %}
>
    {% block content %}{% endblock %}
</div>

{# StreamedCode.html.twig #}
{% props topic %}

<twig:Code {{ ...attributes }}>
    <twig:block name="attributes">
        {{- turbo_stream_listen(topic) -}}
    </twig:block>

    {{ block(outerBlocks.content) }}
</twig:Code>

[smnandre]

Maybe you can pass "attendance" in your twig:Code element and call the turbo stream listen here ?

To pass a stimulus attribute we would need to create another interface / twig function / tests / etc...

I'm not sure this is a very common need, especially compared to the number of people who will help maintain / document / etc afterward :)

But i'm ready to change my mind :)

[gremo]

Yes, @smnandre, I can pass a "topic" prop and then conditionally call turbo_stream_listen inside Code.html.twig. Is that what you meant?

However, it feels wrong to me to "tie" my component to Turbo. It's similar to the way the stimulus_controller function works—I don't want it embedded within my component. I'd prefer to call it externally. Do you agree?

Anyway, if this sounds like an odd request, feel free to close the issue!

[smnandre]

Nope, it's not odd, i get what you want here.

The problem is that Turbo was implemented before the HTML Syntax, and its interface prevent to pass attributes like this...

And i guess you don't want to wrap your content ?

<twig:Code id="attendance">
    <div  {{ ...turbo_stream_listen("attendance") }}>

    </div>
</twig:Code>

[gremo]

Yes bu sometimes you cannot, depending on the css framework for example.

Btw, no problem @smnandre this was just an input. Closing this issue!