ddb8ecb7eb
This PR was merged into the 2.x branch.
Discussion
----------
[TwigComponent] Add support for `AttributeValueInterface` from `twig/html-extra:^3.24.0` in `ComponentAttributes`
| Q | A
| -------------- | ---
| Bug fix? | no
| New feature? | yes <!-- please update src/**/CHANGELOG.md files -->
| Deprecations? | no <!-- if yes, also update UPGRADE-*.md and src/**/CHANGELOG.md -->
| Documentation? | no <!-- required for new features, or documentation updates -->
| Issues | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License | MIT
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:
```twig
{%- 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` filter (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) }}
/>
```
Commits
-------
bd2410fb79 [TwigComponent] Add support for `AttributeValueInterface` from `twig/html-extra:^3.24.0` in `ComponentAttributes`
Symfony UX: a JavaScript ecosystem for Symfony
Symfony UX is an initiative and set of libraries to seamlessly integrate JavaScript tools into your application. For example, want to render a chart with Chart.js? Use UX Chart.js to build the chart in PHP. The JavaScript is handled for you automatically.
That's Symfony UX.
Symfony UX leverages Stimulus for JavaScript and can integrate with AssetMapper or with Webpack Encore (with the help of Stimulus Bridge)
Resources
- Install Symfony UX.
- List of UX Packages and their documentation.
- Symfony UX Official Demo.
- Watch the Stimulus Screencast on SymfonyCasts.
Let's build an amazing ecosystem together
Symfony UX is an initiative: its aim is to build an ecosystem. To achieve this, we need your help: what other packages could we create in Symfony UX? What about a library that automatically adds an input mask to the text fields of your Symfony forms? Anything you do in JavaScript could be done streamlined as a UX package.
Let's create an amazing ecosystem together!
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!
Contributing
Thank you for considering contributing to Symfony UX! You can find the contribution guide here.