ESM Module Support

You read that right, Bootstrap Toaster can finally be imported as an ESM module!
For example, the following will allow you to use the Toast class and the enums for status, placement, theme, and timers.

import { Toast, TOAST_STATUS } from "bootstrap-toaster";

Quirks

• Unfortunately, I couldn't figure out how to support existing users without making breaking API changes that would affect the UMD build, so ESM users will have to do an admittedly janky import below. Alternatively, you could just import Bootstrap's JS in an HTML script tag to get that global bootstrap variable that I use, but I'm sure many would rather go all-in on modules.

import * as bootstrap from "bootstrap";
...
window.bootstrap = bootstrap;

• In supporting existing users via the UMD module without breaking changes, I had to make global variables for Toast, TOAST_STATUS, TOAST_PLACEMENT, TOAST_THEME, and TOAST_TIMERS. I believe this is necessary for UMD builds but they are technically globals in the ESM build as well, even though you obviously have to import them to be able to use them.

Help Me!

If you know how I could accomplish this better without the above quirks, please reach out! I used rollup.js to build the UMD and ESM modules, and this whole process is very new to me.

New Features

1. Bootstrap Toaster is now written in TypeScript for proper type safety and access modifiers when used with other TS code.
2. Toast timers now support a new option, countdown timers, in addition to elapsed timers and being disabled. A countdown timer simply displays how long in seconds until the toast disappears. Be aware that even with numbers greater than 60s, it will always display in seconds.
   • Elapsed timers are still the default setting.
3. Toasts will now queue by default when the maximum toast count is reached, so that information in the queued toasts is not lost forever. This can be disabled to restore the previous behavior.

Breaking Changes

1. There are new interfaces and enums available in the TypeScript code, which are now used as the parameters to the configure, create, setPlacement, setTheme, enableTimers.
   • For regular JavaScript users, simply pass in an object with the same properties as the new interfaces. Once compiled, the enums behave identically to prior versions, so no issues should arise there.
   • To upgrade, either use the interfaces/objects, or use the new temporary shims, oldConfigure, oldCreate, and oldEnableTimers, which have the same signatures as in previous releases. Unfortunately, JavaScript has no concept of method overloads, so this isn't entirely painless.
     • These shims will all be removed in a future version.
2. Apologies for completely changing the signatures of multiple methods, but I think it is ultimately a more elegant solution that scales better going forward.

New Features

1. Bootstrap Toaster is now written in TypeScript for proper type safety and access modifiers when used with other TS code.
2. Toast timers now support a new option, countdown timers, in addition to elapsed timers and being disabled. A countdown timer simply displays how long in seconds until the toast disappears. Be aware that even with numbers greater than 60s, it will always display in seconds.
   • Elapsed timers are still the default setting.
3. Toasts will now queue by default when the maximum toast count is reached, so that information in the queued toasts is not lost forever. This can be disabled to restore the previous behavior.

Breaking Changes

1. There are new interfaces and enums available in the TypeScript code, which are now used as the parameters to the configure, create, setPlacement, setTheme, enableTimers.
   • For regular JavaScript users, simply pass in an object with the same properties as the new interfaces. Once compiled, the enums behave identically to prior versions, so no issues should arise there.
   • To upgrade, either use the interfaces/objects, or use the new temporary shims, oldConfigure, oldCreate, and oldEnableTimers, which have the same signatures as in previous releases. Unfortunately, JavaScript has no concept of method overloads, so this isn't entirely painless.
     • These shims will all be removed in a future version.
2. Apologies for completely changing the signatures of multiple methods, but I think it is ultimately a more elegant solution that scales better going forward.

It's Finally Here!

With Bootstrap 5 officially released, version 5.0.0 is ready to fly as well! This release includes huge changes over version 3.0.0, listed below. If you are on Bootstrap 4, I recommend version 4.x, which was created by porting this release to Bootstrap 4.

New Features & Fixes

