Lib Manager
Manage your js vendor dependencies clientside.
Manager that helps us manage js dependencies on the client side. This way we can load libraries when we need, where we need instead of including them in full on page load. Even if they aren’t required for the page to work.
Note: This manager works as a singleton! Every “new” instance created is in fact the same.
Class type: Manager
Dependencies
- EventDispatcher 1.0.0
Getting started
LibManager acts as a thin wrapper around logic that it’ll execute the moment the requested libraries are loaded.
// create lib manager instance with library definitions
const mgr = new LibManager({
libraries: {
// self hosted
selfHostedLib: {
url: '/libs/self-hosted.js'
},
// Using cdn's
swiper: {
url: 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js',
css: 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css'
},
// externals sdk's like google maps
googleMaps: {
url: '//maps.googleapis.com/maps/api/js',
parameters: {
key: '[KEY]',
libraries: 'places'
}
}
}
});
// init instance with a dependency managed by the maanger
mgr.load('swiper')
.then( (e) => {
const swiper = new Swiper(...);
...
})
.catch( (e) => {
throw('Error', e)
})
Constructor Parameters
args
Type: Object
Default: {}
Config options that will be used when instance is created
objectName
Type: String
Default: 'Component'
Object name that will be used as recognisable identifier and as prefix in logs
Interface
Options
libraries
Type: Object
Default: {}
Dictionary of library definitions. Key name will be used to look up and load the requested library when necessary.
Use following parameters to
- url: the url of the javascript library
- css: the url to the css file
- parameters: Url parameters to add to the url of the library (can be ignored if they are already concatenated in the url parameter)
… Event dispatcher options
Properties
version
Type: String
Default: [ version number ]
Returns the version number of the class definition
… Event dispatcher properties
Methods
add
Parameters: Object
Return: undefined
Add a collection of library definitions
load
Parameters: String
or Array
Return: Promise
Loads one or multiple libraries depending on the keys given. Promise is run once the given libraries are loaded or have failed.
… Event dispatcher methods
To Do
- Fallback definition in case externally hosted library returns 404
- Change ‘url’ key in library definition to ‘js’