feature #771 Introduce a new syntax for twig component (WebMamba)

This PR was merged into the 2.x branch.

Discussion
----------

Introduce a new syntax for twig component

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       |
| License       | MIT

Hey all! This PR introduces a new syntax that is more component-oriented 😁

🚨 Just updated this description to feat with the last modification

The problem is: I use components with a lot of parameters, and I use a lot the embedded component feature. So I quickly end up with a hard-to-read template.
So here introduce a new syntax:
``` php
<t:myComponent parameter1 parameter2='foo'>
```
instead of:
```php
{{ component('myComponent', { parameter1: true, parameter2: 'foo' }) }}
```
The old syntax is not removed. This PR gives the ability to choose.

Here is a more realistic example:
```php
{% extends 'admin.html.twig' %}

{% block dashboard %}
    <t:userDashboard :user="user.id" isAdmin graph="linear" primary>
        <t:block name="actions">
            <t:userActions isAdmin/>
        </t:block>
        <t:block name="footer">
            <t:userDashBoardFooter/>
        </t:block>
    </t:userDashboard>
{% endblock %}
```
instead of
```php
{% extends 'admin.html.twig' %}

{% block dashboard %}
    {% component 'userDashboard' with {user: user.id, isAdmin: true, graph: 'linear', primary: true} %}
        {% block actions %}
            {{ component('userActions', {isAdmin: 'true'}) }}
        {% endblock %}
        {% block footer %}
            {{ component('userDashboardFooter') }}
        {% endblock %}
    {% endcomponent %}
{% endblock %}
```

So here is a quick summary:

- you can use <t:component/>, <t:component></t:component>
- you also have a special syntax for nested block <t:block name="blockName"></t:block>
- you can use ':' just before your attribute for a value that should be compiled by twig  <t:component :user="user.id"> equal to  <t:component :user="{{ user.id }}">
- you now have a content block by default. For example, if you have:
``` php
<t:component :user="user.id">
  <div>
     // my content
  <div>
<t:component/>
```
then in your component template

```php
{% block content %}
 // your comment will be display here
{% endblock %}
```

Piouffff!!!! A lot of stuff going on here 😎

This PR is inspired a lot by this library: https://github.com/giorgiopogliani/twig-components

Thanks for your time.
Cheers! 😁

Commits
-------

371edad introduce a new HTML-like syntax for twig component

Author: weaverryan

src/LiveComponent/tests/Fixtures/Kernel.php

@@ -26,6 +26,7 @@
 use Symfony\UX\TwigComponent\TwigComponentBundle;
 use Twig\Environment;
 use Zenstruck\Foundry\ZenstruckFoundryBundle;
+use function Symfony\Component\DependencyInjection\Loader\Configurator\service;
 
 /**
  * @author Kevin Bond <[email protected]>
@@ -112,6 +113,8 @@ protected function configureContainer(ContainerConfigurator $c): void
             ->set(MoneyNormalizer::class)->autoconfigure()->autowire()
             ->set(Entity2Normalizer::class)->autoconfigure()->autowire()
             ->load(__NAMESPACE__.'\\Component\\', __DIR__.'/Component')
+            ->set(TestingDeterministicIdTwigExtension::class)
+                ->args([service('ux.live_component.deterministic_id_calculator')])
         ;
     }
 

src/LiveComponent/tests/Fixtures/TestingDeterministicIdTwigExtension.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures;
+
+use Symfony\UX\LiveComponent\Twig\DeterministicTwigIdCalculator;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+class TestingDeterministicIdTwigExtension extends AbstractExtension
+{
+    public function __construct(private DeterministicTwigIdCalculator $deterministicIdCalculator)
+    {
+    }
+
+    public function getFunctions(): array
+    {
+        return [
+            new TwigFunction('get_id_for_test', [$this, 'getIdForTest']),
+        ];
+    }
+
+    public function getIdForTest(): string
+    {
+        return $this->deterministicIdCalculator->calculateDeterministicId();
+    }
+}

src/LiveComponent/tests/Integration/Twig/DeterministicTwigIdCalculatorTest.php

@@ -14,35 +14,15 @@
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\UX\LiveComponent\Twig\DeterministicTwigIdCalculator;
 use Twig\Environment;
-use Twig\Extension\AbstractExtension;
-use Twig\TwigFunction;
 
 final class DeterministicTwigIdCalculatorTest extends KernelTestCase
 {
     public function testReturnsDeterministicId(): void
     {
-        $deterministicIdCalculator = new DeterministicTwigIdCalculator();
-        $twigExtension = new class($deterministicIdCalculator) extends AbstractExtension {
-            public function __construct(private DeterministicTwigIdCalculator $deterministicIdCalculator)
-            {
-            }
-
-            public function getFunctions(): array
-            {
-                return [
-                    new TwigFunction('get_id_for_test', [$this, 'getIdForTest']),
-                ];
-            }
-
-            public function getIdForTest(): string
-            {
-                return $this->deterministicIdCalculator->calculateDeterministicId();
-            }
-        };
-
         /** @var Environment $twig */
         $twig = self::getContainer()->get('twig');
