@beyonk/async-script-loader

Async Script Loader

Allows asynchronous loading of scripts and styles in a Single Page Application (or anything else, in fact):

• Using a test to ensure that the code is only loaded once
• Running a callback once the script is loaded
• Running a callback if the script is already loaded
• Not blocking the main thread

Reasoning

Having integrated a multitude of third-party SDKs from large, well known providers, I've come to the conclusion that not having a standard interface turns the whole thing into a minefield of callbacks, timers, random library-specific loader modules, and global objects on the window, resulting in XSS risks and all sort of other undesirable behaviour. This module aims to provide a standard way of loading third-party dependencies.

Usage

You pass a list of urls to the loader, along with a method for checking that your page is ready, and a callback to call when it is.

Urls can be scripts or stylesheets.

Script Tags

You can use the module like so, for a library loaded from example.com, which, when loaded, adds an attribute called PROVIDER to the global window object.

<script>
  import loader from '@beyonk/async-script-loader'

  const url = '//example.com/sdk/1.0.0/lib.js'

  function test () {
    return !!window.PROVIDER
  }

  function callback () {
    window.PROVIDER.someFunction()
  }

  loader([
    { type: 'script', url }
  ], test, callback)
</script>

You can pass options for script tags.

<script>
  loader([
    { type: 'script', url, options: { async: true, defer: true } } // these are the default options
  ], test, callback)
</script>

Style Tags

You can include any number of tags, including style tags.

When the last one has loaded, the callback will be called.

<script>
  import loader from '@beyonk/async-script-loader'

  loader([
    { type: 'script', url: '//example.com/sdk/1.0.0/lib.js' },
    { type: 'script', url: '//example.com/sdk/1.0.0/lib2.js' },
    { type: 'style', url: '//example.com/sdk/1.0.0/style.css' }
  ], () => {
    return !!window.PROVIDER
  }, () => {
    window.PROVIDER.someFunction()
  })
</script>

No more tears!