feat(twig): Allow nested attributes

kbond · kbond · commit 35e65c71843b · 2024-01-18T16:16:37.000-05:00
diff --git a/src/TwigComponent/CHANGELOG.md b/src/TwigComponent/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## Unreleased
+
+-   Added nested attribute support.
+
 ## 2.13.0
 
 -   [BC BREAK] Add component metadata to `PreMountEvent` and `PostMountEvent`
diff --git a/src/TwigComponent/src/ComponentAttributes.php b/src/TwigComponent/src/ComponentAttributes.php
@@ -21,6 +21,8 @@
  */
 final class ComponentAttributes
 {
+    private const NESTED_REGEX = '#^([\w-]+):(.+)$#';
+
     /**
      * @param array<string, string|bool> $attributes
      */
@@ -33,6 +35,10 @@ public function __toString(): string
         return array_reduce(
             array_keys($this->attributes),
             function (string $carry, string $key) {
+                if (preg_match(self::NESTED_REGEX, $key)) {
+                    return $carry;
+                }
+
                 $value = $this->attributes[$key];
 
                 if (!\is_scalar($value) && null !== $value) {
@@ -157,4 +163,17 @@ public function remove($key): self
 
         return new self($attributes);
     }
+
+    public function nested(string $namespace): self
+    {
+        $attributes = [];
+
+        foreach ($this->attributes as $key => $value) {
+            if (preg_match(self::NESTED_REGEX, $key, $matches) && $namespace === $matches[1]) {
+                $attributes[$matches[2]] = $value;
+            }
+        }
+
+        return new self($attributes);
+    }
 }
diff --git a/src/TwigComponent/tests/Fixtures/templates/components/NestedAttributes.html.twig b/src/TwigComponent/tests/Fixtures/templates/components/NestedAttributes.html.twig
@@ -0,0 +1,5 @@
+<main{{ attributes }}>
+    <div{{ attributes.nested('title') }}>
+        <span{{ attributes.nested('title').nested('span') }}>title</span>
+    </div>
+</main>
diff --git a/src/TwigComponent/tests/Fixtures/templates/html_syntax_nested_attributes.html.twig b/src/TwigComponent/tests/Fixtures/templates/html_syntax_nested_attributes.html.twig
@@ -0,0 +1 @@
+<twig:NestedAttributes />
diff --git a/src/TwigComponent/tests/Integration/ComponentExtensionTest.php b/src/TwigComponent/tests/Integration/ComponentExtensionTest.php
@@ -216,6 +216,76 @@ public function testComponentPropsWithTrailingComma(): void
         $this->assertStringContainsString('Hello FOO, 123, and 456', $output);
     }
 
+    public function testRenderingComponentWithNestedAttributes(): void
+    {
+        $output = $this->renderComponent('NestedAttributes');
+
+        $this->assertSame(
+            <<<HTML
+            <main>
+                <div>
+                    <span>title</span>
+                </div>
+            </main>
+            HTML,
+            trim($output)
+        );
+
+        $output = $this->renderComponent('NestedAttributes', [
+            'class' => 'foo',
+            'title:class' => 'bar',
+            'title:span:class' => 'baz',
+        ]);
+
+        $this->assertSame(
+            <<<HTML
+            <main class="foo">
+                <div class="bar">
+                    <span class="baz">title</span>
+                </div>
+            </main>
+            HTML,
+            trim($output)
+        );
+    }
+
+    public function testRenderingHtmlSyntaxComponentWithNestedAttributes(): void
+    {
+        $output = self::getContainer()
+            ->get(Environment::class)
+            ->createTemplate('<twig:NestedAttributes />')
+            ->render()
+        ;
+
+        $this->assertSame(
+            <<<HTML
+            <main>
+                <div>
+                    <span>title</span>
+                </div>
+            </main>
+            HTML,
+            trim($output)
+        );
+
+        $output = self::getContainer()
+            ->get(Environment::class)
+            ->createTemplate('<twig:NestedAttributes class="foo" title:class="bar" title:span:class="baz" />')
+            ->render()
+        ;
+
+        $this->assertSame(
+            <<<HTML
+            <main class="foo">
+                <div class="bar">
+                    <span class="baz">title</span>
+                </div>
+            </main>
+            HTML,
+            trim($output)
+        );
+    }
+
     private function renderComponent(string $name, array $data = []): string
     {
         return self::getContainer()->get(Environment::class)->render('render_component.html.twig', [
diff --git a/src/TwigComponent/tests/Unit/ComponentAttributesTest.php b/src/TwigComponent/tests/Unit/ComponentAttributesTest.php
@@ -191,4 +191,18 @@ public function testNullBehaviour(): void
         $this->assertSame(['disabled' => null], $attributes->all());
         $this->assertSame(' disabled', (string) $attributes);
     }
+
+    public function testNestedAttributes(): void
+    {
+        $attributes = new ComponentAttributes([
+            'class' => 'foo',
+            'title:class' => 'bar',
+            'title:span:class' => 'baz',
+        ]);
+
+        $this->assertSame(' class="foo"', (string) $attributes);
+        $this->assertSame(' class="bar"', (string) $attributes->nested('title'));
+        $this->assertSame(' class="baz"', (string) $attributes->nested('title')->nested('span'));
+        $this->assertSame('', (string) $attributes->nested('invalid'));
+    }
 }
