middleware.js
3.18 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
module.exports = webpackHotMiddleware;
var helpers = require('./helpers');
var pathMatch = helpers.pathMatch;
function webpackHotMiddleware(compiler, opts) {
opts = opts || {};
opts.log = typeof opts.log == 'undefined' ? console.log.bind(console) : opts.log;
opts.path = opts.path || '/__webpack_hmr';
opts.heartbeat = opts.heartbeat || 10 * 1000;
var eventStream = createEventStream(opts.heartbeat);
var latestStats = null;
compiler.plugin("compile", function() {
latestStats = null;
if (opts.log) opts.log("webpack building...");
eventStream.publish({action: "building"});
});
compiler.plugin("done", function(statsResult) {
// Keep hold of latest stats so they can be propagated to new clients
latestStats = statsResult;
publishStats("built", latestStats, eventStream, opts.log);
});
var middleware = function(req, res, next) {
if (!pathMatch(req.url, opts.path)) return next();
eventStream.handler(req, res);
if (latestStats) {
// Explicitly not passing in `log` fn as we don't want to log again on
// the server
publishStats("sync", latestStats, eventStream);
}
};
middleware.publish = eventStream.publish;
return middleware;
}
function createEventStream(heartbeat) {
var clientId = 0;
var clients = {};
function everyClient(fn) {
Object.keys(clients).forEach(function(id) {
fn(clients[id]);
});
}
setInterval(function heartbeatTick() {
everyClient(function(client) {
client.write("data: \uD83D\uDC93\n\n");
});
}, heartbeat).unref();
return {
handler: function(req, res) {
req.socket.setKeepAlive(true);
res.writeHead(200, {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/event-stream;charset=utf-8',
'Cache-Control': 'no-cache, no-transform',
'Connection': 'keep-alive'
});
res.write('\n');
var id = clientId++;
clients[id] = res;
req.on("close", function(){
delete clients[id];
});
},
publish: function(payload) {
everyClient(function(client) {
client.write("data: " + JSON.stringify(payload) + "\n\n");
});
}
};
}
function publishStats(action, statsResult, eventStream, log) {
// For multi-compiler, stats will be an object with a 'children' array of stats
var bundles = extractBundles(statsResult.toJson({ errorDetails: false }));
bundles.forEach(function(stats) {
if (log) {
log("webpack built " + (stats.name ? stats.name + " " : "") +
stats.hash + " in " + stats.time + "ms");
}
eventStream.publish({
name: stats.name,
action: action,
time: stats.time,
hash: stats.hash,
warnings: stats.warnings || [],
errors: stats.errors || [],
modules: buildModuleMap(stats.modules)
});
});
}
function extractBundles(stats) {
// Stats has modules, single bundle
if (stats.modules) return [stats];
// Stats has children, multiple bundles
if (stats.children && stats.children.length) return stats.children;
// Not sure, assume single
return [stats];
}
function buildModuleMap(modules) {
var map = {};
modules.forEach(function(module) {
map[module.id] = module.name;
});
return map;
}