ember-inject-scripts

Seamlessly inject any sort of scripts inside your ember application


Features

- Inject single script
- Inject multiple scripts
- Get onload and onerror callbacks for individual scripts
- Inject scripts with attributes
- Inject inline scripts
- Inject script only once
- Get all scripts cached events on done.

Demo

https://prakashchokalingam.github.io/ember-inject-scripts!

Installation

npm install --save ember-inject-scripts

Usage

$3

import 'injectScript' from 'inject-scripts';

injectScript("https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js").then(() => {
console.log ( "🤟Yay ! script injected" );
});

-------- or --------

let singleScript = {
id: 'datefns',
src: 'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js',
attributes: [
{
name: 'data-library',
value: 'datefns'
}
]
};

injectScript(singleScript).then(() => {
console.log ( "🤟Yay ! script injected" );
});

---->

$3

import 'injectScripts' from 'inject-scripts';

let multipleScripts = [
{
id: 'datefns',
src: 'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js',
attributes: [
{
name: 'data-library',
value: 'datefns'
}
],
once: true
},
{
id: 'inline',
inline: console.log('inline script rendered'),
attributes: [
{
name: 'data-inline',
value: 'true'
}
]
}
]

injectScripts(multipleScripts).then((events) => {
// events - holds data for all scripts injection as array
console.log ( "🤟🤟🤟Yay ! multiple scripts injected" );
});

---->

injectScripts function expects object for single script inject and array of objects for multiple scripts injection as parameter, the object items are,

| name | type | description |
| ------------- |:-------------:| -----|
| id | string : optional | Adds an id attribute to the script element id=id and also creates a test selector data-test-script=id |
| type | string : optional : default text/javascript | Adds type to the script element |
| src | string : optional | Adds a source to the script element src=src|
| inline | string : optional | Adds inline contents to the script element |
| once | boolean : optional | Looks for an element with the same id passed. If founded avoids the injection and returns the dom element as target |
| attributes | Array of objects : optional { name: 'data-inline', value: 'true' }| Adds attribute contents to the script element |
| onload | function : optional | Callback function for successive load of script. not available for inline scripts |
| onerror | function : optional | Callback function for failure while loading of script. not available for inline scripts |

injectScripts.then() will return all the cacheable event values as array for all passed script elements.

inline scripts will have only target as the event value.

Running

* ember serve
* Visit your app at http://localhost:4200.

Running Tests

* npm test (Runs ember try:each to test your addon against multiple Ember versions)
* ember test
* ember test --server

Building

* ember build

For more information on using ember-cli, visit https://ember-cli.com/.