Allow developers to quickly “comment” or “ignore” portions of an interpolated template.

[theengineear]

Context

As a developer, you often want to quickly comment-out a block of html code within a template. However, because HTML comments cannot be interpolated, there is no way to actually enable this within the parsing / templating machinery. BUT, because that’s strictly never going to be possible, we could repurpose such syntax with new semantics — i.e., “hey, just ignore the interpolations when I do dat.”

Say you have the following code in your template:

class MyElement extends XElement {
  /* … */
  static template(html) {
    return ({ workingConfig, brokenConfig }) => {
      return html`
        <div id="container">
          <working-element
            .config="${workingConfig}">
          </working-element>
          <broken-element
            .config="${brokenConfig}">
          </broken-element>
        </div>
      `;
    };
  }
  /* … */
}

Gah, but the broken-element seems to be having a problem — we just want to comment that out quickly to perform a sanity check, so, we highlight the lines and perform the keystrokes to create an HTML comment in our IDE:

class MyElement extends XElement {
  /* … */
  static template(html) {
    return ({ workingConfig, brokenConfig }) => {
      return html`
        <div id="container">
          <working-element
            .config="${workingConfig}">
          </working-element>
          <!-- <broken-element
            .config="${brokenConfig}">
          </broken-element>
        </div> -->
      `;
    };
  }
  /* … */
}

Darn! Because of the ${brokenConfig} this template is now invalid… why doesn’t the robot understand what I want here?!

Proposal

Can we add logic to x-parser to leniently allow interpolations within comments and flag them in a way so that the interpolated strings / values arrays still line up, but x-template knows to not actually do anything with them?

The above should render the comment string as the following, literal text (note the single space in the string binding):

          <!-- <broken-element
            .config=" ">
          </broken-element>
        </div> -->

Alternative Proposal

Alternatively, you could change the IDE behavior. This is how JSX allows you to comment. It would have to work something like this (and folks would need to enable special IDE behavior):

class MyElement extends XElement {
  /* … */
  static template(html) {
    return ({ workingConfig, brokenConfig }) => {
      return html`
        <div id="container">
          <working-element
            .config="${workingConfig}">
          </working-element>
          ${''/* <broken-element
            .config="${brokenConfig}">
          </broken-element>
        </div> */}
      `;
    };
  }
  /* … */
}

Some notes:

• You have to return something as a value, hence the '' there. That’s a minor annoyance.
• This becomes a real comment now, so the previously interpolated values will not be used at all. Perhaps an improvement.
• This is literally just a JS comment, so it will not be visible in the HTML. You could consider that a pro or a con…

[theengineear]

See #294 for context / motivation on this ticket.

[theengineear]

FYI @klebba

[klebba]

Capturing our convo — I was wrong about this — the problem is boiled down to:

the template is "HTML" in JavaScript

In other words, the template string is still JavaScript. The only valid comment to use is { /* */ } — the friction occurs because my IDE is trying to help me write HTML inside of the html tagged string, which is nice, except when it is not nice.

[theengineear]

Perhaps at a minimum, we ought to add an FAQ-type line to our docs that explains how this works. I.e., “why don’t comments work like I want them to?’