debug-server-next/dist/webpack-dev-server/client/overlay.js

Dev server for hippy-core.

// The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
import ansiHTML from 'ansi-html-community';
import { encode } from 'html-entities';
var colors = {
  reset: ['transparent', 'transparent'],
  black: '181818',
  red: 'E36049',
  green: 'B3CB74',
  yellow: 'FFD080',
  blue: '7CAFC2',
  magenta: '7FACCA',
  cyan: 'C3C2EF',
  lightgrey: 'EBE7E3',
  darkgrey: '6D7891'
};
var iframeContainerElement;
var containerElement;
var onLoadQueue = [];
ansiHTML.setColors(colors);

function createContainer() {
  iframeContainerElement = document.createElement('iframe');
  iframeContainerElement.id = 'webpack-dev-server-client-overlay';
  iframeContainerElement.src = 'about:blank';
  iframeContainerElement.style.position = 'fixed';
  iframeContainerElement.style.left = 0;
  iframeContainerElement.style.top = 0;
  iframeContainerElement.style.right = 0;
  iframeContainerElement.style.bottom = 0;
  iframeContainerElement.style.width = '100vw';
  iframeContainerElement.style.height = '100vh';
  iframeContainerElement.style.border = 'none';
  iframeContainerElement.style.zIndex = 9999999999;

  iframeContainerElement.onload = function () {
    containerElement = iframeContainerElement.contentDocument.createElement('div');
    containerElement.id = 'webpack-dev-server-client-overlay-div';
    containerElement.style.position = 'fixed';
    containerElement.style.boxSizing = 'border-box';
    containerElement.style.left = 0;
    containerElement.style.top = 0;
    containerElement.style.right = 0;
    containerElement.style.bottom = 0;
    containerElement.style.width = '100vw';
    containerElement.style.height = '100vh';
    containerElement.style.backgroundColor = 'rgba(0, 0, 0, 0.85)';
    containerElement.style.color = '#E8E8E8';
    containerElement.style.fontFamily = 'Menlo, Consolas, monospace';
    containerElement.style.fontSize = 'large';
    containerElement.style.padding = '2rem';
    containerElement.style.lineHeight = '1.2';
    containerElement.style.whiteSpace = 'pre-wrap';
    containerElement.style.overflow = 'auto';
    var headerElement = document.createElement('span');
    headerElement.innerText = 'Compiled with problems:';
    var closeButtonElement = document.createElement('button');
    closeButtonElement.innerText = 'X';
    closeButtonElement.style.background = 'transparent';
    closeButtonElement.style.border = 'none';
    closeButtonElement.style.fontSize = '20px';
    closeButtonElement.style.fontWeight = 'bold';
    closeButtonElement.style.color = 'white';
    closeButtonElement.style.cursor = 'pointer';
    closeButtonElement.style.cssFloat = 'right';
    closeButtonElement.style.styleFloat = 'right';
    closeButtonElement.addEventListener('click', function () {
      hide();
    });
    containerElement.appendChild(headerElement);
    containerElement.appendChild(closeButtonElement);
    containerElement.appendChild(document.createElement('br'));
    containerElement.appendChild(document.createElement('br'));
    iframeContainerElement.contentDocument.body.appendChild(containerElement);
    onLoadQueue.forEach(function (onLoad) {
      onLoad(containerElement);
    });
    onLoadQueue = [];
    iframeContainerElement.onload = null;
  };

  document.body.appendChild(iframeContainerElement);
}

function ensureOverlayExists(callback) {
  if (containerElement) {
    // Everything is ready, call the callback right away.
    callback(containerElement);
    return;
  }

  onLoadQueue.push(callback);

  if (iframeContainerElement) {
    return;
  }

  createContainer();
} // Successful compilation.


function hide() {
  if (!iframeContainerElement) {
    return;
  } // Clean up and reset internal state.


  document.body.removeChild(iframeContainerElement);
  iframeContainerElement = null;
  containerElement = null;
}

function formatProblem(type, item) {
  var header = type === 'warning' ? 'WARNING' : 'ERROR';
  var body = '';

  if (typeof item === 'string') {
    body += item;
  } else {
    var file = item.file || ''; // eslint-disable-next-line no-nested-ternary

    var moduleName = item.moduleName ? item.moduleName.indexOf('!') !== -1 ? "".concat(item.moduleName.replace(/^(\s|\S)*!/, ''), " (").concat(item.moduleName, ")") : "".concat(item.moduleName) : '';
    var loc = item.loc;
    header += "".concat(moduleName || file ? " in ".concat(moduleName ? "".concat(moduleName).concat(file ? " (".concat(file, ")") : '') : file).concat(loc ? " ".concat(loc) : '') : '');
    body += item.message || '';
  }

  return {
    header: header,
    body: body
  };
} // Compilation with errors (e.g. syntax error or missing modules).


function show(type, messages) {
  ensureOverlayExists(function () {
    messages.forEach(function (message) {
      var entryElement = document.createElement('div');
      var typeElement = document.createElement('span');

      var _formatProblem = formatProblem(type, message),
          header = _formatProblem.header,
          body = _formatProblem.body;

      typeElement.innerText = header;
      typeElement.style.color = "#".concat(colors.red); // Make it look similar to our terminal.

      var text = ansiHTML(encode(body));
      var messageTextNode = document.createElement('div');
      messageTextNode.innerHTML = text;
      entryElement.appendChild(typeElement);
      entryElement.appendChild(document.createElement('br'));
      entryElement.appendChild(document.createElement('br'));
      entryElement.appendChild(messageTextNode);
      entryElement.appendChild(document.createElement('br'));
      entryElement.appendChild(document.createElement('br'));
      containerElement.appendChild(entryElement);
    });
  });
}

export { formatProblem, show, hide };