feature #589 [Twig] Add a strategy for adding a Stimulus controller to a Twig component (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Twig] Add a strategy for adding a Stimulus controller to a Twig component

…onent root element

| Q             | A
| ------------- | ---
| Bug fix?      | yes-ish
| New feature?  | yes
| Tickets       | Fix #527
| License       | MIT

Hi!

This allows adding a custom Stimulus controller to the root element of a component. The syntax is:

```
<div {{ attributes.add(stimulus_controller('my-controller', { someValue: 'foo' })) }}>
```

This is a compromise of having a nice syntax vs not duplicating code. The `attributes.add()` method is designed to work specifically with the `stimulus_*` functions, so it's name is kinda funny. But it feels way better than something like `attributes->stimulusController(stimulus_controller())`. Just doing `attributes.stimulusController('my-controller')` isn't possible at the moment, because it would require us to create a `StimulusControllersDto` and that, unfortunately, requires a Twig Environment for escaping purposes.

Cheers!

Commits
-------

2d2a137 [Twig] Add a strategy for adding a Stimulus controller to a Twig component

Author: weaverryan

src/LiveComponent/doc/index.rst

@@ -476,6 +476,15 @@ The following hooks are available (along with the arguments that are passed):
 * ``loading.state:finished`` args ``(element: HTMLElement)``
 * ``model:set`` args ``(model: string, value: any, component: Component)``
 
+Adding a Stimulus Controller to your Component Root Element
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+To add a custom Stimulus controller to your root component element:
+
+.. code-block:: twig
+
+    <div {{ attributes.add(stimulus_controller('my-controller', { someValue: 'foo' })) }}>
+
 Loading States
 --------------
 

src/TwigComponent/composer.json

@@ -35,7 +35,8 @@
     "require-dev": {
         "symfony/framework-bundle": "^5.4|^6.0",
         "symfony/phpunit-bridge": "^6.0",
-        "symfony/twig-bundle": "^5.4|^6.0"
+        "symfony/twig-bundle": "^5.4|^6.0",
+        "symfony/webpack-encore-bundle": "^1.15"
     },
     "conflict": {
         "symfony/config": "<5.4.0"

src/TwigComponent/doc/index.rst

@@ -551,6 +551,12 @@ Set an attribute's value to ``null`` to exclude the value when rendering:
     {# renders as: #}
     <input type="text" value="" autofocus/>
 
+To add a custom Stimulus controller to your root component element:
+
+.. code-block:: twig
+
+    <div {{ attributes.add(stimulus_controller('my-controller', { someValue: 'foo' })) }}>
+
 .. note::
 
     You can adjust the attributes variable exposed in your template::

src/TwigComponent/src/ComponentAttributes.php

@@ -11,9 +11,10 @@
 
 namespace Symfony\UX\TwigComponent;
 
+use Symfony\WebpackEncoreBundle\Dto\AbstractStimulusDto;
+
 /**
  * @author Kevin Bond <[email protected]>
-
  *
  * @immutable
  */
@@ -94,4 +95,21 @@ public function without(string ...$keys): self
 
         return $clone;
     }
+
+    public function add(AbstractStimulusDto $stimulusDto): self
+    {
+        $controllersAttributes = $stimulusDto->toArray();
+        $attributes = $this->attributes;
+
+        $attributes['data-controller'] = implode(' ', array_merge(
+            explode(' ', $attributes['data-controller']),
+            explode(' ', $controllersAttributes['data-controller'] ?? [])
+        ));
+        unset($controllersAttributes['data-controller']);
+
+        $clone = new self($attributes);
+
+        // add the remaining attributes for values/classes
+        return $clone->defaults($controllersAttributes);
+    }
 }

src/TwigComponent/tests/Unit/ComponentAttributesTest.php

@@ -13,6 +13,7 @@
 
 use PHPUnit\Framework\TestCase;
 use Symfony\UX\TwigComponent\ComponentAttributes;
+use Symfony\WebpackEncoreBundle\Dto\AbstractStimulusDto;
 
 /**
  * @author Kevin Bond <[email protected]>
@@ -60,4 +61,30 @@ public function testCanGetWithout(): void
 
         $this->assertSame(['class' => 'foo'], $attributes->without('style')->all());
     }
+
+    public function testCanAddStimulusController(): void
+    {
+        $attributes = new ComponentAttributes([
+            'class' => 'foo',
+            'data-controller' => 'live',
+            'data-live-data-value' => '{}',
+        ]);
+
+        $controllerDto = $this->createMock(AbstractStimulusDto::class);
+        $controllerDto->expects(self::once())
+            ->method('toArray')
+            ->willReturn([
+                'data-controller' => 'foo bar',
+                'data-foo-name-value' => 'ryan',
+            ]);
+
+        $attributes = $attributes->add($controllerDto);
+
+        $this->assertEquals([
+            'class' => 'foo',
+            'data-controller' => 'live foo bar',
+            'data-live-data-value' => '{}',
+            'data-foo-name-value' => 'ryan',
+        ], $attributes->all());
+    }
 }