webpack-hot-middleware - npm Package Compare versions

Comparing version 2.8.1 to 2.9.0

client-overlay.js

 /*eslint-env browser*/
 
 var clientOverlay = document.createElement('div');
-clientOverlay.style.display = 'none';
-clientOverlay.style.background = '#111';
-clientOverlay.style.color = '#fff';
-clientOverlay.style.whiteSpace = 'pre';
-clientOverlay.style.fontFamily = 'monospace';
-clientOverlay.style.fontSize = '16px';
-clientOverlay.style.position = 'fixed';
-clientOverlay.style.zIndex = 9999;
-clientOverlay.style.padding = '10px';
-clientOverlay.style.left = 0;
-clientOverlay.style.right = 0;
-clientOverlay.style.top = 0;
-clientOverlay.style.bottom = 0;
-clientOverlay.style.overflow = 'auto';
+var styles = {
+  display: 'none',
+  background: 'rgba(0,0,0,0.85)',
+  color: '#E8E8E8',
+  lineHeight: '1.2rem',
+  whiteSpace: 'pre',
+  fontFamily: 'Menlo, Consolas, monospace',
+  fontSize: '13px',
+  position: 'fixed',
+  zIndex: 9999,
+  padding: '10px',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  overflow: 'auto'
+};
+for (var key in styles) {
+  clientOverlay.style[key] = styles[key];
+}
 
@@ -23,9 +29,29 @@ if (document.body) {
 
+var ansiHTML = require('ansi-html');
+var colors = {
+  reset: ['transparent', 'transparent'],
+  black: '181818',
+  red: 'E36049',
+  green: 'B3CB74',
+  yellow: 'FFD080',
+  blue: '7CAFC2',
+  magenta: '7FACCA',
+  cyan: 'C3C2EF',
+  lightgrey: 'EBE7E3',
+  darkgrey: '6D7891'
+};
+ansiHTML.setColors(colors);
+
+var Entities = require('html-entities').AllHtmlEntities;
+var entities = new Entities();
+
 exports.showProblems =
-function showProblems(lines) {
+function showProblems(type, lines) {
   clientOverlay.innerHTML = '';
   clientOverlay.style.display = 'block';
   lines.forEach(function(msg) {
+    msg = ansiHTML(entities.encode(msg));
     var div = document.createElement('div');
-    div.innerHTML = msg;
+    div.style.marginBottom = '2rem';
+    div.innerHTML = problemType(type) + ' in ' + msg;
     clientOverlay.appendChild(div);
@@ -41,1 +67,14 @@ });
 
+var problemColors = {
+  errors: colors.red,
+  warnings: colors.yellow
+};
+
+function problemType (type) {
+  var color = problemColors[type] || colors.red;
+  return (
+    '<span style="background-color:#' + color + '; color:#fff; padding:2px 4px; border-radius: 2px">' +
+      type.slice(0, -1).toUpperCase() +
+    '</span>'
+  );
+}

client.js

@@ -82,6 +82,2 @@ /*eslint-env browser*/
 var strip = require('strip-ansi');
-var Ansi = require('ansi-to-html-umd');
-var ansi = new Ansi({
-  escapeXML: true
-});
 
@@ -94,9 +90,9 @@ var 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));
-  });
-  if (overlay && type !== 'warnings') overlay.showProblems(list);
+  if (options.warn) {
+    console.warn("[HMR] bundle has " + type + ":");
+    obj[type].forEach(function(msg) {
+      console.warn("[HMR] " + strip(msg));
+    });
+  }
+  if (overlay && type !== 'warnings') overlay.showProblems(type, obj[type]);
 }
@@ -103,0 +99,0 @@

package.json

 {
   "name": "webpack-hot-middleware",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "Webpack hot reloading you can attach to your own server",
@@ -17,5 +17,6 @@ "main": "middleware.js",
   "dependencies": {
+    "ansi-html": "0.0.5",
+    "html-entities": "^1.2.0",
     "querystring": "^0.2.0",
-    "strip-ansi": "^3.0.0",
-    "ansi-to-html-umd": "^0.4.2"
+    "strip-ansi": "^3.0.0"
   },
@@ -22,0 +23,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36126

increased by1.71%

Lines of code

800

increased by4.17%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedansi-html@0.0.5

• + Addedhtml-entities@^1.2.0

• + Addedansi-html@0.0.5(transitive)

• + Addedhtml-entities@1.4.0(transitive)

• - Removedansi-to-html-umd@^0.4.2

• - Removedansi-to-html-umd@0.4.2(transitive)