Fix multiple <svg> and missing content issue (#2722)

live-server injects code into every <svg> occurrence but only
increases the Content-Length value once. This commit fixes this
issue by counting the number of <svg> and increasing the
Content-Length accordingly, ensuring that all content is properly
sent.

Author: AgentHagu

packages/cli/src/lib/live-server/index.js

@@ -68,8 +68,9 @@ function staticServer(root) {
     if (req.method !== 'GET' && req.method !== 'HEAD') return next();
     const reqpath = isFile ? "" : parse(req.url).pathname;
     var hasNoOrigin = !req.headers.origin;
-    var injectCandidates = [ new RegExp("</body>", "i"), new RegExp("</svg>"), new RegExp("</head>", "i")];
+    var injectCandidates = [ new RegExp("</body>", "i"), new RegExp("</svg>", "gi"), new RegExp("</head>", "i")];
     var injectTag = null;
+    var injectCount = 0;
 
     function directory() {
       var pathname = parse(req.url).pathname;
@@ -79,15 +80,16 @@ function staticServer(root) {
     }
 
     function file(filepath /*, stat*/) {
-      var x = path.extname(filepath).toLocaleLowerCase(), match,
+      var x = path.extname(filepath).toLocaleLowerCase(), matches,
         possibleExtensions = [ "", ".html", ".htm", ".xhtml", ".php", ".svg" ];
       if (hasNoOrigin && (possibleExtensions.indexOf(x) > -1)) {
         // 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);
-          if (match) {
-            injectTag = match[0];
+          matches = contents.match(injectCandidates[i]);
+          injectCount = matches && matches.length || 0;
+          if (injectCount > 0) {
+            injectTag = matches[0];
             break;
           }
         }
@@ -107,7 +109,8 @@ function staticServer(root) {
     function inject(stream) {
       if (injectTag) {
         // We need to modify the length given to browser
-        var len = INJECTED_CODE.length + res.getHeader('Content-Length');
+        var contentLength = Number(res.getHeader('Content-Length')) || 0;
+        var len = INJECTED_CODE.length * injectCount + contentLength;
         res.setHeader('Content-Length', len);
         var originalPipe = stream.pipe;
         stream.pipe = function(resp) {