https://github.com/beyonk-group/async-script-loader
Asynchronous script loading for SPAs
https://github.com/beyonk-group/async-script-loader
async cdn defer event javascript onload script sdk spa unpkg
Last synced: 7 months ago
JSON representation
Asynchronous script loading for SPAs
- Host: GitHub
- URL: https://github.com/beyonk-group/async-script-loader
- Owner: beyonk-group
- Created: 2019-05-23T22:02:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-12T11:55:04.000Z (about 3 years ago)
- Last Synced: 2025-05-30T13:47:54.092Z (8 months ago)
- Topics: async, cdn, defer, event, javascript, onload, script, sdk, spa, unpkg
- Language: JavaScript
- Size: 33.2 KB
- Stars: 17
- Watchers: 3
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
## Async Script Loader
[](http://standardjs.com)
Allows asynchronous loading of scripts and styles in a Single Page Application (or anything else, in fact):
* Using a test to ensure that the code is only loaded once
* Running a callback once the script is loaded
* Running a callback if the script is already loaded
* Not blocking the main thread
### Reasoning
Having integrated a multitude of third-party SDKs from large, well known providers, I've come to the conclusion that not having a standard interface turns the whole thing into a minefield of callbacks, timers, random library-specific loader modules, and global objects on the window, resulting in XSS risks and all sort of other undesirable behaviour. This module aims to provide a standard way of loading third-party dependencies.
### Usage
You pass a list of urls to the loader, along with a method for checking that your page is ready, and a callback to call when it is.
Urls can be scripts or stylesheets.
### Script Tags
You can use the module like so, for a library loaded from example.com, which, when loaded, adds an attribute called PROVIDER to the global window object.
```js
import loader from '@beyonk/async-script-loader'
const url = '//example.com/sdk/1.0.0/lib.js'
function test () {
return !!window.PROVIDER
}
function callback () {
window.PROVIDER.someFunction()
}
loader([
{ type: 'script', url }
], test, callback)
```
You can pass options for script tags.
```js
loader([
{ type: 'script', url, options: { async: true, defer: true } } // these are the default options
], test, callback)
```
#### Style Tags
You can include any number of tags, including style tags.
When the last one has loaded, the callback will be called.
```js
import loader from '@beyonk/async-script-loader'
loader([
{ type: 'script', url: '//example.com/sdk/1.0.0/lib.js' },
{ type: 'script', url: '//example.com/sdk/1.0.0/lib2.js' },
{ type: 'style', url: '//example.com/sdk/1.0.0/style.css' }
], () => {
return !!window.PROVIDER
}, () => {
window.PROVIDER.someFunction()
})
```
No more tears!
#### Inline scripts / Inline css
You can use inline content for either type of tag by passing the configuration attribute `content` *instead* of `url`. This will write the content passed into the tag's body rather than setting it as an `href` or `src` attribute `url` will always take prescidence, so leave it out for `content` to work.
```js
import loader from '@beyonk/async-script-loader'
loader([
{ type: 'script', content: 'console.log("foo");' },
{ type: 'style', content: '* { color: red; }' }
],
() => false, // always load
() => () // no-op
)
```