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
Single script injection
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" );
});
---->
<script type="text/javascript" id="datefns" data-test-script="datefns" data-library="datefns"
src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
Multiple scripts injection
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" );
});
---->
<script type="text/javascript" id="datefns" data-test-script="datefns" data-library="datefns"
src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script type="text/javascript" id="inline" data-test-script="inline" data-inline="true">
console.log('inline script rendered');
</script>
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 <script> inline </script> |
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 <script data-inline="true"> inline </script> |
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
(Runsember 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/.