ux icon indicating copy to clipboard operation
ux copied to clipboard

[TwigComponent] props reflexion

Open WebMamba opened this issue 7 months ago • 7 comments

Hey! I want your though before to start working on something. Today if you have a TwigComponent

#[AsTwigComponent]
class Button
{
...
}
{% props label %}

<button>
{{  label }}
</button>

The props label defined in the template will not be taken in to account because the Button component is not an anonymous component. What do you think about letting the ability to merge props defined into the template with props defined in the class. If a conflict happen raise an error. WDYT?

WebMamba avatar Jan 11 '24 17:01 WebMamba

What would be the "rules" ?

smnandre avatar Jan 11 '24 18:01 smnandre

If you have:

#[AsTwigComponent]
class UserCard
{
      public string $user = null;
      
     public string $language = 'fr';
}
    {% props size = 'md' %}
  
    // content here

  //Then you can access {{  size }} {{  language }} {{ user }}

Do you see what I mean?

WebMamba avatar Jan 11 '24 20:01 WebMamba

I thought it already worked this way? I thought that, even if your component is NOT anonymous, if you have {% props %}, it would covert anything listed there from an attribute into a prop. Are you sure that's not already the case? Or tell me if I'm misunderstanding the issue also :)

weaverryan avatar Jan 11 '24 20:01 weaverryan

This is not the case, and you actually had this issue during your live coding at the SymfonyCon 😁

WebMamba avatar Jan 11 '24 21:01 WebMamba

In your example can you mount your component with size ? I imagine yes ?

<twig:UserCard size="foo" />

right ?

How would you handle it PHP-side in your mount methods ? DOes it appear in the component Metadata ? In the Events then ? How would it work with LiveComponents ?

Maybe those answers are really simple... but if "not", i fear this add much complexity to a limited gain. I mean, declaring properties in two different places in not the most frequent thing we see right ?

Do you have maybe a full example where that addition feel like a immediate DX improvment ?

(side note: I still think we should have a more distinct usage / interface between pure static components and php ones :))

smnandre avatar Jan 11 '24 21:01 smnandre

Wait.... @weaverryan is right :)

I just added the "foo" as props in the template

Capture d’écran 2024-01-11 à 22 51 24 Capture d’écran 2024-01-11 à 22 51 35

smnandre avatar Jan 11 '24 21:01 smnandre

Is there something i missed there guys ? @weaverryan @WebMamba

smnandre avatar Jan 13 '24 16:01 smnandre