Manage Libs Versions
Easily create a list of Radio Inputs to let user choose Library Versions, retrieve the selection and prepare a list of Assets to be dynamically loaded.
The Assets list can be directly passed to
loadJsCss.list()
function.
Quick usage guide
This library uses a UMD wrapper.
If directly loaded into a browser, it assigns the manageLibsVersions
global variable.
Example
HTML
<script src="manage-libs-versions.js"></script>
JavaScript
var lib1PathTemplateCss = 'https://unpkg.com/lib1@{{VERSION}}/dist/lib1.css';
var lib1PathTemplateJS = 'https://unpkg.com/lib1@{{VERSION}}/dist/lib1.js';
var lib2PathTemplateJs = 'https://unpkg.com/lib2@{{VERSION}}/dist/lib2.js';
var bundle = new manageLibsVersions.Bundle({
name: 'bundle',
libs: [{
name: 'lib1',
mandatory: true,
versions: [{
name: 'v2.0.0',
defaultVersion: true, // If no Version is specified, or the specified one is unknown, use this Version instead.
assets: [
manageLibsVersions.makeStylesheet(lib1PathTemplateCss, '2.0.0'),
manageLibsVersions.makeScript(lib1PathTemplateJS, '2.0.0')
]
}, {
name: 'v1.0.0',
defaultVersion: false,
disabled: true, // This will make the Radio Input disabled.
assets: [
manageLibsVersions.makeStylesheet(lib1PathTemplateCss, '1.0.0'),
manageLibsVersions.makeScript(lib1PathTemplateJS, '1.0.0')
]
}]
}, {
name: 'lib2',
versions: [{
name: 'dev',
assets: [{
type: 'script',
path: '../dist/bundle.js'
}]
}, {
name: 'v0.15.2',
assets: [
manageLibsVersions.makeScript(lib2PathTemplateJs, '0.15.2')
]
}]
}]
});
HTML
<p>Choose a version for lib1:</p>
<!-- Versions names can be separated by whitespace, comma (,) and/or semi-colon (;) -->
<div data-manage-lib="lib1" data-manage-versions="v2.0.0, v1.0.0"></div>
<p>Choose a version for lib2:</p>
<div data-manage-lib="lib2" data-manage-versions="dev, v0.15.2"></div>
<button id="reload">Reload with the above selected Versions</button>
<script src="https://unpkg.com/urijs@1.18.12/src/URI.min.js"></script>
<script src="https://unpkg.com/load-js-css@0.0.1/index.js"></script>
JavaScript
// Fill manage placeholders with Radio Inputs.
bundle.fillPlaceholders();
// Make sure lib2 dev version assets are available.
// If not, it will automatically disable the Radio Input and remove
// the defaultVersion flag.
bundle.getLibVersion('lib2', 'dev').checkAssetsAvailability(true)
.then(function () {
loadDependenciesAndPageScript();
})
.catch(function () {
bundle.getLibVersion('lib2', 'v0.15.2').defaultVersion = true;
loadDependenciesAndPageScript();
});
function loadDependenciesAndPageScript() {
// Read in the URL which Libraries Versions are requested.
var url = window.location.href;
// https://github.com/medialize/URI.js
var urlParts = URI.parse(url);
var queryStringParts = URI.parseQuery(urlParts.query);
// Get the Libraries Versions assets list and select the Radio Inputs,
// so that the user sees which Versions will be loaded.
var list = bundle.getAndSelectVersionsAssetsList(queryStringParts);
// Finally include the page script, now that lib1 and lib2 dependencies
// are available.
list.push({
type: 'script',
path: './index.js'
});
// https://github.com/ghybs/load-js-css
loadJsCss.list(list, {
// Load scripts after stylesheets, delayed by this duration (in ms).
// Typically if a Library expects that its stylesheet is applied
// when its script executes.
delayScripts: 500
});
}
document.getElementById('reload').addEventListener('click', function (event) {
event.preventDefault();
// Read the checked Radio Inputs (i.e. which Versions the user has selected).
var bundleVersions = bundle.readSelectedVersionsNames();
// Build a new URL including those Versions requests as Query part.
var url = new URI(window.location.href).setQuery(bundleVersions);
// Reload the page with the new requested Versions.
window.location.href = url.toString();
});
License
Manage Libs Versions library is distributed under the ISC License.