live.js
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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.pug")());
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();
},
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);
}
}
}
});