Symfony UX Twig Component

https://github.com/symfony/ux-twig-component
Admin
Twig Components provide a way to bind objects to templates, enabling easier rendering and reuse of...
Tokens:89,171
Snippets:683
Trust Score:9.5
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### ComponentMetadata getPreMounts, getMounts, getPostMounts methods

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-metadata.md

Each returns a list of method names from `get('pre_mount', [])`, `get('mount', [])`, `get('post_mount', [])`. Ordering is by ascending priority.

```php
/**
 * @return list<string>
 *
 * @internal
 */
public function getPreMounts(): array
public function getMounts(): array
public function getPostMounts(): array
```

--------------------------------

### onPostMount event listener example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/events.md

Example listener for PostMountEvent that adds a 'rendered_at' extra metadata key with the current microtime.

```php
public function onPostMount(PostMountEvent $event): void
{
    $event->addExtraMetadata('rendered_at', microtime(true));
}
```

--------------------------------

### get() usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-factory.md

Example usage of get() to fetch an unmounted component by logical name. The returned instance is a fresh AnonymousComponent for anonymous components.

```php
$alert = $factory->get('Alert');              // un-mounted instance
assert($alert instanceof App\Twig\Components\Alert);
```

--------------------------------

### Installing symfony/stimulus-bundle

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Command to install the symfony/stimulus-bundle package, required for the stimulus_controller() function.

```terminal
$ composer require symfony/stimulus-bundle
```

--------------------------------

### create() usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-factory.md

Usage example for create(). It creates an 'Alert' component with type and message props, then shows that string props are stringified via \Stringable and that no 'id' attribute is present.

```php
use Symfony\UX\TwigComponent\MountedComponent;

$mounted = $factory->create('Alert', ['type' => 'danger', 'message' => 'Danger!']);

// string props are stringified via \Stringable in mountFromObject()
echo $mounted->getComponent()->type;    // "danger"
$mounted->getAttributes()->has('id');   // false
```

--------------------------------

### Usage example: recording timing after render

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/events.md

Shows how to subscribe to PostRenderEvent and use getMountedComponent() to access the component name and record timing with a metrics service. The example imports the event class and defines an onPostRender method.

```php
use Symfony\UX\TwigComponent\Event\PostRenderEvent;

public function onPostRender(PostRenderEvent $event): void
{
    $mounted = $event->getMountedComponent();
    $this->metrics->record($mounted->getName(), microtime(true));
}
```

--------------------------------

### onPreMount event listener example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/events.md

Example listener for PreMountEvent that adds the current locale to the component data before mounting.

```php
public function onPreMount(PreMountEvent $event): void
{
    $data = $event->getData();
    $data['locale'] = $this->request->getLocale();
    $event->setData($data); // props used for mounting
}
```

--------------------------------

### render() usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Shows how to render an already-mounted component. Creates an 'Alert' component via the factory and passes it to render().

```php
$mounted = $factory->create('Alert', ['message' => 'Hi']);
$html = $renderer->render($mounted);
```

--------------------------------

### Example output: debug:twig-component Alert

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/debug-command.md

Example output from the command showing a detail table for the 'Alert' component, including properties like Class, Template, and Properties.

```text
$ php bin/console debug:twig-component Alert

+--------------------------------------------------+-------------------+
| Property                                         | Value             |
+--------------------------------------------------+-------------------+
| Component                                        | Alert             |
| Class                                            | App\Components\Alert |
| Template                                         | components/Alert.html.twig |
| Type                                             |                   |
| Public Props                                     | Yes               |
| Properties                                       | string $name = toto |
+--------------------------------------------------+-------------------+
```

--------------------------------

### twig_component configuration example (config/packages/twig_component.yaml)

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/configuration.md

Example configuration for the twig_component config tree. Sets anonymous_template_directory and defines defaults for two namespaces: a short form for App\Twig\Components\ and a long form for App\Pizza\Components\ with template_directory and name_prefix.

```yaml
twig_component:
    anonymous_template_directory: 'components/'
    defaults:
        # short form
        App\Twig\Components\: 'components/'

        # long form
        App\Pizza\Components\:
            template_directory: components/pizza
            name_prefix: Pizza
```

--------------------------------

### PostMount hook example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Use PostMount hook to run extra code after mounting. Shows the full component class with PostMount attribute.

```php
// src/Twig/Components/Alert.php
    use Symfony\UX\TwigComponent\Attribute\PostMount;
    // ...

    #[AsTwigComponent]
    class Alert
    {
        #[PostMount]
        public function postMount(): void
        {
            if (str_contains($this->message, 'danger')) {
                $this->type = 'danger';
            }
        }
        // ...
    }
```

--------------------------------

### Twig provide() function usage

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Example of calling the provide() Twig function to set a value for a key.

```twig
{% do provide('tabs.active', 'overview') %}
```

--------------------------------

### PostMount hook usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/attributes.md

Example usage of the PostMount attribute. The method receives leftover props (those not consumed by mount() parameters or settable properties) and may return a replacement array; remaining keys become attributes.

