@vaju/script-loader

Promise based script loading for browsers

Usage no npm install needed!

<script type="module">
  import vajuScriptLoader from 'https://cdn.skypack.dev/@vaju/script-loader';
</script>

README

script-loader

Promise based dynamic scripts loader for browsers.

Why

  • Load script files on demand (for better page load performance).
  • Duplication check (skip loading if the same script is already loaded).
  • Typescript ready.
  • Promise ready.
  • Support for defer(default), async.
  • No dependencies, tiny (1.2 KB).

defer vs async

loading diff

Install

npm i @vaju/script-loader

Usage

import { scriptLoader } from '@vaju/script-loader';

// ...

await scriptLoader([
  { scr: 'https://cdn.firebase.com/libs/firebaseui/3.6.0/firebaseui.js' },

  // or optionally pass options
  {
    scr: 'https://cdn.firebase.com/libs/firebaseui/3.6.0/firebaseui.js',
    opt: {
      loadingMethod: 'defer', // default. OR use 'async' or null
      type: 'text/javascript', // default
      attrs: {}, // default
    },
  },
]);

Results in appending the following script node to DOM (inside the <head> or <body> tag).

<script async type=​"text/​javascript" src=​"https://.../​firebaseui.js">​</script>​

APIs

import { scriptLoader } from '@vaju/script-loader';

// ...

await scriptLoader(
  dynamicScripts,
  hostElement, // optional
  document, // optional
);

Where, dynamicScripts has the following form:

const dynamicScripts = [
  {
    src: 'script src url',
    // optional opt
    opt: {
      loadingMethod: 'defer', // (default) script will have defer attribute
      type: 'text/javascript', // (default)
      attrs: {}, // optional map of attributes. Default is empty.
    },
  },
];

Optional hostElement is an HTMLElement to which the <script> tag is attached. Default is <head> || <body>

const hostElement = document.getElementsByTagName('head')[0];

Optional document object. Default is document.

v1 to v2 Migration Giude

The { "async": true } property in the opt is now managed by the optional loadingMethod property in the opt.

The loadingMethod can have defer(default) or async values. Learn more about these properties in MDN.

Licence

MIT © 2019 Vajahath Ahmed