toast-loader
Advanced tools
Toast is a promise-based JS/CSS loader for the browser. It aims to optimize web site performance by loading your assets asynchronoulsy.
Support has been dropped for these browsers since Mocha/Sinon (which is used to run our tests) does not support them anymore. Since it would take some time to migrate the tests, that IE9/10 is not supported anymore by Microsoft, and that its market share have dropped under 1%, we took the decision to stop our support too.
For the time being, Toast 3.0.2 will work with IE9/10. Since the code shouldn't evolve too much, you should be safe in the far future until Toast reaches a breaking change.
Toast is tested against:
The preferred way to load toast in your application is to install it via NPM (or Yarn), and import it directly in your codebase (it has a very small footprint, and the sooner it's loaded the better).
npm install toast-loader
You have several options to load it in your code depending on your application environment:
<script> tagconst { toast } = require('toast-loader')import { toast } from 'toast-loader'You can also load it from the usual <script> tag in your <head>, but I advise you to use a CDN instead of loading it from your own server:
<head>
<script src="https://cdn.jsdelivr.net/npm/toast-loader@3.0.3"></script>
</head>
Be sure to use the latest version of Toast and keep a fixed version in production environment (to avoid breaking changes).
toast.css(url: string): Promise
toast.js(url: string): Promise
toast.all(urls: string[]): Promise
if (dark_mode === true) {
toast.css('styles/dark.css')
} else {
toast.css('styles/light.css')
}
const handleErrors = error => {
console.log(error)
}
toast.js('http://some.cdn.com/jquery.js')
.then(() => {
toast.js('http://some.cdn.com/jquery-myplugin.js')
.then(() => $('.someClass').myPlugin())
.catch(handleErrors)
})
})
.catch(handleErrors)
await toast.all([
'assets/css/styles1.css',
'assets/js/script1.js',
'assets/js/script2.js',
'assets/css/styles2.css',
'assets/js/script3.js',
])
console.log('Everything has been loaded, yay!')
toast.all relies on automatic extension detection. If your URL does not contain a file extension you'll need to use Promise.all instead and do some extra work:
await Promise.all([
toast.css('assets/css/styles1'),
toast.js('assets/js/script1'),
toast.js('assets/js/script2'),
toast.css('assets/css/styles2'),
toast.js('assets/js/script3'),
])
console.log('Everything has been loaded, yay!')
error event on CSS loading if something goes wrong; keep this in mind when you're using catch promise blockSCRIPT/LINK node feature support details, you can take a look at this compatibility tableInstall the dependencies with:
npm install
And build the lib with:
npm run build
Look at the scripts in package.json file for more details.
Tests are written with Mocha and Sinon, and can be run with:
npm run test
It should open your default browser (under a Gnome desktop). If not, just drag and drop the tests/index.html in your preferred browser.
These tests are just for local debugging when in development phase but they need to pass the Karma tests. Karma is a tool to execute unit tests on remote browsers with Selenium/Appium. To be able to run them, you'll need an account on BrowserStack. It's the only service that have a free plan for open-source projects.
When your account is ready, you must prepare your environment by setting global variables in a file that is loaded when your console initializes, like .bashrc, .zshrc or .profile:
ACCESS KEY (it's accessible on the right of the search bar)export BROWSERSTACK_USERNAME="<your_username>"
export BROWSERSTACK_ACCESS_KEY="<your_access_key>"
Then, run the karma tests with:
npm run karma:all
The results will be displayed in the console and on the Automate page of your account.
If you want to only run tests on a specific browser you can use one of the following commands:
npm run karma:chrome
npm run karma:firefox
npm run karma:safari13
npm run karma:safari12
npm run karma:safari11
npm run karma:edge
npm run karma:ie11
npm run karma:android10
npm run karma:android9
npm run karma:android8
npm run karma:android7
npm run karma:android6
npm run karma:android5
npm run karma:android44
npm run karma:ios13
npm run karma:ios12
npm run karma:ios11
npm run karma:ios10
Note: I don't know why but the tests can be unstable in some VMs when running all Karma tests in parallel; don't hesitate to re-run tests on a specific VM to verify.
MIT.
FAQs
A modern JS/CSS asset loader
The npm package toast-loader receives a total of 473 weekly downloads. As such, toast-loader popularity was classified as not popular.
We found that toast-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."