/
index.js
124 lines (114 loc) · 3.03 KB
/
index.js
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
120
121
122
123
124
'use strict';
/* eslint import/no-extraneous-dependencies: off, global-require: off */
const $ = require('jquery');
const stripAnsi = require('strip-ansi');
const socket = require('../default/socket');
require('./style.css');
let hot = false;
let currentHash = '';
$(() => {
$('body').html(require('./page.pug')());
const status = $('#status');
const okness = $('#okness');
const $errors = $('#errors');
const iframe = $('#iframe');
const header = $('.header');
const 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'
});
const onSocketMsg = {
hot() {
hot = true;
iframe.attr('src', contentPage + window.location.hash);
},
invalid() {
okness.text('');
status.text('App updated. Recompiling...');
header.css({
borderColor: '#96b5b4'
});
$errors.hide();
if (!hot) iframe.hide();
},
hash(hash) {
currentHash = hash;
},
'still-ok': function stillOk() {
okness.text('');
status.text('App ready.');
header.css({
borderColor: ''
});
$errors.hide();
if (!hot) iframe.show();
},
ok() {
okness.text('');
$errors.hide();
reloadApp();
},
warnings() {
okness.text('Warnings while compiling.');
$errors.hide();
reloadApp();
},
errors: function msgErrors(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() {
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.on('load', () => {
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); // eslint-disable-line
}
iframe.show();
} else {
status.text('App updated. Reloading app...');
header.css({
borderColor: '#96b5b4'
});
try {
let old = `${iframe[0].contentWindow.location}`;
if (old.indexOf('about') === 0) old = null;
iframe.attr('src', old || (contentPage + window.location.hash));
if (old) {
iframe[0].contentWindow.location.reload();
}
} catch (e) {
iframe.attr('src', contentPage + window.location.hash);
}
}
}
});