feature #802 Anonymous TwigComponent (matheo, WebMamba)

This PR was merged into the 2.x branch.

Discussion
----------

Anonymous TwigComponent

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

Hey all!
TwigComponent getting really cool: a custom syntax, embedded component, nested component, and so on. Why not extends all of this to anonymous components?
What I call an anonymous component is a simple template.
For example if you have the following template:
```php
  // {% components/button/button.html.twig %}
  <button class="primary large actions">
    <span>
        {% block content %}
        {% endblock %}
    </span>
</button>
```

You can now use it like so:
```php

  {% index.html.twig %}

 ...
<div class="cart-actions">
   <twig:Button:Button>
       Click Me!
   </twig:Button:Button>
</div>

```
As can see you can use `:` to navigate through the directories.
And this PR came also with twig_entension configuration key (default to .html.twig), to find your template with the extension you want. 😁

You now have the {% props %} tag. This tag allows you to define required props for a static component or to set a default value.

```php
 // {% components/button/button.html.twig %}

{% props label, primary = true %}

  <button class="{{ primary ? = 'primary' ? 'secondary' }} large actions">
    <span>
        {{ label }}
    </span>
</button>
```

So here you have one require prop `label`, and one optional prop primary with a default value set to true. You can now use your anonymous component like so:

 ```php

  {% index.html.twig %}

 ...
<div class="cart-actions">
   <twig:Button.Button label="Click me">
</div>

Commits
-------

3c9ec5e order checks to match best pratice first
904a613 remove .idea folder
b19c71a destruct properties
82d9a9f use attributes in template
226c301 remove tag for ComponentTemplateFinderInterface
5369c25 fixing syntax
8defd7a make class finals
708ff5d use RuntimeExeception for prop errors
58c927a fix
3453468 ComponentTemplateFinder
03504fc destruct option to ExposeInTemplate attribute
1d55891 ComponentTemplateFinderInterface to isolate logic
6a162a1 add files header
6906714 Add test for component in nested directory
7f4e71e rename static to anonymous
78a576d remove unused files
2bffe7c Render Statics Components and Props tags
1b7020e rename twig extension
718f3a1 add configuration for template extension
c8a10a7 add the ability to have static component

Author: weaverryan

src/TwigComponent/src/AnonymousComponent.php

@@ -0,0 +1,35 @@
+<?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;
+
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+
+/**
+ * @author Matheo Daninos <[email protected]>
+ *
+ * @internal
+ */
+final class AnonymousComponent
+{
+    private array $props;
+
+    public function mount($props = []): void
+    {
+        $this->props = $props;
+    }
+
+    #[ExposeInTemplate(destruct: true)]
+    public function getProps(): array
+    {
+        return $this->props;
+    }
+}

src/TwigComponent/src/Attribute/ExposeInTemplate.php

@@ -22,12 +22,14 @@
 final class ExposeInTemplate
 {
     /**
-     * @param string|null $name   The variable name to expose. Leave as null
-     *                            to default to property name.
-     * @param string|null $getter The getter method to use. Leave as null
-     *                            to default to PropertyAccessor logic.
+     * @param string|null $name     The variable name to expose. Leave as null
+     *                              to default to property name.
+     * @param string|null $getter   The getter method to use. Leave as null
+     *                              to default to PropertyAccessor logic.
+     * @param bool        $destruct The content should be used as array of variable
+     *                              names
      */
-    public function __construct(public ?string $name = null, public ?string $getter = null)
+    public function __construct(public ?string $name = null, public ?string $getter = null, public bool $destruct = false)
     {
     }
 }

src/TwigComponent/src/ComponentFactory.php

@@ -30,11 +30,12 @@ final class ComponentFactory
      * @param array<class-string, string> $classMap
      */
     public function __construct(
+        private ComponentTemplateFinderInterface $componentTemplateFinder,
         private ServiceLocator $components,
         private PropertyAccessorInterface $propertyAccessor,
         private EventDispatcherInterface $eventDispatcher,
         private array $config,
-        private array $classMap,
+        private array $classMap
     ) {
     }
 
@@ -43,6 +44,13 @@ public function metadataFor(string $name): ComponentMetadata
         $name = $this->classMap[$name] ?? $name;
 
         if (!$config = $this->config[$name] ?? null) {
+            if (($template = $this->componentTemplateFinder->findAnonymousComponentTemplate($name)) !== null) {
+                return new ComponentMetadata([
+                    'key' => $name,
+                    'template' => $template,
+                ]);
+            }
+
             $this->throwUnknownComponentException($name);
         }
 
@@ -124,6 +132,12 @@ private function mount(object $component, array &$data): void
             return;
         }
 
+        if ($component instanceof AnonymousComponent) {
+            $component->mount($data);
+
+            return;
+        }
+
         $parameters = [];
 
         foreach ($method->getParameters() as $refParameter) {
@@ -149,6 +163,10 @@ private function getComponent(string $name): object
         $name = $this->classMap[$name] ?? $name;
 
         if (!$this->components->has($name)) {
+            if ($this->isAnonymousComponent($name)) {
+                return new AnonymousComponent();
+            }
+
             $this->throwUnknownComponentException($name);
         }
 
@@ -189,11 +207,16 @@ private function postMount(object $component, array $data): array
         return $data;
     }
 
+    private function isAnonymousComponent(string $name): bool
+    {
+        return null !== $this->componentTemplateFinder->findAnonymousComponentTemplate($name);
+    }
+
     /**
      * @return never
      */
     private function throwUnknownComponentException(string $name): void
     {
-        throw new \InvalidArgumentException(sprintf('Unknown component "%s". The registered components are: %s', $name, implode(', ', array_keys($this->config))));
+        throw new \InvalidArgumentException(sprintf('Unknown component "%s". The registered components are: %s. And no matching anonymous component template was found', $name, implode(', ', array_keys($this->config))));
     }
 }

src/TwigComponent/src/ComponentRenderer.php

@@ -131,6 +131,12 @@ private function exposedVariables(object $component, bool $exposePublicProps): \
             /** @var ExposeInTemplate $attribute */
             $value = $attribute->getter ? $component->{rtrim($attribute->getter, '()')}() : $this->propertyAccessor->getValue($component, $property->name);
 
+            if ($attribute->destruct) {
+                foreach ($value as $key => $destructedValue) {
+                    yield $key => $destructedValue;
+                }
+            }
+
             yield $attribute->name ?? $property->name => $value;
         }
 
@@ -148,6 +154,14 @@ private function exposedVariables(object $component, bool $exposePublicProps): \
                 throw new \LogicException(sprintf('Cannot use %s on methods with required parameters (%s::%s).', ExposeInTemplate::class, $component::class, $method->name));
             }
 
+            if ($attribute->destruct) {
+                foreach ($component->{$method->name}() as $prop => $value) {
+                    yield $prop => $value;
+                }
+
+                return;
+            }
+
             yield $name => $component->{$method->name}();
         }
     }

src/TwigComponent/src/ComponentTemplateFinder.php

@@ -0,0 +1,49 @@
+<?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;
+
+use Twig\Environment;
+
+/**
+ * @author Matheo Daninos <[email protected]>
+ */
+final class ComponentTemplateFinder implements ComponentTemplateFinderInterface
+{
+    public function __construct(
+        private Environment $environment
+    ) {
+    }
+
+    public function findAnonymousComponentTemplate(string $name): ?string
+    {
+        $loader = $this->environment->getLoader();
+        $componentPath = rtrim(str_replace(':', '/', $name));
+
+        if ($loader->exists('components/'.$componentPath.'.html.twig')) {
+            return 'components/'.$componentPath.'.html.twig';
+        }
+
+        if ($loader->exists($componentPath.'.html.twig')) {
+            return $componentPath.'.html.twig';
+        }
+
+        if ($loader->exists('components/'.$componentPath)) {
+            return 'components/'.$componentPath;
+        }
+
+        if ($loader->exists($componentPath)) {
+            return $componentPath;
+        }
+
+        return null;
+    }
+}

src/TwigComponent/src/ComponentTemplateFinderInterface.php

@@ -0,0 +1,20 @@
+<?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;
+
+/**
+ * @author Matheo Daninos <[email protected]>
+ */
+interface ComponentTemplateFinderInterface
+{
+    public function findAnonymousComponentTemplate(string $name): ?string;
+}

src/TwigComponent/src/DependencyInjection/Compiler/TwigComponentPass.php

@@ -58,8 +58,8 @@ public function process(ContainerBuilder $container): void
         }
 
         $factoryDefinition = $container->findDefinition('ux.twig_component.component_factory');
-        $factoryDefinition->setArgument(0, ServiceLocatorTagPass::register($container, $componentReferences));
-        $factoryDefinition->setArgument(3, $componentConfig);
-        $factoryDefinition->setArgument(4, $componentClassMap);
+        $factoryDefinition->setArgument(1, ServiceLocatorTagPass::register($container, $componentReferences));
+        $factoryDefinition->setArgument(4, $componentConfig);
+        $factoryDefinition->setArgument(5, $componentClassMap);
     }
 }

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

@@ -22,6 +22,7 @@
 use Symfony\UX\TwigComponent\ComponentRenderer;
 use Symfony\UX\TwigComponent\ComponentRendererInterface;
 use Symfony\UX\TwigComponent\ComponentStack;
+use Symfony\UX\TwigComponent\ComponentTemplateFinder;
 use Symfony\UX\TwigComponent\DependencyInjection\Compiler\TwigComponentPass;
 use Symfony\UX\TwigComponent\Twig\ComponentExtension;
 use Symfony\UX\TwigComponent\Twig\ComponentLexer;
@@ -40,6 +41,14 @@ public function load(array $configs, ContainerBuilder $container): void
             throw new LogicException('The TwigBundle is not registered in your application. Try running "composer require symfony/twig-bundle".');
         }
 
+        $container->register('ux.twig_component.component_template_finder', ComponentTemplateFinder::class)
+            ->setArguments([
+                new Reference('twig'),
+            ])
+        ;
+
+        $container->setAlias(ComponentRendererInterface::class, 'ux.twig_component.component_renderer');
+
         $container->registerAttributeForAutoconfiguration(
             AsTwigComponent::class,
             static function (ChildDefinition $definition, AsTwigComponent $attribute) {
@@ -49,6 +58,7 @@ static function (ChildDefinition $definition, AsTwigComponent $attribute) {
 
         $container->register('ux.twig_component.component_factory', ComponentFactory::class)
             ->setArguments([
+                new Reference('ux.twig_component.component_template_finder'),
                 class_exists(AbstractArgument::class) ? new AbstractArgument(sprintf('Added in %s.', TwigComponentPass::class)) : null,
                 new Reference('property_accessor'),
                 new Reference('event_dispatcher'),
@@ -68,7 +78,7 @@ class_exists(AbstractArgument::class) ? new AbstractArgument(sprintf('Added in %
             ])
         ;
 
-        $container->setAlias(ComponentRendererInterface::class, 'ux.twig_component.component_renderer');
+        $container->register(ComponentTemplateFinder::class, 'ux.twig_component.component_template_finder');
 
         $container->register('ux.twig_component.twig.component_extension', ComponentExtension::class)
             ->addTag('twig.extension')

src/TwigComponent/src/Twig/ComponentExtension.php

@@ -49,6 +49,7 @@ public function getTokenParsers(): array
     {
         return [
             new ComponentTokenParser(fn () => $this->container->get(ComponentFactory::class)),
+            new PropsTokenParser(),
         ];
     }
 

src/TwigComponent/src/Twig/PropsNode.php

@@ -0,0 +1,54 @@
+<?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\Compiler;
+use Twig\Node\Node;
+
+/**
+ * @author Matheo Daninos <[email protected]>
+ *
+ * @internal
+ */
+class PropsNode extends Node
+{
+    public function __construct(array $propsNames, array $values, $lineno = 0, string $tag = null)
+    {
+        parent::__construct($values, ['names' => $propsNames], $lineno, $tag);
+    }
+
+    public function compile(Compiler $compiler): void
+    {
+        foreach ($this->getAttribute('names') as $name) {
+            $compiler
+                ->addDebugInfo($this)
+                ->write('if (!isset($context[\''.$name.'\'])) {')
+            ;
+
+            if (!$this->hasNode($name)) {
+                $compiler
+                    ->write('throw new \Twig\Error\RuntimeError("'.$name.' should be defined for component '.$this->getTemplateName().'");')
+                    ->write('}')
+                ;
+
+                continue;
+            }
+
+            $compiler
+                ->write('$context[\''.$name.'\'] = ')
+                ->subcompile($this->getNode($name))
+                ->raw(";\n")
+                ->write('}')
+            ;
+        }
+    }
+}

src/TwigComponent/src/Twig/PropsTokenParser.php

@@ -0,0 +1,55 @@
+<?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\Node\Node;
+use Twig\Token;
+use Twig\TokenParser\AbstractTokenParser;
+
+/**
+ * @author Matheo Daninos <[email protected]>
+ *
+ * @internal
+ */
+class PropsTokenParser extends AbstractTokenParser
+{
+    public function parse(Token $token): Node
+    {
+        $parser = $this->parser;
+        $stream = $parser->getStream();
+
+        $names = [];
+        $values = [];
+        while (!$stream->nextIf(Token::BLOCK_END_TYPE)) {
+            $name = $stream->expect(\Twig\Token::NAME_TYPE)->getValue();
+
+            if ($stream->nextIf(Token::OPERATOR_TYPE, '=')) {
+                $values[$name] = $parser->getExpressionParser()->parseExpression();
+            }
+
+            $names[] = $name;
+
+            if (!$stream->nextIf(Token::PUNCTUATION_TYPE)) {
+                break;
+            }
+        }
+
+        $stream->expect(\Twig\Token::BLOCK_END_TYPE);
+
+        return new PropsNode($names, $values, $token->getLine(), $token->getValue());
+    }
+
+    public function getTag(): string
+    {
+        return 'props';
+    }
+}

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

@@ -0,0 +1 @@
+<twig:Button label='Click me'/>