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]

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?

[zkne]

@zoltanszogyenyi Any update regarding this PR?

[ryanp-dev]

Any updates on this? This change is needed in our project too.

[samld]

I will fix the conflicts so that the PR might stand a better chance of being accepted.

[stekyne]

Also facing this issue. Find it hard to believe this is not covered already or is being ignored. It's basically unusable otherwise.

[zoltanszogyenyi]

Hey guys,

Sorry, I was knocked out for a while because of a sickness. I'll have this reviewed for the next update.

Been doing some other stuff like the new datatables update:

https://flowbite.com/docs/plugins/datatables/

I need to see how will this affect other integration guides like for Angular, Vue, and so on.

[zoltanszogyenyi]

Also thank you @samld a bunch for this PR, resolving the merge conflicts will definitely help push this forward.

[zoltanszogyenyi]

Also since our latest version the datepicker is part of the main init engine so that should help for sure.

[W1M0R]

I'm also looking forward to this PR getting merged.

[W1M0R]

@samld @zoltanszogyenyi While we wait for this, the following method helps to reduce the number of calls to initFlowbite using the lodash debounce function:

import _ from 'lodash';
function initFlowbiteContent(content) {
  console.debug("flowbite initialised");
  initFlowbite();
  // Keep an eye out for this flowbite fix:
  // https://github.com/themesberg/flowbite/pull/824
  // initFlowbite(content);
}

// Enable this once the fix has landed.
// htmx.onLoad(initFlowbiteContent);
// For now we debounce initialisation to reduce the number of calls to initFlowbite.
htmx.onLoad(_.debounce(initFlowbiteContent, 300));
</script>

[Thutmose3]

Any update on this by any chance?