```php
use Symfony\UX\TwigComponent\Attribute\PostMount;

#[AsTwigComponent]
class Alert
{
    #[PostMount]
    public function processAutoChooseType(array $data): array
    {
        if ($data['autoChooseType'] ?? false) {
            $this->type = 'danger';
            unset($data['autoChooseType']); // consume -> not rendered as attribute
        }

        return $data;
    }
}
```

--------------------------------

### Usage examples with props and defaults

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows different usage scenarios for a component with required and optional props, including an exception when a required prop is missing.

```html+twig
{# property "icon" is missing, an exception is thrown #}
<twig:Button>Share</twig:Button>

{# property "icon" is passed, property "type" use its default value "primary" #}
<twig:Button icon="share">Share</twig:Button>

{# both properties "icon" and "type" are passed #}
<twig:Button icon="share" type="secondary">Share</twig:Button>
```

--------------------------------

### Higher-Order Component (Component Wrapper) example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows how to create a base Modal component that can be wrapped by other components to add structure.

```html+twig
{# templates/components/Modal.html.twig #}
<div{{ attributes.defaults({class: 'modal'}) }}>
    <div class="modal-content">
        {% block content %}{% endblock %}
    </div>
</div>
```

--------------------------------

### startEmbedComponent()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Starts an embedded component render and returns the PreRenderEvent. Forwards to the renderer's startEmbeddedComponentRender method.

```APIDOC
## [POST] /start-embed-component

### Description
Starts an embedded component render and returns the PreRenderEvent. Forwards to the renderer's startEmbeddedComponentRender method.

### Method
POST

### Endpoint
/start-embed-component

### Parameters
#### Path Parameters
- **name** (string) - Required - Component name

#### Request Body
- **props** (array) - Required - Props
- **context** (array) - Required - Context
- **hostTemplateName** (string) - Required - Host template name
- **index** (integer) - Required - Index

### Response
#### Success Response (200)
- **result** (object) - PreRenderEvent

#### Response Example
{
  "result": {}
}
```

--------------------------------

### StaticComponentCacheSubscriber example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Example subscriber for PreCreateForRenderEvent that caches static component output by setting a rendered string for the 'StaticHeader' component, which stops propagation.

```php
use Symfony\UX\TwigComponent\Event\PreCreateForRenderEvent;

final class StaticComponentCacheSubscriber
{
    public function onPreCreateForRender(PreCreateForRenderEvent $event): void
    {
        if ('StaticHeader' === $event->getName()) {
            $event->setRenderedString('<header>Cached!</header>');
        }
    }

    public static function getSubscribedEvents(): array
    {
        return [PreCreateForRenderEvent::class => 'onPreCreateForRender'];
    }
}
```

--------------------------------

### Alert component class with mount() method

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Partial example of an Alert component class showing the mount() method usage. The code is incomplete in the source, so only the provided lines are included.

```php
// src/Twig/Components/Alert.php
// ...

#[AsTwigComponent]
class Alert
{
    public string $message;
    public string $type = 'success';

```

--------------------------------

### metadataFor() usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-factory.md

Usage example for metadataFor(). It retrieves the component factory from the container and resolves metadata for 'Button:Primary', showing that the template is 'components/Button/Primary.html.twig'.

```php
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\UX\TwigComponent\ComponentFactory;
use Symfony\UX\TwigComponent\ComponentMetadata;

$metadata = $container->get('ux.twig_component.component_factory')->metadataFor('Button:Primary');
// $metadata->getTemplate() === 'components/Button/Primary.html.twig'
```

--------------------------------

### PreMount hook usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/attributes.md

Example usage of the PreMount attribute. The annotated method receives the props array and may return a replacement array; a null return keeps current data. Hooks run after PreMountEvent and before mount().

```php
use Symfony\UX\TwigComponent\Attribute\PreMount;

#[AsTwigComponent]
class Alert
{
    #[PreMount(priority: 10)]
    public function preMount(array $data): array
    {
        $data['type'] ??= 'success';

        return $data; // returned data becomes the props
    }
}
```

--------------------------------

### ComponentTemplateFinder usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-metadata.md

Example of instantiating ComponentTemplateFinder with a FilesystemLoader and calling findAnonymousComponentTemplate. The output shows the resolved template path, either in the main directory or via the Acme namespace for third-party bundles.

```php
use Symfony\UX\TwigComponent\ComponentTemplateFinder;
use Twig\Loader\FilesystemLoader;

$loader = new FilesystemLoader('/path/to/templates');
$finder = new ComponentTemplateFinder($loader, 'components');

echo $finder->findAnonymousComponentTemplate('Button:Primary');
// "/path/to/templates/components/Button/Primary.html.twig"
// (or via the Acme namespace: "@Acme/components/Button/Primary.html.twig")
```

--------------------------------

### FeaturedProducts component with service injection

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Example of a component that uses dependency injection to fetch products from a repository. The component is a service and can be rendered without passing props.

