BootstrapToaster icon indicating copy to clipboard operation
BootstrapToaster copied to clipboard

Feature Request: Don't require global bootstrap & Don't inject into global space

Open wreiske opened this issue 3 years ago • 1 comments

Hey!

Found your package today while working on new Bootstrap 5 project. I usually use the toastr npm package but wanted something that used the bootstrap 5 toasts. Glad to see a NPM for this! Thank you for your work!

While implementing, I ran into a few little issues. I use meteor for my projects and each individual js / template / layout / etc allows you to import just what you need for that bit of code. Instead of having everything as globals, you can keep the global namespace clean and keep your includes / dynamic imports to the pages that need it only.

My first instinct was to set up a layout like this:

import Toast from 'bootstrap-toaster';

Template.hello.onRendered(function() { 
    Toast.create({ title: 'Hello world!'});
});

This didn't work because the Toast package requires bootstrap to be global. It would be nice if the above example just worked.

I managed to get it working by doing the following:

bootstrap = require('bootstrap');
import Toast from 'bootstrap-toaster';

I'd love it if bootstrap wasn't global though!!

Now the Toast is on every page and in global when it doesn't need to be.

wreiske avatar Jul 09 '22 20:07 wreiske

Hey, thanks for trying it out! I'm not familiar with meteor, but I have been trying to get the package to work as a js module. If you haven't already, take a look at the module-test branch and this 5.2.0 beta release.

One of the issues I've run into with it is the ability to have it work globally for people using it as a legacy script (i.e., the whole existing user base) and also have it work perfectly normally as a module so things like web pack, and I suppose meteor, can use. If you read through the notes on that release and know of a way to eliminate those issues, I'm all ears.

PeytonRG avatar Jul 10 '22 18:07 PeytonRG