olvlvl-assets-promises v0.1.0
Assets Promises
This package provides promises 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.
Usage
The following example demonstrates how to load a stylesheet:
"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.
"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:
"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:
"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:
"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:
"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:
$ npm install olvlvl-assets-promises --save
Cloning the repository
The package is available on GitHub, 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 file for details.
8 years ago