Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/olvlvl/assets-promises
Promises to load Stylesheet and JavaScript assets
https://github.com/olvlvl/assets-promises
Last synced: 23 days ago
JSON representation
Promises to load Stylesheet and JavaScript assets
- Host: GitHub
- URL: https://github.com/olvlvl/assets-promises
- Owner: olvlvl
- License: other
- Created: 2016-04-03T10:45:15.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-04-03T13:15:07.000Z (almost 9 years ago)
- Last Synced: 2023-08-24T05:51:18.386Z (over 1 year ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Assets Promises
[](https://www.npmjs.com/package/olvlvl-assets-promises)
This package provides [promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) to load stylesheet and JavaScript assets.
Stylesheet and JavaScript assets are loaded using `link` and `script` tags respectively. Your
browser needs to support the `load` and `error` events on these tags, you can check that using
[Ryan Grove's tester](https://pie.gd/test/script-link-events/).
### Usage
The following example demonstrates how to load a stylesheet:
```javascript
"use strict";
var StyleSheetPromise = require('olvlvl-assets-promises').StyleSheetPromise
var url = "http://www.csszengarden.com/215/215.css"
new StyleSheetPromise(url).then(url => {
console.log('Stylesheet resolved:', url)
}).catch(url => {
console.log('Stylesheet rejected:', url)
})
```
The following promise should fail because the URL cannot be resolved.
```javascript
"use strict";
var url = "http://" + Math.random() + "/" + Math.random() + ".css"
new StyleSheetPromise(url).catch(url => {
console.log('rejected:', url)
})
```
The following example demonstrates how to load a JavaScript file:
```javascript
"use strict";
var JavaScriptPromise = require('olvlvl-assets-promises').JavaScriptPromise
var url = "https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"
new JavaScriptPromise(url).then(url => {
console.log('JavaScript resolved:', url)
}).catch(url => {
console.log('JavaScript rejected:', url)
})
```
The following example demonstrates how to load multiple stylesheets:
```javascript
"use strict";
var StyleSheetPromise = require('olvlvl-assets-promises').StyleSheetPromise
var stylesheets = [
"http://www.csszengarden.com/215/215.css",
"http://www.csszengarden.com/214/214.css",
"http://www.csszengarden.com/213/213.css"
]
StyleSheetPromise.all(stylesheets).then(urls => {
console.log('stylesheets resolved:', urls)
}).catch(urls => {
console.log('stylesheets rejected:', urls)
})
```
The following example demonstrates how to load multiple Javascript:
```javascript
"use strict";
var JavaScriptPromise = require('olvlvl-assets-promises').JavaScriptPromise
var javascripts = [
"https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js",
"https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js",
"https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"
]
JavaScriptPromise.all(javascripts).then(urls => {
console.log('javascript resolved:', urls)
}).catch(urls => {
console.log('javascript rejected:', urls)
})
```
The following example demonstrates how to load multiple Stylesheets and JavaScript:
```javascript
"use strict";
var StyleSheetPromise = require('olvlvl-assets-promises').StyleSheetPromise
var JavaScriptPromise = require('olvlvl-assets-promises').JavaScriptPromise
var stylesheets = [
"http://www.csszengarden.com/215/215.css",
"http://www.csszengarden.com/214/214.css",
"http://www.csszengarden.com/213/213.css"
]
var javascripts = [
"https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js",
"https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js",
"https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"
]
Promise.all([
StyleSheetPromise.all(stylesheets),
JavaScriptPromise.all(javascripts)
]).then((stylesheets, javascripts) => {
console.log('resolved:', stylesheets, javascripts)
}).catch((stylesheets, javascripts) => {
console.log('rejected:', stylesheets, javascripts)
})
```
----------
## Requirement
ECMAScript 6, `load` and `error` events on `link` and `script` elements.
## Installation
The recommended way to install the package in through [npm](https://www.npmjs.com/):
```
$ npm install olvlvl-assets-promises --save
```
## Cloning the repository
The package is [available on GitHub](https://github.com/olvlvl/assets-promises), its repository can be cloned with the following command line:
$ git clone https://github.com/olvlvl/assets-promises.git
## Testing
I don't know how to test this using nodejs because I it's using browser features, so I included a `index.html` file to check if things are working as expected.
## License
**olvlvl-assets-promise** is licensed under the New BSD License - See the [LICENSE](LICENSE) file for details.