feat: improve handling of comas, especially for concise mode

.changeset/four-boxes-brush.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+In concise mode, a new line which starts with a coma will now continue attributes for the current tag.

.changeset/nice-cats-relate.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+Allow a comma to follow the tag name to begin attributes.

src/__tests__/fixtures/coma-after-open-tag/__snapshots__/coma-after-open-tag.expected.txt

@@ -0,0 +1,122 @@
+1╭─ div, class="a", id="c"
+ │  │    │    ││    │ │╰─ attrValue.value "\"c\""
+ │  │    │    ││    │ ╰─ attrValue "=\"c\""
+ │  │    │    ││    ╰─ attrName "id"
+ │  │    │    │╰─ attrValue.value "\"a\""
+ │  │    │    ╰─ attrValue "=\"a\""
+ │  │    ╰─ attrName "class"
+ ╰─ ╰─ tagName "div"
+2╭─ 
+ ╰─ ╰─ openTagEnd
+3╭─ div,
+ │  ├─ closeTagEnd(div)
+ ╰─ ╰─ tagName "div"
+4╭─     class="a",
+ │      │    │╰─ attrValue.value "\"a\""
+ │      │    ╰─ attrValue "=\"a\""
+ ╰─     ╰─ attrName "class"
+5╭─     id="c"
+ │      │ │╰─ attrValue.value "\"c\""
+ │      │ ╰─ attrValue "=\"c\""
+ ╰─     ╰─ attrName "id"
+6╭─ 
+ ╰─ ╰─ openTagEnd
+7╭─ div , class="a", id="c"
+ │  │     │    ││    │ │╰─ attrValue.value "\"c\""
+ │  │     │    ││    │ ╰─ attrValue "=\"c\""
+ │  │     │    ││    ╰─ attrName "id"
+ │  │     │    │╰─ attrValue.value "\"a\""
+ │  │     │    ╰─ attrValue "=\"a\""
+ │  │     ╰─ attrName "class"
+ │  ├─ closeTagEnd(div)
+ ╰─ ╰─ tagName "div"
+8╭─ 
+ ╰─ ╰─ openTagEnd
+9╭─ div ,
+ │  ├─ closeTagEnd(div)
+ ╰─ ╰─ tagName "div"
+10╭─     class="a",
+  │      │    │╰─ attrValue.value "\"a\""
+  │      │    ╰─ attrValue "=\"a\""
+  ╰─     ╰─ attrName "class"
+11╭─     id="c"
+  │      │ │╰─ attrValue.value "\"c\""
+  │      │ ╰─ attrValue "=\"c\""
+  ╰─     ╰─ attrName "id"
+12╭─ 
+  ╰─ ╰─ openTagEnd
+13╭─ div
+  │  ├─ closeTagEnd(div)
+  ╰─ ╰─ tagName "div"
+14╭─     ,class="a"
+  │       │    │╰─ attrValue.value "\"a\""
+  │       │    ╰─ attrValue "=\"a\""
+  ╰─      ╰─ attrName "class"
+15╭─     ,id="c"
+  │       │ │╰─ attrValue.value "\"c\""
+  │       │ ╰─ attrValue "=\"c\""
+  ╰─      ╰─ attrName "id"
+16╭─ 
+  ╰─ ╰─ openTagEnd
+17╭─ <div, class="a", id="c"/>
+  │  ││    │    ││    │ ││  ╰─ openTagEnd:selfClosed "/>"
+  │  ││    │    ││    │ │╰─ attrValue.value "\"c\""
+  │  ││    │    ││    │ ╰─ attrValue "=\"c\""
+  │  ││    │    ││    ╰─ attrName "id"
+  │  ││    │    │╰─ attrValue.value "\"a\""
+  │  ││    │    ╰─ attrValue "=\"a\""
+  │  ││    ╰─ attrName "class"
+  │  │╰─ tagName "div"
+  │  ├─ closeTagEnd(div)
+  ╰─ ╰─ openTagStart
+18├─ 
+19╭─ <div,
+  │  │╰─ tagName "div"
+  ╰─ ╰─ openTagStart
+20╭─     class="a",
+  │      │    │╰─ attrValue.value "\"a\""
+  │      │    ╰─ attrValue "=\"a\""
+  ╰─     ╰─ attrName "class"
+21╭─     id="c"/>
+  │      │ ││  ╰─ openTagEnd:selfClosed "/>"
+  │      │ │╰─ attrValue.value "\"c\""
+  │      │ ╰─ attrValue "=\"c\""
+  ╰─     ╰─ attrName "id"
+22├─ 
+23╭─ <div , class="a", id="c"/>
+  │  ││     │    ││    │ ││  ╰─ openTagEnd:selfClosed "/>"
+  │  ││     │    ││    │ │╰─ attrValue.value "\"c\""
+  │  ││     │    ││    │ ╰─ attrValue "=\"c\""
+  │  ││     │    ││    ╰─ attrName "id"
+  │  ││     │    │╰─ attrValue.value "\"a\""
+  │  ││     │    ╰─ attrValue "=\"a\""
+  │  ││     ╰─ attrName "class"
+  │  │╰─ tagName "div"
+  ╰─ ╰─ openTagStart
+24├─ 
+25╭─ <div ,
+  │  │╰─ tagName "div"
+  ╰─ ╰─ openTagStart
+26╭─     class="a",
+  │      │    │╰─ attrValue.value "\"a\""
+  │      │    ╰─ attrValue "=\"a\""
+  ╰─     ╰─ attrName "class"
+27╭─     id="c"/>
+  │      │ ││  ╰─ openTagEnd:selfClosed "/>"
+  │      │ │╰─ attrValue.value "\"c\""
+  │      │ ╰─ attrValue "=\"c\""
+  ╰─     ╰─ attrName "id"
+28├─ 
+29╭─ <div
+  │  │╰─ tagName "div"
+  ╰─ ╰─ openTagStart
+30╭─     ,class="a"
+  │       │    │╰─ attrValue.value "\"a\""
+  │       │    ╰─ attrValue "=\"a\""
+  ╰─      ╰─ attrName "class"
+31╭─     ,id="c"/>
+  │       │ ││  ╰─ openTagEnd:selfClosed "/>"
+  │       │ │╰─ attrValue.value "\"c\""
+  │       │ ╰─ attrValue "=\"c\""
+  ╰─      ╰─ attrName "id"
+32╰─ 