```php
// src/Twig/Components/FeaturedProducts.php
namespace App\Twig\Components;

use App\Repository\ProductRepository;
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent]
class FeaturedProducts
{
    public function __construct(private ProductRepository $productRepository)
    {
    }

    public function getProducts(): array
    {
        // an example method that returns an array of Products
        return $this->productRepository->findFeatured();
    }
}
```

--------------------------------

### Catch unknown component error from factory create

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/errors.md

This example triggers the 'Unknown component' error for a missing component name. It shows the exception message with a 

```php
try {
    $factory->create('Alertt');
} catch (\InvalidArgumentException $e) {
    // "Unknown component "Alertt". Did you mean this: "Alert"?"
}
```

--------------------------------

### ComponentMetadata get method

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-metadata.md

Generic accessor returning `config[$key] ?? $default`. Used by all other methods and external consumers.

```php
public function get(string $key, mixed $default = null): mixed
```

--------------------------------

### Boolean prop conversion examples

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows how string 'false' is converted to true, and how to pass actual boolean false using Twig expression or dynamic syntax.

```html+twig
{# ❌ the string 'false' is converted to the boolean 'true' #}
<twig:Alert message="..." withCloseButton="false" />

{# ✅ use the 'false' boolean value #}
<twig:Alert message="..." withCloseButton="{{ false }}" />

{# ✅ use the dynamic syntax #}
<twig:Alert message="..." :withCloseButton="false" />
```

--------------------------------

### Calling component with type and message props

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Example of calling a component with type and message props, which is used to illustrate the mount() method behavior.

```html+twig
<twig:Alert type="error" message="..."/>
```

--------------------------------

### createAndRender() usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Shows how to use createAndRender() from PHP code outside of Twig. Retrieves the renderer service and renders an 'Alert' component with type and message props.

```php
$renderer = $container->get('ux.twig_component.component_renderer');

$html = $renderer->createAndRender('Alert', ['type' => 'danger', 'message' => 'Danger!']);
```

--------------------------------

### PreCreateForRenderEvent usage example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/events.md

Subscribes to `PreCreateForRenderEvent` to serve cached HTML for a component named 'StaticHeader', skipping the render pipeline.

```php
use Symfony\UX\TwigComponent\Event\PreCreateForRenderEvent;

public function onPreCreateForRender(PreCreateForRenderEvent $event): void
{
    if ('StaticHeader' === $event->getName() && $cached = $this->cache->get('twig_component.static_header')) {
        $event->setRenderedString($cached); // stops other listeners + skips creation
    }
}
```

--------------------------------

### Twig component() function usage

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Example of calling the component() Twig function with a component name and props.

```twig
{{ component('Alert', {type: 'danger', message: 'Danger!'}) }}
```

--------------------------------

### get() method signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-factory.md

Returns the unmounted component instance from the container without mounting data. Marked @internal. Use when you need the raw component object before mounting.

```php
public function get(string $name): object
```

--------------------------------

### Twig inject() function usage

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Example of calling the inject() Twig function to retrieve a value with a default.

```twig
{% set maxLength = inject('inputOtp.maxLength', 4) %}
```

--------------------------------

### Reading metadata in a PreRenderEvent subscriber

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-metadata.md

Example subscriber that reads metadata from a `PreRenderEvent` and demonstrates `isAnonymous()`, `getName()`, `getTemplate()`, and `getAttributesVar()`.

```php
use Symfony\UX\TwigComponent\Event\PreRenderEvent;

public function onPreRender(PreRenderEvent $event): void
{
    $metadata = $event->getMetadata();

    if ($metadata->isAnonymous()) {
        // no class, no service; template-driven component
    }
    echo $metadata->getName();          // "Button:Primary"
    echo $metadata->getTemplate();      // "components/Button/Primary.html.twig"
    echo $metadata->getAttributesVar(); // "attributes"
}
```

--------------------------------

### PreRenderEvent subscriber example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows how to subscribe to PreRenderEvent to modify the template and variables before rendering. The event provides access to the component, template name, and variables, and allows changing the template or variables.

```php
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\UX\TwigComponent\Event\PreRenderEvent;

class HookIntoTwigPreRenderSubscriber implements EventSubscriberInterface
{
    public function onPreRender(PreRenderEvent $event): void
    {
        $event->getComponent(); // the component object
        $event->getTemplate(); // the twig template name that will be rendered
        $event->getVariables(); // the variables that will be available in the template

        $event->setTemplate('some_other_template.html.twig'); // change the template used

        // manipulate the variables:
        $variables = $event->getVariables();
        $variables['custom'] = 'value';

        $event->setVariables($variables); // {{ custom }} will be available in your template
    }

    public static function getSubscribedEvents(): array
    {
        return [PreRenderEvent::class => 'onPreRender'];
    }
}
```

--------------------------------

### AsTwigComponent usage with defaults

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/attributes.md

Example usage of AsTwigComponent with no arguments, deriving the component name and template from the class name and defaults. The class exposes public properties as Twig variables.

```php
namespace App\Twig\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent] // name + template derived from class name + defaults
class Alert
{
    public string $type = 'success';
    public string $message;
}
```

--------------------------------

### Use Modal:Confirm component

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows two usage examples of the Modal:Confirm component: one with default text and one with custom confirm text and a data-controller attribute.

