@beyonk/async-script-loader - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

index.js

		@@ -1,9 +0,26 @@
		export default function (url, test, callback, options = { async: true, defer: true }) {
		export default function (urls, test, callback) {
		let remaining = urls.length

		function maybeCallback () {
		remaining = --remaining
		if (remaining < 1) {
		callback()
		}
		}

		if (!test()) {
		const tag = document.createElement('script')
		tag.src = url
		tag.async = options.async
		tag.defer = options.defer
		tag.onload = callback
		document.body.appendChild(tag)
		urls.forEach(({ type, url, options = { async: true, defer: true }}) => {
		const isScript = type === 'script'
		const tag = document.createElement(isScript ? 'script': 'link')
		if (isScript) {
		tag.src = url
		tag.async = options.async
		tag.defer = options.defer
		} else {
		tag.rel = 'stylesheet'
		tag.href = url
		}
		tag.onload = maybeCallback
		document.body.appendChild(tag)
		})
		} else {
		@@ -10,0 +27,0 @@ callback()

package.json

		{
		"name": "@beyonk/async-script-loader",
		"version": "1.0.3",
		"version": "2.0.0",
		"description": "Loads scripts cleanly and asynchronously in SPAs",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.MD

		@@ -9,3 +9,3 @@ <p align="center">

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

		@@ -23,2 +23,8 @@ * Using a test to ensure that the code is only loaded once

		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.
		@@ -40,6 +46,30 @@

		loader(url, test, callback, { async: true, defer: true })
		loader([
		{ type: 'script', url }
		], 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.

		```js
		<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!

New alerts