Fix error for component name with :

Author: matheo

src/TwigComponent/src/Twig/TwigPreLexer.php

@@ -58,7 +58,7 @@ public function preLexComponents(string $input): string
                     $this->currentComponents[] = ['name' => $componentName, 'hasDefaultBlock' => false];
                 }
 
-                $output .= "{% component {$componentName}".($attributes ? " with { {$attributes} }" : '').' %}';
+                $output .= "{% component '{$componentName}'".($attributes ? " with { {$attributes} }" : '').' %}';
                 if ($isSelfClosing) {
                     $output .= '{% endcomponent %}';
                 }
@@ -117,7 +117,7 @@ public function preLexComponents(string $input): string
     private function consumeComponentName(): string
     {
         $start = $this->position;
-        while ($this->position < $this->length && preg_match('/[A-Za-z0-9_]/', $this->input[$this->position])) {
+        while ($this->position < $this->length && preg_match('/[A-Za-z0-9_:@\-\/.]/', $this->input[$this->position])) {
             ++$this->position;
         }
         $componentName = substr($this->input, $start, $this->position - $start);

src/TwigComponent/tests/Unit/TwigPreLexerTest.php

@@ -29,47 +29,67 @@ public function getLexTests(): iterable
     {
         yield 'simple_component' => [
             '<twig:foo />',
-            '{% component foo %}{% endcomponent %}',
+            '{% component \'foo\' %}{% endcomponent %}',
         ];
 
         yield 'component_with_attributes' => [
             '<twig:foo bar="baz" with_quotes="It\'s with quotes" />',
-            "{% component foo with { bar: 'baz', with_quotes: 'It\'s with quotes' } %}{% endcomponent %}",
+            "{% component 'foo' with { bar: 'baz', with_quotes: 'It\'s with quotes' } %}{% endcomponent %}",
         ];
 
         yield 'component_with_dynamic_attributes' => [
             '<twig:foo dynamic="{{ dynamicVar }}" :otherDynamic="anotherVar" />',
-            '{% component foo with { dynamic: dynamicVar, otherDynamic: anotherVar } %}{% endcomponent %}',
+            '{% component \'foo\' with { dynamic: dynamicVar, otherDynamic: anotherVar } %}{% endcomponent %}',
         ];
 
         yield 'component_with_closing_tag' => [
             '<twig:foo></twig:foo>',
-            '{% component foo %}{% endcomponent %}',
+            '{% component \'foo\' %}{% endcomponent %}',
         ];
 
         yield 'component_with_block' => [
             '<twig:foo><twig:block name="foo_block">Foo</twig:block></twig:foo>',
-            '{% component foo %}{% block foo_block %}Foo{% endblock %}{% endcomponent %}',
+            '{% component \'foo\' %}{% block foo_block %}Foo{% endblock %}{% endcomponent %}',
         ];
 
         yield 'component_with_embedded_component_inside_block' => [
             '<twig:foo><twig:block name="foo_block"><twig:bar /></twig:block></twig:foo>',
-            '{% component foo %}{% block foo_block %}{% component bar %}{% endcomponent %}{% endblock %}{% endcomponent %}',
+            '{% component \'foo\' %}{% block foo_block %}{% component \'bar\' %}{% endcomponent %}{% endblock %}{% endcomponent %}',
         ];
 
         yield 'attribute_with_no_value' => [
             '<twig:foo bar />',
-            '{% component foo with { bar: true } %}{% endcomponent %}',
+            '{% component \'foo\' with { bar: true } %}{% endcomponent %}',
         ];
 
         yield 'component_with_default_block_content' => [
             '<twig:foo>Foo</twig:foo>',
-            '{% component foo %}{% block content %}Foo{% endblock %}{% endcomponent %}',
+            '{% component \'foo\' %}{% block content %}Foo{% endblock %}{% endcomponent %}',
         ];
 
         yield 'component_with_default_block_that_holds_a_component_and_multi_blocks' => [
             '<twig:foo>Foo <twig:bar /><twig:block name="other_block">Other block</twig:block></twig:foo>',
-            '{% component foo %}{% block content %}Foo {% component bar %}{% endcomponent %}{% endblock %}{% block other_block %}Other block{% endblock %}{% endcomponent %}',
+            '{% component \'foo\' %}{% block content %}Foo {% component \'bar\' %}{% endcomponent %}{% endblock %}{% block other_block %}Other block{% endblock %}{% endcomponent %}',
+        ];
+        yield 'component_with_character_:_on_his_name' => [
+            '<twig:foo:bar></twig:foo:bar>',
+            '{% component \'foo:bar\' %}{% endcomponent %}',
+        ];
+        yield 'component_with_character_@_on_his_name' => [
+            '<twig:@foo></twig:@foo>',
+            '{% component \'@foo\' %}{% endcomponent %}',
+        ];
+        yield 'component_with_character_-_on_his_name' => [
+            '<twig:foo-bar></twig:foo-bar>',
+            '{% component \'foo-bar\' %}{% endcomponent %}',
+        ];
+        yield 'component_with_character_/_on_his_name' => [
+            '<twig:foo/bar></twig:foo/bar>',
+            '{% component \'foo/bar\' %}{% endcomponent %}',
+        ];
+        yield 'component_with_character_._on_his_name' => [
+            '<twig:foo.bar></twig:foo.bar>',
+            '{% component \'foo.bar\' %}{% endcomponent %}',
         ];
     }
 }