Support HTML comments in localized lit templates

Author: aomarks

CHANGELOG.md

@@ -22,6 +22,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix incorrect JSON schema error about `targetLocales` field not being a
   `string[]`.
 
+- Fix bug where `html` templates could not contain `<!-- comments -->`. HTML
+  comments are now preserved as placeholders, similar to other HTML markup.
+
 ## [0.2.3] - 2020-05-13
 
 - Fix missing `<xliff>` element in XLIFF output.

src/program-analysis.ts

@@ -438,17 +438,20 @@ function replaceHtmlWithPlaceholders(
   const components: Array<string | Placeholder> = [];
 
   const traverse = (node: parse5.DefaultTreeNode): void => {
-    const text =
-      node.nodeName === '#text'
-        ? (node as parse5.DefaultTreeTextNode).value
-        : null;
-    if (text !== null) {
+    if (node.nodeName === '#text') {
+      const text = (node as parse5.DefaultTreeTextNode).value;
       components.push(text);
+    } else if (node.nodeName === '#comment') {
+      components.push({
+        untranslatable: serializeComment(node as parse5.DefaultTreeCommentNode),
+      });
     } else {
       const {open, close} = serializeOpenCloseTags(node);
       components.push({untranslatable: open});
-      for (const child of (node as parse5.DefaultTreeParentNode).childNodes) {
-        traverse(child);
+      if ('childNodes' in node) {
+        for (const child of (node as parse5.DefaultTreeParentNode).childNodes) {
+          traverse(child);
+        }
       }
       components.push({untranslatable: close});
     }
@@ -481,6 +484,17 @@ function serializeOpenCloseTags(
   return {open, close};
 }
 
+/**
+ * Serialize an HTML comment node.
+ *
+ * Example:
+ *
+ *   {data: "foo"} --> "<!-- foo -->"
+ */
+function serializeComment(comment: parse5.DefaultTreeCommentNode): string {
+  return parse5.serialize({childNodes: [comment]});
+}
+
 /**
  * E.g. "foo", 'foo', or `foo`, but not `foo${bar}`.
  */

testdata/xliff/goldens/foo.ts

@@ -36,3 +36,5 @@ msg(
     </b>`,
   'x'
 );
+
+msg('comment', html`Hello <b><!-- comment -->World!</b>`);

testdata/xliff/goldens/tsout/es-419.ts

@@ -7,6 +7,7 @@ import {html} from 'lit-html';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 export const templates = {
+  comment: html`Hola <b><!-- comment -->Mundo!</b>`,
   lit: html`Hola <b><i>Galaxia!</i></b>`,
   lit_variables_1: (url: any, name: any) =>
     html`Hola ${name}, clic <a href="${url}">aquí</a>!`,

testdata/xliff/goldens/tsout/zh_CN.ts

@@ -28,4 +28,5 @@ export const templates = {
     <b>
       ${x}
     </b>`,
+  comment: html`Hello <b><!-- comment -->World!</b>`,
 };

testdata/xliff/goldens/xliff/es-419.xlf

@@ -38,6 +38,10 @@
       ${x}
     &lt;/b></ph></source>
 </trans-unit>
+<trans-unit id="comment">
+  <source>Hello <ph id="0">&lt;b>&lt;!-- comment --></ph>World!<ph id="1">&lt;/b></ph></source>
+  <target>Hola <ph id="0">&lt;b>&lt;!-- comment --></ph>Mundo!<ph id="1">&lt;/b></ph></target>
+</trans-unit>
 </body>
 </file>
 </xliff>

testdata/xliff/goldens/xliff/zh_CN.xlf

@@ -34,6 +34,9 @@
       ${x}
     &lt;/b></ph></source>
 </trans-unit>
+<trans-unit id="comment">
+  <source>Hello <ph id="0">&lt;b>&lt;!-- comment --></ph>World!<ph id="1">&lt;/b></ph></source>
+</trans-unit>
 </body>
 </file>
 </xliff>

testdata/xliff/input/foo.ts

@@ -36,3 +36,5 @@ msg(
     </b>`,
   'x'
 );
+
+msg('comment', html`Hello <b><!-- comment -->World!</b>`);

testdata/xliff/input/xliff/es-419.xlf

@@ -30,5 +30,9 @@
           id="1"
         >&lt;a href="${url}"></ph>aquí<ph id="2">&lt;/a></ph>!</target>
     </trans-unit>
+    <trans-unit id="comment">
+      <source>Hello <ph id="0">&lt;b>&lt;!-- comment --></ph>World!<ph id="1">&lt;/b></ph></source>
+      <target>Hola <ph id="0">&lt;b>&lt;!-- comment --></ph>Mundo!<ph id="1">&lt;/b></ph></target>
+    </trans-unit>
   </body>
 </file>