refactor attributes api

Author: kbond

src/TwigComponent/src/ComponentAttributes.php

@@ -46,15 +46,24 @@ public function all(): array
         return $this->attributes;
     }
 
+    /**
+     * Set default attributes. These are used if this object doesn't
+     * define them. If it does, they are replaced except for "class".
+     * For "class", these are prepended.
+     */
     public function merge(array $with): self
     {
         foreach ($this->attributes as $key => $value) {
-            $with[$key] = isset($with[$key]) ? "{$with[$key]} {$value}" : $value;
+            // "class" is special so we prepend defaults
+            $with[$key] = isset($with[$key]) && 'class' === $key ? "{$with[$key]} {$value}" : $value;
         }
 
         return new self($with);
     }
 
+    /**
+     * Extract only these attributes.
+     */
     public function only(string ...$keys): self
     {
         $attributes = [];
@@ -68,6 +77,9 @@ public function only(string ...$keys): self
         return new self($attributes);
     }
 
+    /**
+     * Extract all but these attributes.
+     */
     public function without(string ...$keys): self
     {
         $clone = clone $this;
@@ -78,23 +90,4 @@ public function without(string ...$keys): self
 
         return $clone;
     }
-
-    /**
-     * @param array<string, string> $attributes
-     */
-    public function defaults(array $attributes): self
-    {
-        $clone = $this;
-
-        foreach ($attributes as $attribute => $value) {
-            $clone->attributes[$attribute] = $clone->attributes[$attribute] ?? $value;
-        }
-
-        return $clone;
-    }
-
-    public function default(string $attribute, string $value): self
-    {
-        return $this->defaults([$attribute => $value]);
-    }
 }

src/TwigComponent/src/Resources/doc/index.rst

@@ -436,6 +436,8 @@ To use, add the HasAttributesTrait to your component:
         use HasAttributesTrait;
     }
 
+Then render the attributes on the root element:
+
 .. code-block:: twig
 
     {# templates/components/my_component.html.twig #}
@@ -455,50 +457,30 @@ When rendering the component, you can pass an array of html attributes to add:
       My Component!
     </div>
 
-Defaults
-~~~~~~~~
+Defaults & Merging
+~~~~~~~~~~~~~~~~~~
 
-Set default attributes that can be fully overridden by passed attributes:
+In your component template, you can set defaults that are merged with
+passed attributes. The passed attributes override the default with
+the exception of *class*. For class, the defaults are prepended:
 
 .. code-block:: twig
 
     {# templates/components/my_component.html.twig #}
 
-    <div{{ attributes.defaults({ class: 'bar' }) }}>
+    <button{{ attributes.defaults({ class: 'bar', type: 'button' }) }}>
       My Component!
-    </div>
+    </button>
 
     {# render component #}
     {{ component('my_component', { style: 'color:red' }) }}
-    {{ component('my_component', { class: 'foo', style: 'color:red' }) }}
+    {{ component('my_component', { class: 'foo', type: 'submit' }) }}
 
     {# renders as: #}
     <div class="bar" style="color:red">
       My Component!
     </div>
-    <div class="foo" style="color:red">
-      My Component!
-    </div>
-
-Merging Defaults
-~~~~~~~~~~~~~~~~
-
-Set defaults but allow them to be appended to by passing these values to
-the ``component()`` function:
-
-.. code-block:: twig
-
-    {# templates/components/my_component.html.twig #}
-
-    <div{{ attributes.merge({ class: 'bar' }) }}>
-      My Component!
-    </div>
-
-    {# render component #}
-    {{ component('my_component', { class: 'foo', style: 'color:red' }) }}
-
-    {# renders as: #}
-    <div class="bar foo" style="color:red">
+    <div class="bar foo" type="submit">
       My Component!
     </div>
 

src/TwigComponent/tests/Fixture/templates/components/with_attributes.html.twig

@@ -1 +1 @@
-<div{{ attributes.merge({ class: 'foo' }) }}>Component Content ({{ prop }})</div>
+<button{{ attributes.merge({ class: 'foo', type: 'button' }) }}>Component Content ({{ prop }})</button>

src/TwigComponent/tests/Fixture/templates/template_a.html.twig

@@ -1,3 +1,3 @@
 {{ component('component_a', { propA: 'prop a value', propB: 'prop b value' }) }}
 {{ component('with_attributes', { prop: 'prop value 1', class: 'bar', style: 'color:red;' }) }}
-{{ component('with_attributes', { prop: 'prop value 2', attributes: { class: 'baz' }, style: 'color:red;' }) }}
+{{ component('with_attributes', { prop: 'prop value 2', attributes: { class: 'baz' }, type: 'submit', style: 'color:red;' }) }}

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -62,8 +62,8 @@ public function testCanRenderComponentWithAttributes(): void
         $output = self::getContainer()->get(Environment::class)->render('template_a.html.twig');
 
         $this->assertStringContainsString('Component Content (prop value 1)', $output);
-        $this->assertStringContainsString('<div class="foo bar" style="color:red;">', $output);
+        $this->assertStringContainsString('<button class="foo bar" type="button" style="color:red;">', $output);
         $this->assertStringContainsString('Component Content (prop value 2)', $output);
-        $this->assertStringContainsString('<div class="foo baz" style="color:red;">', $output);
+        $this->assertStringContainsString('<button class="foo baz" type="submit" style="color:red;">', $output);
     }
 }

src/TwigComponent/tests/Unit/ComponentAttributesTest.php

@@ -26,32 +26,20 @@ public function testCanConvertToString(): void
         $this->assertSame(' class="foo" style="color:black;"', (string) $attributes);
     }
 
-    public function testCanSetDefaults(): void
-    {
-        $attributes = new ComponentAttributes(['class' => 'foo', 'style' => 'color:black;']);
-
-        $this->assertSame(
-            ['class' => 'foo', 'style' => 'color:black;'],
-            $attributes->default('class', 'bar')->all()
-        );
-        $this->assertSame(
-            ['class' => 'foo', 'style' => 'color:black;', 'id' => '1'],
-            $attributes->defaults(['id' => '1'])->all()
-        );
-    }
-
     public function testCanMerge(): void
     {
         $attributes = new ComponentAttributes(['class' => 'foo', 'style' => 'color:black;']);
 
         $this->assertSame(
-            ['class' => 'bar foo', 'style' => 'font-size: 10; color:black;'],
+            ['class' => 'bar foo', 'style' => 'color:black;'],
             $attributes->merge(['class' => 'bar', 'style' => 'font-size: 10;'])->all()
         );
         $this->assertSame(
-            ' class="bar foo" style="font-size: 10; color:black;"',
+            ' class="bar foo" style="color:black;"',
             (string) $attributes->merge(['class' => 'bar', 'style' => 'font-size: 10;'])
         );
+
+        $this->assertSame(['class' => 'foo'], (new ComponentAttributes([]))->merge(['class' => 'foo'])->all());
     }
 
     public function testCanGetOnly(): void