[React] Add permanent option to react_component function
#2283
Conversation
|
Hello @smnandre, I work on a website for a french media company which include a audio player which is implemented using react. We tried to use symfony/ux react component with turbo and a data-turbo-permanent attribute to allow the non stop music playing during navigation. We discovered that it was not possible with the current code like you said. But it was easily fix moving the connect function to the initialize function and removing the disconnect entierly. Should we use your implementation instead ? Would we see bugs with our solution ? |
data-turbo-permanentpermanent option to react_component function
|
Hi @codisart ! I changed the implementation to avoid playing with timeouts/delays. (I updated the first message) |
6046811 to
4d60724
Compare
|
Thanks Simon. |
(Issue reported on a work project)
Using Turbo
data-turbo-permanentcreates race conditions that lead to the controller code failing to keep or reload the component.In the current implementation, the Stimulus controller unmounts the component then tried to create it again.. which cannot be done:
https://react.dev/reference/react-dom/client/createRoot#root-unmount
The proposed implementation uses a short delay before calling unmount. It is "morphing-library-agnostic", and will work with any Turbo-like framework, with no impact on the existing projects using UX React (except a bug fixed 😅 ).New implementation:
A new option
permanentprevent the "unmount" of the component when set to trueThis allows to avoid the bug when a component is disconnected and immediately reconnected (ex with Turbo)