```html+twig
<twig:Modal:Confirm>
    Are you sure you want to delete this item?
</twig:Modal:Confirm>

<twig:Modal:Confirm confirmText="Yes, delete it" data-controller="modal">
    This action cannot be undone.
</twig:Modal:Confirm>
```

--------------------------------

### PreCreateForRenderEvent

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/events.md

Event dispatched at the start of rendering, before the component object is created. Allows short-circuiting the render by setting a pre-rendered string.

```APIDOC
## PreCreateForRenderEvent

### Description
Event dispatched at the start of rendering, before the component object is created or hydrated. Allows short-circuiting the render by setting a pre-rendered string.

### Constructor Parameters
- **name** (string) - Required - Component name
- **inputProps** (array) - Optional - Props originally passed to the render call. Default: `[]`

### Methods

#### getName()
Returns the component name.

**Returns** `string` - The component name.

#### getInputProps()
Returns the array of "input" data passed to originally create this component.

**Returns** `array` - Input props (formerly `getProps()`, renamed in 3.0.0).

#### setRenderedString(string $renderedString): void
Stores a pre-rendered HTML string and stops event propagation, short-circuiting the whole render.

**Returns** `void`

#### getRenderedString(): ?string
Returns the pre-rendered HTML string, or `null` if not set.

**Returns** `?string` - The pre-rendered string or null.

### Usage Example
```php
use Symfony\UX\TwigComponent\Event\PreCreateForRenderEvent;

public function onPreCreateForRender(PreCreateForRenderEvent $event): void
{
    if ('StaticHeader' === $event->getName() && $cached = $this->cache->get('twig_component.static_header')) {
        $event->setRenderedString($cached); // stops other listeners + skips creation
    }
}
```
```

--------------------------------

### Attach extra metadata for embedded renders

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/mounted-component.md

Example usage of addExtraMetadata to attach hostTemplate and embeddedTemplateIndex for embedded renders, as done in ComponentRenderer::startEmbeddedComponentRender().

```php
$mounted->addExtraMetadata('hostTemplate', $hostTemplateName);
$mounted->addExtraMetadata('embeddedTemplateIndex', $index); // ComponentRenderer::startEmbeddedComponentRender()
```

--------------------------------

### Twig template passing isError prop

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Example of passing a prop that has no matching public property, to be captured in mount().

```html+twig
<twig:Alert isError="{{ true }}" message="..."/>
```

--------------------------------

### {% component %} usage with props and blocks

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Usage example of the {% component %} tag with a with {props} clause and named blocks. The component name is a plain NameExpression (Card).

```twig
{% component Card with {type: 'success'} %}
    {% block header %}{% endblock %}
    {% block content %}<div>Congrats!</div>{% endblock %}
{% endcomponent %}
```

--------------------------------

### Alert component with mount() method

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-factory.md

Example of a Twig component class with a mount() method. The mount() method receives the 'type' prop as an argument, which is removed from the attributes. The component has a default type of 'success' and a required message property.

```php
// App\Twig\Components\Alert
#[AsTwigComponent]
class Alert
{
    public string $type = 'success';
    public string $message;

    public function mount(string $type): void // $type prop → arg, removed from attributes
    {
        if ('error' === $type) {
            // ...
        }
    }
}
```

--------------------------------

### Mount method with parameter to access prop value

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Declare a parameter in mount() matching the prop name to get the passed value. The component system will not set it on a public property or use it in attributes.

```php
public function mount(string $type): void
    {
        // ✅ this works as expected: the $type argument in PHP has the value
        // passed to the 'type' prop in the Twig template
        if ('error' === $type) {
            // ...
        }
    }
```

--------------------------------

### Basic mountTwigComponent() usage in a test

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/test-helpers.md

Example test class using the InteractsWithTwigComponents trait. It mounts an 'Alert' component with data and asserts the returned object's type and properties. The component name can be a string or a FQCN.

```php
use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
use Symfony\UX\TwigComponent\Test\InteractsWithTwigComponents;

class AlertComponentTest extends KernelTestCase
{
    use InteractsWithTwigComponents;

    public function testComponentMount(): void
    {
        $component = $this->mountTwigComponent(
            'Alert',               // or Alert::class (FQCN)
            ['type' => 'danger', 'message' => 'Boom'],
        );

        $this->assertInstanceOf(Alert::class, $component);
        $this->assertSame('danger', $component->type);
    }
}
```

--------------------------------

### PHP: AsTwigComponent attribute with attributesVar

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Example of a PHP class using the AsTwigComponent attribute to define a Twig component with the attributes variable.

```php
#[AsTwigComponent(attributesVar: '_attributes')]
class Alert
{
    // ...
}
```

--------------------------------

### Method signature: configure()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/debug-command.md

Declares the optional 'name' input argument and help text. The argument is InputArgument::OPTIONAL with description 'A component name or part of the component name'.

```php
protected function configure(): void
```

--------------------------------

### AsTwigComponent usage with explicit parameters

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/attributes.md

