Bootstrap: [Question] Should we provide a bundled release of Bootstrap with Popper.js

[Johann-S]

Hi folks,

Currently if you want to use Tooltips/Popovers and Dropdown, you should include Popper.js before Bootstrap and I think it's a huge drawback that you cannot just include Bootstrap and all the provided plugins doesn't work.

So a simple solution should be to provide a bundled release of Bootstrap with Popper.js included.
The size of our minified JS will increase of 16kb see my test :

Is it a good solution for you ? Or should we continue to provide a release without Popper.js ?

/CC @mdo

[acshef]

Why not both?

[Johann-S]

Yes that's a possibility 👍

[mdo]

Yikes, that's a 26kb increase, not 16kb. 😬 A 50% increase is pretty bad.

[Johann-S]

Yes a bit strange because Popper's weight is 19kb 🤔

[deandob]

Are tooltips that difficult that a 3rd party dependency is needed for bootstrap? Another thing to go wrong, additional load time (as needs to be loaded before bootstrap) is a disadvantage for v4. If it has to be a separate plugin, agree with Johann-S to provide a pre-bundled package.

[Johann-S]

It's a decision we made at the beginning of v4 release, because they are a lot's of use case to handle for positionning Tooltips (scroll, overflow, ...)

[pat270]

I think it should be bundled with Bootstrap.js. Popper documentation is kind of confusing. I couldn't find a link to their cdn on https://popper.js.org/. I had to go to their github repo to find a link to the cdn which provides a confusing list https://cdnjs.com/libraries/popper.js, then pick and choose to find the right one.

[Johann-S]

Don't worry @pat270 we will provide the appropriate Popper.js link in our documentation 👍

[Sungodragon]

Maybe, it is better if its bundled release.
Perhaps someone can investigate to make the bundle size smaller.
@vanduynslagerp

[Johann-S]

I had an issue to build our dist files, I fixed that and finally this is the correct screenshot :

[FezVrasta]

@pat270 feel free to send PRs to improve the Popper.js' documentation if you feel like it needs some love 🙃

@Johann-S looks like your minify process isn't effective as the one used by Popper.js, your minified bundle increases by 18KB while the minified version of Popper.js should take approx ~7KB. You may want to directly import the pre-minified version of Popper.js when you minify the Bootstrap bundle.

[Johann-S]

@FezVrasta I concatenated popper.min.js with bootstrap.min.js it was just a try to have folks feedbacks

[FezVrasta]

Oh, now I see, that's not the minified size, eheh

[Johann-S]

I tried to bundle Bootstrap with rollup (see : https://github.com/twbs/bootstrap/commit/1228a45992cb84fab84d849e9daf76323c4064f0) but it's gave me the same size :

After that, I tried to check other an other lib which use Popper.js and it's the same result.
This lib is tippyjs, if you check tippyjs dist files here : https://github.com/atomiks/tippyjs/tree/master/dist

tippy.standalone.js : is the dist file without Popper.js included, size : 13.9 KB
tippy.min.js: is the dist file with Popper.js included, size : 31.5 KB

And that's normal because : Popper.js size is ~18 KB

[bogdaniel]

Since it's a dependency should be installed when you install bootstrap .... i got it installed using yarn fast and quick .. and i'm also using webpack behind the scenes. :D

[sschueller]

For those of us that are still stuck using Bower. Popper does not include a compiled version of popper.js (https://github.com/FezVrasta/popper.js/issues/274) which makes the dependancy a pain. Even doing bower install https://unpkg.com/popper.js will not work and requires you to make manual adjustments to bower_components.

Bundling it would help a lot of people

[mdo]

@sschueller We do the same with our Bower package fwiw. Their spec shied away from including built/compiled files within main if memory serves.

[CameronJ]

As sschueller mentioned, and I totally agree, that it should be bundled in. I use Bower for dependency management and Popper doesn't support Bower (explained by not including dist files in the defect sschueller mentioned). Also, I'm having trouble actually compiling them. I was able to resolve this by manually getting the dependency from NPM, then using Grunt to move it into my bower directory. (Not exactly something I would like to do going forward...)

[DaleMckeown]

I really think that bower.json should remove popper.js as a dependency.

While being in there as a dependency is techically correct, it serves very little purpose, as there is no dist folder. As mentioned above, building it yourself from source is a pain.

I resorted to just using CDNJS, in the end. It will just be a wasted dependency to most people.

FezVrasta flat out refuses to include a dist folder in the source. Apparently it's easier for him if everyone else goes elsewhere to get the compiled code (https://github.com/FezVrasta/popper.js/issues/274#issuecomment-322115796).

[FezVrasta]

There are valid reasons to not support Bower. It is now supported for Popper.js, because I found a "kinda-clean" way to host the source code inside the repository without exposing it. But please read the following links:

https://github.com/FezVrasta/popper.js/releases/tag/v1.12.0
https://github.com/FezVrasta/popper.js/issues/390

[CameronJ]

I understand your point FezVrasta, it is totally your call about which packaging systems you would like to use. But as a consumer of Bootstrap via Bower, it is a problem for me/us. For now, I am just overriding Bootstrap's dependency of Popper, and getting this via NPM (as mentioned above). This isn't the end of the world, but it's definitely not a direction which I'd consider proper from a package / dependency management option, as it either A) forces me to commit all of my dependencies into the repository or B) use Grunt scripts to orchestrate NPM and Bower installations.

[CameronJ]

@FezVrasta: Out of curiosity, with your NPM publish you are sending all of the dist files, why could you not publish to Bower the same way? Or is it just the Repo limitation from Bower causing this problem?

[FezVrasta]

@CameronJ as explained in FezVrasta/popper.js#390, Bower have some serious limitations.

1. It requires the compiled files to be hosted in the GitHub repository (this means I have to mix source code with compiled code)
2. It doesn't support monorepos (repositories that host the code of several libraries like in the case of Popper.js)

While the first point can be a matter of preferences, the second point is a technical limitation that is preventing my project from distributing all the libraries stored under /fezvrasta/popper.js to Bower.

[CameronJ]

Yep, I agree. The limitation of bower in both of those cases is troublesome. Thanks for the reply

[slidenerd]

What you should add for v5 release is 0 dependency on Jquery and popper, 100% native js for all dom manipulation with cross platform quirks wherever required

[Johann-S]

It's already the case here : https://github.com/twbs/bootstrap/pull/23586 we work on it @slidenerd