[Live] Smart Rendering! Mix/match live components with external JavaScript

[weaverryan]

Q	A
Bug fix?	yesish
New feature?	yes
Tickets	Fixes #702, Fixes #490, Fixes #515, Fixes #270, Fixes Bug H on #102, Fixes #354 Replaces #519
License	MIT

Hi!

This fixes the biggest pain-point with LiveComponents: mixing them with custom JavaScript. Before this PR, a lot of things were difficult/weird: keeping modals open, collapsing content (#702), using JS widgets like Autocomplete or a date picker, and more. The best part? Everything works automatically with you needing to do anything.

With this PR, a new philosophy is born: start with a live component, then mix in any "extras" you want with Stimulus controllers.

The new "smart rendering" system isn't designed to catch everything (see the docs), but I think it will catch 95%+ of the situations. Here are 2 cool things that now work out-of-the-box:

A) ux-autocomplete + Live components works perfectly now - even if the available options completely change - the "dependent form fields" example has been updated to use autocomplete on both fields 🔥

ScreenFlow.mp4

B) I added a new demo of Live Components + Autocomplete + Chartjs. What you see is done without needing to write any JavaScript:

live-chart.mp4

How Does it Work?

If you care about the technical details, we leverage a MutationObserver to watch your component for changes made by anything other than live components. Those changes are "tracked". Then, during re-render, we use that info to keep those custom changes.

Cheers!

[jcrombez]

Can't wait to get back to work tomorrow to try this black magic, good job <3

[weaverryan]

Fixing a bug I just found - where the live controller needs to be registered before any other controllers that might make custom changes in their connect() method

[weaverryan]

And... here's the fix: symfony/stimulus-bridge#81 - using the latest version of @symfony/stimulus-bridge will be a requirement if you want to take advantage of this new feature in Live Components.

[norkunas]

I've got a problem with this philosophy:

In live component i have a list of checkboxes. Each checkbox has it's own stimulus controller which has configured custom checked class. So when I check the checkbox, the class is added, live component rerenders - everything fine.

Simultaneously I have an live component action which changes the checked value in component code, so after rerender checkbox becomes unchecked but the class is still left here even backend returns the element without custom checked class. Even returns with the checked attribute..

[weaverryan]

Thanks for bringing this up @norkunas - I figured there would be some real-world hiccups we'd need to work through.

so after rerender checkbox becomes unchecked but the class is still left here even backend returns the element without custom checked class.

That makes sense. Question: BEFORE the new re-rendering system, did you have the opposite problem? When the Stimulus controller added the checked class, when the live component re-rendered (not via the action, just a normal re-render), didn't it NOT include the custom class? And so, didn't the re-render cause the custom class to be lost? Or do you have the "if checked -> add custom class" logic both inside of Twig and also include if your Stimulus controller? And if so, why do you have it in both places? Is it just to make the experience feel faster / more responsive (i.e. as SOON as the user checks the box, the class is added, without needing to wait for the re-render)?

Btw, feel free to open a new issue - I don't want this to get lost on a merged PR - I sometimes catch these notifications, and sometimes not :)

[Enitnelav]

Hi,
Do you know when the 2.8 version will be stable and available ?
Thanks

[weaverryan]

Hoping within a week - only waiting for 2 minor bug fixes with new twig syntax

[ag-erwan]

Hello community

I come to you with a similar problem.
In addition to the Live Component and Autocomplete libraries I also use the symfonycast/dynamics-form library, I manage to get my fields to display at the first change with the data in them, but when I modify my select field again, my other fields do not appear. do not modify. In fact it's a rendering problem, meaning it doesn't render again. Because when I do a dd of the field I can clearly see the data modify.
Thank you in advance for your help

[antoniovj1]

@ag-erwan Did yo solve you issue? I'm facing the same problem I think