[TwigComponent] Convert camelCase attributes to dashed attributes

src/TwigComponent/src/ComponentAttributes.php

@@ -44,7 +44,7 @@ function (string $carry, string $key) {
                 return match ($value) {
                     true => "{$carry} {$key}",
                     false => $carry,
-                    default => sprintf('%s %s="%s"', $carry, $key, $value),
+                    default => sprintf('%s %s="%s"', $carry, strtolower(preg_replace('/(?<!^)[A-Z]/', '-$0', $key)), $value),
                 };
             },
             ''

src/TwigComponent/tests/Fixtures/templates/embedded_component.html.twig

@@ -1,4 +1,4 @@
-{% component table with { caption: 'data table', headers: ['key', 'value'], data: [[1, 2], [3, 4]] } %}
+{% component table with { caption: 'data table', headers: ['key', 'value'], data: [[1, 2], [3, 4]], dataSort: 'asc' } %}
     {% block th %}custom th ({{ parent() }}){% endblock %}
     {% block td %}custom td ({{ parent() }}){% endblock %}
 

src/TwigComponent/tests/Fixtures/templates/tags/embedded_component.html.twig

@@ -1,8 +1,8 @@
-<twig:table caption='data table' :headers='["key", "value"]' :data='[[1, 2], [3, 4]]'>
+<twig:table caption='data table' :headers='["key", "value"]' :data='[[1, 2], [3, 4]]' dataSort='asc'>
         <twig:block name="th">custom th ({{ parent() }})</twig:block>
         <twig:block name="td">custom td ({{ parent() }})</twig:block>
 
         <twig:block name="footer">
                 My footer
         </twig:block>
-</twig:table>
+</twig:table>

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -87,10 +87,12 @@ public function testCanRenderComponentWithAttributes(): void
             'style' => 'color:red;',
             'value' => '',
             'autofocus' => true,
+            'data-size' => 'md',
+            'dataVariant' => 'success',
         ]);
 
         $this->assertStringContainsString('Component Content (prop value 1)', $output);
-        $this->assertStringContainsString('<button class="foo bar" type="button" style="color:red;" value="" autofocus>', $output);
+        $this->assertStringContainsString('<button class="foo bar" type="button" style="color:red;" value="" autofocus data-size="md" data-variant="success">', $output);
 
         $output = $this->renderComponent('with_attributes', [
             'prop' => 'prop value 2',
@@ -146,6 +148,7 @@ public function testCanRenderEmbeddedComponent(): void
     {
         $output = self::getContainer()->get(Environment::class)->render('embedded_component.html.twig');
 
+        $this->assertStringContainsString('data-sort="asc"', $output);
         $this->assertStringContainsString('<caption>data table</caption>', $output);
         $this->assertStringContainsString('custom th (key)', $output);
         $this->assertStringContainsString('custom td (1)', $output);

src/TwigComponent/tests/Integration/ComponentLexerTest.php

@@ -41,6 +41,7 @@ public function testComponentSyntaxCanRenderEmbeddedComponent(): void
     {
         $output = self::getContainer()->get(Environment::class)->render('tags/embedded_component.html.twig');
 
+        $this->assertStringContainsString('data-sort="asc"', $output);
         $this->assertStringContainsString('<caption>data table</caption>', $output);
         $this->assertStringContainsString('custom th (key)', $output);
         $this->assertStringContainsString('custom td (1)', $output);

src/TwigComponent/tests/Unit/ComponentAttributesTest.php

@@ -27,9 +27,11 @@ public function testCanConvertToString(): void
             'style' => 'color:black;',
             'value' => '',
             'autofocus' => true,
+            'data-size' => 'md',
+            'dataVariant' => 'success',
         ]);
 
-        $this->assertSame(' class="foo" style="color:black;" value="" autofocus', (string) $attributes);
+        $this->assertSame(' class="foo" style="color:black;" value="" autofocus data-size="md" data-variant="success"', (string) $attributes);
     }
 
     public function testCanSetDefaults(): void