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
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.
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 info about script tag and loading behavior is from here
Add the small tiny little script tag at the header
Create scripty tag with the needed library name using packages property
If the library name got 2 words (ex: 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 performed
Loading specific version is also possible using
@ after the library name
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 complete)
<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 will come after scripty will be executed as in the same normal order.
<script-y packages="jquery" locals="external.js" oncomplete="amCallbackFunc()" ></script-y>
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 it slow as the component flow as following :
- Render the component and read all the content passed from the html and setting its properties.
- Hit jsdilvr APIs to look for the needed library and retrieve all the info will be used to get the lib.
- Create script tag and add to the DOM after evaluating the script loaded.
- Call the callback method when the whole DOM is ready by using
Clone the project, run the almighty
npm install then run
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
- Alternative to blocking mechanism (Async) with proper callback (on progress)
- Download the content first time and load it locally in the coming requests
- Any suggestions are welcome