[TwigComponent] Making self-closing HTML syntax render with simpler {{ component() }}

Avoids a bug where we think that all {% component %} style tags contain blocks, which
cause them to not be allowed with live components

Author: weaverryan

src/TwigComponent/src/Twig/TwigPreLexer.php

@@ -58,9 +58,13 @@ public function preLexComponents(string $input): string
                     $this->currentComponents[] = ['name' => $componentName, 'hasDefaultBlock' => false];
                 }
 
-                $output .= "{% component '{$componentName}'".($attributes ? " with { {$attributes} }" : '').' %}';
                 if ($isSelfClosing) {
-                    $output .= '{% endcomponent %}';
+                    // use the simpler component() format, so that the system doesn't think
+                    // this is an "embedded" component with blocks
+                    // see https://github.com/symfony/ux/issues/810
+                    $output .= "{{ component('{$componentName}'".($attributes ? ", { {$attributes} }" : '').') }}';
+                } else {
+                    $output .= "{% component '{$componentName}'".($attributes ? " with { {$attributes} }" : '').' %}';
                 }
 
                 continue;

src/TwigComponent/tests/Unit/TwigPreLexerTest.php

@@ -29,17 +29,17 @@ public function getLexTests(): iterable
     {
         yield 'simple_component' => [
             '<twig:foo />',
-            '{% component \'foo\' %}{% endcomponent %}',
+            '{{ component(\'foo\') }}',
         ];
 
         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', { bar: 'baz', with_quotes: 'It\'s with quotes' }) }}",
         ];
 
         yield 'component_with_dynamic_attributes' => [
             '<twig:foo dynamic="{{ dynamicVar }}" :otherDynamic="anotherVar" />',
-            '{% component \'foo\' with { dynamic: dynamicVar, otherDynamic: anotherVar } %}{% endcomponent %}',
+            '{{ component(\'foo\', { dynamic: dynamicVar, otherDynamic: anotherVar }) }}',
         ];
 
         yield 'component_with_closing_tag' => [
@@ -54,12 +54,12 @@ public function getLexTests(): iterable
 
         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\') }}{% endblock %}{% endcomponent %}',
         ];
 
         yield 'attribute_with_no_value' => [
             '<twig:foo bar />',
-            '{% component \'foo\' with { bar: true } %}{% endcomponent %}',
+            '{{ component(\'foo\', { bar: true }) }}',
         ];
 
         yield 'component_with_default_block_content' => [
@@ -69,7 +69,7 @@ public function getLexTests(): iterable
 
         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\') }}{% endblock %}{% block other_block %}Other block{% endblock %}{% endcomponent %}',
         ];
         yield 'component_with_character_:_on_his_name' => [
             '<twig:foo:bar></twig:foo:bar>',