Build Step: Transform Tagged Template Literals into Simple Code

[jridgewell]

Post #14623, we'll have a lot of code using the html`<div />` Tagged Template Literal.

But, the output of TTLs is very large:

// input
function test() {
  const div = html`
      <div>
        <p>Some text</p>
      </div>`;
}


// output
var $0=["\n      <div>\n        <p>Some text</p>\n      </div>"];
$0.raw=["\n      <div>\n        <p>Some text</p>\n      </div>"];

function test(){
  const div = html($0)
}

Notice the duplication between the var $0 and $0.raw. For the html static template helper, we never use raw (it's actually forbidden in the linter), we only use the cooked value (the first array).

So, we can do a simple build transform (for the html helper only):

// input
function test() {
  const div = html`
      <div>
        <p>Some text</p>
      </div>`;
}


// output
function test() {
  const div = html(['\n      <div>\n        <p>Some text</p>\n      </div>']);
}

[ampprojectbot]

This issue seems to be in Pending Triage for awhile. @erwinmombay Please triage this to an appropriate milestone.

[kristoferbaxter]

Addressed with #19704.