-        $twig->addExtension($twigExtension);
+        /** @var DeterministicTwigIdCalculator $deterministicIdCalculator */
+        $deterministicIdCalculator = self::getContainer()->get('ux.live_component.deterministic_id_calculator');
 
         $rendered = $twig->render('deterministic_id.html.twig');
         $this->assertStringContainsString('Deterministic Id Line1-1: "live-3860148629-0"', $rendered);

src/TwigComponent/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 2.8.0
 
+-   Add new HTML syntax for rendering components: `<twig:ComponentName>`
 -   `true` attribute values now render just the attribute name, `false` excludes it entirely.
 
 -   The first argument to `AsTwigComponent` is now optional and defaults to the class name.

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

@@ -24,6 +24,8 @@
 use Symfony\UX\TwigComponent\ComponentStack;
 use Symfony\UX\TwigComponent\DependencyInjection\Compiler\TwigComponentPass;
 use Symfony\UX\TwigComponent\Twig\ComponentExtension;
+use Symfony\UX\TwigComponent\Twig\ComponentLexer;
+use Symfony\UX\TwigComponent\Twig\TwigEnvironmentConfigurator;
 
 /**
  * @author Kevin Bond <[email protected]>
@@ -73,5 +75,11 @@ class_exists(AbstractArgument::class) ? new AbstractArgument(sprintf('Added in %
             ->addTag('container.service_subscriber', ['key' => ComponentRenderer::class, 'id' => 'ux.twig_component.component_renderer'])
             ->addTag('container.service_subscriber', ['key' => ComponentFactory::class, 'id' => 'ux.twig_component.component_factory'])
         ;
+
+        $container->register('ux.twig_component.twig.lexer', ComponentLexer::class);
+
+        $container->register('ux.twig_component.twig.environment_configurator', TwigEnvironmentConfigurator::class)
+            ->setDecoratedService(new Reference('twig.configurator.environment'))
+            ->setArguments([new Reference('ux.twig_component.twig.environment_configurator.inner')]);
     }
 }

src/TwigComponent/src/Twig/ComponentLexer.php

@@ -0,0 +1,42 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent\Twig;
+
+use Twig\Lexer;
+use Twig\Source;
+use Twig\TokenStream;
+
+/**
+ * @author Mathèo Daninos <[email protected]>
+ *
+ * @internal
+ *
+ * thanks to @giorgiopogliani for the inspiration on this lexer <3
+ *
+ * @see https://github.com/giorgiopogliani/twig-components
+ */
+class ComponentLexer extends Lexer
+{
+    public function tokenize(Source $source): TokenStream
+    {
+        $preLexer = new TwigPreLexer();
+        $preparsed = $preLexer->preLexComponents($source->getCode());
+
+        return parent::tokenize(
+            new Source(
+                $preparsed,
+                $source->getName(),
+                $source->getPath()
+            )
+        );
+    }
+}

src/TwigComponent/src/Twig/TwigEnvironmentConfigurator.php

@@ -0,0 +1,33 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent\Twig;
+
+use Symfony\Bundle\TwigBundle\DependencyInjection\Configurator\EnvironmentConfigurator;
+use Twig\Environment;
+
+class TwigEnvironmentConfigurator
+{
+    private EnvironmentConfigurator $decorated;
+
+    public function __construct(
+        EnvironmentConfigurator $decorated
+    ) {
+        $this->decorated = $decorated;
+    }
+
+    public function configure(Environment $environment): void
+    {
+        $this->decorated->configure($environment);
+
+        $environment->setLexer(new ComponentLexer($environment));
+    }
+}