1. There are now 9 options for toast placement rather than the original 4. They are
   • TOAST_PLACEMENT.TOP_LEFT
   • TOAST_PLACEMENT.TOP_CENTER
   • TOAST_PLACEMENT.TOP_RIGHT
   • TOAST_PLACEMENT.MIDDLE_LEFT
   • TOAST_PLACEMENT.MIDDLE_CENTER
   • TOAST_PLACEMENT.MIDDLE_RIGHT
   • TOAST_PLACEMENT.BOTTOM_LEFT
   • TOAST_PLACEMENT.BOTTOM_CENTER
   • TOAST_PLACEMENT.BOTTOM_RIGHT
2. Greatly smoothed the edges of the toast box shadow effect with some reworked CSS on the toast container.

Breaking Changes

1. Version 5.x targets Bootstrap 5 rather than Bootstrap 4.
   • If updating from 4.x, assuming your website is upgraded to Bootstrap 5, the below information DOES NOT apply to you.
   • If updating from 3.0.0 or earlier, the below information DOES apply to you.
2. To better align with Bootstrap's documentation, all references to "position" have been renamed to placement, so a find and replace will be necessary for the following:
   • TOAST_POSITION -> TOAST_PLACEMENT
   • Toast.setPosition -> Toast.setPlacement
3. When adding the new placement options for toasts, the internal number values of the artificial TOAST_PLACEMENT enum were modified. If you were using those rather than their named equivalents (shame on you), you will need to update your code. If you used the named values, the above find and replace is all you need to update.
4. Replaced Font Awesome 5 dependency with Bootstrap Icons for toast status icons.
   • For the icons to display, including a link tag for the Bootstrap Icons icon font stylesheet is required. View instructions on the Bootstrap Icons Docs.

Updated Bootstrap Icons minimum version to 1.4.0, which fixes vertical icon alignment.

No code changes in this release, but many updates to the README and package.json files for npm.

This version is designed to back-port improvements made from version 5.0.0 to Bootstrap 4. As such, its features code improvements from that version while maintaining full compatibility with Bootstrap 4. Unlike previous versions, 4 and 5 will both be maintained as current releases.

New Features & Fixes

1. There are now 9 options for toast placement rather than the original 4. They are
   • TOAST_PLACEMENT.TOP_LEFT
   • TOAST_PLACEMENT.TOP_CENTER
   • TOAST_PLACEMENT.TOP_RIGHT
   • TOAST_PLACEMENT.MIDDLE_LEFT
   • TOAST_PLACEMENT.MIDDLE_CENTER
   • TOAST_PLACEMENT.MIDDLE_RIGHT
   • TOAST_PLACEMENT.BOTTOM_LEFT
   • TOAST_PLACEMENT.BOTTOM_CENTER
   • TOAST_PLACEMENT.BOTTOM_RIGHT
2. Greatly smoothed the edges of the toast box shadow effect with some reworked CSS on the toast container.

Breaking Changes

1. To better align with Bootstrap's documentation, all references to "position" have been renamed to placement, so a find and replace will be necessary for the following:
   • TOAST_POSITION -> TOAST_PLACEMENT
   • Toast.setPosition -> Toast.setPlacement
2. When adding the new placement options for toasts, the internal number values of the artificial TOAST_PLACEMENT enum were modified. If you were using those rather than their named equivalents (shame on you), you will need to update your code. If you used the named values, the above find and replace is all you need to update.
3. Replaced Font Awesome 5 dependency with Bootstrap Icons for toast status icons.
   • For the icons to display, including a link tag for the Bootstrap Icons icon font stylesheet is required. View instructions on the Bootstrap Icons Docs.

Breaking Changes in 3.0.0

1. This package is now officially named Bootstrap Toaster, and new versions will be published as bootstrap-toaster on npm rather than the previous bootstrap-toast.js. All old versions of the old package will be deprecated on npm.
2. The CSS and JS files have been renamed to go along with the new package name. You will need to adjust your code like so:
   • bootstrap-toast.css -> bootstrap-toaster.css
   • bootstrap-toast.js -> bootstrap-toaster.js
3. Removed the v1 API that was deprecated in v2.

Deprecated v1 API

This is the version of 1.0.9 published to npm.

Updated README

Added documentation to the project and updated a few comments. No code changes from Beta 1.2.3, but this project is finally ready to fly!