perf: optimize template literal printing in html mode

DylanPiercey · DylanPiercey · commit 3623b48dbc5b · 2024-08-29T10:58:09.000-07:00
diff --git a/.changeset/long-adults-knock.md b/.changeset/long-adults-knock.md
@@ -0,0 +1,7 @@
+---
+"@marko/translator-default": patch
+"@marko/compiler": patch
+"marko": patch
+---
+
+Optimize template literal printing in html output.
diff --git a/packages/translator-default/src/tag/attribute/directives/class.js b/packages/translator-default/src/tag/attribute/directives/class.js
@@ -19,7 +19,7 @@ export default {
       } else {
         value.parentPath.remove();
       }
-    } else {
+    } else if (!value.isTemplateLiteral()) {
       value.replaceWith(
         withPreviousLocation(
           t.callExpression(
diff --git a/packages/translator-default/src/tag/attribute/directives/style.js b/packages/translator-default/src/tag/attribute/directives/style.js
@@ -19,7 +19,7 @@ export default {
       } else {
         value.parentPath.remove();
       }
-    } else {
+    } else if (!value.isTemplateLiteral()) {
       value.replaceWith(
         withPreviousLocation(
           t.callExpression(
diff --git a/packages/translator-default/src/tag/native-tag[html]/attributes.js b/packages/translator-default/src/tag/native-tag[html]/attributes.js
@@ -1,6 +1,11 @@
-import { importDefault, normalizeTemplateString } from "@marko/babel-utils";
+import {
+  importDefault,
+  importNamed,
+  normalizeTemplateString,
+} from "@marko/babel-utils";
 import { types as t } from "@marko/compiler";
 import attrHelper from "marko/src/runtime/html/helpers/attr";
+import { d as escapeDoubleQuotes } from "marko/src/runtime/html/helpers/escape-quotes";
 
 import { evaluateAttr } from "../util";
 
@@ -94,6 +99,32 @@ export default function (path, attrs) {
       }
 
       curString += attrHelper(name, computed);
+    } else if (value.type === "TemplateLiteral") {
+      curString += " " + name + '="';
+
+      for (let i = 0; i < value.expressions.length; i++) {
+        const quasi = value.quasis[i];
+        const expression = value.expressions[i];
+        curString += escapeDoubleQuotes(quasi.value.cooked);
+        quasis.push(curString);
+        curString = "";
+        expressions.push(
+          t.callExpression(
+            importNamed(
+              file,
+              "marko/src/runtime/html/helpers/escape-quotes.js",
+              "d",
+              "marko_escape_double_quotes",
+            ),
+            [expression],
+          ),
+        );
+      }
+
+      curString +=
+        escapeDoubleQuotes(
+          value.quasis[value.expressions.length].value.cooked,
+        ) + '"';
     } else {
       quasis.push(curString);
       curString = "";
diff --git a/packages/translator-default/test/fixtures/attr-escape/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/attr-escape/snapshots/cjs-expected.js
@@ -5,14 +5,15 @@ exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
 var _classValue = _interopRequireDefault(require("marko/src/runtime/helpers/class-value.js"));
 var _attr = _interopRequireDefault(require("marko/src/runtime/html/helpers/attr.js"));
+var _escapeQuotes = require("marko/src/runtime/html/helpers/escape-quotes.js");
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const _marko_componentType = "packages/translator-default/test/fixtures/attr-escape/template.marko",
   _marko_template = (0, _index.t)(_marko_componentType);
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div${(0, _attr.default)("class", (0, _classValue.default)(input.className))}${(0, _attr.default)("foo", 'a' + input.foo + 'b')}${(0, _attr.default)("bar", `a ${input.foo} b`)}></div>`);
+  out.w(`<div${(0, _attr.default)("class", (0, _classValue.default)(input.className))}${(0, _attr.default)("foo", 'a' + input.foo + 'b')} bar="a ${(0, _escapeQuotes.d)(input.foo)} b"></div>`);
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/attr-escape/snapshots/html-expected.js b/packages/translator-default/test/fixtures/attr-escape/snapshots/html-expected.js
@@ -4,10 +4,11 @@ const _marko_componentType = "packages/translator-default/test/fixtures/attr-esc
 export default _marko_template;
 import _marko_class_merge from "marko/src/runtime/helpers/class-value.js";
 import _marko_attr from "marko/src/runtime/html/helpers/attr.js";
+import { d as _marko_escape_double_quotes } from "marko/src/runtime/html/helpers/escape-quotes.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div${_marko_attr("class", _marko_class_merge(input.className))}${_marko_attr("foo", 'a' + input.foo + 'b')}${_marko_attr("bar", `a ${input.foo} b`)}></div>`);
+  out.w(`<div${_marko_attr("class", _marko_class_merge(input.className))}${_marko_attr("foo", 'a' + input.foo + 'b')} bar="a ${_marko_escape_double_quotes(input.foo)} b"></div>`);
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/attr-escape/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/attr-escape/snapshots/htmlProduction-expected.js
@@ -4,10 +4,11 @@ const _marko_componentType = "WJodxLLd",
 export default _marko_template;
 import _marko_class_merge from "marko/dist/runtime/helpers/class-value.js";
 import _marko_attr from "marko/dist/runtime/html/helpers/attr.js";
+import { d as _marko_escape_double_quotes } from "marko/dist/runtime/html/helpers/escape-quotes.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div${_marko_attr("class", _marko_class_merge(input.className))}${_marko_attr("foo", 'a' + input.foo + 'b')}${_marko_attr("bar", `a ${input.foo} b`)}></div>`);
+  out.w(`<div${_marko_attr("class", _marko_class_merge(input.className))}${_marko_attr("foo", 'a' + input.foo + 'b')} bar="a ${_marko_escape_double_quotes(input.foo)} b"></div>`);
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/attr-template-literal-escape/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/attr-template-literal-escape/snapshots/cjs-expected.js
@@ -3,15 +3,15 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
-var _attr = _interopRequireDefault(require("marko/src/runtime/html/helpers/attr.js"));
+var _escapeQuotes = require("marko/src/runtime/html/helpers/escape-quotes.js");
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const _marko_componentType = "packages/translator-default/test/fixtures/attr-template-literal-escape/template.marko",
   _marko_template = (0, _index.t)(_marko_componentType);
 var _default = exports.default = _marko_template;
 const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div${(0, _attr.default)("foo", `Hello ${input.name}`)}></div>`);
+  out.w(`<div foo="Hello ${(0, _escapeQuotes.d)(input.name)}"></div>`);
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/attr-template-literal-escape/snapshots/html-expected.js b/packages/translator-default/test/fixtures/attr-template-literal-escape/snapshots/html-expected.js
@@ -2,11 +2,11 @@ import { t as _t } from "marko/src/runtime/html/index.js";
 const _marko_componentType = "packages/translator-default/test/fixtures/attr-template-literal-escape/template.marko",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_attr from "marko/src/runtime/html/helpers/attr.js";
+import { d as _marko_escape_double_quotes } from "marko/src/runtime/html/helpers/escape-quotes.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div${_marko_attr("foo", `Hello ${input.name}`)}></div>`);
+  out.w(`<div foo="Hello ${_marko_escape_double_quotes(input.name)}"></div>`);
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/attr-template-literal-escape/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/attr-template-literal-escape/snapshots/htmlProduction-expected.js
@@ -2,11 +2,11 @@ import { t as _t } from "marko/dist/runtime/html/index.js";
 const _marko_componentType = "jF_vuKKj",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
-import _marko_attr from "marko/dist/runtime/html/helpers/attr.js";
+import { d as _marko_escape_double_quotes } from "marko/dist/runtime/html/helpers/escape-quotes.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div${_marko_attr("foo", `Hello ${input.name}`)}></div>`);
+  out.w(`<div foo="Hello ${_marko_escape_double_quotes(input.name)}"></div>`);
 }, {
   t: _marko_componentType,
   i: true
diff --git a/packages/translator-default/test/fixtures/shorthand-id/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/shorthand-id/snapshots/cjs-expected.js
@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _index = require("marko/src/runtime/html/index.js");
 var _attr = _interopRequireDefault(require("marko/src/runtime/html/helpers/attr.js"));
+var _escapeQuotes = require("marko/src/runtime/html/helpers/escape-quotes.js");
 var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const _marko_componentType = "packages/translator-default/test/fixtures/shorthand-id/template.marko",
@@ -13,7 +14,7 @@ const _marko_component = {};
 _marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
   out.w("<div id=shorthand></div>");
   out.w(`<div${(0, _attr.default)("id", dynamic)}></div>`);
-  out.w(`<div${(0, _attr.default)("id", `partial-${dynamic}`)}></div>`);
+  out.w(`<div id="partial-${(0, _escapeQuotes.d)(dynamic)}"></div>`);
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/shorthand-id/snapshots/html-expected.js b/packages/translator-default/test/fixtures/shorthand-id/snapshots/html-expected.js
@@ -3,12 +3,13 @@ const _marko_componentType = "packages/translator-default/test/fixtures/shorthan
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import _marko_attr from "marko/src/runtime/html/helpers/attr.js";
+import { d as _marko_escape_double_quotes } from "marko/src/runtime/html/helpers/escape-quotes.js";
 import _marko_renderer from "marko/src/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
   out.w("<div id=shorthand></div>");
   out.w(`<div${_marko_attr("id", dynamic)}></div>`);
-  out.w(`<div${_marko_attr("id", `partial-${dynamic}`)}></div>`);
+  out.w(`<div id="partial-${_marko_escape_double_quotes(dynamic)}"></div>`);
 }, {
   t: _marko_componentType,
   i: true,
diff --git a/packages/translator-default/test/fixtures/shorthand-id/snapshots/htmlProduction-expected.js b/packages/translator-default/test/fixtures/shorthand-id/snapshots/htmlProduction-expected.js
@@ -3,10 +3,11 @@ const _marko_componentType = "dFcmvNXj",
   _marko_template = _t(_marko_componentType);
 export default _marko_template;
 import _marko_attr from "marko/dist/runtime/html/helpers/attr.js";
+import { d as _marko_escape_double_quotes } from "marko/dist/runtime/html/helpers/escape-quotes.js";
 import _marko_renderer from "marko/dist/runtime/components/renderer.js";
 const _marko_component = {};
 _marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
-  out.w(`<div id=shorthand></div><div${_marko_attr("id", dynamic)}></div><div${_marko_attr("id", `partial-${dynamic}`)}></div>`);
+  out.w(`<div id=shorthand></div><div${_marko_attr("id", dynamic)}></div><div id="partial-${_marko_escape_double_quotes(dynamic)}"></div>`);
 }, {
   t: _marko_componentType,
   i: true

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export default {`
`19`	`19`	`} else {`
`20`	`20`	`value.parentPath.remove();`
`21`	`21`	`}`
`22`		`- } else {`
	`22`	`+ } else if (!value.isTemplateLiteral()) {`
`23`	`23`	`value.replaceWith(`
`24`	`24`	`withPreviousLocation(`
`25`	`25`	`t.callExpression(`