Toast is a promise-based asset loader for JS and CSS files. It aims to optimize web site performance by loading and deferring the needed assets.
As a side note: Toast is packaged as an UMD module.
npm install toast-loaderSince it have a small footprint (0.8kb), Toast can be loaded as soon as possible in the HEAD tag:
<head>
<script src="node_modules/toast-loader/dist/toast.min.js"></script>
</head>Or even better, you can inline it in your HTML page to improve your loading performance.
toast.css(url: string): Promise
toast.js(url: string): Promise
toast.all(urls: string[]): Promiseif (dark_mode === true) {
toast.css('styles/dark.css')
} else {
toast.css('styles/light.css')
}toast.js('http://some.cdn.com/jquery.js').then(() => {
toast.js('http://some.cdn.com/jquery-myplugin.js').then(() => {
$('.someClass').myPlugin()
})
})await toast.all([
'assets/css/styles1.css',
'assets/css/styles2.css',
'assets/js/script1.js',
'assets/js/script2.js',
'assets/js/script3.js',
])
console.log('Everything has been loaded, yay!')IE8 support (and prior) has been dropped. If you badly need it, you can open an issue and I will see what I can do to restore it as a separate build.
Toast is using built-in promises, so if you need to support IE9-11, you must add the promise-polyfill library before loading Toast. Here's the compatibility table for the Promise feature.
For your information, IE9-IE11 and Edge never trigger error event on CSS loading if something went wrong. Keep this in mind when you're using catch promise block with Toast.
If you want to look at SCRIPT/LINK node features support details, you can take a look at this compatibility table.
Install the dependencies with:
npm installBuild the lib with:
npm run buildTests are written with Mocha and Chai and run with Karma on LambdaTest.
First, you will need to set up you're own environment:
- create your account on LambdaTest
- download the tunnel software, it will act as a gateway between Karma and LambdaTest
- verify that the
LTcommand is accessible (e.g. in thePATH) - get your credentials from the Automation page, they are located under the key icon
- set them in your environment, per example in your
.bashrc:
export LT_USERNAME="<your_username>"
export LT_ACCESS_KEY="<your_access_key>"Finally, you can run the tests with:
npm run testThey will be run against the following browsers:
- Chrome 73
- Firefox 66
- Edge 18
- IE 9-11
- Safari 12
If needed, you can run the tests against one specific browser with:
npm run chrome
npm run firefox
npm run edge
npm run ie11
npm run ie10
npm run ie9
npm run safariLicensed under the MIT license.
