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!