Example usage of AsTwigComponent with explicit parameters: name 'alert', a custom template path, exposePublicProps set to false, and attributesVar set to '_attrs'.

```php
#[AsTwigComponent('alert', template: 'components/ui/alert.html.twig', exposePublicProps: false, attributesVar: '_attrs')]
class CustomAlert
{
}
```

--------------------------------

### Accessing outerScope in embedded components

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows how to refer to components higher up in the hierarchy using outerScope. The outerScope reference only starts once you're inside the embedded component.

```twig
{# templates/FancyProfileCard.html.twig #}
{% component Card %}
    {% block header %}
        {% component Alert with {message: outerScope.this.someProp} %} {# not yet INSIDE the Alert template #}
            {% block content %}
                {{ message }} {# same value as below, indirectly refers to FancyProfileCard::someProp #}
                {{ outerScope.outerScope.this.someProp }} {# directly refers to FancyProfileCard::someProp #}
            {% endblock %}
        {% endcomponent %}
    {% endblock %}
{% endcomponent %}
```

--------------------------------

### Using FromMethod with AsTwigComponent to resolve template dynamically

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/attributes.md

Shows how to use the FromMethod attribute with AsTwigComponent to dynamically resolve a component's template. The method named in FromMethod must return a string, otherwise a \LogicException is thrown. The example method getTemplate() returns different templates based on the $layout property.

```php
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
use Symfony\UX\TwigComponent\Attribute\FromMethod;

#[AsTwigComponent(template: new FromMethod('getTemplate'))]
class SearchResults
{
    public string $layout = 'rows';

    public function getTemplate(): string
    {
        return 'rows' === $this->layout
            ? 'components/SearchResults/rows.html.twig'
            : 'components/SearchResults/grid.html.twig';
    }
}
```

--------------------------------

### create()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-factory.md

Creates and mounts a component with the given data, returning a MountedComponent instance.

```APIDOC
## `create()`

### Description
Creates the component and "mounts" it with the passed data.

### Method
`create`

### Signature
```php
public function create(string $name, array $data = []): MountedComponent
```

### Parameters
- **name** (`string`) - Required - Component name (logical name or FQCN)
- **data** (`array`) - Optional - Props passed when rendering; keys may map to properties, `mount()` parameters, or leftover attribute values

### Returns
- `MountedComponent` - The mounted component. For class-based components the component object comes from the container; anonymous components mount a fresh `AnonymousComponent`.

### Usage Example
```php
use Symfony\UX\TwigComponent\MountedComponent;

$mounted = $factory->create('Alert', ['type' => 'danger', 'message' => 'Danger!']);

// string props are stringified via \Stringable in mountFromObject()
echo $mounted->getComponent()->type;    // "danger"
$mounted->getAttributes()->has('id');   // false
```
```

--------------------------------

### Nested component syntax: mixing Twig and HTML syntax (invalid vs valid examples)

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows that mixing Twig and HTML syntax in nested components is not allowed. The first block is invalid because it mixes syntaxes; the second uses only HTML syntax, and the third uses only Twig syntax. Use the appropriate syntax consistently.

```html+twig
{# ❌ this won't work because it mixes different syntaxes #}
<twig:Card>
    {# ... #}

    {% block footer %}
        <twig:Button:Primary :isBlock="true">Edit</twig:Button:Primary>
    {% endblock %}
</twig:Card>
```

```html+twig
{# ✅ this works because it only uses the HTML syntax #}
<twig:Card>
    {# ... #}

    <twig:block name="footer">
        <twig:Button:Primary :isBlock="true">Edit</twig:Button:Primary>
    </twig:block>
</twig:Card>
```

```html+twig
{# ✅ this also works because it only uses the Twig syntax #}
{% component Card %}
    {# ... #}

    {% block footer %}
        {% component 'Button:Primary' with {isBlock: true} %}
            {% block content %}Edit{% endblock %}
        {% endcomponent %}
    {% endblock %}
{% endcomponent %}
```

--------------------------------

### ExposeInTemplate attribute example

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows how to use the ExposeInTemplate attribute to expose private/protected properties and methods in a Twig component template. Includes getter methods and a method without required parameters.

```php
// ...
use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;

#[AsTwigComponent]
class Alert
{
    #[ExposeInTemplate]
    private string $message; // available as `{{ message }}` in the template

    #[ExposeInTemplate('alert_type')]
    private string $type = 'success'; // available as `{{ alert_type }}` in the template

    #[ExposeInTemplate(name: 'ico', getter: 'fetchIcon')]
    private string $icon = 'ico-warning'; // available as `{{ ico }}` in the template using `fetchIcon()` as the getter

    /**
     * Required to access $this->message
     */
    public function getMessage(): string
    {
        return $this->message;
    }

    /**
     * Required to access $this->type
     */
    public function getType(): string
    {
        return $this->type;
    }

    /**
     * Required to access $this->icon
     */
    public function fetchIcon(): string
    {
        return $this->icon;
    }
}
```

--------------------------------

### Twig usage of only()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-attributes.md

Twig template example using attributes.only('class') to render only the class attribute.

