feat: improve js style comment support (#119)

Author: DylanPiercey

.changeset/empty-trains-grin.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": patch
+---
+
+Support JS line comments inside the open tag (previously just block comments could be used).

.changeset/gold-radios-eat.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": patch
+---
+
+Support JS style comments in HTML bodies (previously allowed in parsed text and concise mode).

src/__tests__/fixtures/comments-within-open-tag/__snapshots__/comments-within-open-tag.expected.txt

@@ -10,4 +10,19 @@
  │  ││   │  ╰─ attrValue "=\"bar\""
  │  ││   ╰─ attrName "foo"
  │  │╰─ tagName "div"
- ╰─ ╰─ openTagStart
+ ╰─ ╰─ openTagStart
+2╭─ <div foo="bar" // this is a test
+ │  ││   │  │╰─ attrValue.value "\"bar\""
+ │  ││   │  ╰─ attrValue "=\"bar\""
+ │  ││   ╰─ attrName "foo"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
+3╭─      hello="world" // this is another test
+ │       │    │╰─ attrValue.value "\"world\""
+ │       │    ╰─ attrValue "=\"world\""
+ ╰─      ╰─ attrName "hello"
+4╭─ ></div>
+ │  ││ │  ╰─ closeTagEnd(div)
+ │  ││ ╰─ closeTagName "div"
+ │  │╰─ closeTagStart "</"
+ ╰─ ╰─ openTagEnd

src/__tests__/fixtures/comments-within-open-tag/input.marko

@@ -1 +1,4 @@
-<div foo="bar" /*this is a comment*/ hello="world" /* this is another comment */ ></div>
+<div foo="bar" /*this is a comment*/ hello="world" /* this is another comment */ ></div>
+<div foo="bar" // this is a test
+     hello="world" // this is another test
+></div>

src/__tests__/fixtures/comments-within-tag-body/__snapshots__/comments-within-tag-body.expected.txt

@@ -0,0 +1,24 @@
+1╭─ <div>
+ │  ││  ╰─ openTagEnd
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
+2╭─      // This is a comment
+ │  │    │ ╰─ comment.value " This is a comment"
+ │  │    ╰─ comment "// This is a comment"
+ ╰─ ╰─ text "\n     "
+3╭─      This is some real text
+ ╰─ ╰─ text "\n     This is some real text\n     "
+4╭─      /* But this is a comment */
+ │       │ ╰─ comment.value " But this is a comment "
+ ╰─      ╰─ comment "/* But this is a comment */"
+5╭─      And this is more text
+ ╰─ ╰─ text "\n     And this is more text\n     "
+6╭─      <!-- and this is a comment -->
+ │       │   ╰─ comment.value " and this is a comment "
+ ╰─      ╰─ comment "<!-- and this is a comment -->"
+7╭─ </div>
+ │  │ │  ╰─ closeTagEnd(div)
+ │  │ ╰─ closeTagName "div"
+ │  ├─ text "\n"
+ ╰─ ╰─ closeTagStart "</"
+8╰─ 

src/__tests__/fixtures/comments-within-tag-body/input.marko

@@ -0,0 +1,7 @@
+<div>
+     // This is a comment
+     This is some real text
+     /* But this is a comment */
+     And this is more text
+     <!-- and this is a comment -->
+</div>

src/states/HTML_CONTENT.ts

@@ -94,6 +94,23 @@ export const HTML_CONTENT: StateDefinition<HTMLContentMeta> = {
       this.endText();
       this.enterState(STATE.INLINE_SCRIPT);
       this.pos++; // skip space
+    } else if (code === CODE.FORWARD_SLASH) {
+      // Check next character to see if we are in a comment
+      switch (this.lookAtCharCodeAhead(1)) {
+        case CODE.FORWARD_SLASH:
+          this.endText();
+          this.enterState(STATE.JS_COMMENT_LINE);
+          this.pos++; // skip /
+          break;
+        case CODE.ASTERISK:
+          this.endText();
+          this.enterState(STATE.JS_COMMENT_BLOCK);
+          this.pos++; // skip *
+          break;
+        default:
+          this.startText();
+          break;
+      }
     } else if (!STATE.checkForPlaceholder(this, code)) {
       this.startText();
     }
@@ -115,7 +132,31 @@ export const HTML_CONTENT: StateDefinition<HTMLContentMeta> = {
 
   eof: htmlEOF,
 
-  return() {},
+  return(child) {
+    switch (child.state) {
+      case STATE.JS_COMMENT_LINE:
+        this.options.onComment?.({
+          start: child.start,
+          end: child.end,
+          value: {
+            start: child.start + 2, // strip //
+            end: child.end,
+          },
+        });
+        break;
+      case STATE.JS_COMMENT_BLOCK: {
+        this.options.onComment?.({
+          start: child.start,
+          end: child.end,
+          value: {
+            start: child.start + 2, // strip /*
+            end: child.end - 2, // strip */,
+          },
+        });
+        break;
+      }
+    }
+  },
 };
 
 function isBeginningOfLine(parser: Parser) {

src/states/OPEN_TAG.ts

@@ -273,14 +273,18 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
       );
     }
 
-    if (
-      code === CODE.FORWARD_SLASH &&
-      this.lookAtCharCodeAhead(1) === CODE.ASTERISK
-    ) {
-      // Skip over code inside a JavaScript block comment
-      this.enterState(STATE.JS_COMMENT_BLOCK);
-      this.pos++; // skip *
-      return;
+    if (code === CODE.FORWARD_SLASH) {
+      // Check next character to see if we are in a comment
+      switch (this.lookAtCharCodeAhead(1)) {
+        case CODE.FORWARD_SLASH:
+          this.enterState(STATE.JS_COMMENT_LINE);
+          this.pos++; // skip /
+          return;
+        case CODE.ASTERISK:
+          this.enterState(STATE.JS_COMMENT_BLOCK);
+          this.pos++; // skip *
+          return;
+      }
     }
 
     if (isWhitespaceCode(code)) {