Promise-based method for dynamically loading scripts in browser with TypeScript support

^{*Promises must be polyfilled if environment does not already support it.}

Add a scope mapping for the GitHub npm package manager by adding a .npmrc file with the line:

@romancow:registry=https://npm.pkg.github.com/

Then install the package:

npm install @romancow/load-script

or

yarn add @romancow/load-script

More info on using the GitHub npm package registry here.

Or just download it.

Import it:

import loadScript from '@romancow/load-script'

Or use a traditional script tag:

<script src="load-script.js"></script>

Then use loadScript as a function to load javascript at a given url:

loadScript("some/js/lib.js");

By default it returns a promise that resolves to the correpsonding HTMLScriptElement after the script has loaded.

const scriptElement = await loadScript("some/js/lib.js");

or

loadScript("some/js/lib.js").then(function () {
	// do stuff script needs to be loaded for
});

You can also pass an options object as a second argument to the method. All options are optional.

loadScript("some/js/my-module.js", { type: "module", async: true });

There are several options that correspond directly to attributes that will be set on the created script element. More info on them here.

• async (boolean)
• defer (boolean)
• crossOrigin (string)
• integrity (string)
• noModule (boolean)
• nonce (string)
• referrerPolicy (string)
• type (string)

And then a few more "advanced" options:

parent (string | Element)

An Element instance or query selector string to use as the parent element to append newly created script elements to. Default is the document's head element.

force (boolean)

Whether to circumvent browser caching by appending a random query string to the url, "forcing" it to refresh when added. Default is false.

id (string)

Id used for caching loaded scripts. Also applied as the id attribute to corresponding script elements.

cache (boolean)

Whether to cache the promise for the given id or url, rather than adding a new script element for each one. Default is false.

map (string | Function)

A global variable or function dictating the resolved value of loadScript's returned promise. Unlike other options, this value will be evaluated each time loadScript is called, whether it's retrieved from cache or not. Will be the corresponding script's element by default.

const $ = await loadScript("https://code.jquery.com/jquery-3.4.1.min.js", {
	integrity: "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=",
	crossOrigin: "anonymous",
	map: function() { return jQuery.noConflict() }
});

ISC