```twig
<div {{ attributes.only('class') }}>
```

--------------------------------

### Readonly class causing error

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Example of a readonly component class that will cause an error when TwigComponent tries to set a property after instantiation. The error occurs because readonly properties cannot be set after construction.

```php
// src/Twig/Components/UserProfile.php
namespace App\Twig\Components;

use App\Entity\User;
use App\Service\UserService;
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent]
final readonly class UserProfile // ❌ readonly class
{
    public User $user; // ❌ will cause "must not be accessed before initialization"

    public function __construct(
        private UserService $userService
    ) {
    }

    public function getBio(): ?string
    {
        return $this->userService->getBio($this->user);
    }
}
```

```html+twig
{# This will throw an error about $user not being initialized #}
<twig:UserProfile :user="app.user" />
```

--------------------------------

### Twig usage of remove()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-attributes.md

Twig template example using attributes.remove('disabled') to remove the 'disabled' attribute.

```twig
{% set attrs = attributes.remove('disabled') %}
```

--------------------------------

### render() method signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Defines the render() method signature. It takes a MountedComponent instance and returns the rendered HTML string.

```php
public function render(MountedComponent $mounted): string
```

--------------------------------

### Method signature: execute()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/debug-command.md

Executes the command. Returns Command::SUCCESS when a component was found or table rendered, Command::FAILURE for an unknown named component.

```php
protected function execute(InputInterface $input, OutputInterface $output): int
```

--------------------------------

### createAndRender()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Creates a component by name and props, then renders it to HTML. If preCreateForRender() returns a string, that string is returned as-is; otherwise the component is created via the factory and rendered.

```APIDOC
## createAndRender()

### Description
Creates a component by name and props, then renders it to HTML. If preCreateForRender() returns a string, that string is returned as-is; otherwise the component is created via the factory and rendered.

### Method
createAndRender

### Signature
public function createAndRender(string $name, array $props = []): string

### Parameters
- **name** (string) - Required - Component name
- **props** (array) - Optional - Props passed to the component (default: [])

### Returns
- **string** - The fully rendered HTML.

### Example
```php
$renderer = $container->get('ux.twig_component.component_renderer');

$html = $renderer->createAndRender('Alert', ['type' => 'danger', 'message' => 'Danger!']);
```
```

--------------------------------

### MountedComponent provide/hasProvided/getProvided

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/mounted-component.md

Methods to manage provided context. provide stores a value; hasProvided checks existence; getProvided returns the value or throws \InvalidArgumentException with message 'No provided context found for key "%s" in component "%s".' when absent.

```php
public function provide(string $key, mixed $value): void
public function hasProvided(string $key): bool
public function getProvided(string $key): mixed
```

--------------------------------

### Twig usage of has()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-attributes.md

Example of using the has() method in a Twig template to conditionally render content based on attribute existence.

```twig
{% if attributes.has('id') %}…{% endif %}
```

--------------------------------

### Method signature: complete()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/debug-command.md

Provides shell-completion support: when the shell asks for argument values for 'name', suggests all known component names.

```php
public function complete(CompletionInput $input, CompletionSuggestions $suggestions): void
```

--------------------------------

### Twig usage of without()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-attributes.md

Twig template example using attributes.without('type') to render all attributes except 'type'.

```twig
<input {{ attributes.without('type') }}>
```

--------------------------------

### PreRenderEvent.php class skeleton showing constructor signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/events.md

Partial class definition showing constructor parameters: MountedComponent $mounted, ComponentMetadata $metadata, and array $variables, along with internal constants and properties used during rendering events.

```onPreRender event handler demonstrating template override and variable injection
use Symfony\UX\Twig\Event\PreRenderEvent;

public function onPreRender(PreRenderEvent $event): void
{
    if ('Alert' === $event->getMetadata()->getName()) {
        $event->setTemplate('components/alert_branded.html.twig');
    }

    $variables = $event->getVariables();
    $variables['custom'] = 'value';
    $event->setVariables($variables); // {{ custom }} now exists in the template
}
```

--------------------------------

### render()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Renders an already-mounted component to HTML. It pushes the mounted component onto the stack, dispatches pre-render and post-render events, and renders the template with the appropriate context.

```APIDOC
## render()

### Description
Renders an already-mounted component to HTML. It pushes the mounted component onto the stack, dispatches pre-render and post-render events, and renders the template with the appropriate context.

### Method
render

### Signature
public function render(MountedComponent $mounted): string

### Parameters
- **mounted** (MountedComponent) - Required - An already-mounted component (from ComponentFactory::create() or mountFromObject())

### Returns
- **string** - The rendered HTML of this mounted component.

### Throws
- Whatever Twig throws while loading/rendering (e.g. Twig\Error\LoaderError)

### Example
```php
$mounted = $factory->create('Alert', ['message' => 'Hi']);
$html = $renderer->render($mounted);
```
```

--------------------------------

### Dump TwigComponent configuration options

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Run this command to see the full list of configuration options for TwigComponent. Useful for discovering available settings.

```terminal
$ php bin/console config:dump twig_component
```