src/__tests__/fixtures/coma-after-open-tag/input.marko

@@ -0,0 +1,31 @@
+div, class="a", id="c"
+
+div,
+    class="a",
+    id="c"
+
+div , class="a", id="c"
+
+div ,
+    class="a",
+    id="c"
+
+div
+    ,class="a"
+    ,id="c"
+
+<div, class="a", id="c"/>
+
+<div,
+    class="a",
+    id="c"/>
+
+<div , class="a", id="c"/>
+
+<div ,
+    class="a",
+    id="c"/>
+
+<div
+    ,class="a"
+    ,id="c"/>

src/core/Parser.ts

@@ -213,6 +213,7 @@ export class Parser {
 
     if (this.lookAheadFor(str, cur)) {
       this.pos = cur;
+      if (this.forward > 1) this.forward = 1;
       return true;
     }
 

src/states/OPEN_TAG.ts

@@ -99,8 +99,12 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
   },
 
   eol(_, tag) {
-    if (this.isConcise && tag.stage !== TAG_STAGE.ATTR_GROUP) {
-      // In concise mode we always end the open tag
+    if (
+      this.isConcise &&
+      tag.stage !== TAG_STAGE.ATTR_GROUP &&
+      !this.consumeWhitespaceIfBefore(",")
+    ) {
+      // In concise mode we always end the open tag unless we're in an attr group or the next line starts with ",".
       this.exitState();
     }
   },

src/states/TAG_NAME.ts

@@ -124,6 +124,7 @@ export const TAG_NAME: StateDefinition<TagNameMeta> = {
       code === CODE.FORWARD_SLASH ||
       code === CODE.PIPE ||
       code === CODE.OPEN_ANGLE_BRACKET ||
+      code === CODE.COMMA ||
       (this.isConcise
         ? code === CODE.SEMICOLON
         : code === CODE.CLOSE_ANGLE_BRACKET)