[LiveComponent] Better control over re-rendering behavior (relevant for js widgets)

[weaverryan]

Hi!

Inspired by: #489 (comment)

tl;dr: Suppose you have:

<div {{ stimulus_controller('my-date-picker') }}>
    <input type="text"> <!-- the date field that will be transformed
</div>

A) You add a JS widget inside your live component - e.g. a date picker - via a stimulus controller
B) That widget modifies the markup of part of your widget
C) On re-render, the modified markup is "reset" back to its original state, effectively killing your JS widget functionality

One solution to this is to force live components to ALWAYS fully re-render the entire div element attached to the Stimulus controller.. This forces the existing Stimulus controller (which loads the date picker) to be destroyed and totally reinitializing. So now, step (C) is different:

C) On re-render, the entire date picker element is re-rendered from scratch, causing the Stimulus controller to reinitialize and the date picker functionality to be re-added.

Current Solution

Currently, this is possible by doing something silly like this:

<div data-live-id="{{ random() }}" {{ stimulus_controller('my-date-picker') }}>

The always-changing data-live-id tells live components to always re-render this.

Proposed Solution

@tdumalin proposed something like:

<div data-live-rerender="always" {{ stimulus_controller('my-date-picker') }}>

With possible values of:

A) always - ALWAYS re-render this element
B) never - would replace data-live-ignore
C) onChange - @tdumalin what did you have in mind for this?

[tdumalin]

Hi @weaverryan

Great news that an issue is open to allow a re-render configuration using attribute !
By on onChange i meant the default behavior, maybe default is more appropriate ?
Or may be we should not set the attribute at all, we have to think if that attribute can be changed in some scenario, in this case it may be interesting to able to reset the default re-render

[weaverryan]

See #519 for the proposed syntax :)