Skip to content

Conversation

@kbond
Copy link
Member

@kbond kbond commented Jan 21, 2022

Q A
Bug fix? no
New feature? no
Tickets n/a
License MIT

Currently, php-cs-fixer doesn't like the php 8 syntax (ie unions/promoted properties) we'd like to use in twig/live components.

@weaverryan
Copy link
Member

Nice idea - thanks Kevin!

@weaverryan weaverryan merged commit 303c82f into symfony:2.x Jan 24, 2022
weaverryan added a commit that referenced this pull request Jan 31, 2022
…er (kbond)

This PR was merged into the 2.x branch.

Discussion
----------

[WIP][TwigComponent] add component attribute system/helper

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       | n/a
| License       | MIT

A common pattern with other component library's (ie blade components/vue) is to pass html attributes to your component that are set on the component's root node. This proposal adds a way to do this with twig components. Enable on your component by adding the `HasAttributesTrait`. Attributes are any data passed to `component()` that cannot be mounted on the component itself. This extra data is added to a `ComponentAttributes` object that lives as a public property on your component (available as `attributes` in your component's template).

This should all work out-of-the box with live components.

Todo:
- [x] Tests
- [x] Documentation
- [x] #240
- [x] #241
- [x] Merge `init_live_component()` into attributes when available
- [x] Document `PreRender` event.
- [x] Adjust `ComponentAttributes` api (defaults instead of merge)
- [ ] `attributes` always available in normal twig component templates (not sure about this - it would effectively make attributes _native_ but it a lame way)
- [x] replace `init_live_component()` with `attributes` in docs
- [x] Finalize docs (versionadded tags)

## Usage

To use, add the `HasAttributesTrait` to your component:

```php
#[AsTwigComponent('my_component')]
class MyComponent
{
    use HasAttributesTrait;
}
```

Then, in your component's template:

```twig
{# templates/components/my_component.html.twig #}

<div{{ attributes }}>
  My Component!
</div>
```

When rendering the component, you can pass an array of html attributes to add:

```twig
{{ component('my_component', { class: 'foo', style: 'color:red' }) }}

{# renders as: #}
<div class="foo" style="color:red">
  My Component!
</div>
```

### Defaults & Merging

In your component template, you can set defaults that are merged with
passed attributes. The passed attributes override the default with
the exception of *class*. For class, the defaults are prepended:

```twig
{# templates/components/my_component.html.twig #}

<button{{ attributes.defaults({ class: 'bar', type: 'button' }) }}>
  My Component!
</button>

{# render component #}
{{ component('my_component', { style: 'color:red' }) }}
{{ component('my_component', { class: 'foo', type: 'submit' }) }}

{# renders as: #}
<div class="bar" style="color:red">
  My Component!
</div>
<div class="bar foo" type="submit">
  My Component!
</div>
```

### Only

```twig
{# templates/components/my_component.html.twig #}

<div{{ attributes.only('class')) }}>
  My Component!
</div>

{# render component #}
{{ component('my_component', { class: 'foo', style: 'color:red' }) }}

{# renders as: #}
<div class="foo">
  My Component!
</div>
```

### Without

```twig
{# templates/components/my_component.html.twig #}

<div{{ attributes.without('class')) }}>
  My Component!
</div>

{# render component #}
{{ component('my_component', { class: 'foo', style: 'color:red' }) }}

{# renders as: #}
<div style="color:red">
  My Component!
</div>
```

### Live Components

We removed the `init_live_component()` twig function (**BC BREAK**) and replaced with the `attributes` variable which is always available (even if your component doesn't use `HasAttributesTrait`).

To upgrade, replace all calls to `init_live_component()` with `attributes`:

```diff
- <div {{ init_live_component() }}>
+ <div {{ attributes }}>
```

Commits
-------

d638782 [Twig][Live] add html attributes system
Kocal added a commit that referenced this pull request Jul 15, 2025
…torInterface::getType()` on a `#[LiveProp]` property `x` when getter `getX` exists (Kocal)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[LiveComponent] Fix BC break when using `PropertyTypeExtractorInterface::getType()` on a `#[LiveProp]` property `x` when getter `getX` exists

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | no <!-- required for new features -->
| Issues        | Fix #2888 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

Prevent:
```
1) Symfony\UX\LiveComponent\Tests\Functional\Form\ComponentWithFormTest::testFormWithLivePropContainingAnEntityImplementingAnInterface
LogicException: Cannot dehydrate value typed as interface "Symfony\UX\LiveComponent\Tests\Fixtures\Entity\User" on component "Symfony\UX\LiveComponent\Tests\Fixtures\Component\FormWithUserInterfaceComponent". Change this to a concrete type that can be dehydrated. Or set the hydrateWith/dehydrateWith options in LiveProp or set "useSerializerForHydration: true" on the LiveProp to use the serializer.
```

Given the LiveComponent:
```php
<?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.
 */

namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentWithFormTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;
use Symfony\UX\LiveComponent\Tests\Fixtures\Entity\User;
use Symfony\UX\LiveComponent\Tests\Fixtures\Form\UserFormType;

#[AsLiveComponent('form_with_user_interface', template: 'components/form_with_user_interface.html.twig')]
class FormWithUserInterfaceComponent extends AbstractController
{
    use ComponentWithFormTrait;
    use DefaultActionTrait;

    #[LiveProp]
    public User $user;

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(UserFormType::class, $this->user);
    }
}

```

Dumping `$propMetadata` in `\Symfony\UX\LiveComponent\LiveComponentHydrator::dehydrateValue` gives:
```
Symfony\UX\LiveComponent\Metadata\LivePropMetadata {#240
  -name: "user"
  -liveProp: Symfony\UX\LiveComponent\Attribute\LiveProp {#230
    -writable: false
    -hydrateWith: null
    -dehydrateWith: null
    -useSerializerForHydration: false
    -serializationContext: []
    -fieldName: null
    -format: null
    -updateFromParent: false
    -onUpdated: null
    -url: false
    -modifier: null
  }
  -type: Symfony\Component\TypeInfo\Type\NullableType {#4197
    -types: array:2 [
      0 => Symfony\Component\TypeInfo\Type\ObjectType {#5811
        -className: "Symfony\Component\Security\Core\User\UserInterface"
      }
      1 => Symfony\Component\TypeInfo\Type\BuiltinType {#4208
        -typeIdentifier: Symfony\Component\TypeInfo\TypeIdentifier {#5983
          +name: "NULL"
          +value: "null"
        }
      }
    ]
    -type: Symfony\Component\TypeInfo\Type\ObjectType {#5811}
  }
}
```

The class name is the `UserInterface` and not `User` 🤔

## To tests it

- With PropertyInfo only: `sfcp req symfony/property-info:^6.4 -W && sfp vendor/bin/simple-phpunit tests/Functional/Form/ComponentWithFormTest.php --filter "testFormWithLivePropContainingAnEntityImplementingAnInterface"`
- With PropertyInfo & Type: `sfcp req 'symfony/property-info:7.2.*' 'symfony/type-info:7.2.*' && sfp vendor/bin/simple-phpunit tests/Functional/Form/ComponentWithFormTest.php --filter "testFormWithLivePropContainingAnEntityImplementingAnInterface"`

Commits
-------

de302ef [LiveComponent] Fix BC break when using `PropertyTypeExtractorInterface::getType()` on a `#[LiveProp]` property `x` when getter `getX` exists
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants