props tag remove props from attributes

Author: matheo

src/TwigComponent/src/ComponentTemplateFinder.php renamed to src/TwigComponent/src/AnonymousAnonymousComponentTemplateParser.php

@@ -16,7 +16,7 @@
 /**
  * @author Matheo Daninos <[email protected]>
  */
-final class ComponentTemplateFinder implements ComponentTemplateFinderInterface
+final class AnonymousAnonymousComponentTemplateParser implements AnonymousComponentTemplateParserInterface
 {
     public function __construct(
         private Environment $environment
@@ -46,4 +46,23 @@ public function findAnonymousComponentTemplate(string $name): ?string
 
         return null;
     }
+
+    public function findComponentProps(string $name): array
+    {
+        $loader = $this->environment->getLoader();
+        $templateContent = $loader->getSourceContext($this->findAnonymousComponentTemplate($name))->getCode();
+
+        $pattern = '/{%\s*props\s*(.*?)\s*%}/';
+        preg_match($pattern, $templateContent, $matches);
+
+        if (isset($matches[1])) {
+            $props = $matches[1];
+            $props = preg_replace('/\s/', '', $props);
+            $propsArray = explode(',', $props);
+
+            return array_map(fn (string $propName) => strtok($propName, '='), $propsArray);
+        }
+
+        return [];
+    }
 }

src/TwigComponent/src/AnonymousComponent.php

@@ -22,8 +22,16 @@ final class AnonymousComponent
 {
     private array $props;
 
-    public function mount($props = []): void
+    public function mount(&$data = [], $propNames = []): void
     {
+        $props = [];
+        foreach ($propNames as $propName) {
+            if (isset($data[$propName])) {
+                $props[$propName] = $data[$propName];
+                unset($data[$propName]);
+            }
+        }
+
         $this->props = $props;
     }
 

src/TwigComponent/src/ComponentTemplateFinderInterface.php renamed to src/TwigComponent/src/AnonymousComponentTemplateParserInterface.php

@@ -14,7 +14,12 @@
 /**
  * @author Matheo Daninos <[email protected]>
  */
-interface ComponentTemplateFinderInterface
+interface AnonymousComponentTemplateParserInterface
 {
     public function findAnonymousComponentTemplate(string $name): ?string;
+
+    /**
+     * @return array<string>
+     */
+    public function findComponentProps(string $name): array;
 }

src/TwigComponent/src/ComponentFactory.php

@@ -30,7 +30,7 @@ final class ComponentFactory
      * @param array<class-string, string> $classMap
      */
     public function __construct(
-        private ComponentTemplateFinderInterface $componentTemplateFinder,
+        private AnonymousComponentTemplateParserInterface $componentTemplateFinder,
         private ServiceLocator $components,
         private PropertyAccessorInterface $propertyAccessor,
         private EventDispatcherInterface $eventDispatcher,
@@ -77,7 +77,7 @@ public function mountFromObject(object $component, array $data, ComponentMetadat
         $originalData = $data;
         $data = $this->preMount($component, $data);
 
-        $this->mount($component, $data);
+        $this->mount($component, $data, $componentMetadata);
 
         // set data that wasn't set in mount on the component directly
         foreach ($data as $property => $value) {
@@ -103,6 +103,10 @@ public function mountFromObject(object $component, array $data, ComponentMetadat
             }
 
             $data[$key] = $value;
+
+            if (!\is_scalar($value) && null !== $value) {
+                throw new \LogicException(sprintf('A "%s" prop was passed when creating the "%s" 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, $componentMetadata->getName(), $key, get_debug_type($value)));
+            }
         }
 
         return new MountedComponent(
@@ -121,7 +125,7 @@ public function get(string $name): object
         return $this->getComponent($name);
     }
 
-    private function mount(object $component, array &$data): void
+    private function mount(object $component, array &$data, ComponentMetadata $metadata): void
     {
         try {
             $method = (new \ReflectionClass($component))->getMethod('mount');
@@ -131,7 +135,7 @@ private function mount(object $component, array &$data): void
         }
 
         if ($component instanceof AnonymousComponent) {
-            $component->mount($data);
+            $component->mount($data, $this->componentTemplateFinder->findComponentProps($metadata->getTemplate()));
 
             return;
         }

src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php

@@ -17,12 +17,12 @@
 use Symfony\Component\DependencyInjection\Exception\LogicException;
 use Symfony\Component\DependencyInjection\Extension\Extension;
 use Symfony\Component\DependencyInjection\Reference;
+use Symfony\UX\TwigComponent\AnonymousAnonymousComponentTemplateParser;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 use Symfony\UX\TwigComponent\ComponentFactory;
 use Symfony\UX\TwigComponent\ComponentRenderer;
 use Symfony\UX\TwigComponent\ComponentRendererInterface;
 use Symfony\UX\TwigComponent\ComponentStack;
-use Symfony\UX\TwigComponent\ComponentTemplateFinder;
 use Symfony\UX\TwigComponent\DependencyInjection\Compiler\TwigComponentPass;
 use Symfony\UX\TwigComponent\Twig\ComponentExtension;
 use Symfony\UX\TwigComponent\Twig\ComponentLexer;
@@ -41,7 +41,7 @@ public function load(array $configs, ContainerBuilder $container): void
             throw new LogicException('The TwigBundle is not registered in your application. Try running "composer require symfony/twig-bundle".');
         }
 
-        $container->register('ux.twig_component.component_template_finder', ComponentTemplateFinder::class)
+        $container->register('ux.twig_component.component_template_finder', AnonymousAnonymousComponentTemplateParser::class)
             ->setArguments([
                 new Reference('twig'),
             ])
@@ -78,7 +78,7 @@ class_exists(AbstractArgument::class) ? new AbstractArgument(sprintf('Added in %
             ])
         ;
 
-        $container->register(ComponentTemplateFinder::class, 'ux.twig_component.component_template_finder');
+        $container->register(AnonymousAnonymousComponentTemplateParser::class, 'ux.twig_component.component_template_finder');
 
         $container->register('ux.twig_component.twig.component_extension', ComponentExtension::class)
             ->addTag('twig.extension')

src/TwigComponent/tests/Fixtures/templates/components/UserCard.html.twig

@@ -1,4 +1,6 @@
-<div class='user-card'>
+{% props user %}
+
+<div {{ attributes }} class='user-card'>
     <p>{{ user.name }}</p>
     <p>{{ user.email }}</p>
 </div>