https://github.com/romancow/load-script

Promise-based method for dynamically loading scripts in browser with TypeScript support
https://github.com/romancow/load-script

async browser load promise script typescript

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/romancow/load-script
• Owner: romancow
• License: isc
• Created: 2020-03-10T15:26:39.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-21T03:40:05.000Z (over 2 years ago)
• Last Synced: 2023-06-30T12:02:47.535Z (over 1 year ago)
• Topics: async, browser, load, promise, script, typescript
• Language: TypeScript
• Homepage:
• Size: 48.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# load-script

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

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

## Installation

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](https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry#installing-a-package).

Or just [download](https://github.com/romancow/load-script/releases/latest) it.

## Usage

Import it:

```javascript

import loadScript from '@romancow/load-script'

```

Or use a traditional script tag:

```html

```

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

```javascript

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

```

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

```javascript

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

```

or

```javascript

loadScript("some/js/lib.js").then(function () {

	// do stuff script needs to be loaded for

});

```

### Options

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

All options are optional.

```javascript

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes).

- `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.








```javascript

const $ = await loadScript("https://code.jquery.com/jquery-3.4.1.min.js", {

	integrity: "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=",

	crossOrigin: "anonymous",

	map: function() { return jQuery.noConflict() }

});

```

## License

[ISC](https://opensource.org/licenses/ISC)