Ember-inject-scripts NPM

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