d2-ui
Version:
129 lines (115 loc) • 3.5 kB
JavaScript
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);
}
}
}
});