webpack-dev-server 1.15.1 → 1.16.2

package/client/live.js

@@ -1,128 +1,129 @@
-var $ = require("jquery");
-var SockJS = require("sockjs-client");
-var stripAnsi = require('strip-ansi');
-require("./style.css");
-
-var sock = null;
-var hot = false;
-var currentHash = "";
-
-var newConnection = function(handlers) {
-	sock = new SockJS('/sockjs-node');
-
-	sock.onclose = function() {
-		handlers.close();
-
-		// Try to reconnect.
-		sock = null;
-		setTimeout(function() {
-			newConnection(handlers);
-		}, 2000);
-	};
-
-	sock.onmessage = function(e) {
-		// This assumes that all data sent via the websocket is JSON.
-		var msg = JSON.parse(e.data);
-		handlers[msg.type](msg.data);
-	};
-};
-
-$(function() {
-	var body = $("body").html(require("./page.jade")());
-	var status = $("#status");
-	var okness = $("#okness");
-	var $errors = $("#errors");
-	var iframe = $("#iframe");
-	var header = $(".header");
-
-	var contentPage = window.location.pathname.substr("/webpack-dev-server".length) + window.location.search;
-
-	status.text("Connecting to sockjs server...");
-	$errors.hide(); iframe.hide();
-	header.css({borderColor: "#96b5b4"});
-
-	var onSocketMsg = {
-		hot: function() {
-			hot = true;
-			iframe.attr("src", contentPage + window.location.hash);
-		},
-		invalid: function() {
-			okness.text("");
-			status.text("App updated. Recompiling...");
-			header.css({borderColor: "#96b5b4"});
-			$errors.hide(); if(!hot) iframe.hide();
-		},
-		hash: function(hash) {
-			currentHash = hash;
-		},
-		"still-ok": function() {
-			okness.text("");
-			status.text("App ready.");
-			header.css({borderColor: ""});
-			$errors.hide(); if(!hot) iframe.show();
-		},
-		ok: function() {
-			okness.text("");
-			$errors.hide();
-			reloadApp();
-		},
-		warnings: function(warnings) {
-			okness.text("Warnings while compiling.");
-			$errors.hide();
-			reloadApp();
-		},
-		errors: function(errors) {
-			status.text("App updated with errors. No reload!");
-			okness.text("Errors while compiling.");
-			$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
-			header.css({borderColor: "#ebcb8b"});
-			$errors.show(); iframe.hide();
-		},
-		"proxy-error": function(errors) {
-			status.text("Could not proxy to content base target!");
-			okness.text("Proxy error.");
-			$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
-			header.css({borderColor: "#ebcb8b"});
-			$errors.show(); iframe.hide();
-		},
-		close: function() {
-			status.text("");
-			okness.text("Disconnected.");
-			$errors.text("\n\n\n  Lost connection to webpack-dev-server.\n  Please restart the server to reestablish connection...\n\n\n\n");
-			header.css({borderColor: "#ebcb8b"});
-			$errors.show(); iframe.hide();
-		}
-	};
-
-	newConnection(onSocketMsg);
-
-	iframe.load(function() {
-		status.text("App ready.");
-		header.css({borderColor: ""});
-		iframe.show();
-	});
-
-	function reloadApp() {
-		if(hot) {
-			status.text("App hot update.");
-			try {
-				iframe[0].contentWindow.postMessage("webpackHotUpdate" + currentHash, "*");
-			} catch(e) {
-				console.warn(e);
-			}
-			iframe.show();
-		} else {
-			status.text("App updated. Reloading app...");
-			header.css({borderColor: "#96b5b4"});
-			try {
-				var old = iframe[0].contentWindow.location + "";
-				if(old.indexOf("about") == 0) old = null;
-				iframe.attr("src", old || (contentPage + window.location.hash));
-				old && iframe[0].contentWindow.location.reload();
-			} catch(e) {
-				iframe.attr("src", contentPage + window.location.hash);
-			}
-		}
-	}
-
-});
+var $ = require("jquery");
+var stripAnsi = require('strip-ansi');
+var socket = require('./socket');
+require("./style.css");
+
+var hot = false;
+var currentHash = "";
+
+$(function() {
+	$("body").html(require("./page.jade")());
+	var status = $("#status");
+	var okness = $("#okness");
+	var $errors = $("#errors");
+	var iframe = $("#iframe");
+	var header = $(".header");
+
+	var contentPage = window.location.pathname.substr("/webpack-dev-server".length) + window.location.search;
+
+	status.text("Connecting to sockjs server...");
+	$errors.hide();
+	iframe.hide();
+	header.css({
+		borderColor: "#96b5b4"
+	});
+
+	var onSocketMsg = {
+		hot: function() {
+			hot = true;
+			iframe.attr("src", contentPage + window.location.hash);
+		},
+		invalid: function() {
+			okness.text("");
+			status.text("App updated. Recompiling...");
+			header.css({
+				borderColor: "#96b5b4"
+			});
+			$errors.hide();
+			if(!hot) iframe.hide();
+		},
+		hash: function(hash) {
+			currentHash = hash;
+		},
+		"still-ok": function() {
+			okness.text("");
+			status.text("App ready.");
+			header.css({
+				borderColor: ""
+			});
+			$errors.hide();
+			if(!hot) iframe.show();
+		},
+		ok: function() {
+			okness.text("");
+			$errors.hide();
+			reloadApp();
+		},
+		warnings: function() {
+			okness.text("Warnings while compiling.");
+			$errors.hide();
+			reloadApp();
+		},
+		errors: function(errors) {
+			status.text("App updated with errors. No reload!");
+			okness.text("Errors while compiling.");
+			$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
+			header.css({
+				borderColor: "#ebcb8b"
+			});
+			$errors.show();
+			iframe.hide();
+		},
+		"proxy-error": function(errors) {
+			status.text("Could not proxy to content base target!");
+			okness.text("Proxy error.");
+			$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
+			header.css({
+				borderColor: "#ebcb8b"
+			});
+			$errors.show();
+			iframe.hide();
+		},
+		close: function() {
+			status.text("");
+			okness.text("Disconnected.");
+			$errors.text("\n\n\n  Lost connection to webpack-dev-server.\n  Please restart the server to reestablish connection...\n\n\n\n");
+			header.css({
+				borderColor: "#ebcb8b"
+			});
+			$errors.show();
+			iframe.hide();
+		}
+	};
+
+	socket("/sockjs-node", onSocketMsg);
+
+	iframe.load(function() {
+		status.text("App ready.");
+		header.css({
+			borderColor: ""
+		});
+		iframe.show();
+	});
+
+	function reloadApp() {
+		if(hot) {
+			status.text("App hot update.");
+			try {
+				iframe[0].contentWindow.postMessage("webpackHotUpdate" + currentHash, "*");
+			} catch(e) {
+				console.warn(e);
+			}
+			iframe.show();
+		} else {
+			status.text("App updated. Reloading app...");
+			header.css({
+				borderColor: "#96b5b4"
+			});
+			try {
+				var old = iframe[0].contentWindow.location + "";
+				if(old.indexOf("about") == 0) old = null;
+				iframe.attr("src", old || (contentPage + window.location.hash));
+				old && iframe[0].contentWindow.location.reload();
+			} catch(e) {
+				iframe.attr("src", contentPage + window.location.hash);
+			}
+		}
+	}
+
+});

