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 (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/.