perf: minify runtime comments, remove unnecessary attr quotes (#1557)

Author: DylanPiercey

packages/marko/src/runtime/components/beginComponent.js

@@ -65,18 +65,18 @@ module.exports = function beginComponent(
 
   if ((ownerIsRenderBoundary || ownerWillRerender) && key != null) {
     out.w(
-      "<!--" +
+      "<!" +
         runtimeId +
         "^" +
         componentId +
         " " +
         ownerComponentDef.id +
         " " +
         key +
-        "-->"
+        ">"
     );
   } else {
-    out.w("<!--" + runtimeId + "#" + componentId + "-->");
+    out.w("<!" + runtimeId + "#" + componentId + ">");
   }
 
   return componentDef;

packages/marko/src/runtime/components/endComponent.js

@@ -5,7 +5,7 @@ var getComponentsContext = ComponentsContext.___getComponentsContext;
 
 module.exports = function endComponent(out, componentDef) {
   if (componentDef.___renderBoundary) {
-    out.w("<!--" + out.global.runtimeId + "/-->");
+    out.w("<!" + out.global.runtimeId + "/>");
     getComponentsContext(out).___isPreserved = componentDef.___parentPreserved;
   }
 };

packages/marko/src/runtime/html/AsyncStream.js

@@ -573,7 +573,7 @@ var proto = (AsyncStream.prototype = {
 
   ___beginFragment: function(key, component, preserve) {
     if (preserve) {
-      this.write("<!--F#" + escapeXmlString(key) + "-->");
+      this.write("<!F#" + escapeXmlString(key) + ">");
     }
     if (this._elStack) {
       this._elStack.push(preserve);
@@ -585,7 +585,7 @@ var proto = (AsyncStream.prototype = {
   ___endFragment: function() {
     var preserve = this._elStack.pop();
     if (preserve) {
-      this.write("<!--F/-->");
+      this.write("<!F/>");
     }
   },
 

packages/marko/src/runtime/html/helpers/attr.js

@@ -38,9 +38,9 @@ function notEmptyAttr(name, value) {
             );
           }
 
-          return " " + name + singleQuote(JSON.stringify(value));
+          return " " + name + singleQuote(JSON.stringify(value), 2);
         case RegExp.prototype.toString:
-          return " " + name + doubleQuote(value.source);
+          return " " + name + guessQuotes(value.source);
       }
   }
 
@@ -51,23 +51,29 @@ function isEmpty(value) {
   return value == null || value === false;
 }
 
-function doubleQuote(value) {
-  return '="' + escapeDoubleQuotes(value) + '"';
+function doubleQuote(value, startPos) {
+  return '="' + escapeDoubleQuotes(value, startPos) + '"';
 }
 
-function singleQuote(value) {
-  return "='" + escapeSingleQuotes(value) + "'";
+function singleQuote(value, startPos) {
+  return "='" + escapeSingleQuotes(value, startPos) + "'";
 }
 
 function guessQuotes(value) {
-  if (value.length) {
-    if (value[0] === "{") {
-      // Assume json.
-      return singleQuote(value);
+  for (var i = 0, len = value.length; i < len; i++) {
+    switch (value[i]) {
+      case '"':
+        return singleQuote(value, i + 1);
+      case "'":
+      case ">":
+      case " ":
+      case "\t":
+      case "\n":
+      case "\r":
+      case "\f":
+        return doubleQuote(value, i + 1);
     }
-
-    return doubleQuote(value);
   }
 
-  return "";
+  return value && "=" + value;
 }

packages/marko/src/runtime/html/helpers/escape-quotes.js

@@ -1,26 +1,26 @@
 "use strict";
 
 exports.d = function(value) {
-  return escapeDoubleQuotes(value + "");
+  return escapeDoubleQuotes(value + "", 0);
 };
 
 exports.___escapeDoubleQuotes = escapeDoubleQuotes;
 
 exports.___escapeSingleQuotes = escapeSingleQuotes;
 
-function escapeSingleQuotes(value) {
-  return escapeQuote(value, "'", "'");
+function escapeSingleQuotes(value, startPos) {
+  return escapeQuote(value, startPos, "'", "'");
 }
 
-function escapeDoubleQuotes(value) {
-  return escapeQuote(value, '"', """);
+function escapeDoubleQuotes(value, startPos) {
+  return escapeQuote(value, startPos, '"', """);
 }
 
-function escapeQuote(str, quote, escaped) {
+function escapeQuote(str, startPos, quote, escaped) {
   var result = "";
   var lastPos = 0;
 
-  for (var i = 0, len = str.length; i < len; i++) {
+  for (var i = startPos, len = str.length; i < len; i++) {
     if (str[i] === quote) {
       result += str.slice(lastPos, i) + escaped;
       lastPos = i + 1;

packages/marko/test/codegen/fixtures/code-before-after-if/expected.js

@@ -1,7 +1,7 @@
 if (a > b) {
   before();
 
-  out.w("<div class=\"greeting\">Hello World</div>");
+  out.w("<div class=greeting>Hello World</div>");
 
   after();
 }

packages/marko/test/codegen/fixtures/code-before-after/expected.js

@@ -1,5 +1,5 @@
 before();
 
-out.w("<div class=\"greeting\">Hello World</div>");
+out.w("<div class=greeting>Hello World</div>");
 
 after();

packages/marko/test/codegen/fixtures/container-codegen/expected.js

@@ -1 +1 @@
-out.w("<div class=\"greeting\">Hello World</div>")
+out.w("<div class=greeting>Hello World</div>")

packages/marko/test/codegen/fixtures/container/expected.js

@@ -1 +1 @@
-out.w("<div class=\"greeting\">Hello World</div>")
+out.w("<div class=greeting>Hello World</div>")

packages/marko/test/codegen/fixtures/htmlElement-attr-escape/expected.js

@@ -1,3 +1,3 @@
-out.w("<div class=\"greeting\"" +
+out.w("<div class=greeting" +
   marko_attr("foo", bar) +
   ">Hello World</div>")