bug #534 [Twig] Allow more flexible twig expressions as component attributes (veewee)

This PR was merged into the 2.x branch.

Discussion
----------

[Twig] Allow more flexible twig expressions as component attributes

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

We noticed it is only possible to pass an ArrayExpression as twig component attributes.
This is not convenient of you want to e.g. merge 2 arrays in twig.

Example Use-case: if you want to create a custom form template that consists out of twig components, it is not possible to merge the form attributes into the attributes of your twig component.

```twig
{%- block button_widget -%}
    {% component 'atoms:button' with attrs|merge({theme: 'primary'}) %}
        {% block children %}
            {{ label }}
        {% endblock children %}

    {% endcomponent %}
{%- endblock button_widget -%}

```

Commits
-------

9ef4c5d Allow more flexible twig expressions as component attributes

Author: weaverryan

src/TwigComponent/src/Twig/ComponentNode.php

@@ -4,7 +4,7 @@
 
 use Twig\Compiler;
 use Twig\Node\EmbedNode;
-use Twig\Node\Expression\ArrayExpression;
+use Twig\Node\Expression\AbstractExpression;
 
 /**
  * @author Fabien Potencier <[email protected]>
@@ -16,7 +16,7 @@
  */
 final class ComponentNode extends EmbedNode
 {
-    public function __construct(string $component, string $template, int $index, ArrayExpression $variables, bool $only, int $lineno, string $tag)
+    public function __construct(string $component, string $template, int $index, AbstractExpression $variables, bool $only, int $lineno, string $tag)
     {
         parent::__construct($template, $index, $variables, $only, false, $lineno, $tag);
 

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

@@ -0,0 +1,7 @@
+{% set attributes1 = {propA: 'A1', propB: 'B1' } %}
+{% set attributes3 = {propA: 'A3', propB: 'B3' } %}
+
+{{ component('component_a', attributes1) }}
+{{ component('component_a', {propA: 'A2', propB: 'B0' }|merge({propB: 'B2'})) }}
+{% component 'component_a' with attributes3 %}{% endcomponent %}
+{% component 'component_a' with ({propA: 'A4', propB: 'B0' })|merge({propB: 'B4'}) %}{% endcomponent %}

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

@@ -0,0 +1,2 @@
+{% set attributes = 'wrong' %}
+{{ component('component_a', attributes) }}

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -44,6 +44,27 @@ public function testCanRenderTheSameComponentMultipleTimes(): void
         $this->assertStringContainsString('service: service a value', $output);
     }
 
+    public function testCanRenderComponentWithMoreAdvancedTwigExpressions(): void
+    {
+        $output = self::getContainer()->get(Environment::class)->render('flexible_component_attributes.html.twig');
+
+        $this->assertStringContainsString('propA: A1', $output);
+        $this->assertStringContainsString('propB: B1', $output);
+        $this->assertStringContainsString('propA: A2', $output);
+        $this->assertStringContainsString('propB: B2', $output);
+        $this->assertStringContainsString('propA: A3', $output);
+        $this->assertStringContainsString('propB: B3', $output);
+        $this->assertStringContainsString('propA: A4', $output);
+        $this->assertStringContainsString('propB: B4', $output);
+        $this->assertStringContainsString('service: service a value', $output);
+    }
+
+    public function testCanNotRenderComponentWithInvalidExpressions(): void
+    {
+        $this->expectException(\TypeError::class);
+        self::getContainer()->get(Environment::class)->render('invalid_flexible_component.html.twig');
+    }
+
     public function testCanCustomizeTemplateWithAttribute(): void
     {
         $output = $this->renderComponent('component_b', ['value' => 'b value 1']);