client-overlay.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /*eslint-env browser*/
  2. var clientOverlay = document.createElement('div');
  3. clientOverlay.id = 'webpack-hot-middleware-clientOverlay';
  4. var styles = {
  5. background: 'rgba(0,0,0,0.85)',
  6. color: '#e8e8e8',
  7. lineHeight: '1.6',
  8. whiteSpace: 'pre',
  9. fontFamily: 'Menlo, Consolas, monospace',
  10. fontSize: '13px',
  11. position: 'fixed',
  12. zIndex: 9999,
  13. padding: '10px',
  14. left: 0,
  15. right: 0,
  16. top: 0,
  17. bottom: 0,
  18. overflow: 'auto',
  19. dir: 'ltr',
  20. textAlign: 'left',
  21. };
  22. var ansiHTML = require('ansi-html-community');
  23. var colors = {
  24. reset: ['transparent', 'transparent'],
  25. black: '181818',
  26. red: 'ff3348',
  27. green: '3fff4f',
  28. yellow: 'ffd30e',
  29. blue: '169be0',
  30. magenta: 'f840b7',
  31. cyan: '0ad8e9',
  32. lightgrey: 'ebe7e3',
  33. darkgrey: '6d7891',
  34. };
  35. var htmlEntities = require('html-entities');
  36. function showProblems(type, lines) {
  37. clientOverlay.innerHTML = '';
  38. lines.forEach(function (msg) {
  39. msg = ansiHTML(htmlEntities.encode(msg));
  40. var div = document.createElement('div');
  41. div.style.marginBottom = '26px';
  42. div.innerHTML = problemType(type) + ' in ' + msg;
  43. clientOverlay.appendChild(div);
  44. });
  45. if (document.body) {
  46. document.body.appendChild(clientOverlay);
  47. }
  48. }
  49. function clear() {
  50. if (document.body && clientOverlay.parentNode) {
  51. document.body.removeChild(clientOverlay);
  52. }
  53. }
  54. function problemType(type) {
  55. var problemColors = {
  56. errors: colors.red,
  57. warnings: colors.yellow,
  58. };
  59. var color = problemColors[type] || colors.red;
  60. return (
  61. '<span style="background-color:#' +
  62. color +
  63. '; color:#000000; padding:3px 6px; border-radius: 4px;">' +
  64. type.slice(0, -1).toUpperCase() +
  65. '</span>'
  66. );
  67. }
  68. module.exports = function (options) {
  69. for (var color in options.ansiColors) {
  70. if (color in colors) {
  71. colors[color] = options.ansiColors[color];
  72. }
  73. ansiHTML.setColors(colors);
  74. }
  75. for (var style in options.overlayStyles) {
  76. styles[style] = options.overlayStyles[style];
  77. }
  78. for (var key in styles) {
  79. clientOverlay.style[key] = styles[key];
  80. }
  81. return {
  82. showProblems: showProblems,
  83. clear: clear,
  84. };
  85. };
  86. module.exports.clear = clear;
  87. module.exports.showProblems = showProblems;