Targeted parsing and initialization of components

[samld]

I've seen a lot of issues from people who use the vanilla version with HTMX (see issues #812, #813, #820 [mine], #821). More precisely, content that is dynamically loaded and swapped needs to be parsed by Flowbite to allow for interactivity. Calling initFlowbite() will cause the whole DOM tree to be reparsed which can cause weird behaviour, e.g. if the loaded content is within a modal (see issue #820).

This PR intends to address these issues by making the internal initialization functions public so that they can be called on specific elements of the DOM tree. Furthermore, it adds an optional parameter to init[ComponentName] functions allowing for a more targeted parsing and initialization. The function initFlowbite itself has been given such an optional parameter. This works by leveraging the fact that the querySelector can work on any node from the DOM tree.

I believe that these changes will allow people using HTMX to target the elements to parsed and initialized within HTMX onload event without having to write their own initialization script. Given the growth of HTMX, I think this package benefits from being a little more agnostic about its initialization scenarios.

I also think that documenting both the integration of Flowbite within a HTMX-driven application and the newly-added functions would be greatly beneficial to the people using this package. I would be willing to provide such documentation in a separate PR provided that you accept my contribution to the package.

Finally, regarding the Datepicker plugin, if my contribution is accepted, I will address it in a future PR. I have not included it as I wanted to address the most common issues and I wasn't certain if I needed to add to inject the methods in the window object. This pattern seems to have been followed for all components, but, oddly enough, not for this plug in.

How to integrate it with HTMX

This is how I run it with the proposed version built and deployed in my current project.

// this will parse any DOM content loaded by HTMX, 
// including the body at the initial page render.
htmx.onLoad(function (content) {
    initFlowbite(content);
})

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[lobot1010]

It would be great if this was merged in! Solves many of my issues with Flowbite and HTMX integration.

[samld]

It would be great if this was merged in! Solves many of my issues with Flowbite and HTMX integration.

In the meantime, you can clone it and build it with yarn build:js and get the content from the ./static/ directory. Be sure to be on the targeted-init branch. It should give you both the minimized file and a map file (among other files). Don't call flowbiteInit outside the htmx.onLoad, as I've already written, the element is triggered when the page is finished loading and the body is passed as the element parameter.

[zoltanszogyenyi]

Hey @samld,

Thanks for this amazing PR! One last thing that would be really cool is if you documented these new changes and API functionalities for this specific page: https://flowbite.com/docs/getting-started/javascript/

After that, we could even open up another guide page for usage with HTMX. The PR looks good, but I'll need to do some tests obviously and see how this affects out integration guides such as with React or Vue.

Cheers, Zoltan

[samld]

@zoltanszogyenyi Thanks for taking the time to parse through my contribution! Let me know the outcome of your tests, if I need to change anything. Meanwhile, I'll update the documentation. There should a commit by the end of the week!

[samld]

@zoltanszogyenyi I have updated the documentation adding a few more information about the targeted init methods.

[biellsilva5]

Great, this will help me a lot.

[malikvogt]

This would actually make my application work with htmx and flowbite.

[quanturium]

I need this as well, my application modify the dom and I need to reload parts of the DOM with initFlowbite() without calling it on the entire page.

[dzonerzy]

Any update on this? I need this fix too

[samld]

Hey @zoltanszogyenyi, have you had the time to look into the changes I proposed? It seems a few people here are eager for a merge to occur. If there is anything that needs to be changed, let me know!

Thanks!

[malikvogt]

Hey @samld,

Thanks for this amazing PR! One last thing that would be really cool is if you documented these new changes and API functionalities for this specific page: https://flowbite.com/docs/getting-started/javascript/

After that, we could even open up another guide page for usage with HTMX. The PR looks good, but I'll need to do some tests obviously and see how this affects out integration guides such as with React or Vue.

Cheers, Zoltan

Are these changes planned for the near future?