Nicer looking overlay about webpack-hot-middleware

[NickColley]

Related: gaearon/react-transform-boilerplate#18

What do you think about using https://github.com/KeywordBrain/redbox-react ?

[glenjamin]

I'd rather not force a dependency on react - especially as there are many more things that can break with a react rendering.

[gaearon]

I hacked up a proof of concept using ansi-to-html:

I had to tweak its dependency (entities) because it requires JSON files which Webpack doesn’t resolve by default (fb55/entities#26). Worst case, we can compile ansi-to-html to UMD ourselves and just use that fork since we likely won’t ever need to update this code.

[gaearon]

If anybody wants to prepare a real PR here’s what I did:

In client-overlay.js

clientOverlay.style.background = '#111';
clientOverlay.style.color = 'fff';

// ...

function showProblems(lines) {
  clientOverlay.innerHTML = '';
  clientOverlay.style.display = 'block';
  lines.forEach(function(msg) {
    var div = document.createElement('div');
    div.innerHTML = msg; // <-------------------- not innerText
    clientOverlay.appendChild(div);
  });
};

In client:

var strip = require('strip-ansi');
var Ansi = require('ansi-to-html'); // <----------- new stuff (as explained above we might need to create UMD for it)
var ansi = new Ansi();

var overlay;
if (typeof document !== 'undefined' && options.overlay) {
  overlay = require('./client-overlay');
}

function problems(type, obj) {
  if (options.warn) console.warn("[HMR] bundle has " + type + ":");
  var list = [];
  obj[type].forEach(function(msg) {
    if (options.warn) console.warn("[HMR] " + strip(msg));
    list.push(ansi.toHtml(msg)); // <---------------------------- convert here
  });
  if (overlay && type !== 'warnings') overlay.showProblems(list);
}

[glenjamin]

Nice idea, I reckon a pre-built version of ansi to HTML is reasonable.

[glenjamin]

One thing to watch for is that we should enable the escapeXML option, as documented here: https://www.npmjs.com/package/ansi-to-html#options