[TwigComponent] How to use `live_action()` twig function in Twig Components tag?

[yannicka]

In a Symfony Live Component, I have something like this (simplified example):

<div {{ attributes }}>
    {% set parent = this %} {# I do not know if there is a better alternative in nested twig components #}

    <table>
        <thead>
            <tr>
                {# twig:Table:Head comes from https://ux.symfony.com/toolkit/kits/shadcn/components/table, it's an anonymous Twig Component #}
                <twig:Table:Head
                    data-action="click->live#action"
                    {{ live_action('sort', {sortBy: 'id'}) }}
                >
                    {{ 'ID'|trans }}
                </twig:Table:Head>
            </tr>
        </thead>
    </table>
</div>

But I have this error:

Expected attribute name when parsing the "<twig:Table:Head" syntax in components/FactorTypeSearch.html.twig at line 9.

The error comes from {{ live_action('sort', {sortBy: 'id'}) }}.

I know I can use the attributes syntax:

<twig:Table:Head
    data-action="click->live#action"
    data-live-action-param="sort"
    data-live-sort-by-param="id"
>
    {{ 'ID'|trans }}
</twig:Table:Head>

But I want to use live_action because the syntax is cleaner. And since all of this comes from Symfony UX, we expect it to work naturally.

Is there a way to use {{ live_action('sort', {sortBy: 'id'}) }}? or will it be possible in the future?

Versions:

• Symfony: 8.0.7
• PHP: 8.5.3
• UX Live Component: 2.34.0
• UX Turbo: 2.34.0
• Twig: 3.24.0

[nullodyssey]

Not a bug, this is actually a parser-level constraint that's worth understanding.

Why it fails

The <twig:ComponentName> tag syntax is parsed by symfony/ux-twig-component's ComponentTokenParser at compile time, before any Twig expression is ever evaluated. It only understands static key="value" attribute pairs, it has no way to handle {{ expression }} as an attribute spread:

{{-- ❌ The parser never gets to evaluate live_action() --}}
<twig:Table:Head {{ live_action('sort', {sortBy: 'id'}) }}>

{{-- ✅ Works — static key/value pairs only --}}
<twig:Table:Head
    data-action="live#action"
    data-live-action-param="sort"
    data-live-sort-by-param="id"
>

live_action() is a runtime Twig function, it produces its output when the template is executed. But ComponentTokenParser processes the tag earlier, during template compilation. These two steps are structurally incompatible, which is why you hit "Expected attribute name" before anything even runs.

On native HTML elements it works fine precisely because those tags are never touched by ComponentTokenParser, {{ live_action() }} just outputs a plain string of attributes at render time, no special parsing involved.

Documentation

This limitation isn't documented anywhere obvious, which makes it easy to assume live_action() should "just work" anywhere. A note in the docs clarifying that live_action() is intended for native HTML elements only would save a lot of head-scratching.

[yannicka]

Couldn't ComponentTokenParser ignore {{ expression }} syntax (and {% if %} and {# comment #})?

If not, it would indeed be good if this were documented.

Side question... here we can see a Twig component that use {{ expression }} syntax: https://symfony.com/bundles/ux-twig-component/current/index.html#component-html-syntax

<twig:Alert {{ ...myAttributes }} />

Same here: https://symfony.com/bundles/ux-twig-component/current/index.html#higher-order-components-component-wrappers

<twig:Modal {{ ...attributes.defaults({class: 'modal-confirm'}) }}>
    {{ block(outerBlocks.content) }}

    <div class="modal-actions">
        <button type="button" class="btn-secondary">{{ cancelText }}</button>
        <button type="submit" class="btn-primary">{{ confirmText }}</button>
    </div>
</twig:Modal>

Why does it works in that case?

[nullodyssey]

Fair point

{{ ...myAttributes }} works because <twig:...> tags go through TwigPreLexer before Twig's own lexer sees them. The spread case is explicitly detected and rewritten into a standard {% component 'Foo' with { ...varName } %} call (TwigPreLexer::consumeAttributes(), L224–231):

if ($this->check('{{...') || $this->check('{{ ...')) {
    $attributes[] = '...'.trim($this->consumeUntil('}}'));
    continue;
}

{{ live_action() }} is different, it returns a raw HTML attribute string. Supporting it would require TwigPreLexer to evaluate arbitrary expressions at runtime and re-parse the result as key="value" pairs.

So: in component tags isn't a missing case, it's an unimplemented feature. The documentation should make this distinction clear.

[yannicka]

Thank you for the explanation.

This makes me realize that there's no easy way to do this:

<twig:Table:Head
    {% if sortable %}
        data-action="click->live#action"
        data-live-action-param="sort"
        data-live-sort-by-param="{{ field }}"
    {% endif %}
>

[norkunas]

This makes me realize that there's no easy way to do this:

<twig:Table:Head
{% if sortable %}
data-action="click->live#action"
data-live-action-param="sort"
data-live-sort-by-param="{{ field }}"
{% endif %}

you could do:

<twig:Table:Head
    data-action="{{ sortable ? 'click->live#action' : false }}"
    data-live-action-param="{{ sortable ? 'sort' : false }}"
    data-live-sort-by-param="{{ sortable ? field : false }}"
>