package/client/page.jade

@@ -1,7 +1,7 @@
-.header
-	span#okness
-	= " "
-	span#status
-pre#errors
-#warnings
-iframe#iframe(src="javascript:;" allowfullscreen)
+.header
+	span#okness
+	= " "
+	span#status
+pre#errors
+#warnings
+iframe#iframe(src="javascript:;" allowfullscreen)

package/client/socket.js

@@ -0,0 +1,41 @@
+var SockJS = require("sockjs-client");
+
+var retries = 0;
+var sock = null;
+
+function socket(url, handlers) {
+	sock = new SockJS(url);
+
+	sock.onopen = function() {
+		retries = 0;
+	}
+
+	sock.onclose = function() {
+		if(retries === 0)
+			handlers.close();
+
+		// Try to reconnect.
+		sock = null;
+
+		// After 10 retries stop trying, to prevent logspam.
+		if(retries <= 10) {
+			// Exponentially increase timeout to reconnect.
+			// Respectfully copied from the package `got`.
+			var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
+			retries += 1;
+
+			setTimeout(function() {
+				socket(url, handlers);
+			}, retryInMs);
+		}
+	};
+
+	sock.onmessage = function(e) {
+		// This assumes that all data sent via the websocket is JSON.
+		var msg = JSON.parse(e.data);
+		if(handlers[msg.type])
+			handlers[msg.type](msg.data);
+	};
+}
+
+module.exports = socket;

package/client/style.css

@@ -1,58 +1,58 @@
-*,
-*:before,
-*:after {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-body,
-html {
-	margin: 0;
-	padding: 0;
-	height: 100%;
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.header {
-	width: 100%;
-	height: 30px;
-	padding: 0 10px;
-	border-left: 10px solid #a3be8c;
-	font-size: 12px;
-	line-height: 30px;
-	color: #eff1f5;
-	background: #343d46;
-	overflow: hidden;
-}
-
-#iframe {
-	position: absolute;
-	top: 30px;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: -webkit-calc(100% - 30px);
-	height: -moz-calc(100% - 30px);
-	height: -ms-calc(100% - 30px);
-	height: -o-calc(100% - 30px);
-	height: calc(100% - 30px);
-	border: 0;
-}
-
-#errors {
-	width: 100%;
-	margin: 0;
-	padding: 10px;
-	font-family: monospace;
-	font-size: 14px;
-	line-height: 1.4;
-	color: #eff1f5;
-	background: #bf616a;
-	overflow: auto;
-}
-
-#okness {
-	font-weight: bold;
-}
+*,
+*:before,
+*:after {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+body,
+html {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.header {
+	width: 100%;
+	height: 30px;
+	padding: 0 10px;
+	border-left: 10px solid #a3be8c;
+	font-size: 12px;
+	line-height: 30px;
+	color: #eff1f5;
+	background: #343d46;
+	overflow: hidden;
+}
+
+#iframe {
+	position: absolute;
+	top: 30px;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: -webkit-calc(100% - 30px);
+	height: -moz-calc(100% - 30px);
+	height: -ms-calc(100% - 30px);
+	height: -o-calc(100% - 30px);
+	height: calc(100% - 30px);
+	border: 0;
+}
+
+#errors {
+	width: 100%;
+	margin: 0;
+	padding: 10px;
+	font-family: monospace;
+	font-size: 14px;
+	line-height: 1.4;
+	color: #eff1f5;
+	background: #bf616a;
+	overflow: auto;
+}
+
+#okness {
+	font-weight: bold;
+}

package/client/web_modules/jquery/index.js

@@ -1,2 +1,2 @@
-require("./jquery-1.8.1");
+require("./jquery-1.8.1");
 module.exports = jQuery;