[TwigComponent] Hyphen-separated attributes don't work with HTML syntax

[AmProsius]

I have a component that accepts any HTML attribute in addition to other props:

{# templates/components/IconMini.html.twig #}

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 20 20"
  fill="currentColor"
  {{ attributes.defaults({
    class: 'h-5 w-5',
  }) }}
>
  {# ... #}
</svg>

But if I pass hyphen-separated HTML attributes like aria-* or data-*, I get the following error: A hash key must be followed by a colon (:). Unexpected token "operator" of value "-" ("punctuation" expected with value ":").

{# templates/_navbar.html.twig #}

<twig:IconMini name="chevron-down" aria-hidden="true" />

The component syntax works fine:

{# templates/_navbar.html.twig #}

{{ component('IconMini', {
  name: 'chevron-down',
  'aria-hidden': 'true',
}) }}

Other than that, I absolutely love the new HTML Syntax!

[kbond]

Are you using the latest 2.x branch? There's been a bunch of bug fixes post 2.8 that haven't been released.

I think this has been fixed:

ux/src/TwigComponent/tests/Unit/TwigPreLexerTest.php

Lines 155 to 158 in 9e2b177

	yield 'component_with_dashed_attribute' => [
	'<twig:foobar data-action="foo#bar"></twig:foobar>',
	'{% component \'foobar\' with { \'data-action\': \'foo#bar\' } %}{% endcomponent %}',
	];

[AmProsius]

Upgrading to 2.x-dev solved the issue, thanks! I'll use that as a workaround until the next release.

[kbond]

@AmProsius, not related but what does your IconMini component class look like?

[AmProsius]

<?php

// src/Components/IconMini.php

namespace App\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent]
class IconMini
{
    public string $name;
}

{# templates/components/IconMini.html.twig #}

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 20 20"
  fill="currentColor"
  {{ attributes.defaults({
    class: 'h-5 w-5',
  }) }}
>
  {% if name == 'chevron-down' %}
    <path
      fill-rule="evenodd"
      d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
      clip-rule="evenodd"
    />
  {# ... #}
  {% elseif name == 'x-circle' %}
    <path
      fill-rule="evenodd"
      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
      clip-rule="evenodd"
    />
  {% endif %}
</svg>

[kbond]

Ah, no logic, that's what I thought. Keep an eye on #802 - your component is a great use case.