Avoid period continuation for non identifier, improve coma sep handling for attrs

.changeset/bright-clouds-yawn.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": patch
+---
+
+Avoid continuing expressions after a period if after the whitespace is something that could not be an identifier.

.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/__tests__/fixtures/scriptlet-eof/__snapshots__/scriptlet-eof.expected.txt

@@ -0,0 +1,27 @@
+1╭─ $ $global.
+ │   │╰─ scriptlet.value "$global."
+ ╰─  ╰─ scriptlet " $global."
+2├─ 
+3╭─ <header>
+ │  ││     ╰─ openTagEnd
+ │  │╰─ tagName "header"
+ ╰─ ╰─ openTagStart
+4╭─   <img.logo src=logo alt="Marko"/>
+ │  │ ││  ││    │  ││    │  ││      ╰─ openTagEnd:selfClosed "/>"
+ │  │ ││  ││    │  ││    │  │╰─ attrValue.value "\"Marko\""
+ │  │ ││  ││    │  ││    │  ╰─ attrValue "=\"Marko\""
+ │  │ ││  ││    │  ││    ╰─ attrName "alt"
+ │  │ ││  ││    │  │╰─ attrValue.value "logo"
+ │  │ ││  ││    │  ╰─ attrValue "=logo"
+ │  │ ││  ││    ╰─ attrName "src"
+ │  │ ││  │╰─ tagShorthandClass.quasis[0] "logo"
+ │  │ ││  ╰─ tagShorthandClass ".logo"
+ │  │ │╰─ tagName "img"
+ │  │ ╰─ openTagStart
+ ╰─ ╰─ text "\n  "
+5╭─ </header>
+ │  │ │     ╰─ closeTagEnd(header)
+ │  │ ╰─ closeTagName "header"
+ │  ├─ text "\n"
+ ╰─ ╰─ closeTagStart "</"
+6╰─ 

src/__tests__/fixtures/scriptlet-eof/input.marko

@@ -0,0 +1,5 @@
+$ $global.
+
+<header>
+  <img.logo src=logo alt="Marko"/>
+</header>

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/EXPRESSION.ts

@@ -266,12 +266,17 @@ function lookBehindForOperator(data: string, pos: number): number {
     case CODE.OPEN_ANGLE_BRACKET:
     case CODE.CLOSE_ANGLE_BRACKET:
     case CODE.PERCENT:
-    case CODE.PERIOD:
     case CODE.PIPE:
     case CODE.QUESTION:
     case CODE.TILDE:
       return curPos;
 
+    case CODE.PERIOD: {
+      // Only matches `.` followed by something that could be an identifier.
+      const nextPos = lookAheadWhile(isWhitespaceCode, data, pos);
+      return isWordCode(data.charCodeAt(nextPos)) ? nextPos : -1;
+    }
+
     // special case -- and ++
     case CODE.PLUS:
     case CODE.HYPHEN: {
@@ -324,9 +329,11 @@ function lookAheadForOperator(data: string, pos: number): number {
     case CODE.OPEN_PAREN:
       return pos; // defers to base expression state to track block groups.
 
-    case CODE.PERIOD:
-      // Only match a dot if its not ...
-      return data.charCodeAt(pos + 1) === CODE.PERIOD ? -1 : pos + 1;
+    case CODE.PERIOD: {
+      // Only matches `.` followed by something that could be an identifier.
+      const nextPos = lookAheadWhile(isWhitespaceCode, data, pos + 1);
+      return isWordCode(data.charCodeAt(nextPos)) ? nextPos : -1;
+    }
 
     default: {
       for (const keyword of binaryKeywords) {
@@ -383,6 +390,7 @@ function isWordCode(code: number) {
     (code >= CODE.UPPER_A && code <= CODE.UPPER_Z) ||
     (code >= CODE.LOWER_A && code <= CODE.LOWER_Z) ||
     (code >= CODE.NUMBER_0 && code <= CODE.NUMBER_9) ||
+    code == CODE.DOLLAR ||
     code === CODE.UNDERSCORE
   );
 }

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)