e2e686be45
Close https://github.com/twigphp/Twig/issues/4790, replace https://github.com/twigphp/Twig/pull/4791. This PR update `ComponentAttributes` to support `AttributeValueInterface` from Twig 3.24 with `html_attr_type` and HTML attributes merging strategy. This helps resolve situations where merging HTML attributes needs to be more sophisticated than a simple `array_merge`. For example in UX Toolkit, we have an issue where it's not possible to use a single `<twig:Button>` with `Dialog` and `Tooltip` triggers, both triggers define a `trigger_attrs` with some attributes that may conflict. Here a simplified version: ``` {%- set dialog_trigger_attrs = { 'data-action': 'click->dialog#open', } -%} {%- set tooltip_trigger_attrs = { 'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide', } -%} <twig:Button {{ ...dialog_trigger_attrs }} {{ ...tooltip_trigger_attrs }} /> ``` Here, only `data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide"` will be rendered, the value from `dialog_trigger_attrs` is purely ignored. By supporting the HTML attributes merging strategy introduced in Twig HTML Extra 3.24, we can use the new Twig filter `html_attr_type`: ```twig {%- set dialog_trigger_attrs = { 'data-action': 'click->dialog#open'|html_attr_type('sst'), } -%} {%- set tooltip_trigger_attrs = { 'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide'|html_attr_type('sst'), } -%} ``` Combined to `html_attr_merge` (that return an array where some values are an instance of `Twig\Extra\Html\HtmlAttr\AttributeValueInterface`), the following example will correctly render `data-action="click->dialog#open mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide"`: ```twig <twig:Button {{ ...{}|html_attr_merge(dialog_trigger_attrs, tooltip_trigger_attrs) }} /> ```
Twig Components
Twig components give you the power to bind an object to a template, making it easier to render and reuse small template "units" - like an "alert", markup for a modal, or a category sidebar. A very simple example would be a reusable alert component:
This repository is a READ-ONLY sub-tree split. See https://github.com/symfony/ux to create issues or submit pull requests.
Sponsor
The Symfony UX packages are backed by Mercure.rocks.
Create real-time experiences in minutes! Mercure.rocks provides a realtime API service that is tightly integrated with Symfony: create UIs that update in live with UX Turbo, send notifications with the Notifier component, expose async APIs with API Platform and create low level stuffs with the Mercure component. We maintain and scale the complex infrastructure for you!
Help Symfony by sponsoring its development!