webpack-hot-middleware - npm Package Compare versions

Comparing version 2.15.0 to 2.16.0

client.js

@@ -24,3 +24,3 @@ /*eslint-env browser*/
   if (overrides.name) {
-    options.name = overrides.name 
+    options.name = overrides.name;
   }
@@ -45,13 +45,11 @@ if (overrides.quiet && overrides.quiet !== 'false') {
 } else {
-  connect(window.EventSource);
+  connect();
 }
 
-function connect(EventSource) {
-  var source = new EventSource(options.path);
+function EventSourceWrapper() {
+  var source;
   var lastActivity = new Date();
+  var listeners = [];
 
-  source.onopen = handleOnline;
-  source.onmessage = handleMessage;
-  source.onerror = handleDisconnect;
-
+  init();
   var timer = setInterval(function() {
@@ -63,2 +61,9 @@ if ((new Date() - lastActivity) > options.timeout) {
 
+  function init() {
+    source = new window.EventSource(options.path);
+    source.onopen = handleOnline;
+    source.onerror = handleDisconnect;
+    source.onmessage = handleMessage;
+  }
+
   function handleOnline() {
@@ -71,2 +76,36 @@ if (options.log) console.log("[HMR] connected");
     lastActivity = new Date();
+    for (var i = 0; i < listeners.length; i++) {
+      listeners[i](event);
+    }
+  }
+
+  function handleDisconnect() {
+    clearInterval(timer);
+    source.close();
+    setTimeout(init, options.timeout);
+  }
+
+  return {
+    addMessageListener(fn) {
+      listeners.push(fn);
+    }
+  }
+}
+
+function getEventSourceWrapper() {
+  if (!window.__whmEventSourceWrapper) {
+    window.__whmEventSourceWrapper = {};
+  }
+  if (!window.__whmEventSourceWrapper[options.path]) {
+    // cache the wrapper for other entries loaded on
+    // the same page with the same options.path
+    window.__whmEventSourceWrapper[options.path] = EventSourceWrapper();
+  }
+  return window.__whmEventSourceWrapper[options.path];
+}
+
+function connect() {
+  getEventSourceWrapper().addMessageListener(handleMessage);
+
+  function handleMessage(event) {
     if (event.data == "\uD83D\uDC93") {
@@ -83,19 +122,15 @@ return;
   }
-
-  function handleDisconnect() {
-    clearInterval(timer);
-    source.close();
-    setTimeout(function() { connect(EventSource); }, options.timeout);
-  }
-
 }
 
-var reporter;
 // the reporter needs to be a singleton on the page
-// in case the client is being used by mutliple bundles
+// in case the client is being used by multiple bundles
 // we only want to report once.
 // all the errors will go to all clients
 var singletonKey = '__webpack_hot_middleware_reporter__';
-if (typeof window !== 'undefined' && !window[singletonKey]) {
-  reporter = window[singletonKey] = createReporter();
+var reporter;
+if (typeof window !== 'undefined') {
+  if (!window[singletonKey]) {
+    window[singletonKey] = createReporter();
+  }
+  reporter = window[singletonKey];
 }
@@ -111,5 +146,33 @@
 
-
+  var styles = {
+    errors: "color: #ff0000;",
+    warnings: "color: #5c3b00;"
+  };
   var previousProblems = null;
+  function log(type, obj) {
+    var newProblems = obj[type].map(function(msg) { return strip(msg); }).join('\n');
+    if (previousProblems == newProblems) {
+      return;
+    } else {
+      previousProblems = newProblems;
+    }
 
+    var style = styles[type];
+    var name = obj.name ? "'" + obj.name + "' " : "";
+    var title = "[HMR] bundle " + name + "has " + obj[type].length + " " + type;
+    // NOTE: console.warn or console.error will print the stack trace
+    // which isn't helpful here, so using console.log to escape it.
+    if (console.group && console.groupEnd) {
+      console.group("%c" + title, style);
+      console.log("%c" + newProblems, style);
+      console.groupEnd();
+    } else {
+      console.log(
+        "%c" + title + "\n\t%c" + newProblems.replace(/\n/g, "\n\t"),
+        style + "font-weight: bold;",
+        style + "font-weight: normal;"
+      );
+    }
+  }
+
   return {
@@ -121,8 +184,3 @@ cleanProblemsCache: function () {
       if (options.warn) {
-        var newProblems = obj[type].map(function(msg) { return strip(msg); }).join('\n');
-
-        if (previousProblems !== newProblems) {
-          previousProblems = newProblems;
-          console.warn("[HMR] bundle has " + type + ":\n" + newProblems);
-        }
+        log(type, obj);
       }
@@ -147,3 +205,8 @@ if (overlay && type !== 'warnings') overlay.showProblems(type, obj[type]);
     case "building":
-      if (options.log) console.log("[HMR] bundle rebuilding");
+      if (options.log) {
+        console.log(
+          "[HMR] bundle " + (obj.name ? "'" + obj.name + "' " : "") +
+          "rebuilding"
+        );
+      }
       break;
@@ -153,3 +216,3 @@ case "built":
         console.log(
-          "[HMR] bundle " + (obj.name ? obj.name + " " : "") +
+          "[HMR] bundle " + (obj.name ? "'" + obj.name + "' " : "") +
           "rebuilt in " + obj.time + "ms"
@@ -156,0 +219,0 @@ );

package.json

 {
   "name": "webpack-hot-middleware",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "Webpack hot reloading you can attach to your own server",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -21,9 +21,7 @@ # Webpack Hot Middleware
 
- 1. Add the following three plugins to the `plugins` array:
+ 1. Add the following plugins to the `plugins` array:
     ```js
     plugins: [
-        // Webpack 1.0
+        // OccurenceOrderPlugin is needed for webpack 1.x only
         new webpack.optimize.OccurenceOrderPlugin(),
-        // Webpack 2.0 fixed this mispelling
-        // new webpack.optimize.OccurrenceOrderPlugin(),
         new webpack.HotModuleReplacementPlugin(),
@@ -77,2 +75,4 @@ new webpack.NoErrorsPlugin()
 
+#### Client
+
 Configuration options can be passed to the client by adding querystring parameters to the path in the webpack config.
@@ -93,2 +93,18 @@
 
+#### Middleware
+
+Configuration options can be passed to the middleware by passing a second arugment.
+
+```js
+app.use(require("webpack-hot-middleware")(compiler, {
+    log: false,
+    path: "/__what",
+    heartbeat: 2000
+}));
+```
+
+* **log** - A function used to log lines, pass `false` to disable. Defaults to `console.log`
+* **path** - The path which the middleware will serve the event stream on, must match the client setting
+* **heartbeat** - How often to send heartbeat updates to the client to keep the connection alive. Should be less than the client's `timeout` setting - usually set to half its value.
+
 ## How it Works
@@ -95,0 +111,0 @@

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

45401

increased by4.97%

Lines of code

1039

increased by6.24%

Number of lines in readme file

179

increased by9.82%

No dependency changes