Goodbye "Experimental" Status! Plus features & fixes

Hi UX people!

This release removes the "experimental" flag from Symfony UX, with the exception of symfony/ux-live-component, which is still experimental.

To prepare, the internal directory structure of most of the bundles was updated to follow best-practices. When updating the packages, Flex will automatically update the package path in package.json. In a few cases (Autocomplete & LiveComponent), the routing file location changes. Use composer recipes:update to handle that change.

**Note ⚠️ ** The LiveComponent routing file location changed and you must now specify prefix: /_components. See the entry below for LiveComponent.

Diff: v2.5.0...v2.6.0

Autocomplete

• [BC BREAK]: The path to routes.php changed and you should update your
  route import accordingly:

# config/routes/ux_autocomplete.yaml
ux_autocomplete:
-    resource: '@AutocompleteBundle/Resources/routes.php'
+    resource: '@AutocompleteBundle/config/routes.php'
    prefix: '/autocomplete'

• Add support for tom-select version 2.2.2 and made this the minimum-supported
  version.
• Added support for the preload TomSelect option.
• Fix don't add WHERE IN criteria without params (#561).
• Fix issue where max_results was not passed as a Stimulus value (#538).
• Add all possible stylesheets for tom-select to the autoimport to choose from.

Typed

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

Turbo

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

• The directory structure of the bundle was updated to match modern best practices.

Swup

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

React

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

• The directory structure of the bundle was updated to match modern best-practices.

Notify

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

• The directory structure of the bundle was updated to match modern best-practices.

LiveComponent

• [BC BREAK]: The path to live_component.xml changed and the import now
  MUST have a prefix: you should update your route import accordingly (the
  name of the route also changed to ux_live_component):

# config/routes/ux_live_component.yaml
live_component:
-    resource: '@LiveComponentBundle/Resources/config/routing/live_component.xml'
+    resource: '@LiveComponentBundle/config/routes.php'
+    prefix: /_components

• Removed Content-Type header when returning the empty response redirect.
• Fixed bug when re-rendering SVG's (.#557)

LazyImage

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

• The directory structure of the bundle was updated to match modern best-practices.

Dropzone

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

• The directory structure of the bundle was updated to match modern best-practices.

Cropperjs

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

• The directory structure of the bundle was updated to match modern best-practices.

Chartjs

• [BC BREAK] The assets/ directory was moved from Resources/assets/ to assets/. Make
  sure the path in your package.json file is updated accordingly.

• The directory structure of the bundle was updated to match modern best-practices.

Cheers!

2.5.0: Features & Bug fixes for Autocomplete, Vue & Live Components

Hi UX people!

This release contains a huge number of features & bug fixes, focused primarily on live component, Autocomplete an Vue:

Diff: v2.4.0...v2.5.0

Vue

• Added support for lazily-loaded Vue components - #482.

• Added vue:before-mount JavaScript event - #444.

Autocomplete

• Automatic pagination support added: if the query would return more results than your limit, when the user scrolls to the bottom of the options, it will make a second Ajax call to load more.

• Added max_results option to limit the number of results returned by the Ajax endpoint - #478.

• Support added for setting the required minimum search query length (defaults to 3) (#492)

• Fix support for more complex ids, like UUIDs - #494.

• Fixed bug where sometimes an error could occur in the Ajax call related to the label - #520.

Twig Component

• [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.

Live Component

• [BEHAVIOR CHANGE] Previously, Ajax calls could happen in parallel (if you changed a model then triggered an action before the model update Ajax call finished, the action Ajax call would being in parallel). Now, if an Ajax call is currently happening, any future requests will wait until it finishes. Then, all queued changes (potentially multiple model updates or actions) will be sent all at once on the next request.

• [BEHAVIOR CHANGE] Fields with data-model will now have their value set automatically when the component initially loads and re-renders. For example, previously you needed to manually set the value in your component template:

  <!-- BEFORE -->
  <input data-model="firstName" value="{{ firstName }}">

  This is no longer necessary: Live Components will now set the value on load,
  which allows you to simply have the following in your template:

  <!-- AFTER -->
  <input data-model="firstName">

• [BEHAVIOR CHANGE] The way that child components re-render when a parent re-renders has changed, but shouldn't be drastically different. Child components will now avoid re-rendering if no "input" to the component changed and will maintain any writable LiveProp values after the re-render. Also, the re-render happens in a separate Ajax call after the parent has finished re-rendering.

• [BEHAVIOR CHANGE] If a model is updated, but the new value is equal to the old one, a re-render will now be avoided.

• [BEHAVIOR CHANGE] Priority of DoctrineObjectNormalizer changed from 100 to -100 so that any custom normalizers are used before trying DoctrineObjectNormalizer.

• [BC BREAK] The live:update-model and live:render events are not longer dispatched. You can now use the "hook" system directly on the Component object/

• [BC BREAK] The LiveComponentHydrator::dehydrate() method now returns a DehydratedComponent object.

• Added a new JavaScript Component object, which is attached to the __component property of all root component elements.

• the ability to add data-loading behavior, which is only activated when a specific action is triggered - e.g. <span data-loading="action(save)|show">Loading</span>.

• Added the ability to add data-loading behavior, which is only activated when a specific model has been updated - e.g. <span data-loading="model(firstName)|show">Loading</span>.

• Unexpected Ajax errors are now displayed in a modal to ease debugging! #467.

• Fixed bug where sometimes a live component was broken after hitting "Back: in your browser - #436.

Cheers!

New LiveComponent data binding, Repeatable Broadcast & Various Bug fixes

Hi UX people!

This release contains various bug fixes for several components, a new "data binding" system for LiveComponents and the ability to use multiple #[Broadcast] attributes. See the CHANGELOG inside each component for more details.

v2.2.0...v2.3.0

Cheers!