ember-inject-scripts

0.0.7 • Public • Published

ember-inject-scripts

Seamlessly inject any sort of scripts inside your ember application

Build Status npm npm version dependencies Status devDependencies Status EmberObserver

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

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

/ember-inject-scripts/

    Package Sidebar

    Install

    npm i ember-inject-scripts

    Weekly Downloads

    480

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • prakashc