[Twig Component] Feature: add possibility to validate all incoming data to component

[sabat24]

I want to validate all data passed from twig into my php component. Right now I can do such thing only by creating a setter for each property. Eventually use mount method and explicitly define there each property as an argument.

What I need is more generic method to validate such data. I was thinking about 2 solutions.

1. Built-in method like mount named configureProperties
2. A callback to some method inside my component.

As I prefer the second solution I wrote some code to show you the case using the first one (was easier to me).

//ComponentFactory.php

public function create(string $name, array $data = []): object
    {
        $component = $this->getComponent($name);

        $this->mount($component, $data);
        $this->configureProperties($component, $data); // <- add this line

        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));
            }

            $this->propertyAccessor->setValue($component, $property, $value);
        }

        return $component;
    }

// add these methods

private function configureProperties(object $component, array &$data): void
    {
        try {
            $method = (new \ReflectionClass($component))->getMethod('configureProperties');
        } catch (\ReflectionException $e) {
            // no hydrate method
            return;
        }
        $data = array_merge($data, $this->getComponentPropertiesDefaultValues($component));
        $optionsResolver = new OptionsResolver();
        $component->configureProperties($optionsResolver);
        $data = $optionsResolver->resolve($data);
    }

    private function getComponentPropertiesDefaultValues(object $component): array
    {
        $reflection = new \ReflectionClass($component);
        $propertiesReflections = array_filter(
            $reflection->getProperties(\ReflectionProperty::IS_PUBLIC),
            static fn($property): bool => !$property->isStatic() && $property->getDefaultValue() !== null,
        );

        $properties = [];

        array_map(static function ($property) use (&$properties) {
            $properties[$property->name] = $property->getDefaultValue();
        }, $propertiesReflections);

        return $properties;
    }

// Components/CustomComponent.php

final class CustomComponent
{
    public string $name;

    public string $size = 'm';

    public string $align;

    public function configureProperties(OptionsResolver $optionsResolver)
    {
        $optionsResolver
            ->setDefined(['size'])
            ->setDefaults(['align' => 'center'])
            ->setAllowedValues('size', ['xs', 's', 'm', 'l', 'xl',])
            ->setAllowedValues('align', ['left', 'center', 'right'])
            ->setRequired(['name']);

    }

#components/custom_component.html.twig
<div class="size-{{ this.size }} align-{{ this.align }}">
    <h1>{{ this.name }}</h1>
    <p>Size: {{ this.size }}</p>
    <p>Align: {{ this.align }}</p>
</div>

{{ component('custom_component', {name: 'some name'}) }}

configureProperties method in ComponentFactory is responsible for setting default values defined in component's class properties into $data variable. Then it tries to resolve provided options using my custom components rules and allows TwigComponent to set validated data.

[weaverryan]

Hey @sabat24!

I want to validate all data passed from twig into my php component

Can you tell us a bit more about why you need this? I normally think of the values that I'm passing into my component as "already controlled" values - similar to instantiating an object manually in PHP.

Cheers!

[sabat24]

My goal is to use Twig Component to integrate our templates with StoryBook. In general we allow our front end developers to define props of the component and create template for it. You can check already existing tool for that wingsuit

For example this link presents a definition of a button

As you can see there the size can can take the following values: small, medium and large.

Then our team can use such component in their work by providing predefined props: {{ component('button', {size: 'large'}) }}

Size is an enum field (like most of such fields) and I do not want to allow passing a value outside of it's range. Of course logic inside some components can be more tricky and some props can depends on others. This is why I need some method which allows me easily get all data passed from twig. In somehow I treat twig as an quasi-external data source.

[kbond]

I'm thinking this doesn't belong in the component itself but what about a "hook" to help with your requirement. Here are some ideas:

1. preMount hook: takes/manipulates the array of component data passed from twig before "mounting"
2. mountData method: works like the existing optional mount method but accepts the array of data instead

@weaverryan, thoughts?

[sabat24]

For me the best option is the preMount hook which is able to modify the array of props passed to the component. Such hook method should take 2 arguments: component object returned by getComponent and array of props passed from twig.

That method should be able to modify / add / remove some passed props. Then the mount method should use that modified props.

[kbond]

I agree the preMount hook is best. I'm envisioning it as a method on your component marked with a PreMount attribute. This is a similar pattern to what we do in LiveComponent.

For your use case:

class CustomComponent
{
    // ...

    #[PreMount]
    public function preMount(array $data): array
    {
        // option resolver stuff
    }
}

If you had multiple components that need data validation in this way, you could create a trait:

trait ValidateComponentData
{
    #[PreMount]
    public function validateData(array $data): array
    {
        $optionsResolver = new OptionsResolver();
        $component->configureProperties($optionsResolver);
        
        return $optionsResolver->resolve($data);
    }

    abstract private function configureProperties(OptionsResolver $options): void
}

[sabat24]

I was thinking exactly about something like that. It gives me an access to my component as well as to the incoming data from Twig.