webpack-dev-server 2.4.1 → 2.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -20
- package/README.md +86 -88
- package/bin/webpack-dev-server.js +12 -1
- package/client/index.bundle.js +1 -3
- package/client/index.js +184 -173
- package/client/live.bundle.js +3 -6
- package/client/live.html +1 -1
- package/client/live.js +119 -119
- package/client/overlay.js +126 -126
- package/client/page.pug +7 -7
- package/client/socket.js +41 -41
- package/client/sockjs.bundle.js +1 -2
- package/client/sockjs.js +1 -1
- package/client/style.css +58 -58
- package/client/web_modules/jquery/index.js +1 -1
- package/client/web_modules/jquery/jquery-1.8.1.js +9301 -9301
- package/client/webpack.config.js +19 -19
- package/client/webpack.sockjs.config.js +6 -6
- package/lib/OptionsValidationError.js +159 -159
- package/lib/Server.js +551 -499
- package/lib/optionsSchema.json +293 -289
- package/lib/util/addDevServerEntrypoints.js +26 -24
- package/lib/util/createDomain.js +13 -13
- package/package.json +6 -4
- package/ssl/server.pem +46 -46
package/client/live.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta charset="utf-8"/><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><script type="text/javascript" charset="utf-8" src="/__webpack_dev_server__/live.bundle.js"></script></head><body></body></html>
|
|
1
|
+
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta charset="utf-8"/><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/><script type="text/javascript" charset="utf-8" src="/__webpack_dev_server__/live.bundle.js"></script></head><body></body></html>
|
package/client/live.js
CHANGED
|
@@ -1,119 +1,119 @@
|
|
|
1
|
-
var $ = require("jquery");
|
|
2
|
-
var stripAnsi = require("strip-ansi");
|
|
3
|
-
var socket = require("./socket");
|
|
4
|
-
require("./style.css");
|
|
5
|
-
|
|
6
|
-
var hot = false;
|
|
7
|
-
var currentHash = "";
|
|
8
|
-
|
|
9
|
-
$(function() {
|
|
10
|
-
$("body").html(require("./page.pug")());
|
|
11
|
-
var status = $("#status");
|
|
12
|
-
var okness = $("#okness");
|
|
13
|
-
var $errors = $("#errors");
|
|
14
|
-
var iframe = $("#iframe");
|
|
15
|
-
var header = $(".header");
|
|
16
|
-
|
|
17
|
-
var contentPage = window.location.pathname.substr("/webpack-dev-server".length) + window.location.search;
|
|
18
|
-
|
|
19
|
-
status.text("Connecting to sockjs server...");
|
|
20
|
-
$errors.hide();
|
|
21
|
-
iframe.hide();
|
|
22
|
-
header.css({
|
|
23
|
-
borderColor: "#96b5b4"
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
var onSocketMsg = {
|
|
27
|
-
hot: function() {
|
|
28
|
-
hot = true;
|
|
29
|
-
iframe.attr("src", contentPage + window.location.hash);
|
|
30
|
-
},
|
|
31
|
-
invalid: function() {
|
|
32
|
-
okness.text("");
|
|
33
|
-
status.text("App updated. Recompiling...");
|
|
34
|
-
header.css({
|
|
35
|
-
borderColor: "#96b5b4"
|
|
36
|
-
});
|
|
37
|
-
$errors.hide();
|
|
38
|
-
if(!hot) iframe.hide();
|
|
39
|
-
},
|
|
40
|
-
hash: function(hash) {
|
|
41
|
-
currentHash = hash;
|
|
42
|
-
},
|
|
43
|
-
"still-ok": function() {
|
|
44
|
-
okness.text("");
|
|
45
|
-
status.text("App ready.");
|
|
46
|
-
header.css({
|
|
47
|
-
borderColor: ""
|
|
48
|
-
});
|
|
49
|
-
$errors.hide();
|
|
50
|
-
if(!hot) iframe.show();
|
|
51
|
-
},
|
|
52
|
-
ok: function() {
|
|
53
|
-
okness.text("");
|
|
54
|
-
$errors.hide();
|
|
55
|
-
reloadApp();
|
|
56
|
-
},
|
|
57
|
-
warnings: function() {
|
|
58
|
-
okness.text("Warnings while compiling.");
|
|
59
|
-
$errors.hide();
|
|
60
|
-
reloadApp();
|
|
61
|
-
},
|
|
62
|
-
errors: function(errors) {
|
|
63
|
-
status.text("App updated with errors. No reload!");
|
|
64
|
-
okness.text("Errors while compiling.");
|
|
65
|
-
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
|
|
66
|
-
header.css({
|
|
67
|
-
borderColor: "#ebcb8b"
|
|
68
|
-
});
|
|
69
|
-
$errors.show();
|
|
70
|
-
iframe.hide();
|
|
71
|
-
},
|
|
72
|
-
close: function() {
|
|
73
|
-
status.text("");
|
|
74
|
-
okness.text("Disconnected.");
|
|
75
|
-
$errors.text("\n\n\n Lost connection to webpack-dev-server.\n Please restart the server to reestablish connection...\n\n\n\n");
|
|
76
|
-
header.css({
|
|
77
|
-
borderColor: "#ebcb8b"
|
|
78
|
-
});
|
|
79
|
-
$errors.show();
|
|
80
|
-
iframe.hide();
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
socket("/sockjs-node", onSocketMsg);
|
|
85
|
-
|
|
86
|
-
iframe.load(function() {
|
|
87
|
-
status.text("App ready.");
|
|
88
|
-
header.css({
|
|
89
|
-
borderColor: ""
|
|
90
|
-
});
|
|
91
|
-
iframe.show();
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
function reloadApp() {
|
|
95
|
-
if(hot) {
|
|
96
|
-
status.text("App hot update.");
|
|
97
|
-
try {
|
|
98
|
-
iframe[0].contentWindow.postMessage("webpackHotUpdate" + currentHash, "*");
|
|
99
|
-
} catch(e) {
|
|
100
|
-
console.warn(e);
|
|
101
|
-
}
|
|
102
|
-
iframe.show();
|
|
103
|
-
} else {
|
|
104
|
-
status.text("App updated. Reloading app...");
|
|
105
|
-
header.css({
|
|
106
|
-
borderColor: "#96b5b4"
|
|
107
|
-
});
|
|
108
|
-
try {
|
|
109
|
-
var old = iframe[0].contentWindow.location + "";
|
|
110
|
-
if(old.indexOf("about") == 0) old = null;
|
|
111
|
-
iframe.attr("src", old || (contentPage + window.location.hash));
|
|
112
|
-
old && iframe[0].contentWindow.location.reload();
|
|
113
|
-
} catch(e) {
|
|
114
|
-
iframe.attr("src", contentPage + window.location.hash);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
});
|
|
1
|
+
var $ = require("jquery");
|
|
2
|
+
var stripAnsi = require("strip-ansi");
|
|
3
|
+
var socket = require("./socket");
|
|
4
|
+
require("./style.css");
|
|
5
|
+
|
|
6
|
+
var hot = false;
|
|
7
|
+
var currentHash = "";
|
|
8
|
+
|
|
9
|
+
$(function() {
|
|
10
|
+
$("body").html(require("./page.pug")());
|
|
11
|
+
var status = $("#status");
|
|
12
|
+
var okness = $("#okness");
|
|
13
|
+
var $errors = $("#errors");
|
|
14
|
+
var iframe = $("#iframe");
|
|
15
|
+
var header = $(".header");
|
|
16
|
+
|
|
17
|
+
var contentPage = window.location.pathname.substr("/webpack-dev-server".length) + window.location.search;
|
|
18
|
+
|
|
19
|
+
status.text("Connecting to sockjs server...");
|
|
20
|
+
$errors.hide();
|
|
21
|
+
iframe.hide();
|
|
22
|
+
header.css({
|
|
23
|
+
borderColor: "#96b5b4"
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
var onSocketMsg = {
|
|
27
|
+
hot: function() {
|
|
28
|
+
hot = true;
|
|
29
|
+
iframe.attr("src", contentPage + window.location.hash);
|
|
30
|
+
},
|
|
31
|
+
invalid: function() {
|
|
32
|
+
okness.text("");
|
|
33
|
+
status.text("App updated. Recompiling...");
|
|
34
|
+
header.css({
|
|
35
|
+
borderColor: "#96b5b4"
|
|
36
|
+
});
|
|
37
|
+
$errors.hide();
|
|
38
|
+
if(!hot) iframe.hide();
|
|
39
|
+
},
|
|
40
|
+
hash: function(hash) {
|
|
41
|
+
currentHash = hash;
|
|
42
|
+
},
|
|
43
|
+
"still-ok": function() {
|
|
44
|
+
okness.text("");
|
|
45
|
+
status.text("App ready.");
|
|
46
|
+
header.css({
|
|
47
|
+
borderColor: ""
|
|
48
|
+
});
|
|
49
|
+
$errors.hide();
|
|
50
|
+
if(!hot) iframe.show();
|
|
51
|
+
},
|
|
52
|
+
ok: function() {
|
|
53
|
+
okness.text("");
|
|
54
|
+
$errors.hide();
|
|
55
|
+
reloadApp();
|
|
56
|
+
},
|
|
57
|
+
warnings: function() {
|
|
58
|
+
okness.text("Warnings while compiling.");
|
|
59
|
+
$errors.hide();
|
|
60
|
+
reloadApp();
|
|
61
|
+
},
|
|
62
|
+
errors: function(errors) {
|
|
63
|
+
status.text("App updated with errors. No reload!");
|
|
64
|
+
okness.text("Errors while compiling.");
|
|
65
|
+
$errors.text("\n" + stripAnsi(errors.join("\n\n\n")) + "\n\n");
|
|
66
|
+
header.css({
|
|
67
|
+
borderColor: "#ebcb8b"
|
|
68
|
+
});
|
|
69
|
+
$errors.show();
|
|
70
|
+
iframe.hide();
|
|
71
|
+
},
|
|
72
|
+
close: function() {
|
|
73
|
+
status.text("");
|
|
74
|
+
okness.text("Disconnected.");
|
|
75
|
+
$errors.text("\n\n\n Lost connection to webpack-dev-server.\n Please restart the server to reestablish connection...\n\n\n\n");
|
|
76
|
+
header.css({
|
|
77
|
+
borderColor: "#ebcb8b"
|
|
78
|
+
});
|
|
79
|
+
$errors.show();
|
|
80
|
+
iframe.hide();
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
socket("/sockjs-node", onSocketMsg);
|
|
85
|
+
|
|
86
|
+
iframe.load(function() {
|
|
87
|
+
status.text("App ready.");
|
|
88
|
+
header.css({
|
|
89
|
+
borderColor: ""
|
|
90
|
+
});
|
|
91
|
+
iframe.show();
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
function reloadApp() {
|
|
95
|
+
if(hot) {
|
|
96
|
+
status.text("App hot update.");
|
|
97
|
+
try {
|
|
98
|
+
iframe[0].contentWindow.postMessage("webpackHotUpdate" + currentHash, "*");
|
|
99
|
+
} catch(e) {
|
|
100
|
+
console.warn(e);
|
|
101
|
+
}
|
|
102
|
+
iframe.show();
|
|
103
|
+
} else {
|
|
104
|
+
status.text("App updated. Reloading app...");
|
|
105
|
+
header.css({
|
|
106
|
+
borderColor: "#96b5b4"
|
|
107
|
+
});
|
|
108
|
+
try {
|
|
109
|
+
var old = iframe[0].contentWindow.location + "";
|
|
110
|
+
if(old.indexOf("about") == 0) old = null;
|
|
111
|
+
iframe.attr("src", old || (contentPage + window.location.hash));
|
|
112
|
+
old && iframe[0].contentWindow.location.reload();
|
|
113
|
+
} catch(e) {
|
|
114
|
+
iframe.attr("src", contentPage + window.location.hash);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
});
|
package/client/overlay.js
CHANGED
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
// The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
|
|
2
|
-
// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
|
|
3
|
-
var ansiHTML = require("ansi-html");
|
|
4
|
-
var Entities = require("html-entities").AllHtmlEntities;
|
|
5
|
-
var entities = new Entities();
|
|
6
|
-
|
|
7
|
-
var colors = {
|
|
8
|
-
reset: ["transparent", "transparent"],
|
|
9
|
-
black: "181818",
|
|
10
|
-
red: "E36049",
|
|
11
|
-
green: "B3CB74",
|
|
12
|
-
yellow: "FFD080",
|
|
13
|
-
blue: "7CAFC2",
|
|
14
|
-
magenta: "7FACCA",
|
|
15
|
-
cyan: "C3C2EF",
|
|
16
|
-
lightgrey: "EBE7E3",
|
|
17
|
-
darkgrey: "6D7891"
|
|
18
|
-
};
|
|
19
|
-
ansiHTML.setColors(colors);
|
|
20
|
-
|
|
21
|
-
function createOverlayIframe(onIframeLoad) {
|
|
22
|
-
var iframe = document.createElement("iframe");
|
|
23
|
-
iframe.id = "webpack-dev-server-client-overlay";
|
|
24
|
-
iframe.src = "about:blank";
|
|
25
|
-
iframe.style.position = "fixed";
|
|
26
|
-
iframe.style.left = 0;
|
|
27
|
-
iframe.style.top = 0;
|
|
28
|
-
iframe.style.right = 0;
|
|
29
|
-
iframe.style.bottom = 0;
|
|
30
|
-
iframe.style.width = "100vw";
|
|
31
|
-
iframe.style.height = "100vh";
|
|
32
|
-
iframe.style.border = "none";
|
|
33
|
-
iframe.style.zIndex = 9999999999;
|
|
34
|
-
iframe.onload = onIframeLoad;
|
|
35
|
-
return iframe;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
function addOverlayDivTo(iframe) {
|
|
39
|
-
var div = iframe.contentDocument.createElement("div");
|
|
40
|
-
div.id = "webpack-dev-server-client-overlay-div";
|
|
41
|
-
div.style.position = "fixed";
|
|
42
|
-
div.style.boxSizing = "border-box";
|
|
43
|
-
div.style.left = 0;
|
|
44
|
-
div.style.top = 0;
|
|
45
|
-
div.style.right = 0;
|
|
46
|
-
div.style.bottom = 0;
|
|
47
|
-
div.style.width = "100vw";
|
|
48
|
-
div.style.height = "100vh";
|
|
49
|
-
div.style.backgroundColor = "black";
|
|
50
|
-
div.style.color = "#E8E8E8";
|
|
51
|
-
div.style.fontFamily = "Menlo, Consolas, monospace";
|
|
52
|
-
div.style.fontSize = "large";
|
|
53
|
-
div.style.padding = "2rem";
|
|
54
|
-
div.style.lineHeight = "1.2";
|
|
55
|
-
div.style.whiteSpace = "pre-wrap";
|
|
56
|
-
div.style.overflow = "auto";
|
|
57
|
-
iframe.contentDocument.body.appendChild(div);
|
|
58
|
-
return div;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
var overlayIframe = null;
|
|
62
|
-
var overlayDiv = null;
|
|
63
|
-
var lastOnOverlayDivReady = null;
|
|
64
|
-
|
|
65
|
-
function ensureOverlayDivExists(onOverlayDivReady) {
|
|
66
|
-
if(overlayDiv) {
|
|
67
|
-
// Everything is ready, call the callback right away.
|
|
68
|
-
onOverlayDivReady(overlayDiv);
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// Creating an iframe may be asynchronous so we'll schedule the callback.
|
|
73
|
-
// In case of multiple calls, last callback wins.
|
|
74
|
-
lastOnOverlayDivReady = onOverlayDivReady;
|
|
75
|
-
|
|
76
|
-
if(overlayIframe) {
|
|
77
|
-
// We're already creating it.
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// Create iframe and, when it is ready, a div inside it.
|
|
82
|
-
overlayIframe = createOverlayIframe(function onIframeLoad() {
|
|
83
|
-
overlayDiv = addOverlayDivTo(overlayIframe);
|
|
84
|
-
// Now we can talk!
|
|
85
|
-
lastOnOverlayDivReady(overlayDiv);
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
// Zalgo alert: onIframeLoad() will be called either synchronously
|
|
89
|
-
// or asynchronously depending on the browser.
|
|
90
|
-
// We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
|
|
91
|
-
document.body.appendChild(overlayIframe);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function showMessageOverlay(message) {
|
|
95
|
-
ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
|
|
96
|
-
// Make it look similar to our terminal.
|
|
97
|
-
overlayDiv.innerHTML =
|
|
98
|
-
"<span style=\"color: #" +
|
|
99
|
-
colors.red +
|
|
100
|
-
"\">Failed to compile.</span><br><br>" +
|
|
101
|
-
ansiHTML(entities.encode(message));
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
function destroyErrorOverlay() {
|
|
106
|
-
if(!overlayDiv) {
|
|
107
|
-
// It is not there in the first place.
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
// Clean up and reset internal state.
|
|
112
|
-
document.body.removeChild(overlayIframe);
|
|
113
|
-
overlayDiv = null;
|
|
114
|
-
overlayIframe = null;
|
|
115
|
-
lastOnOverlayDivReady = null;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
// Successful compilation.
|
|
119
|
-
exports.clear = function handleSuccess() {
|
|
120
|
-
destroyErrorOverlay();
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// Compilation with errors (e.g. syntax error or missing modules).
|
|
124
|
-
exports.showMessage = function handleMessage(messages) {
|
|
125
|
-
showMessageOverlay(messages[0]);
|
|
126
|
-
}
|
|
1
|
+
// The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
|
|
2
|
+
// They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
|
|
3
|
+
var ansiHTML = require("ansi-html");
|
|
4
|
+
var Entities = require("html-entities").AllHtmlEntities;
|
|
5
|
+
var entities = new Entities();
|
|
6
|
+
|
|
7
|
+
var colors = {
|
|
8
|
+
reset: ["transparent", "transparent"],
|
|
9
|
+
black: "181818",
|
|
10
|
+
red: "E36049",
|
|
11
|
+
green: "B3CB74",
|
|
12
|
+
yellow: "FFD080",
|
|
13
|
+
blue: "7CAFC2",
|
|
14
|
+
magenta: "7FACCA",
|
|
15
|
+
cyan: "C3C2EF",
|
|
16
|
+
lightgrey: "EBE7E3",
|
|
17
|
+
darkgrey: "6D7891"
|
|
18
|
+
};
|
|
19
|
+
ansiHTML.setColors(colors);
|
|
20
|
+
|
|
21
|
+
function createOverlayIframe(onIframeLoad) {
|
|
22
|
+
var iframe = document.createElement("iframe");
|
|
23
|
+
iframe.id = "webpack-dev-server-client-overlay";
|
|
24
|
+
iframe.src = "about:blank";
|
|
25
|
+
iframe.style.position = "fixed";
|
|
26
|
+
iframe.style.left = 0;
|
|
27
|
+
iframe.style.top = 0;
|
|
28
|
+
iframe.style.right = 0;
|
|
29
|
+
iframe.style.bottom = 0;
|
|
30
|
+
iframe.style.width = "100vw";
|
|
31
|
+
iframe.style.height = "100vh";
|
|
32
|
+
iframe.style.border = "none";
|
|
33
|
+
iframe.style.zIndex = 9999999999;
|
|
34
|
+
iframe.onload = onIframeLoad;
|
|
35
|
+
return iframe;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function addOverlayDivTo(iframe) {
|
|
39
|
+
var div = iframe.contentDocument.createElement("div");
|
|
40
|
+
div.id = "webpack-dev-server-client-overlay-div";
|
|
41
|
+
div.style.position = "fixed";
|
|
42
|
+
div.style.boxSizing = "border-box";
|
|
43
|
+
div.style.left = 0;
|
|
44
|
+
div.style.top = 0;
|
|
45
|
+
div.style.right = 0;
|
|
46
|
+
div.style.bottom = 0;
|
|
47
|
+
div.style.width = "100vw";
|
|
48
|
+
div.style.height = "100vh";
|
|
49
|
+
div.style.backgroundColor = "black";
|
|
50
|
+
div.style.color = "#E8E8E8";
|
|
51
|
+
div.style.fontFamily = "Menlo, Consolas, monospace";
|
|
52
|
+
div.style.fontSize = "large";
|
|
53
|
+
div.style.padding = "2rem";
|
|
54
|
+
div.style.lineHeight = "1.2";
|
|
55
|
+
div.style.whiteSpace = "pre-wrap";
|
|
56
|
+
div.style.overflow = "auto";
|
|
57
|
+
iframe.contentDocument.body.appendChild(div);
|
|
58
|
+
return div;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
var overlayIframe = null;
|
|
62
|
+
var overlayDiv = null;
|
|
63
|
+
var lastOnOverlayDivReady = null;
|
|
64
|
+
|
|
65
|
+
function ensureOverlayDivExists(onOverlayDivReady) {
|
|
66
|
+
if(overlayDiv) {
|
|
67
|
+
// Everything is ready, call the callback right away.
|
|
68
|
+
onOverlayDivReady(overlayDiv);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Creating an iframe may be asynchronous so we'll schedule the callback.
|
|
73
|
+
// In case of multiple calls, last callback wins.
|
|
74
|
+
lastOnOverlayDivReady = onOverlayDivReady;
|
|
75
|
+
|
|
76
|
+
if(overlayIframe) {
|
|
77
|
+
// We're already creating it.
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// Create iframe and, when it is ready, a div inside it.
|
|
82
|
+
overlayIframe = createOverlayIframe(function onIframeLoad() {
|
|
83
|
+
overlayDiv = addOverlayDivTo(overlayIframe);
|
|
84
|
+
// Now we can talk!
|
|
85
|
+
lastOnOverlayDivReady(overlayDiv);
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
// Zalgo alert: onIframeLoad() will be called either synchronously
|
|
89
|
+
// or asynchronously depending on the browser.
|
|
90
|
+
// We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
|
|
91
|
+
document.body.appendChild(overlayIframe);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
function showMessageOverlay(message) {
|
|
95
|
+
ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
|
|
96
|
+
// Make it look similar to our terminal.
|
|
97
|
+
overlayDiv.innerHTML =
|
|
98
|
+
"<span style=\"color: #" +
|
|
99
|
+
colors.red +
|
|
100
|
+
"\">Failed to compile.</span><br><br>" +
|
|
101
|
+
ansiHTML(entities.encode(message));
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
function destroyErrorOverlay() {
|
|
106
|
+
if(!overlayDiv) {
|
|
107
|
+
// It is not there in the first place.
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Clean up and reset internal state.
|
|
112
|
+
document.body.removeChild(overlayIframe);
|
|
113
|
+
overlayDiv = null;
|
|
114
|
+
overlayIframe = null;
|
|
115
|
+
lastOnOverlayDivReady = null;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// Successful compilation.
|
|
119
|
+
exports.clear = function handleSuccess() {
|
|
120
|
+
destroyErrorOverlay();
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Compilation with errors (e.g. syntax error or missing modules).
|
|
124
|
+
exports.showMessage = function handleMessage(messages) {
|
|
125
|
+
showMessageOverlay(messages[0]);
|
|
126
|
+
}
|
package/client/page.pug
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
.header
|
|
2
|
-
span#okness
|
|
3
|
-
= " "
|
|
4
|
-
span#status
|
|
5
|
-
pre#errors
|
|
6
|
-
#warnings
|
|
7
|
-
iframe#iframe(src="javascript:;" allowfullscreen)
|
|
1
|
+
.header
|
|
2
|
+
span#okness
|
|
3
|
+
= " "
|
|
4
|
+
span#status
|
|
5
|
+
pre#errors
|
|
6
|
+
#warnings
|
|
7
|
+
iframe#iframe(src="javascript:;" allowfullscreen)
|
package/client/socket.js
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
var SockJS = require("sockjs-client");
|
|
2
|
-
|
|
3
|
-
var retries = 0;
|
|
4
|
-
var sock = null;
|
|
5
|
-
|
|
6
|
-
function socket(url, handlers) {
|
|
7
|
-
sock = new SockJS(url);
|
|
8
|
-
|
|
9
|
-
sock.onopen = function() {
|
|
10
|
-
retries = 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
sock.onclose = function() {
|
|
14
|
-
if(retries === 0)
|
|
15
|
-
handlers.close();
|
|
16
|
-
|
|
17
|
-
// Try to reconnect.
|
|
18
|
-
sock = null;
|
|
19
|
-
|
|
20
|
-
// After 10 retries stop trying, to prevent logspam.
|
|
21
|
-
if(retries <= 10) {
|
|
22
|
-
// Exponentially increase timeout to reconnect.
|
|
23
|
-
// Respectfully copied from the package `got`.
|
|
24
|
-
var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
|
|
25
|
-
retries += 1;
|
|
26
|
-
|
|
27
|
-
setTimeout(function() {
|
|
28
|
-
socket(url, handlers);
|
|
29
|
-
}, retryInMs);
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
sock.onmessage = function(e) {
|
|
34
|
-
// This assumes that all data sent via the websocket is JSON.
|
|
35
|
-
var msg = JSON.parse(e.data);
|
|
36
|
-
if(handlers[msg.type])
|
|
37
|
-
handlers[msg.type](msg.data);
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
module.exports = socket;
|
|
1
|
+
var SockJS = require("sockjs-client");
|
|
2
|
+
|
|
3
|
+
var retries = 0;
|
|
4
|
+
var sock = null;
|
|
5
|
+
|
|
6
|
+
function socket(url, handlers) {
|
|
7
|
+
sock = new SockJS(url);
|
|
8
|
+
|
|
9
|
+
sock.onopen = function() {
|
|
10
|
+
retries = 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
sock.onclose = function() {
|
|
14
|
+
if(retries === 0)
|
|
15
|
+
handlers.close();
|
|
16
|
+
|
|
17
|
+
// Try to reconnect.
|
|
18
|
+
sock = null;
|
|
19
|
+
|
|
20
|
+
// After 10 retries stop trying, to prevent logspam.
|
|
21
|
+
if(retries <= 10) {
|
|
22
|
+
// Exponentially increase timeout to reconnect.
|
|
23
|
+
// Respectfully copied from the package `got`.
|
|
24
|
+
var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
|
|
25
|
+
retries += 1;
|
|
26
|
+
|
|
27
|
+
setTimeout(function() {
|
|
28
|
+
socket(url, handlers);
|
|
29
|
+
}, retryInMs);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
sock.onmessage = function(e) {
|
|
34
|
+
// This assumes that all data sent via the websocket is JSON.
|
|
35
|
+
var msg = JSON.parse(e.data);
|
|
36
|
+
if(handlers[msg.type])
|
|
37
|
+
handlers[msg.type](msg.data);
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
module.exports = socket;
|