[TwigComponent] {% props syntax should allow dangling commas

[weaverryan]

Hi!

This currently errors:

{% props
    allowSmallWidth=false,
    closeButton=false,
%}

The problem is the dangling comma at the end of the list. If the last , is removed, this works fine. We should be a bit more friendly and allow this :).

Cheers!

[smnandre]

I would be quite against this one... for one very specific reason:

• Twig does not allow this kind of "trailing comma" (correct me if I missed something)
• The props tag uses classic Twig syntax (unlike the <twig:xxx />)
• There is nothing in the props tags immedialely related to "ux" or "component"

I do fear it's gonna pollute developers/designers minds, especially if we start to use this in tutorials, demos, docs, etc.

But to be 100% honest, we do have a different syntax than Twig already there....

🎁 QUIZZ TIME 🥳

Without checking docs or code.... what do you think the following code render ?

{# template/components/QuizzTime.html.twig #}

{% props foo, bar = 'bar', foobar %}

{% set foo, bar = 'bar', foobar %} 

<pre><code>
foo: {{ foo }}
bar: {{ bar }}
foobar: {{ foobar }}
</code></pre>

<twig:QuizzTime foo="foo" bar="bar" foobar="foobar" />

⚠️ Write your answer down then click to see the answer ⬇️

foo: bar
bar: foobar
foobar: foobar

[norkunas]

I would be quite against this one... for one very specific reason:

• Twig does not allow this kind of "trailing comma" (correct me if I missed something)

twigphp/Twig#3363 you missed something 😁

[smnandre]

twigphp/Twig#3363 you missed something 😁

Haha yes .. and no!

Yes i totally missed it to be honest :)

But no because.... none of those work (and the similar)

{% set foo, bar = 'foo', 'bar', %}
{% set list = [1, 2,], %}

{% include 'foo.html.twig', 'bar.html.twig', %}

{{ 'foo', }}

I maintain that allowing

{% props foo, bar,  %}

but not allowing

{% include foo, bar,  %}

can be confusing

[norkunas]

But trailing commas are at least diff friendly :) as this is UX land, it can follow it's own criteria of twig cs I think

[smnandre]

Alternative: we could use a more "standard" twig syntax....

{% props {
    foo: null, 
    bar: 'bar',
} %}

... and there, no problem to have a trailing coma :)