simple-load-script

simple-load-script

Very simple promise based script loader and JSONP

Usage

Async/await

import simpleLoadScript from 'simple-load-script';

try {
  const scriptRef = await simpleLoadScript('//code.jquery.com/jquery-2.2.3.js');

  console.log(scriptRef); // HTMLScriptElement
} catch (err) {
  console.log(err);
}

Promise

import simpleLoadScript from 'simple-load-script';

simpleLoadScript('//code.jquery.com/jquery-2.2.3.js')
  .then(function (scriptRef) {
    console.log(scriptRef);
  })
  .catch(function (err) {
    console.log(err);
  });

Config object

import simpleLoadScript from 'simple-load-script';

try {
  const scriptRef = await simpleLoadScript({
    url: '//code.jquery.com/jquery-2.2.3.js',
    inBody: true,
    attrs: { id: 'one', charset: 'UTF-8' },
  });

  console.log(scriptRef); // HTMLScriptElement inBody with attrs present
} catch (err) {
  console.log(err);
}

Google Maps API

Runs global callback (window.gmapiready)

import simpleLoadScript from 'simple-load-script';

try {
  const scriptRef = await simpleLoadScript('//maps.googleapis.com/maps/api/js?&callback=gmapiready');

  console.log(scriptRef); // HTMLScriptElement
} catch (err) {
  console.log(err);
}

JSONP

Runs global callback (window.elo)

var simpleLoadScript = require('simple-load-script');

try {
  const scriptRef = await simpleLoadScript({
    url: '//api.ipinfodb.com/v3/ip-city/?format=json&callback=elo',
    removeScript: true,
  });

  console.log(scriptRef); // undefined
} catch (err) {
  console.log(err);
}

Array mode - objects and urls, callBackNames must have unique names

import simpleLoadScript from 'simple-load-script';

try {
  const scriptRefs = await simpleLoadScript([
    '//maps.googleapis.com/maps/api/js?&callback=gmapiready',
    {
      url: '//api.ipinfodb.com/v3/ip-city/?format=json&callback=elo',
      removeScript: true,
    },
    '//code.jquery.com/jquery-2.2.3.js',
  ]);

  console.log(scriptRefs); // HTMLScriptElement[]
} catch (err) {
  console.log(err);
}

Arguments

Config | string | (Config | string)[]

Config

Interface

interface Config {
  url: string;
  attrs?: Record<string, string>;
  inBody?: boolean;
  insertInto?: string | null;
  removeScript?: boolean;
}

Default values

const defaultConfig = {
  url: '',
  attrs: {},
  inBody: false,
  insertInto: null,
  removeScript: false,
};

• url - file to append to body
• attrs - with attributes to append to script tag (charset, type, id, …)
• inBody - append to document.body instead of document.head
• insertInto - CSS selector (an ID, class name, element name, etc.) to insert the script into. Overrides inBody value.
• removeScript - remove script tag after load; it's always removed on an error

Specific import

Check files or package.json

Changelog

View on github.

Misc.

• uses addEventListener, Array.isArray, for…of, destructuring Promise & Promise.all

Changelog

2.0.0

• BREAKING CHANGE exported files paths
• BREAKING CHANGE jsonp removed form Config
• BREAKING CHANGE callBackName removed form Config
• BREAKING CHANGE removeScript changes - script is not removed by default on an error
• BREAKING CHANGE callBack removed form Config - just run code after simpleLoadScript run (eg. console.log in examples)
• TS
• rollup
• deps
• tests
• readme