[Live] Adding nicer validation layer + a few other small fixes

Author: fullstackdeveloperwebapp

src/LiveComponent/CHANGELOG.md

@@ -48,6 +48,9 @@ public User $user;
     cannot be hydrated onto the object during a re-render, the last valid
     value is used.
 
+-   When using `ValidatableComponentTrait`, a new `_errors` variable is sent
+    to the template, which is easier to use!
+
 -   Several bug fixes to parent - child components - see #700.
 
 -   Fixed handling of boolean attributes to a component - see #710.

src/LiveComponent/doc/index.rst

@@ -1351,13 +1351,14 @@ This is possible thanks to the team work of two pieces:
    yet by the user, its validation errors are cleared so that they
    aren't displayed.
 
-Easier "New Form" Component
-~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Making the Post Object Optional for a "New Form" Component
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 The previous component could be used to edit an existing post or create
-a new post. But, the way it's currently written, a ``post`` object *must*
-be passed to the ``component()`` function so the `$post` property is set.
-But you can make that optional by adding a ``mount()`` method::
+a new post. But either way, the component *requires* you to pass it
+a ``post`` property.
+
+Tou can make that optional by adding a ``mount()`` method::
 
     #[AsLiveComponent('post_form')]
     class PostFormComponent extends AbstractController
@@ -2000,27 +2001,26 @@ action::
     }
 
 If validation fails, an exception is thrown, but the component will be
-re-rendered. In your template, render errors using the ``getError()``
-method:
+re-rendered. In your template, render errors using an ``_errors`` variable:
 
 .. code-block:: html+twig
 
-    {% if this.getError('post.content') %}
+    {% if _errors.has('post.content') %}
         <div class="error">
-            {{ this.getError('post.content').message }}
+            {{ _errors.get('post.content') }}
         </div>
     {% endif %}
     <textarea
         data-model="post.content"
-        class="{{ this.getError('post.content') ? 'has-error' : '' }}"
+        class="{{ _errors.has('post.content') ? 'is-invalid' : '' }}"
     ></textarea>
 
-    {% if this.getError('agreeToTerms') %}
+    {% if _errors.has('agreeToTerms') %}
         <div class="error">
-            {{ this.getError('agreeToTerms').message }}
+            {{ _errors.get('agreeToTerms') }}
         </div>
     {% endif %}
-    <input type="checkbox" data-model="agreeToTerms" class="{{ this.getError('agreeToTerms') ? 'has-error' : '' }}"/>
+    <input type="checkbox" data-model="agreeToTerms" class="{{ _errors.has('agreeToTerms') ? 'is-invalid' : '' }}"/>
 
     <button
         type="submit"
@@ -2048,7 +2048,7 @@ To validate only on "change", use the ``on(change)`` modifier:
     <input
         type="email"
         data-model="on(change)|user.email"
-        class="{{ this.getError('post.content') ? 'has-error' : '' }}"
+        class="{{ _errors.has('post.content') ? 'is-invalid' : '' }}"
     >
 
 Polling
