2.17.0 : New UX Icons Package

Hey UX-ers!

This is a big release - lots of new features to Twig/Live Components and the first release of UX Icons! With UX Icons, comes a beautiful icon search on ux.symfony.com!

Live Components

• Improve child render handling: avoid removing element from DOM when possible by @weaverryan in #1561
• Add modifier option to LiveProp by @squrious in #1507
• Fix collections hydration with serializer by @squrious in #1583
• Lazy load LiveComponent by @smnandre in #1515
• Throw exception for typed LiveProps as interfaces by @smnandre in #1593
• Alias URL bound props by @squrious in #1396

Twig Components

• CVA: Apply function accept null arguments by @WebMamba in #1575
• Add attributes.has() method by @barbieswimcrew in #1571
• CVA: Allow array for base, variants and compound by @WebMamba in #1600
• CVA: Allow compound variant value to be string by @kbond in #1610
• Allow stringable objects as attribute values by @kbond in #1609
• Nested attributes by @kbond in #1405
• Remove experimental tag to HTML syntax by @WebMamba in #1662
• CVA: Resolving boolean as variant keys by @smnandre in #1710
• Handle aria-* attribute boolean values by @smnandre in #1709
• Merge props from template with class props by @WebMamba in #1652
• Twig "use_yield" compatibility by @smnandre in #1487

Icons

• Introduce symfony/ux-icons by @kbond in #1603
• Website Icon search (beta) by @smnandre in #1577

Chart.js

• Add view-value-change event by @IndraGunawan in #1605

Autocomplete

• Command make:autocomplete-field output a doc compliant class by @lucbu in #1699
• Use choice_value in the WrappedEntityTypeAutocompleter in EntityAutocompleteField by @jakubtobiasz in #1723

Turbo

• Use blocks instead of partials to render turbo-streams by @nicolas-grekas in #1045

Lazy Image

• Cache BlurHash, close #2 by @Kocal in #1755
• Support intervention/image 3 by @kbond in #1766

New Contributors

• @o0morgan0o made their first contribution in #1580
• @barbieswimcrew made their first contribution in #1576
• @tomschwiha made their first contribution in #1621
• @IndraGunawan made their first contribution in #1605
• @JeanDavidDaviet made their first contribution in #1633
• @gremo made their first contribution in #1615
• @kachnitel made their first contribution in #1584
• @yoanbernabeu made their first contribution in #1654
• @LtMost made their first contribution in #1703
• @JorickPepin made their first contribution in #1692
• @kasperh90 made their first contribution in #1689
• @lucbu made their first contribution in #1699
• @cavasinf made their first contribution in #1705
• @raphael-geffroy made their first contribution in #1716
• @daifma made their first contribution in #1746
• @adrienlucas made their first contribution in #1745

Full Changelog: v2.16.0...v2.17.0

2.16.0 : Live Components is Stable 🥳

Hi UX'ers!

This release is the first that declares Live Components as stable 🎆! This means that it is now protected by our backwards compatibility promise. However, there are some BC breaks in LiveComponents that will affect most projects. See https://github.com/symfony/ux/blob/2.x/src/LiveComponent/CHANGELOG.md#2160

In addition, this release has a number of fun features & fixes.

Live Components

• LiveComponents is now stable and no longer experimental 🥳

• [BC BREAK] The data-action-name attribute behavior was removed in favor of using Stimulus "action parameters" and data-live-action-param. This is a breaking change if you were using the data-action-name attribute directly in your templates. #1418

  To upgrade your application, follow these changes:

  <button
      data-action="live#action"
  -    data-action-name="debounce(300)|save"
  +    data-live-action-param="debounce(300)|save"
  >Save</button>

  To pass arguments to an action, also use the Stimulus "action parameters" syntax:

  <button
      data-action="live#action"
  -     data-action-name="addItem(id={{ item.id }}, itemName=CustomItem)"
  +     data-live-action-param="addItem"
  +     data-live-id-param="{{ item.id }}"
  +     data-live-item-name-param="CustomItem"
  >Add Item</button>

  Additionally, the prevent modifier (e.g. prevent|save) was removed. Replace this with the standard Stimulus :prevent action option:

  <button
  -    data-action="live#action
  +    data-action="live#action:prevent"
  -    data-action-name="prevent|save"
  +    data-live-action-param="save"
   >Save</button>

• [BC BREAK] The data-event attribute was removed in favor of using Stimulus "action parameters": rename data-event to data-live-event-param. Additionally, if you were passing arguments to the event name, use action parameter attributes for those as well - e.g. data-live-foo-param="bar". #1418

• Reverted setting ignoreActiveValue: true in Idiomorph #1548

• New placeholder macro to generate defer/lazy skeleton #1532

• improve TestLiveComponent::actingAs() #1461

• Drop Twig 2 support #1436

• Add better error message when hydrating dates #1431

