symfony/ux-twig-component
Build reusable UI components in Twig with Symfony UX. Create component classes + templates, pass props, use slots, and keep rendering logic clean and testable. Integrates smoothly with Symfony apps to structure views without a frontend framework.
ComponentAttributes::defaults() method now accepts any iterable argument.
The ComponentAttributes::add() method has been deprecated. To add a Stimulus
controller to the attributes, use {{ attributes.defaults(stimulus_controller('...')) }}.<twig:ComponentName>true attribute values now render just the attribute name, false excludes it entirely.AsTwigComponent is now optional and defaults to the class name.ComponentFactory methods.PreMount and PostMount hooks can now return nothing.[BC BREAK] The PreRenderEvent namespace was changed from Symfony\UX\TwigComponent\EventListener
to Symfony\UX\TwigComponent\Event.
Add new autowireable ComponentRendererInterface
Added PostRenderEvent and PreCreateForRenderEvent which are dispatched just
before or after a component is rendered.
Added PostMountEvent and PreMountEvent which are dispatched just before
or after the component's data is mounted.
Added Twig template namespaces - #460.
AttributeValueInterface from twig/html-extra:^3.24.0 in ComponentAttributesindex.html.twig template fallback when resolving namespaced anonymous componentsAsTwigComponent(template: FromMethod('getCustomFuntion'))profiler.collect_components to control component data collection
in the profiler (enabled in debug mode by default)ComponentAttributes rendering when using StimulusAttributes as default attributesComponentAttributes now requires a Twig\Runtime\EscaperRuntime
instance as second argumentHtmlAttributeEscaperInterface, TwigHtmlAttributeEscaper and ComponentAttributesFactoryComponentAttributes responsible for attribute escaping ensuring
consistent and secure HTML output across all rendering contextsHtmlAttributeEscaperInterface to the ComponentAttributes
constructorcva Twig function in favor of html_cva from twig/html-extra #2144ExposeInTemplate to be used on public component methods.attributes variable #1442ComponentAttributes traversable/countable{# twig comments #} with HTML Twig syntaxPreMountEvent and PostMountEventouterScope variable reach variables from the parent template of an
"embedded" component.ComponentTemplateFinder constructor without directory argument.TwigComponentDataCollector and debug toolbar templatesdebug:twig-component command.{% component %}/<twig:component> syntaxes are
rendered vs component(): PostRenderEvent is now dispatched & the template
resolution happens at runtime.debug:twig-component command.TemplateCacheWarmer return type.RenderedComponent::crawler() and toString() methods.outerBlocks.<twig:component> syntax where an attribute is set to an empty value.Make public component properties available directly in the template ({{ prop }} vs {{ this.prop }}).
Add PreMount priority parameter.
Add PostMount hook component hook to intercept extra props.
Add attributes system that takes extra props passed to component() and converts them
into a ComponentAttributes object available in your template as attributes.
Add PreRenderEvent to intercept/manipulate twig template/variables before rendering.
Add ExposeInTemplate attribute to make non-public properties available in component
templates directly.
Add Computed Properties system.
Support for stimulus version 2 was removed and support for [@hotwired](https://github.com/hotwired)/stimulus
version 3 was added. See the [@symfony/stimulus-bridge CHANGELOG](https://github.com/symfony/stimulus-bridge/blob/main/CHANGELOG.md#300)
for more details.
Minimum PHP version was bumped to 8.0 so that PHP 8 attributes could be used.
The ComponentInterface was dropped and replaced by the AsTwigComponent attribute.
The getComponentName() was replaced by a name argument to the attribute.
Before:
use Symfony\UX\TwigComponent\ComponentInterface;
class AlertComponent implements ComponentInterface
{
public string $type = 'success';
public string $message;
public static function getComponentName(): string
{
return 'alert';
}
}
After:
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
#[AsTwigComponent('alert')]
class AlertComponent
{
public string $type = 'success';
public string $message;
}
If you're using a version lower than Symfony 5.3, you will need
to manually tag all component services with twig.component. This is
because Symfony 5.3 introduces autoconfiguration for PHP 8 attributes,
which this library leverages.
The template for a component can now be controlled via the template argument
to the AsTwigComponent attribute:
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
#[AsTwigComponent('alert', template: 'other/path/alert.html.twig')]
class AlertComponent
{
// ...
}
How can I help you explore Laravel packages today?