ES6 Loader that loads Scripts and Style Sheets and caches them accordingly
To import a script just call the Craftloader.Import function
it takes Objects as arguments.
Craftloader.Import({script : '/myfancyscript.js' });
Each object in the Import has either a script or css property that
containes the path/URL of the script or css stylesheet being imported.
Importing mutiple files are easy , just add (more) objects
Craftloader.Import(
{ css : '/js/components/craftsocket.js'}, // order is irrelevant
{ script : '/js/components/ripple.js'}, // fetches script
{ css : '/css/stylesconcat.css'} // fetches css
);
Give it a custom key instead of the Url becoming the key
Craftloader.Import({ script : '/js/components/ripple.js', key : 'rippler'});
// to Optionally set the cache PreKey for all imports
Craftloader.setPreKey('CustomKey');
/* posibly useful for feuture detection for polyfilling */
Craftloader.Import({script : '/Polyfill.js' , test : boolean )});
the import will only happen if the test property in the object is true.
aditionally there is an execute property which if added and set to false,
will import the script or style but not execute it
// defer , delays execution till DOM is loaded
Craftloader.Import({script : '/dependency.js' , defer : true )});
/*
* cache property prevents the script being cached
* when it's set to false
*/
Craftloader.Import({ url: 'Crafter.js', cache: false});
// .then() is causaly linked to the first import
Craftloader.Import({ url : '/js/meFirst.js'}).then(() => {
Craftloader.Import({ url : '/js/meSecond.js'});
});
// note multiple imports will only trigger then() after
// every import is done
Craftloader.Import({ url: 'Crafter.js', expire: 2 /* note it's in hours */});
Craftloader.remove("key or url");
or remove all imports
Craftloader.removeAll();
var = mySourceCode = Craftloader.get("url or key");
Craftloader.Import({ key : 'Hamsters.js' }).then(() => {
// Success
}).catch(err => {
// Import failed Error
console.error(err); -> 'no script/css/url found'
});
Craftloader doesn't have any other dependencies unless you, count polyfills for older Browsers. Here's a list of Specific features Craftloader uses
- Fetch API
- Promises
- ES6 String , Array methods
- ES6 Arrow functions , let , ...rest Parameters
- localStorage
Should be fine wihout es5 version on
- Chrome 45+
- Firefox 43+
- Opera 33+
- Vivaldi*
- MicroSoft Edge 13+
With Polyfills it should work on even older browsers.
- Minified Polyfills available in repo
- Minified ES5 version also available.