[LiveComponent] Initialize Flowbite after rendering

[momocode-de]

I use Flowbite in my Symfony project. I have a live component that contains dropdown buttons, for example. For these dropdown buttons to work, the Flowbite Javascript must be initialized. This normally happens after loading the page. When my live component is now re-rendered, the dropdown buttons no longer work because the Flowbite Javascript has not been initialized to the new HTML.

Flowbite registers the function “initFlowbite” on the “window” object, which I could use to reinitialize Flowbite after rendering a live component. But what is the best way to initialize the Flowbite Javascript after rendering any live component?

If I see it correctly, there is no global event when any live component is rendered, only the hooks on the component objects. But then I would have to set an extra stimulus controller for each of my live components. Is there a better solution to do this globally for all Live components?

[momocode-de]

I think I have a good solution:

import { getComponent } from '@symfony/ux-live-component';

const initLiveComponentsForFlowbite = async () => {
    const liveComponents = document.querySelectorAll('[data-live-name-value]');

    for (const liveComponent of liveComponents) {
        const component = await getComponent(liveComponent);

        component.on('render:finished', () => {
            window.initFlowbite();
        });
    }
}

initLiveComponentsForFlowbite();

But please let me know if there is a more elegant solution.