--------------------------------

### ComponentMetadata isPublicPropsExposed and isAnonymous methods

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-metadata.md

`isPublicPropsExposed()` returns `get('expose_public_props', false)`. `isAnonymous()` returns `!isset($config['service_id'])`.

```php
public function isPublicPropsExposed(): bool
public function isAnonymous(): bool
```

--------------------------------

### Mount method with default prop value (incorrect usage)

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows that inside mount(), props have only default values, not passed values. Use a parameter in mount() instead.

```php
public function mount(): void
        {
            // ❌ this won't work: at this point $type still has its default value.
            // Passed values are not yet available in props.
            if ('error' === $this->type) {
                // ...
            }
        }
```

--------------------------------

### Twig usage of nested()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-attributes.md

Twig template example using attributes.nested('title') and attributes.nested('body') to extract namespaced attributes.

```twig
<div {{ attributes }}>
    <div {{ attributes.nested('title') }}>…</div>
    <div {{ attributes.nested('body') }}>…</div>
</div>

{# usage: <twig:Dialog title:class="bar" body:class="baz" /> #}
```

--------------------------------

### provide() method signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Signature for the provide() method, which stores a value in the current component's provided context. Throws \LogicException when called outside a component template.

```php
public function provide(string $key, mixed $value): void
```

--------------------------------

### create() method signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-factory.md

Signature of the create() method in the ComponentFactory class. It creates a component and mounts it with the provided data, returning a MountedComponent.

```php
/**
 * Creates the component and "mounts" it with the passed data.
 */
public function create(string $name, array $data = []): MountedComponent
```

--------------------------------

### Twig usage of all()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-attributes.md

Iterates over all attributes in a Twig template using a for loop. The example shows the typical pattern for rendering each attribute key-value pair.

```twig
{% for key, value in attributes.all() %}
    …
{% endfor %}
```

--------------------------------

### PreMount hook with OptionsResolver

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Use PreMount hook to modify/validate data before mounting. Shows the full component class with PreMount attribute and OptionsResolver usage.

```php
// src/Twig/Components/Alert.php
    use Symfony\Component\OptionsResolver\OptionsResolver;
    use Symfony\UX\TwigComponent\Attribute\PreMount;
    // ...

    #[AsTwigComponent]
    class Alert
    {
        public string $message;
        public string $type = 'success';

        #[PreMount]
        public function preMount(array $data): array
        {
            // validate data
            $resolver = new OptionsResolver();
            $resolver->setIgnoreUndefined(true);

            $resolver->setDefaults(['type' => 'success']);
            $resolver->setAllowedValues('type', ['success', 'danger']);
            $resolver->setRequired('message');
            $resolver->setAllowedTypes('message', 'string');

            return $resolver->resolve($data) + $data;
        }

        // ...
    }
```

--------------------------------

### provide()

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Stores a value in the current component's provided context. Throws LogicException if called outside a component template.

```APIDOC
## [POST] /provide

### Description
Stores a value in the current component's provided context. Throws LogicException if called outside a component template.

### Method
POST

### Endpoint
/provide

### Parameters
#### Path Parameters
- **key** (string) - Required - Arbitrary key (convention: componentName.key)

#### Request Body
- **value** (mixed) - Required - Any value (including null)

### Request Example
{
  "key": "tabs.active",
  "value": "overview"
}

### Response
#### Success Response (200)
- **result** (null) - Always null

#### Response Example
{
  "result": null
}

### Error Handling
- **500** - LogicException when called outside a component template
```

--------------------------------

### createAndRender() method signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Defines the createAndRender() method signature. It takes a component name and optional props, returning the rendered HTML string.

```php
public function createAndRender(string $name, array $props = []): string
```

--------------------------------

### startEmbedComponent() and finishEmbedComponent() signatures

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Signatures for the embed component methods. startEmbedComponent() returns a PreRenderEvent and forwards to renderer->startEmbeddedComponentRender(); finishEmbedComponent() returns void and forwards to renderer->finishEmbeddedComponentRender().

```php
public function startEmbedComponent(string $name, array $props, array $context, string $hostTemplateName, int $index): PreRenderEvent
public function finishEmbedComponent(): void
```

--------------------------------

### Dynamic template selection with FromMethod

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows how to use the FromMethod attribute to compute the template dynamically based on component state. The getTemplate() method returns the template path based on the 'layout' property.

```php
namespace App\Twig\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
use Symfony\UX\TwigComponent\Attribute\FromMethod;

#[AsTwigComponent(template: new FromMethod('getTemplate'))]
class SearchResults
{
    public string $layout = 'rows';

    public function getTemplate(): string
    {
        return 'rows' === $this->layout
            ? 'components/SearchResults/rows.html.twig'
            : 'components/SearchResults/grid.html.twig';
    }
}
```

--------------------------------

### List all components with debug:twig-component

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Command to list all application components that live in templates/components/. Shows component name, class, template, and type.

