Introduce a new syntax for twig component

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));
+    }
+}