[TwigComponent] Add support for AttributeValueInterface from twig/html-extra:^3.24.0 in ComponentAttributes

src/TwigComponent/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.35
+
+Add support for `AttributeValueInterface` from `twig/html-extra:^3.24.0` in `ComponentAttributes`
+
 ## 2.33
 
 - Extended support for the `index.html.twig` template fallback when resolving namespaced anonymous components

src/TwigComponent/composer.json

@@ -41,7 +41,9 @@
         "symfony/phpunit-bridge": "^6.0|^7.0|^8.0",
         "symfony/stimulus-bundle": "^2.9.1",
         "symfony/twig-bundle": "^5.4|^6.0|^7.0|^8.0",
-        "symfony/webpack-encore-bundle": "^1.15|^2.3.0"
+        "symfony/webpack-encore-bundle": "^1.15|^2.3.0",
+        "twig/extra-bundle": "^3.10.3",
+        "twig/html-extra": "^3.10.3"
     },
     "conflict": {
         "symfony/config": "<5.4.0"

src/TwigComponent/src/ComponentAttributes.php

@@ -13,6 +13,7 @@
 
 use Symfony\UX\StimulusBundle\Dto\StimulusAttributes;
 use Symfony\WebpackEncoreBundle\Dto\AbstractStimulusDto;
+use Twig\Extra\Html\HtmlAttr\AttributeValueInterface;
 use Twig\Runtime\EscaperRuntime;
 
 /**
@@ -65,6 +66,10 @@ public function __toString(): string
                 $value = true;
             }
 
+            if ($value instanceof AttributeValueInterface) {
+                $value = $value->getValue();
+            }
+
             if (!\is_scalar($value) && !($value instanceof \Stringable)) {
                 throw new \LogicException(\sprintf('A "%s" prop was passed when creating the component. No matching "%s" property or mount() argument was found, so we attempted to use this as an HTML attribute. But, the value is not a scalar (it\'s a "%s"). Did you mean to pass this to your component or is there a typo on its name?', $key, $key, get_debug_type($value)));
             }

src/TwigComponent/tests/Fixtures/Kernel.php

@@ -20,6 +20,7 @@
 use Symfony\UX\TwigComponent\Tests\Fixtures\Bundle\AcmeBundle\AcmeBundle;
 use Symfony\UX\TwigComponent\Tests\Fixtures\Component\ComponentB;
 use Symfony\UX\TwigComponent\TwigComponentBundle;
+use Twig\Extra\TwigExtraBundle\TwigExtraBundle;
 
 /**
  * @author Kevin Bond <kevinbond@gmail.com>
@@ -33,6 +34,7 @@ public function registerBundles(): iterable
         yield new FrameworkBundle();
         yield new TwigBundle();
         yield new TwigComponentBundle();
+        yield new TwigExtraBundle();
         yield new AcmeBundle();
     }
 

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

@@ -0,0 +1,15 @@
+{%- set dialog_trigger_attrs = {
+    'data-action': 'click->dialog#open'|html_attr_type('sst'),
+    'data-no-html-attr-type': 'dialog',
+    'data-html-attr-type-cst': 'dialog'|html_attr_type('cst'),
+} -%}
+{%- set tooltip_trigger_attrs = {
+    'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide'|html_attr_type('sst'),
+    'data-no-html-attr-type': 'trigger',
+    'data-html-attr-type-cst': 'trigger'|html_attr_type('cst'),
+} -%}
+
+<twig:Button
+    {{ ...{}|html_attr_merge(dialog_trigger_attrs, tooltip_trigger_attrs) }}
+    label="A beautiful button"
+/>

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -16,6 +16,7 @@
 use Symfony\UX\TwigComponent\Tests\Fixtures\User;
 use Twig\Environment;
 use Twig\Error\RuntimeError;
+use Twig\Extra\Html\HtmlAttr\AttributeValueInterface;
 
 /**
  * @author Kevin Bond <kevinbond@gmail.com>
@@ -624,6 +625,21 @@ public function testAttributesDoNotLeakToTemplateContext()
         $this->assertStringContainsString('data_foo-var-defined=no', $output);
     }
 
+    public function testPropsWithHtmlAttrMergeFilter()
+    {
+        if (!interface_exists(AttributeValueInterface::class)) {
+            $this->markTestSkipped('Test requires Twig HTML extra >= 3.24.');
+        }
+
+        $output = self::getContainer()->get(Environment::class)->render('html_attr_merge.html.twig');
+
+        $this->assertStringContainsString('class="primary"', $output);
+        $this->assertStringContainsString('data-action="click-&gt;dialog#open mouseenter-&gt;tooltip#show mouseleave-&gt;tooltip#hide focus-&gt;tooltip#show blur-&gt;tooltip#hide"', $output);
+        // When no HTML Attr Type has been defined, the very last takes precedence
+        $this->assertStringContainsString('data-no-html-attr-type="trigger"', $output);
+        $this->assertStringContainsString('data-html-attr-type-cst="dialog, trigger"', $output);
+    }
+
     private function renderComponent(string $name, array $data = []): string
     {
         return self::getContainer()->get(Environment::class)->render('render_component.html.twig', [