[TwigComponent] attribute support

Author: kbond

src/TwigComponent/src/ComponentAttributes.php

@@ -0,0 +1,88 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent;
+
+/**
+ * @author Kevin Bond <kevinbond@gmail.com>
+ *
+ * @experimental
+ */
+final class ComponentAttributes
+{
+    /**
+     * @param array<string, string> $attributes
+     */
+    public function __construct(public array $attributes)
+    {
+    }
+
+    public function __toString(): string
+    {
+        return \array_reduce(
+            \array_keys($this->attributes),
+            fn(string $carry, string $key) => \sprintf('%s %s="%s"', $carry, $key, $this->attributes[$key]),
+            ''
+        );
+    }
+
+    public function merge(array $with): self
+    {
+        foreach ($this->attributes as $key => $value) {
+            $with[$key] = isset($with[$key]) ? "{$with[$key]} {$value}" : $value;
+        }
+
+        return new self($with);
+    }
+
+    public function only(string ...$keys): self
+    {
+        $attributes = [];
+
+        foreach ($this->attributes as $key => $value) {
+            if (in_array($key, $keys, true)) {
+                $attributes[$key] = $value;
+            }
+        }
+
+        return new self($attributes);
+    }
+
+    public function without(string ...$keys): self
+    {
+        $clone = clone $this;
+
+        foreach ($keys as $key) {
+            unset($clone->attributes[$key]);
+        }
+
+        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/ComponentContext.php

@@ -0,0 +1,24 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent;
+
+/**
+ * @author Kevin Bond <kevinbond@gmail.com>
+ *
+ * @experimental
+ */
+final class ComponentContext
+{
+    public function __construct(public object $component, public ComponentAttributes $attributes)
+    {
+    }
+}

src/TwigComponent/src/ComponentFactory.php

@@ -78,7 +78,7 @@ public function configFor($component, string $name = null): array
     /**
      * Creates the component and "mounts" it with the passed data.
      */
-    public function create(string $name, array $data = []): object
+    public function create(string $name, array $data = []): ComponentContext
     {
         $component = $this->getComponent($name);
         $data = $this->preMount($component, $data);
@@ -88,13 +88,14 @@ public function create(string $name, array $data = []): object
         // set data that wasn't set in mount on the component directly
         foreach ($data as $property => $value) {
             if (!$this->propertyAccessor->isWritable($component, $property)) {
-                throw new \LogicException(sprintf('Unable to write "%s" to component "%s". Make sure this is a writable property or create a mount() with a $%s argument.', $property, \get_class($component), $property));
+                continue;
             }
 
             $this->propertyAccessor->setValue($component, $property, $value);
+            unset($data[$property]);
         }
 
-        return $component;
+        return new ComponentContext($component, new ComponentAttributes($data));
     }
 
     /**

src/TwigComponent/src/ComponentRenderer.php

@@ -27,9 +27,12 @@ public function __construct(Environment $twig)
         $this->twig = $twig;
     }
 
-    public function render(object $component, string $template): string
+    public function render(ComponentContext $context, string $template): string
     {
         // TODO: Self-Rendering components?
-        return $this->twig->render($template, ['this' => $component]);
+        return $this->twig->render($template, [
+            'this' => $context->component,
+            'attributes' => $context->attributes,
+        ]);
     }
 }

src/TwigComponent/src/Twig/ComponentExtension.php

@@ -24,7 +24,11 @@ final class ComponentExtension extends AbstractExtension
     public function getFunctions(): array
     {
         return [
-            new TwigFunction('component', [ComponentRuntime::class, 'render'], ['is_safe' => ['all']]),
+            new TwigFunction(
+                'component',
+                [ComponentRuntime::class, 'render'],
+                ['is_safe' => ['all'], 'needs_environment' => true]
+            ),
         ];
     }
 }

src/TwigComponent/src/Twig/ComponentRuntime.php

@@ -11,8 +11,11 @@
 
 namespace Symfony\UX\TwigComponent\Twig;
 
+use Symfony\UX\TwigComponent\ComponentAttributes;
 use Symfony\UX\TwigComponent\ComponentFactory;
 use Symfony\UX\TwigComponent\ComponentRenderer;
+use Twig\Environment;
+use Twig\Extension\EscaperExtension;
 
 /**
  * @author Kevin Bond <kevinbond@gmail.com>
@@ -23,15 +26,22 @@ final class ComponentRuntime
 {
     private ComponentFactory $componentFactory;
     private ComponentRenderer $componentRenderer;
+    private bool $safeClassesRegistered = false;
 
     public function __construct(ComponentFactory $componentFactory, ComponentRenderer $componentRenderer)
     {
         $this->componentFactory = $componentFactory;
         $this->componentRenderer = $componentRenderer;
     }
 
-    public function render(string $name, array $props = []): string
+    public function render(Environment $twig, string $name, array $props = []): string
     {
+        if (!$this->safeClassesRegistered) {
+            $twig->getExtension(EscaperExtension::class)->addSafeClass(ComponentAttributes::class, ['html']);
+
+            $this->safeClassesRegistered = true;
+        }
+
         return $this->componentRenderer->render(
             $this->componentFactory->create($name, $props),
             $this->componentFactory->configFor($name)['template']