Help with index.js

[kkvero]

Hello! Thank you for a great module to use Bootstrap with Hugo.
It works for me overall. I am having trouble with populating the index.js

As far as I understand, the code in this file should manually call Bootrstrap JS. The module provides the code for 2 components, but there are 12 of them.
Each of the 12 Bottstrap classes (12 classes themselves are listed here https://github.com/twbs/bootstrap/blob/main/js/index.umd.js)

What works: the JS for the 2 components that are called in index.js and 4 that I managed to call using the 2 provided as a template (only because they use exactly the same syntax).

What I tried: It took me a while to figure out that the way to call a specific Bootstrap class comes from the Bootstrap docs. So I checked each component, managed to call 4 more. Tested, worked. But the way to call others differs and I simply lack JS knowledge.

Could anyone provide more examples to be able to use the JavaScript for all 12 Bootstrap components?

The components for which I miss the template on how to call/initialize them and what Bootstrap docs provide on it:

1. Carousel
   Usage with JS from Bootstrap docs:
   const carousel = new bootstrap.Carousel('#myCarousel')

2. Button
   I see no JS usage in the docs, but button is present in the list of the 12 as per the above.

3. Modal
   Bootstrap:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

4. ScrollSpy
   Bootstrap:

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

5. Tab
   Not sure about these.
6. Tooltip
   Bootstrap:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

I would be grateful for the help with 1-2 more (carousel?) 🙏, as some follow the same pattern but differ from the examples in index.js.

[kkvero]

Thank you for responding by adding to the index.js. However I did not have trouble with the import statements, I imported all 12 classes no problem. It is just I was wondering what goes inside the anonymous JS function that initializes some components. But working with it more I found that:
-for most components: nothing. No need to call, the imports are enough.
-for some like the toast, has to be initialized like the provided example in the index.js
-for some like the tooltip, has to be initialized as provided by the Bootstrap docs. An import is not enough.

const tooltipTriggerList = document.querySelectorAll(
  '[data-bs-toggle="tooltip"]',
);
const tooltipList = [...tooltipTriggerList].map(
  (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl),
);

Overall may the Bootstrap docs and the inspect-debug browser console help me :-)

[bep]

Thank you for responding by adding to the index.js. However I did not have trouble with the import statements, I imported all 12 classes no problem.

In your question I saw you pointed out Button and Carousel as two pain points, which I added to the demo page:

https://hugo-mod-bootstrap-scss.netlify.app/

Most Bootstrap JS plugins (that I have tested) works fine using data attributes and only need an import to be activated (e.g. the Carousel).

Documenting all of these 12 plugins (better) isn't something we (I) have time to do, and that sounds like what the Bootstrap project itself could/should do.