ES6 dynamic Javascript loading with Jsdelivr CDN

• Download source code (RAR) - 1.1 KB
• Download source code - 1.1 KB

What is Script-y

An experimental tiny lib (3kb) to load any JS library from jsdelivr.com dynamically based on the lib name. Specific version also supported. Project source is on Github.

The Idea

This library made using ES6 Custom Elements which is not supported in all browsers yet, it depends on jsdilvr CDN and using its APIs to search for any well-known library by name (nearest value) and inject it dynamically into your page.

Warning

One more time, this is an experimental library and was made just for testing purposes. It uses the nasty synchronous HTTP calls (which is already deprecated) to simulate the same blocking behavior done by the script tag. More information about script tag and loading behavior is from here.

Usage

Add the small tiny little script tag at the header:

<script src="scripty.js">script>

Create scripty tag with the needed library name using packages property:

<script-y packages="jquery"></script-y>

If the library name got 2 words (example: angular icons or angular translate), just place the name with space and it will be replaced automatically by * as search APIs uses minimatch. It will take the first item as closest value when search is performed.

<script-y packages="jquery*ui"></script-y>

Loading specific version is also possible using @ after the library name.

<script-y packages="jquery@3.1.0"></script-y>

Scripts are loaded in order, so if there is a dependency between the different libs, just put them in order.

<script-y packages="angularjs,angular translate"></script-y>

You can also load some local JS files if needed by using locals property (always will be loaded after packages completes).

<script-y packages="jquery" locals="myscript.js"></script-y>

Add a callback function if needed, although the scripts are running in a blocking mechanism which means any script that will come after scripty will be executed as in the same normal order.

<script-y packages="jquery" locals="external.js" oncomplete="amCallbackFunc()" ></script-y>

Side Notes

Why the synchronous calls, because DOMContentLoaded awaits only for HTML and scripts, but won’t wait for a script created by document.createElement (called dynamic script).

The loading is quite slow as the component flow as follows:

1. Render the component and read all the content passed from the HTML and setting its properties.
2. Hit jsdilvr APIs to look for the needed library and retrieve all the information that will be used to get the lib.
3. Create script tag and add to the DOM after evaluating the script loaded.
4. Call the callback method when the whole DOM is ready by using DOMContentLoaded.

Running Example

Clone the project, run the almighty npm install, then run gulp watch.

And to find which version was loaded in case you mentioned only the library name, open console and it will mention which version was downloaded jquery@3.1.1.

Roadmap

• Alternative to blocking mechanism (Async) with proper callback (in progress)
• Download the content first time and load it locally in the coming requests
• Any suggestions are welcome