dominject/edition-browsers/index.js

Inject scripts and styles into the DOM with duplicate prevention and completion callback support

// Prepare
const ONE_MINUTE = 60 * 1000;

/* :: declare class DOMInjectElement extends HTMLElement {
  ondominject: Array<function>;
  domInjectDone: bool;
  domInjectTimer: any;
} */

/**
 * Get the object type string
 * @param {Object} opts - an object of the following properties, requires at least type and url
 * @param {string} opts.type - either 'script' or 'style'
 * @param {string} opts.url - the url of the resource to inject
 * @param {Object} [opts.attrs] - an object of attribute names to values for the injected element
 * @param {number} [opts.timeout=ONE_MINUTE] - the timeout duration in milliseconds, can be fasley for none
 * @param {function} [opts.next] - the completion callback, accepts a potential Error as the first argument, and the dom element as the second
 * @returns {string}
 */
export default function dominject(opts /* :Object */) {
  // Extract
  const {
    type,
    url,
    attrs = {},
    timeout = ONE_MINUTE
  } = opts;

  // Ensure that errors won't go unhandled if the next callback doesn't exist
  function next(err, el) {
    if (opts.next) {
      opts.next(err, el);
    } else if (err) {
      throw err;
    }
  }

  // Check if we already have an existing element
  // If so, our job was el.domInjectDone earlier
  let el /* : HTMLElement */ = document.getElementById(url);
  if (el) {
    if (el.domInjectDone) {
      next(null, el);
    } else {
      el.ondominject.push(next);
    }
    return el;
  }
  // Otherwise create the element

  // Finish up
  function finish(err) {
    // Check
    if (el.domInjectDone) return;

    // Reset
    el.domInjectDone = true;
    el.onload = el.onreadystatechange = null;
    if (el.domInjectTimer != null) {
      clearTimeout(el.domInjectTimer);
      el.domInjectTimer = null;
    }

    // Remove the element if we error'd
    if (err && el && parent) {
      el.parentNode.removeChild(el);
      el = null;
    }

    // Complete (with ensured err as null)
    /* eslint no-cond-assign:0 */
    let handler;
    while (handler = el.ondominject.shift()) {
      handler(err || null, el);
    }
  }

  // Handle on Load
  function onLoad() {
    // Check
    if (el.domInjectDone || !this.readyState /* browsers/events that do not support ready state */ || this.readyState === 'complete' /* mdn */ || this.readyState === 'loaded' /* IE */) {
      finish();
    }
  }

  // Handle on Error
  function onError() {
    // Check
    if (!el.domInjectDone) {
      // Error
      const err = new Error(`The ${url} failed to be injected`);
      finish(err);
    }
  }

  // Handle on Timeout
  function onTimeout() {
    // Check
    if (!el.domInjectDone) {
      // Error
      const err = new Error(`The url ${url} took too long to be injected and timed out`);
      finish(err);
    }
  }

  // Handle
  switch (type) {
    case 'script':
      {
        // Create
        el = document.createElement('script');
        el.ondominject = [next];
        el.domInjectDone = false;

        // Attributes
        if (attrs.defer == null) attrs.defer = true;
        if (attrs.src == null) attrs.src = url;
        if (attrs.id == null) attrs.id = url;
        for (const key in attrs) {
          if (attrs.hasOwnProperty(key)) {
            el.setAttribute(key, attrs[key]);
          }
        }

        // Events
        el.onload = el.onreadystatechange = onLoad;
        el.onerror = onError;

        // Attach
        document.body.appendChild(el);
        break;
      }
    case 'style':
      {
        // Create
        el = document.createElement('link');
        el.ondominject = [next];
        el.domInjectDone = false;

        // Attributes
        if (attrs.rel == null) attrs.rel = 'stylesheet';
        if (attrs.href == null) attrs.href = url;
        if (attrs.id == null) attrs.id = url;
        for (const key in attrs) {
          if (attrs.hasOwnProperty(key)) {
            el.setAttribute(key, attrs[key]);
          }
        }

        // Events
        el.onload = el.onreadystatechange = onLoad;
        el.onerror = onError;

        // Attach
        document.head.appendChild(el);

        // Fallback for older browsers
        // http://www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/
        const img = document.createElement('img');
        img.onerror = onLoad;
        img.src = url;
        break;
      }

    // Something else
    default:
      {
        // Error
        const err = new Error(`The url ${url} has an unknown inject type of ${type}`);
        return next(err);
      }
  }

  // Timeout if applicable
  if (timeout) el.domInjectTimer = setTimeout(onTimeout, timeout);

  // Return the element
  return el;
}