• Store TemplateMap in build_dir #1525

Twig Component

• Introduce CVA to style TwigComponent #1416
• Drop Twig 2 support #1436
• Fix full context is stored in profiler #1552

Autocomplete

• Missing translations added for many languages #1527 #1528 #1535

Translator

• Increase version range of intl-messageformat to ^10.5.11, in order to see a faster implementation of ICU messages parsing. #1443

New Contributors

• @itsdanielfelix made their first contribution in #1511
• @Fan2Shrek made their first contribution in #1545
• @xDeSwa made their first contribution in #1535

Full Changelog: v2.15.0...v2.16.0

Have fun!

v2.15.0 - LiveComponents & Autocomplete improvements & more

Hi UX'ers!

This release contains a mixture of new features and important bug fixes, especially LiveComponents & Autocomplete, which were discovered after the morphing library change in 2.14.0.

Autocomplete

Add doctrine/orm 3 support #1468

• Allow passing extra options to the autocomplete fields #1322
• Fix 2 bugs where TomSelect would reset when not necessary #1502
• Add one missing German translation #1521

Chartjs

• Remove restriction that prevented Chart.js 3.9 #1518

LiveComponent

• [BC BREAK] The data-live-id attribute was changed to id #1484
• Fixed child handling bug during re-rendering introduced with the
  new morphing library in 2.14.0 #1484
• Fix bug where the active input would maintain its value, but lose its cursor position #1501
• Restrict Twig 3.9 for now #1486

Turbo

• Add Turbo 8 support #1476
• Fix missing use statement used during broadcast #1475

TwigComponent

• Add the ability to render specific attributes from the attributes variable #1442
• Restrict Twig 3.9 for now #1486
• Build reproducible TemplateMap to fix possible post-deploy breakage #1497

New Contributors

• @jrushlow made their first contribution in #1475
• @partulaj made their first contribution in #1485
• @simonsolutions made their first contribution in #1521

Full Changelog: v2.14.2...v2.15.0

Have fun!

Fixing Turbo support for newer Doctrine

Hi UX'ers!

This release fixes a regression in the Live Component testing utilities.

Turbo

• [Turbo] Fixing support for not using old ClassUtils by @weaverryan in #1471

StimulusBundle

• [StimulusBundle] UxPackageReader class doesn't support projects with varied structures using Composer with custom directory structure by @yobrx in #1467

New Contributors

• @yobrx made their first contribution in #1467

Full Changelog: v2.14.1...v2.14.2

Have fun!

Fix regression in Live Component testing tools

Hi UX'ers!

This release fixes a regression in the Live Component testing utilities.

Live Component

• fix: use method from metadata for live component test helper by @daFish in #1434

StimulusBundle

• Handles Windows directory separator when normalizing controller names by @tamcy in #1444

ux.symfony.com

• [Site] LiveMemory demo by @smnandre in #1377

New Contributors

• @tamcy made their first contribution in #1444

Full Changelog: v2.14.0...v2.14.1

Have fun!

Features & Fixed for LiveComponent, TwigComponent & other packages

Hi UX'ers!

A beautiful release with a set of features across several packages. 100+ commits, from 19 contributors 🔥 .

TwigComponent

