Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Apr 21, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/marko/src/runtime/components/beginComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/marko/src/runtime/components/endComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
};
4 changes: 2 additions & 2 deletions packages/marko/src/runtime/html/AsyncStream.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -585,7 +585,7 @@ var proto = (AsyncStream.prototype = {
___endFragment: function() {
var preserve = this._elStack.pop();
if (preserve) {
this.write("<!--F/-->");
this.write("<!F/>");
}
},

Expand Down
32 changes: 19 additions & 13 deletions packages/marko/src/runtime/html/helpers/attr.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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;
}
14 changes: 7 additions & 7 deletions packages/marko/src/runtime/html/helpers/escape-quotes.js
Original file line number Diff line number Diff line change
@@ -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, "'", "&#39;");
function escapeSingleQuotes(value, startPos) {
return escapeQuote(value, startPos, "'", "&#39;");
}

function escapeDoubleQuotes(value) {
return escapeQuote(value, '"', "&#34;");
function escapeDoubleQuotes(value, startPos) {
return escapeQuote(value, startPos, '"', "&#34;");
}

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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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();
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
before();

out.w("<div class=\"greeting\">Hello World</div>");
out.w("<div class=greeting>Hello World</div>");

after();
Original file line number Diff line number Diff line change
@@ -1 +1 @@
out.w("<div class=\"greeting\">Hello World</div>")
out.w("<div class=greeting>Hello World</div>")
2 changes: 1 addition & 1 deletion packages/marko/test/codegen/fixtures/container/expected.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
out.w("<div class=\"greeting\">Hello World</div>")
out.w("<div class=greeting>Hello World</div>")
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
out.w("<div class=\"greeting\"" +
out.w("<div class=greeting" +
marko_attr("foo", bar) +
">Hello World</div>")
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ var tagName = data.tagName;

out.w("<" +
tagName +
" class=\"greeting\">Hello World</" +
" class=greeting>Hello World</" +
tagName +
">");
Original file line number Diff line number Diff line change
@@ -1 +1 @@
out.w("<div class=\"greeting\">Hello World</div>")
out.w("<div class=greeting>Hello World</div>")
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
Original file line number Diff line number Diff line change
@@ -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>");
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>");
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>");

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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")) +
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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")) +
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!--M#s0--><div class="a">Hello Frank</div><!--M/-->
<!M#s0><div class=a>Hello Frank</div><!M/>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="b">Hello Jane</div>
<div class=b>Hello Jane</div>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!--M#s0--><div class="a">Hello Frank</div><!--M/-->
<!M#s0><div class=a>Hello Frank</div><!M/>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!--M#s0--><div class="b">Hello Frank</div><!--M/-->
<!M#s0><div class=b>Hello Frank</div><!M/>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="a">Hello Frank</div>
<div class=a>Hello Frank</div>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!--M#s0--><div class="b">Hello Jane</div><!--M/-->
<!M#s0><div class=b>Hello Jane</div><!M/>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Loading