fix: keep live-reload injection out of HTML comments

The live-server injector picked the first `</body>` in the raw file text
without checking whether it appeared inside an HTML comment. When a page
contained something like `<!-- </body> -->`, the injected code was inserted
inside the comment, splitting it open and leaking a stray `-->` onto the
rendered page.

Instead of anchoring on the first literal match, skip tags that lie inside a
comment (<!-- ... -->) and inject at the first occurrence outside one. The
in-JS injection also replaces the global es.replace so a tag that only exists
inside a comment is no longer rewritten.

Author: YuYongzhi

lib/live-server/index.js

@@ -17,7 +17,6 @@ var fs = require('fs'),
 	http = require('http'),
 	send = require('send'),
 	open = require('opn'),
-	es = require("event-stream"),
 	os = require('os'),
 	chokidar = require('chokidar'),
 	httpProxy = require('http-proxy');
@@ -49,6 +48,43 @@ function escape(html) {
 		.replace(/"/g, '"');
 }
 
+/**
+ * Find the first match of `regex` in `contents` that is NOT inside an HTML
+ * comment (`<!-- ... -->`).
+ *
+ * This prevents the live-reload injection from anchoring on a tag that only
+ * appears inside a comment, e.g. `<!-- </body> -->`. Previously the first
+ * `</body>` in the raw text was picked regardless of whether it was inside a
+ * comment, which split the comment open and leaked a stray `/>` / `-->` onto
+ * the rendered page.
+ */
+function findInjectCandidate(contents, regex) {
+	var commentRe = /<!--[\s\S]*?-->/g,
+		comments = [],
+		match,
+		re = new RegExp(regex.source, "ig");
+
+	while ((match = commentRe.exec(contents)) !== null) {
+		comments.push(match.index);
+		comments.push(match.index + match[0].length);
+	}
+	while ((match = re.exec(contents)) !== null) {
+		if (!isInsideAnyComment(comments, match.index)) {
+			return match;
+		}
+	}
+	return null;
+}
+
+function isInsideAnyComment(commentBounds, index) {
+	for (var i = 0; i < commentBounds.length; i += 2) {
+		if (index >= commentBounds[i] && index < commentBounds[i + 1]) {
+			return true;
+		}
+	}
+	return false;
+}
+
 // Based on connect.static(), but streamlined and with added code injecter
 function staticServer(root, onTagMissedCallback) {
 	var isFile = false;
@@ -72,7 +108,9 @@ function staticServer(root, onTagMissedCallback) {
 		// 	injectCandidates.push(new RegExp(`</${item}>`, "i"))
 		// });
 
-		var injectTag = null;
+		var injectTag = null,
+			injectIndex = -1,
+			injectedContents = null;
 
 		function directory() {
 			var pathname = url.parse(req.originalUrl).pathname;
@@ -89,9 +127,11 @@ function staticServer(root, onTagMissedCallback) {
 				// TODO: Sync file read here is not nice, but we need to determine if the html should be injected or not
 				var contents = fs.readFileSync(filepath, "utf8");
 				for (var i = 0; i < injectCandidates.length; ++i) {
-					match = injectCandidates[i].exec(contents);
+					match = findInjectCandidate(contents, injectCandidates[i]);
 					if (match) {
 						injectTag = match[0];
+						injectIndex = match.index;
+						injectedContents = contents.slice(0, injectIndex) + GET_INJECTED_CODE() + contents.slice(injectIndex);
 						break;
 					}
 				}
@@ -113,15 +153,15 @@ function staticServer(root, onTagMissedCallback) {
 		}
 
 		function inject(stream) {
-			if (injectTag) {
-				// We need to modify the length given to browser
-				var len = GET_INJECTED_CODE().length + res.getHeader('Content-Length');
-				res.setHeader('Content-Length', len);
-				var originalPipe = stream.pipe;
-				stream.pipe = function (resp) {
-					originalPipe.call(stream, es.replace(new RegExp(injectTag, "i"), GET_INJECTED_CODE() + injectTag))
-					.pipe(resp);
-				};
+			if (injectedContents) {
+				// We already have the fully injected document in memory, so serve it
+				// directly instead of the raw streamed bytes. This also avoids the
+				// global regex replace that used to rewrite `</body>` even inside
+				// HTML comments, which split the comment and leaked a stray `-->`.
+				res.setHeader('Content-Length', Buffer.byteLength(injectedContents, 'utf8'));
+				stream.unpipe(res);
+				stream.resume();
+				res.end(injectedContents);
 			}
 		}