• Make ComponentAttributes traversable/countable
• Fixed lexing some {# twig comments #} with HTML Twig syntax
• Fix various usages of deprecated Twig code

LiveComponent

• Add support for URL binding in LiveProp
• DOM morphing changed from morphdom to idiomorph
• Allow multiple LiveListener attributes on a single method
• Requests to LiveComponent are sent as POST by default
• Add method prop to AsLiveComponent to still allow GET requests, usage: #[AsLiveComponent(method: 'get')]
• Add a new urlReferenceType parameter to AsLiveComponent, which allows to
  generate different type URL (e.g. absolute) for the component Ajax calls
• The symfony/serializer dependency is now optional
• Added a data-skip-morph attribute to allow skipping morphing of an element
  (the element's attributes will be morphed, but its inner HTML will be overwritten
  instead of morphed)
• Added an entry to the packages' package.json file so that @symfony/ux-live-component
  will appear in the user's importmap.php file if using AssetMapper. This
  will allow using the JavaScript from the package without extra setup.
• Fixed edge-case rendering bug where a 2nd Ajax request might start before
  the 1st finished processing
• Fix usage of {% embed %} with {% block %} in <twig:> components
• Fixed data-loading not working when on root element of a component
• Fixed error when class attributes contained a space at start or end
• Fixed loading directives being matched in a child component

Autocomplete

• Fixed behavior of Autocomplete when the underlying select or option
  elements were modified to hopefully, more reliably, reset the autocomplete
  instance. This is particularly important with LiveComponents.
• Add support for the render.loading_more Tom Select Virtual Scroll option (loading_more_text)
• Avoid losing the selected options when the Stimulus component is disconnected
  and reconnected to the DOM.
• Added tom-select/dist/css/tom-select.bootstrap4.css to autoimport - this
  will cause this to appear in your controllers.json file by default, but disabled
  see.

StimulusBundle

• Added Typescript controllers support

ChartJs

• Add support for Chart.js version 4

Full Changelog: v2.13.3...v2.14.0

New Contributors

• @nayodahl made their first contribution in #1316
• @squrious made their first contribution in #1230
• @srich387 made their first contribution in #1367
• @vgaret made their first contribution in #1338
• @hepisec made their first contribution in #1218
• @althaus made their first contribution in #1425

Have fun!

Various minor bug fixes

Hi UX'ers!

A bug fix release. Nice!

TwigComponent

• Merge data-action in ComponentAttributes #1288
• Fix DataCollector return types #1297

LiveComponent

• Fix date object hydration for custom format #1295
• Allow trailing coma in "props" tags #1298
• Fix BatchActionController redirection #1301

StimulusBundle

• Remove stimulus.asset_mapper.loader_javascript_compiler when no asset-mapper

Full Changelog: v2.13.2...v2.13.3

New Contributors

• @nieck made their first contribution in #1272
• @maxrem made their first contribution in #1269
• @boedah made their first contribution in #1280
• @TBoileau made their first contribution in #1275
• @JeroenMoonen made their first contribution in #1302
• @mariusadam made their first contribution in #1294
• @6insanes made their first contribution in #1301
• @stloyd made their first contribution in #1311

Have fun!

v2.13.2 Revert change to type: module

Hi UX'ers!

In 2.13.0, all UX JavaScript packages changed to type: module. This had unintended side effects in certain environments / setups. This release reverts that change. See #1268.

Full Changelog: v2.13.1...v2.13.2

Have fun!

v2.13.1: Fix chart.js but with type: module

Hi UX'ers!

This release fixes a but in ux-chart.js. We changed the package to type: 'module', but due to some inconsistencies with the chart.js library, that can't be done quite yet. We've reverted for now.

What's Changed

• [Chart.js] Reverting chart.js type: module by @weaverryan in #1264

Full Changelog: v2.13.0...v2.13.1

Have fun!

v2.13.0: Lazy/Deferred components, Symfony 7 support & more

Hi UX People!

This is a big release that contains new features across the components! It's the result of 156 commits from 29 different contributors! Note there is an edge-case BC BREAK in StimulusBundle if you were using action parameters in an unexpected way.

All Components

• Add Symfony 7 support.
• Change JavaScript package to type: module

Autocomplete

• Add new BaseEntityAutocompleteType
• Drop symfony 5.4 support.

TwigComponent

• Added configuration to separate your components into different "namespaces"
• Add outerScope variable reach variables from the parent template of an
  "embedded" component.
• Deprecate calling ComponentTemplateFinder constructor without directory argument.
• Add profiler integration: TwigComponentDataCollector and debug toolbar templates
• Add search feature in debug:twig-component command.
• Fix inconsistencies with how {% component %}/<twig:component> syntaxes are
  rendered vs component(): PostRenderEvent is now dispatched & the template
  resolution happens at runtime.
• Fix priority of passed in props vs default props with anonymous components.
• Add Symfony 7 support.
• TwigPreLexer: improve performance.
• Fix twig:lint bug with anonymous component tag.

LIveComponent

• Add deferred/lazy rendering of Live Components.
• Fix option tag synchronization.
• Handle array-like objects when working with checkboxes.
• Normalize "true" & "false" model values
• Fix DTO hydration from phpdoc typehints.
• Fix instantiating LiveComponentMetadata multiple times.
• Throwing an error when setting an invalid model name.

StimulusBundle

• Normalize parameters names given to twig helper 'stimulus_action()'.
  BC Break: previously, parameters given in camelCase (eg.
  bigCrocodile) were incorrectly registered by the controller as
  flatcase (event.params.bigcrocodile). This was fixed, which means
  they are now correctly registered as camelCase
  (event.params.bigCrocodile).
• Added AssetMapper 6.4 support.
• Add Symfony 7 support.
• Fix missing double dash in namespaced Stimulus outlets.
• Change JavaScript package to type: module

Svelte

• Add support for Svelte 4.

New Contributors

• @tacman made their first contribution in #1144
• @dsoriano made their first contribution in #1145
• @gregberger made their first contribution in #1148
• @andersonamuller made their first contribution in #1154
• @JoppeDC made their first contribution in #1135
• @gharlan made their first contribution in #1175
• @jakubtobiasz made their first contribution in #1143
• @maelanleborgne made their first contribution in #1196
• @yceruto made their first contribution in #1185
• @norival made their first contribution in #1193
• @rrenteria-dev made their first contribution in #1250
• @TheDutchScorpion made their first contribution in #1251
• @bdujon made their first contribution in #1246

Full Changelog: v2.12.0...v2.13.0