```terminal
$ php bin/console debug:twig-component

+---------------+-----------------------------+------------------------------------+------+
| Component     | Class                       | Template                           | Type |
+---------------+-----------------------------+------------------------------------+------+
| Coucou        | App\Components\Alert        | components/Coucou.html.twig        |      |
| RandomNumber  | App\Components\RandomNumber | components/RandomNumber.html.twig  | Live |
| Test          | App\Components\foo\Test     | components/foo/Test.html.twig      |      |
| Button        |                             | components/Button.html.twig        | Anon |
| foo:Anonymous |                             | components/foo/Anonymous.html.twig | Anon |
| Acme:Button   |                             | @Acme/components/Button.html.twig  | Anon |
+---------------+-----------------------------+------------------------------------+------+
```

--------------------------------

### startEmbeddedComponentRender() signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-renderer.md

Declares the startEmbeddedComponentRender() method. It takes the component name, props, context, host template name, and an index, and returns a PreRenderEvent whose variables become the embedded template's context.

```php
public function startEmbeddedComponentRender(string $name, array $props, array $context, string $hostTemplateName, int $index): PreRenderEvent
```

--------------------------------

### Twig: Using render() for full control

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Demonstrates using attributes.render() to render specific attributes and then the remaining attributes. Ensure render() is called before {{ attributes }} to avoid double rendering.

```html+twig
{# templates/components/MyComponent.html.twig #}
<div
  style="{{ attributes.render('style') }} display:block;"
  {{ attributes }} {# be sure to always render the remaining attributes! #}
>
  My Component!
</div>

{# render component #}
{{ component('MyComponent', {style: 'color:red;'}) }}

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

--------------------------------

### MountedComponent::getProvided

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/mounted-component.md

Getter for provided context.

```APIDOC
## MountedComponent::getProvided

### Description
Returns a value from the component's provided context.

### Method
getProvided

### Signature
```php
public function getProvided(string $key): mixed
```

### Parameters
- **key** (string) - Required - The context key

### Returns
- **mixed** - The provided value.

### Throws
- **\InvalidArgumentException** - `No provided context found for key "%s" in component "%s".` when absent.
```

--------------------------------

### ComponentAttributes Methods

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/component-attributes.md

Documentation for the `all()` and `defaults()` methods of the `ComponentAttributes` class.

```APIDOC
## `all()`

### Description
Returns the underlying attribute map (raw values, unfiltered).

### Method
`all`

### Returns
- **array** - The underlying attribute map (raw values, unfiltered).

### Example
```twig
{% for key, value in attributes.all() %}
    …
{% endfor %}
```
```

```APIDOC
## `defaults(iterable $attributes)`

### Description
Set default attributes. These are used if they are not already defined. Returns a new `ComponentAttributes` instance (this class is immutable) containing the merged defaults.

### Method
`defaults`

### Parameters
- **attributes** (`iterable`) - Required - Default attribute map (also accepts `StimulusAttributes`, converted via `toArray()`, and any `\Traversable`)

### Returns
- **self** - A new `ComponentAttributes` containing the merged defaults.

### Merge Rules
- Keys absent from the defaults keep the current value.
- When the current value implements `MergeableInterface` (`twig/html-extra`), `$values->mergeInto($default)` is used for **any** key.
- When the default implements `MergeableInterface`, `$default->appendFrom($value)` is used.
- For the special keys `class`, `data-controller` and `data-action` the default is *prepended*: `"{$default} {$value}"`.
- Any other key: the current (passed) value wins over the default.
- Attributes already `render()`ed in this instance are removed from the result.

### Example
```twig
{# templates/components/Alert.html.twig #}
<div {{ attributes.defaults({class: 'alert alert-' ~ type}) }}>
    {% block content %}{% endblock %}
</div>
```

Combined with a Stimulus controller:

```twig
<div {{ attributes.defaults(stimulus_controller('my-controller', {someValue: 'foo'})) }}>
```
```

--------------------------------

### MountedComponent getInputProps

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/mounted-component.md

Returns the input props the component was originally created with. Throws a \LogicException with message 'The component was not created from input props.' when inputProps is null (e.g., hydrated from an HTTP request).

```php
public function getInputProps(): array
```

--------------------------------

### Usage of Menu component with items

Source: https://github.com/symfony/ux-twig-component/blob/3.x/doc/index.rst

Shows how to use the Menu component with nested items and the expected rendered output.

```html+twig
{# index.html.twig #}
...
<twig:Menu>
    <twig:Menu:Item href="/">Home</twig:Menu:Item>
    <twig:Menu:Item href="/about">About</twig:Menu:Item>
</twig:Menu>

{# renders as: #}
<nav class="menu">
    <ul>
        <li class="menu__item"><a href="/">Home</a></li>
        <li class="menu__item"><a href="/about">About</a></li>
    </ul>
</nav>
```

--------------------------------

### preRender() method signature

Source: https://github.com/symfony/ux-twig-component/blob/3.x/_autodocs/api-reference/twig-functions.md

Signature for the preRender() method, a short-circuit probe that returns a pre-rendered string if a PreCreateForRenderEvent subscriber set one, else null.

```php
public function preRender(string $name, array $props): ?string
```
Tokens:
Raw