Setup Flowbite to work with Phoenix LiveView

[jmnda-dev]

I have gone through the guide for setting up Flowbite in Phoenix here, however perhaps the guide might need to be updated.
This issue is similar to #88. Due to the way Phoenix LiveView works, Flowbite components that require javascript stop working when to navigate between LiveViews. This is because LiveView uses a Websocket, does not do a full page reload but just patching the DOM, therefore it does not dispatch load event which should initialize Flowbite javascript after a page is loaded.

There are some ways to fix this:

1. Update the assets/js/app.js to dispatch the load event once the LiveView is loaded:

window.addEventListener("phx:page-loading-stop", _info =>
    topbar.hide()
+    window.dispatchEvent(new Event("load"), {
+        bubbles: true,
+        cancelable: true
+    })
})

2. Similar to the Flowbite js(/node_modules/flowbite/lib/esm/index.turbo.js) for Turbo, we can have js file specifically for Phoenix LiveView. In the file we have something like this:

// setup events for data attributes
-var events = new Events('load', [
+var events = new Events('phx:page-loading-stop', [
    initAccordions,
    initCollapses,
    initCarousels,
    initDismisses,
    initDropdowns,
    initModals,
    initDrawers,
    initTabs,
    initTooltips,
    initPopovers,
    initDials,
]);
events.init();

I have tested both approaches and they work, though for now I think the first approach would suffice, and perhaps included in the setup guide for Phoenix.
I have attached a gif illustrating the issue where the Flowbite components stop working when I navigate between LiveViews and how Bootstrap components worked without making changes in app.js.

[zoltanszogyenyi]

Hey @jmnda-dev,

Thanks for the valuable insight, feedback and solutions.

I think that we should go with solution number two and create a flowbite.phoenix.js file just like for Ruby on Rails 7.

If you want to I would be more than happy to overlook a PR for this and would be a great opportunity for you to contribute to open-source, if it's something you'd like of course.

We can also use this starter repo as testing grounds and reference: https://github.com/themesberg/tailwind-phoenix-starter

Ultimately, we would only need to update the docs and we're all good to go :)

Cheers,
Zoltan

[jmnda-dev]

Thank you @zoltanszogyenyi, I will create a PR for this issue