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

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>")

packages/marko/test/codegen/fixtures/htmlElement-dynamic/expected.js

@@ -2,6 +2,6 @@ var tagName = data.tagName;
 
 out.w("<" +
   tagName +
-  " class=\"greeting\">Hello World</" +
+  " class=greeting>Hello World</" +
   tagName +
   ">");

packages/marko/test/codegen/fixtures/htmlElement/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/insertSiblingAfter/expected.js

@@ -1,5 +1,5 @@
 if (true) {
-  out.w("<div class=\"greeting\"><span class=\"foo\"></span>");
+  out.w("<div class=greeting><span class=foo></span>");
 
   var newVar = "Hello World";
 

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

@@ -1,7 +1,7 @@
 if (true) {
-  out.w("<div class=\"greeting\">");
+  out.w("<div class=greeting>");
 
   var newVar = "Hello World";
 
-  out.w("<span class=\"foo\"></span>Hello World</div>");
+  out.w("<span class=foo></span>Hello World</div>");
 }

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

@@ -12,10 +12,10 @@ function render(input, out) {
     "!");
 
   if (notEmpty(data.colors)) {
-    out.w("<ul class=\"colors\">");
+    out.w("<ul class=colors>");
 
     forEach(data.colors, function(color) {
-      out.w("<li class=\"color\">" +
+      out.w("<li class=color>" +
         marko_escapeXml(color) +
         "</li>");
     });

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

@@ -7,7 +7,7 @@ function render(input, out) {
 
   var foo = "bar";
 
-  out.w("<div class=\"foo\"><span class=\"bar\"></span></div>");
+  out.w("<div class=foo><span class=bar></span></div>");
 }
 
 marko_template._ = render;

packages/marko/test/compiler/fixtures-html/keep-last-duplicated-attr/expected.js

@@ -16,7 +16,7 @@ function render(input, out, __component, component, state) {
       b: "2"
     }, out, __component, "0");
 
-  out.w("<input a=\"3\" b=\"2\">");
+  out.w("<input a=3 b=2>");
 }
 
 marko_template._ = marko_renderer(render, {

packages/marko/test/compiler/fixtures-html/replaceWith/expected.js

@@ -7,7 +7,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div replaced=\"test-replaceWith\"></div>");
+  out.w("<div replaced=test-replaceWith></div>");
 }
 
 marko_template._ = marko_renderer(render, {

packages/marko/test/compiler/fixtures-html/style-empty/expected.js

@@ -7,7 +7,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div class=\"test\"></div>");
+  out.w("<div class=test></div>");
 }
 
 marko_template._ = marko_renderer(render, {

packages/marko/test/components-compilation/fixtures-html-deprecated/bind-component/expected.js

@@ -12,7 +12,7 @@ function render(input, out, __component, widget, component) {
 
   out.w("<div" +
     marko_dataMarko(null, "@_wbind", __component) +
-    " data-widget=\"/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/bind-component/index\"" +
+    " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/bind-component/index" +
     marko_attr("id", __component.elId()) +
     "></div>");
 }

packages/marko/test/components-compilation/fixtures-html-deprecated/bind-widget/expected.js

@@ -11,7 +11,7 @@ function render(input, out, __component, widget, component) {
 
   out.w("<div" +
     marko_dataMarko(null, "@_wbind", __component) +
-    " data-widget=\"/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/bind-widget/widget\"" +
+    " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/bind-widget/widget" +
     marko_attr("id", __component.elId()) +
     "></div>");
 }

packages/marko/test/components-compilation/fixtures-html-deprecated/component-include-attr/expected.js

@@ -15,7 +15,7 @@ function render(input, out, __component, widget, component) {
 
   out.w("<div" +
     marko_dataMarko(null, "@_wbind", __component) +
-    " data-widget=\"/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/component-include-attr/index\"" +
+    " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/component-include-attr/index" +
     marko_attr("id", __component.elId()) +
     "><h1>Header</h1><div>");
 

packages/marko/test/components-compilation/fixtures-html-deprecated/component-template-entry/expected.js

@@ -11,7 +11,7 @@ function render(input, out, __component, widget, component) {
 
   out.w("<div" +
     marko_dataMarko(null, "@_wbind", __component) +
-    " data-widget=\"/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/component-template-entry/component\"" +
+    " data-widget=/marko-test$1.0.0/components-compilation/fixtures-html-deprecated/component-template-entry/component" +
     marko_attr("id", __component.elId()) +
     "></div>");
 }

packages/marko/test/components-compilation/fixtures-html-deprecated/key-colon-attr/expected.js

@@ -11,7 +11,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div class=\"root\"><label :scoped=\"name\">Name</label><input" +
+  out.w("<div class=root><label :scoped=name>Name</label><input" +
     marko_attr("id", __component.elId("name")) +
     "></div>");
 }

packages/marko/test/components-compilation/fixtures-html-deprecated/key-suffix/expected.js

@@ -11,7 +11,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div class=\"root\"><label" +
+  out.w("<div class=root><label" +
     marko_attr("for", __component.elId("name")) +
     ">Name</label><input" +
     marko_attr("id", __component.elId("name")) +

packages/marko/test/components-compilation/fixtures-html/boundary-multi-root-html-el-id-custom-tag-key/expected.js

@@ -12,7 +12,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<h1 id=\"myStart\"></h1>");
+  out.w("<h1 id=myStart></h1>");
 
   my_component_tag({}, out, __component, "myEnd");
 }

packages/marko/test/components-compilation/fixtures-html/boundary-multi-root-html-els-ids-static/expected.js

@@ -8,7 +8,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<h1 id=\"myStart\"></h1><div id=\"myEnd\"></div>");
+  out.w("<h1 id=myStart></h1><div id=myEnd></div>");
 }
 
 marko_template._ = marko_renderer(render, {

packages/marko/test/components-compilation/fixtures-html/boundary-single-root-html-el-static-id/expected.js

@@ -8,7 +8,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div id=\"foo\"></div>");
+  out.w("<div id=foo></div>");
 }
 
 marko_template._ = marko_renderer(render, {

packages/marko/test/components-compilation/fixtures-html/class-method-empty-return/expected.js

@@ -12,7 +12,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div class=\"test\"></div>");
+  out.w("<div class=test></div>");
 }
 
 marko_template._ = marko_renderer(render, {

packages/marko/test/components-compilation/fixtures-html/key/expected.js

@@ -14,11 +14,11 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div class=\"root\">");
+  out.w("<div class=root>");
 
   app_foo_tag({}, out, __component, "foo");
 
-  out.w("<a href=\"ebay.com\">eBay</a></div>");
+  out.w("<a href=ebay.com>eBay</a></div>");
 }
 
 marko_template._ = marko_renderer(render, {

packages/marko/test/components-compilation/fixtures-html/scoped-suffix/expected.js

@@ -11,7 +11,7 @@ var marko_template = module.exports = require("marko/src/html").t(__filename),
 function render(input, out, __component, component, state) {
   var data = input;
 
-  out.w("<div class=\"root\"><label" +
+  out.w("<div class=root><label" +
     marko_attr("for", __component.elId("name")) +
     ">Name</label><input" +
     marko_attr("id", __component.elId("name")) +

packages/marko/test/hot-reload/fixtures/component-to-template/initial-expected.html

@@ -1 +1 @@
-<!--M#s0--><div class="a">Hello Frank</div><!--M/-->
+<!M#s0><div class=a>Hello Frank</div><!M/>

packages/marko/test/hot-reload/fixtures/component-to-template/reloaded-expected.html

@@ -1 +1 @@
-<div class="b">Hello Jane</div>
+<div class=b>Hello Jane</div>

packages/marko/test/hot-reload/fixtures/template-export-component/initial-expected.html

@@ -1 +1 @@
-<!--M#s0--><div class="a">Hello Frank</div><!--M/-->
+<!M#s0><div class=a>Hello Frank</div><!M/>

packages/marko/test/hot-reload/fixtures/template-export-component/reloaded-expected.html

@@ -1 +1 @@
-<!--M#s0--><div class="b">Hello Frank</div><!--M/-->
+<!M#s0><div class=b>Hello Frank</div><!M/>

packages/marko/test/hot-reload/fixtures/template-to-component/initial-expected.html

@@ -1 +1 @@
-<div class="a">Hello Frank</div>
+<div class=a>Hello Frank</div>

packages/marko/test/hot-reload/fixtures/template-to-component/reloaded-expected.html

@@ -1 +1 @@
-<!--M#s0--><div class="b">Hello Jane</div><!--M/-->
+<!M#s0><div class=b>Hello Jane</div><!M/>

packages/marko/test/render/fixtures-async-deprecated/components-await-beginAsync/expected.html

@@ -1 +1 @@
-<html><body><!--FLUSH--><div class="inner"><div class="inner-inner"><!--M#s0-7--><div>Hello inner-inner</div><!--M/--></div><!--M#s0-8--><div>Hello inner</div><!--M/--></div><!--M#s0-9--><div>Hello outer</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner"},{"f":1}],["s0-7",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-beginAsync/components/hello/index.marko"]})</script></body></html>
+<html><body><!--FLUSH--><div class=inner><div class=inner-inner><!M#s0-7><div>Hello inner-inner</div><!M/></div><!M#s0-8><div>Hello inner</div><!M/></div><!M#s0-9><div>Hello outer</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-8",0,{"name":"inner"},{"f":1}],["s0-7",0,{"name":"inner-inner"},{"f":1}],["s0-9",0,{"name":"outer"},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-beginAsync/components/hello/index.marko"]})</script></body></html>

packages/marko/test/render/fixtures-async-deprecated/components-await-title/expected.html

@@ -1 +1 @@
-<html><head><title><!--FLUSH-->Welcome Frank</title></head><body><!--M#s0-0-5-5--><div>Hello</div><!--M/--><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-0-5-5",0,{},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-title/components/hello/index.marko"]})</script></body></html>
+<html><head><title><!--FLUSH-->Welcome Frank</title></head><body><!M#s0-0-5-5><div>Hello</div><!M/><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-0-5-5",0,{},{"f":1}]],"t":["/marko-test$1.0.0/render/fixtures-async-deprecated/components-await-title/components/hello/index.marko"]})</script></body></html>