@@ -2406,7 +2406,7 @@ attribute to the child:
     {# templates/components/post_form.html.twig #}
     {{ component('textarea_field', {
         dataModel: 'content',
-        error: this.getError('content'),
+        error: _errors.get('content'),
     }) }}
 
 This does two things:
@@ -2547,9 +2547,6 @@ form.
 Rendering Quirks with List of Embedded Components
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-Rendering Quirks with List of Embedded Components
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 Imagine your component renders a list of child components and
 the list changes as the user types into a search box... or by clicking
 "delete" on an item. In this case, the wrong children may be removed

src/LiveComponent/src/Component/ComponentValidationErrors.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace Symfony\UX\LiveComponent\Component;
+
+use Symfony\Component\Validator\ConstraintViolation;
+
+class ComponentValidationErrors implements \Countable
+{
+    /**
+     * @var array<string, ConstraintViolation[]>
+     */
+    private array $errors = [];
+
+    public function count(): int
+    {
+        return \count($this->errors);
+    }
+
+    public function has(string $propertyPath): bool
+    {
+        return null !== $this->get($propertyPath);
+    }
+
+    public function get(string $propertyPath): ?string
+    {
+        $all = $this->getAll($propertyPath);
+
+        return $all[0] ?? null;
+    }
+
+    /**
+     * @return string[]
+     */
+    public function getAll(string $propertyPath): array
+    {
+        return array_map(function (ConstraintViolation $violation) {
+            return $violation->getMessage();
+        }, $this->errors[$propertyPath] ?? []);
+    }
+
+    /**
+     * @return ConstraintViolation[]
+     */
+    public function getViolations(string $propertyPath): array
+    {
+        return $this->errors[$propertyPath] ?? [];
+    }
+
+    public function set(string $propertyName, array $constraintViolations): void
+    {
+        $this->errors[$propertyName] = $constraintViolations;
+    }
+
+    public function setAll(array $errors): void
+    {
+        $this->errors = $errors;
+    }
+
+    public function clear(): void
+    {
+        $this->errors = [];
+    }
+}

src/LiveComponent/src/ValidatableComponentTrait.php

@@ -16,6 +16,8 @@
 use Symfony\Contracts\Service\Attribute\Required;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
 use Symfony\UX\LiveComponent\Attribute\PostHydrate;
+use Symfony\UX\LiveComponent\Component\ComponentValidationErrors;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
 /**
  * @author Ryan Weaver <[email protected]>
@@ -25,7 +27,7 @@
 trait ValidatableComponentTrait
 {
     private ?ComponentValidatorInterface $componentValidator = null;
-    private array $validationErrors = [];
+    private ?ComponentValidationErrors $validationErrors = null;
 
     /**
      * Tracks whether this entire component has been validated.
@@ -55,9 +57,9 @@ public function validate(bool $throw = true): void
         // set fields back to empty, as now the *entire* object is validated.
         $this->validatedFields = [];
         $this->isValidated = true;
-        $this->validationErrors = $this->getValidator()->validate($this);
+        $this->getValidationErrors()->setAll($this->getValidator()->validate($this));
 
-        if ($throw && \count($this->validationErrors) > 0) {
+        if ($throw && \count($this->getValidationErrors()) > 0) {
             throw new UnprocessableEntityHttpException('Component validation failed');
         }
     }
@@ -76,7 +78,7 @@ public function validateField(string $propertyName, bool $throw = true): void
         }
 
         $errors = $this->getValidator()->validateField($this, $propertyName);
-        $this->validationErrors[$propertyName] = $errors;
+        $this->getValidationErrors()->set($propertyName, $errors);
 
         if ($throw && \count($errors) > 0) {
             throw new UnprocessableEntityHttpException(sprintf('The "%s" field of the component failed validation.', $propertyName));
@@ -88,20 +90,28 @@ public function validateField(string $propertyName, bool $throw = true): void
      */
     public function getError(string $propertyPath): ?ConstraintViolation
     {
-        return $this->validationErrors[$propertyPath][0] ?? null;
+        $violations = $this->getValidationErrors()->getViolations($propertyPath);
+
+        return $violations[0] ?? null;
+    }
+
+    #[ExposeInTemplate('_errors')]
+    public function getErrorsObject(): ComponentValidationErrors
+    {
+        return $this->getValidationErrors();
     }
 
     /**
      * @return ConstraintViolation[]
      */
     public function getErrors(string $propertyPath): array
     {
-        return $this->validationErrors[$propertyPath] ?? [];
+        return $this->getValidationErrors()->getAll($propertyPath);
     }
 
     public function isValid(): bool
     {
-        return 0 === \count($this->validationErrors);
+        return 0 === \count($this->getValidationErrors());
     }
 
     /**
@@ -111,7 +121,7 @@ public function clearValidation(): void
     {
         $this->isValidated = false;
         $this->validatedFields = [];
-        $this->validationErrors = [];
+        $this->getValidationErrors()->clear();
     }
 
     /**
@@ -150,4 +160,13 @@ private function getValidator(): ComponentValidatorInterface
 
         return $this->componentValidator;
     }
+
+    private function getValidationErrors(): ComponentValidationErrors
+    {
+        if (null === $this->validationErrors) {
+            $this->validationErrors = new ComponentValidationErrors();
+        }
+
+        return $this->validationErrors;
+    }
 }

src/LiveComponent/tests/Fixtures/Component/ValidatingComponent.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\Component\Validator\Constraints\Length;
+use Symfony\Component\Validator\Constraints\NotBlank;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\ValidatableComponentTrait;
+
+#[AsLiveComponent('validating_component', csrf: false)]
+final class ValidatingComponent
+{
+    use DefaultActionTrait;
+    use ValidatableComponentTrait;
+
+    #[LiveProp(writable: true)]
+    #[NotBlank]
+    #[Length(min: 3)]
+    public string $name = '';
+}

src/LiveComponent/tests/Fixtures/templates/components/validating_component.html.twig

@@ -0,0 +1,5 @@
+<div{{ attributes }}>
+    <div>Name: {{ name }}</div>
+    <div>Has Error: {{ _errors.has('name') ? 'yes' : 'no' }}</div>
+    <div>Error: "{{ _errors.get('name') }}"</div>
+</div>

src/LiveComponent/tests/Functional/ValidatableComponentTraitTest.php

@@ -0,0 +1,63 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Symfony\UX\LiveComponent\Tests\Functional\Form;
+
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\UX\LiveComponent\Tests\LiveComponentTestHelper;
+use Zenstruck\Browser\Test\HasBrowser;
+use Zenstruck\Foundry\Test\Factories;
+use Zenstruck\Foundry\Test\ResetDatabase;
+
+class ValidatableComponentTraitTest extends KernelTestCase
+{
+    use Factories;
+    use HasBrowser;
+    use LiveComponentTestHelper;
+    use ResetDatabase;
+
+    public function testFormValuesRebuildAfterFormChanges(): void
+    {
+        $dehydratedProps = $this->dehydrateComponent($this->mountComponent('validating_component'))->getProps();
+
+        $createUrl = function (array $props, array $updated = []) {
+            return '/_components/validating_component?props='.urlencode(json_encode($props)).'&updated='.urlencode(json_encode($updated));
+        };
+
+        $browser = $this->browser();
+        $browser
+            ->get($createUrl($dehydratedProps))
+            ->assertSuccessful()
+            ->assertContains('Has Error: no')
+            ->assertContains('Error: ""')
+        ;
+
+        $crawler = $browser
+            ->get($createUrl($dehydratedProps, ['name' => 'h', 'validatedFields' => ['name']]))
+            ->assertSuccessful()
+            ->assertContains('Has Error: yes')
+            ->assertContains('Error: "This value is too short. It should have 3 characters or more."')
+            ->crawler()
+        ;
+
+        $div = $crawler->filter('[data-controller="live"]');
+        $dehydratedProps = json_decode($div->attr('data-live-props-value'), true);
+
+        // make a normal GET request with no updates and verify validation still happens
+        $browser
+            ->get($createUrl($dehydratedProps))
+            ->assertSuccessful()
+            ->assertContains('Has Error: yes')
+        ;
+    }
+}

src/TwigComponent/src/ComponentFactory.php

@@ -91,7 +91,7 @@ public function mountFromObject(object $component, array $data, ComponentMetadat
             }
 
             if (!\is_scalar($value) && null !== $value) {
-                throw new \LogicException(sprintf('Unable to use "%s" (%s) as an attribute. Attributes must be scalar or null. If you meant to mount this value on "%s", make sure "$%1$s" is a writable property or create a mount() method with a "$%1$s" argument.', $key, get_debug_type($value), $component::class));
+                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)));
             }
         }
 

src/TwigComponent/tests/Integration/ComponentFactoryTest.php

@@ -93,7 +93,7 @@ public function testExceptionThrownIfRequiredMountParameterIsMissingFromPassedDa
     public function testExceptionThrownIfUnableToWritePassedDataToPropertyAndIsNotScalar(): void
     {
         $this->expectException(\LogicException::class);
-        $this->expectExceptionMessage('Unable to use "service" (stdClass) as an attribute. Attributes must be scalar or null.');
+        $this->expectExceptionMessage('But, the value is not a scalar (it\'s a stdClass)');
 
         $this->createComponent('component_a', ['propB' => 'B', 'service' => new \stdClass()]);
     }