Report an html comment inside an open tag

.changeset/html-comment-in-open-tag.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+An `<!--` inside an open tag now reports a targeted `INVALID_HTML_COMMENT` error pointing at the comment, instead of being read as tag type arguments, as attribute type parameters, or (after a whitespace-terminated attribute value) consumed as a less-than operator. Like `</`, a `<!--` no longer continues an unenclosed attribute value, so `<div class="a" <!-- note --> id="b">` reports the comment rather than silently parsing as `class=("a" < !--note)` plus two junk attributes.

src/__tests__/fixtures/attr-value-html-comment-in-regex/__snapshots__/attr-value-html-comment-in-regex.expected.txt

@@ -0,0 +1,10 @@
+1╭─ <div hidden=/<!--/.test(s) title="<!-- x -->"/>
+ │  ││   │     ││              │    ││           ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │     ││              │    │╰─ attrValue.value "\"<!-- x -->\""
+ │  ││   │     ││              │    ╰─ attrValue "=\"<!-- x -->\""
+ │  ││   │     ││              ╰─ attrName "title"
+ │  ││   │     │╰─ attrValue.value "/<!--/.test(s)"
+ │  ││   │     ╰─ attrValue "=/<!--/.test(s)"
+ │  ││   ╰─ attrName "hidden"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart

src/__tests__/fixtures/attr-value-html-comment-in-regex/input.marko

@@ -0,0 +1 @@
+<div hidden=/<!--/.test(s) title="<!-- x -->"/>

src/__tests__/fixtures/invalid-html-comment-after-attr-name/__snapshots__/invalid-html-comment-after-attr-name.expected.txt

@@ -0,0 +1,5 @@
+1╭─ <div hidden <!-- the label --> id="b">hi</div>
+ │  ││   │      ╰─ error(INVALID_HTML_COMMENT:An html comment cannot be used within an open tag. Use a JavaScript comment (// or /* */) instead.)
+ │  ││   ╰─ attrName "hidden"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart

src/__tests__/fixtures/invalid-html-comment-after-attr-name/input.marko

@@ -0,0 +1 @@
+<div hidden <!-- the label --> id="b">hi</div>

src/__tests__/fixtures/invalid-html-comment-after-attr-value/__snapshots__/invalid-html-comment-after-attr-value.expected.txt

@@ -0,0 +1,7 @@
+1╭─ <div class="foo" <!-- the label --> id="b">hi</div>
+ │  ││   │    ││     ╰─ error(INVALID_HTML_COMMENT:An html comment cannot be used within an open tag. Use a JavaScript comment (// or /* */) instead.)
+ │  ││   │    │╰─ attrValue.value "\"foo\""
+ │  ││   │    ╰─ attrValue "=\"foo\""
+ │  ││   ╰─ attrName "class"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart

src/__tests__/fixtures/invalid-html-comment-after-attr-value/input.marko

@@ -0,0 +1 @@
+<div class="foo" <!-- the label --> id="b">hi</div>

src/__tests__/fixtures/invalid-html-comment-concise/__snapshots__/invalid-html-comment-concise.expected.txt

@@ -0,0 +1,6 @@
+1╭─ div class="foo" <!-- the label --> id="b"
+ │  │   │    ││     ╰─ error(INVALID_HTML_COMMENT:An html comment cannot be used within an open tag. Use a JavaScript comment (// or /* */) instead.)
+ │  │   │    │╰─ attrValue.value "\"foo\""
+ │  │   │    ╰─ attrValue "=\"foo\""
+ │  │   ╰─ attrName "class"
+ ╰─ ╰─ tagName "div"

src/__tests__/fixtures/invalid-html-comment-concise/input.marko

@@ -0,0 +1 @@
+div class="foo" <!-- the label --> id="b"

src/__tests__/fixtures/invalid-html-comment-in-open-tag/__snapshots__/invalid-html-comment-in-open-tag.expected.txt

@@ -0,0 +1,7 @@
+1╭─ <div
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
+2╭─   <!-- the label -->
+ ╰─   ╰─ error(INVALID_HTML_COMMENT:An html comment cannot be used within an open tag. Use a JavaScript comment (// or /* */) instead.)
+3├─   class="foo"
+4╰─ >hi</div>

src/__tests__/fixtures/invalid-html-comment-in-open-tag/input.marko

@@ -0,0 +1,4 @@
+<div
+  <!-- the label -->
+  class="foo"
+>hi</div>

src/states/ATTRIBUTE.ts

@@ -83,6 +83,11 @@ export const ATTRIBUTE: StateDefinition<AttrMeta> = {
         continue;
       }
 
+      if (code === CODE.OPEN_ANGLE_BRACKET && this.lookAheadFor("!--")) {
+        this.exitState();
+        return; // the open tag reports the html comment
+      }
+
       if (
         code === CODE.EQUAL ||
         (code === CODE.COLON && data.charCodeAt(this.pos + 1) === CODE.EQUAL) ||

src/states/EXPRESSION.ts

@@ -420,14 +420,20 @@ function checkForOperators(
       pos + 1,
     );
 
-    // In HTML mode a "</" is a close tag rather than a less-than operator
-    // (which lookAheadForOperator would otherwise continue across).
-    if (
-      !parser.isConcise &&
-      data.charCodeAt(nextNonSpace) === CODE.OPEN_ANGLE_BRACKET &&
-      data.charCodeAt(nextNonSpace + 1) === CODE.FORWARD_SLASH
-    ) {
-      return false;
+    // A "</" close tag (html mode) or a "<!--" html comment is markup rather
+    // than a less-than operator, which lookAheadForOperator would otherwise
+    // continue across.
+    if (data.charCodeAt(nextNonSpace) === CODE.OPEN_ANGLE_BRACKET) {
+      if (
+        !parser.isConcise &&
+        data.charCodeAt(nextNonSpace + 1) === CODE.FORWARD_SLASH
+      ) {
+        return false;
+      }
+
+      if (parser.lookAheadFor("!--", nextNonSpace + 1)) {
+        return false;
+      }
     }
 
     if (

src/states/OPEN_TAG.ts

@@ -280,6 +280,12 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
             this.pos += 2; // skip /*
             return;
         }
+      } else if (code === CODE.OPEN_ANGLE_BRACKET && this.lookAheadFor("!--")) {
+        return this.emitError(
+          this.pos,
+          ErrorCode.INVALID_HTML_COMMENT,
+          "An html comment cannot be used within an open tag. Use a JavaScript comment (// or /* */) instead.",
+        );
       }
 
       if (isWhitespaceCode(code)) {

src/util/error-code.ts

@@ -28,3 +28,4 @@ export const INVALID_TAG_PARAMS = 26;
 export const INVALID_TAG_TYPES = 27;
 export const INVALID_ATTR_TYPE_PARAMS = 28;
 export const AMBIGUOUS_ATTRIBUTE_VALUE = 29;
+export const INVALID_HTML_COMMENT = 30;