feat: concise line starts: ignore ;, read [ and - names, and name tags ended before a name

.changeset/concise-attr-group-without-name.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+Read an attribute group (`[`) at the start of a concise line as following an empty tag name, as `.class` and `|params|` are, rather than reading its first attribute as the tag name.

.changeset/concise-semicolon-line.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+Ignore a concise line that starts with `;`, which opened a tag with no name. As after a tag's `;`, only comments may follow it.

.changeset/concise-tag-name-hyphen.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+Read a concise line starting with `-` and a word character (eg `-if`) as a tag whose name starts with `-`, as `<-if>` already is in HTML mode. A single `-` followed by anything else is still an error, and so is any single `-` within a tag that only allows text.

.changeset/open-tag-ended-before-name.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+Name an open tag that ends before its name (eg a concise line of just `,`, or `<,>`) empty, so a tag never ends without `onOpenTagName`; the compiler and editor tooling crashed on these, and `<,>` crashed the parser at the end of the template.

src/__tests__/fixtures/concise-attr-group-without-name/__snapshots__/concise-attr-group-without-name.expected.txt

@@ -0,0 +1,21 @@
+1╭─ [a=1]
+ │  │││╰─ attrValue.value
+ │  ││╰─ attrValue "=1"
+ │  │╰─ attrName
+ ╰─ ╰─ tagName
+2╭─ [
+ │  ├─ closeTagEnd()
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName
+3╭─   class="x"
+ │    │    │╰─ attrValue.value "\"x\""
+ │    │    ╰─ attrValue "=\"x\""
+ ╰─   ╰─ attrName "class"
+4├─ ]
+5╭─ []
+ │  ├─ closeTagEnd()
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName
+6╭─ 
+ │  ├─ openTagEnd
+ ╰─ ╰─ closeTagEnd()

src/__tests__/fixtures/concise-attr-group-without-name/input.marko

@@ -0,0 +1,5 @@
+[a=1]
+[
+  class="x"
+]
+[]

src/__tests__/fixtures/concise-semicolon-line/__snapshots__/concise-semicolon-line.expected.txt

@@ -0,0 +1,19 @@
+1╭─ ;
+2╭─ div
+ ╰─ ╰─ tagName "div"
+3╭─   ; // comment
+ │  │   │ ╰─ comment.value " comment"
+ │  │   ╰─ comment "// comment"
+ ╰─ ╰─ openTagEnd
+4╭─   span
+ ╰─   ╰─ tagName "span"
+5╭─ ; /* block */
+ │  │ │ ╰─ comment.value " block "
+ │  │ ╰─ comment "/* block */"
+ │  ├─ closeTagEnd(div)
+ │  ├─ closeTagEnd(span)
+ ╰─ ╰─ openTagEnd
+6╭─ ;<!-- html -->
+ │   │   ╰─ comment.value " html "
+ ╰─  ╰─ comment "<!-- html -->"
+7╰─ 

src/__tests__/fixtures/concise-semicolon-line/input.marko

@@ -0,0 +1,6 @@
+;
+div
+  ; // comment
+  span
+; /* block */
+;<!-- html -->

src/__tests__/fixtures/concise-tag-name-hyphen-in-text/__snapshots__/concise-tag-name-hyphen-in-text.expected.txt

@@ -0,0 +1,6 @@
+1╭─ style
+ ╰─ ╰─ tagName "style"
+2╭─   -foo
+ │  │ ╰─ error(INVALID_LINE_START:A line in concise mode cannot start with a single hyphen. Use "--" instead. See: https://github.com/marko-js/htmljs-parser/issues/43)
+ ╰─ ╰─ openTagEnd
+3╰─ 

src/__tests__/fixtures/concise-tag-name-hyphen-in-text/input.marko

@@ -0,0 +1,2 @@
+style
+  -foo

src/__tests__/fixtures/concise-tag-name-hyphen/__snapshots__/concise-tag-name-hyphen.expected.txt

@@ -0,0 +1,21 @@
+1╭─ -if(x)
+ │  │  │╰─ tagArgs.value
+ │  │  ╰─ tagArgs "(x)"
+ ╰─ ╰─ tagName "-if"
+2╭─   span
+ │  │ ╰─ tagName "span"
+ ╰─ ╰─ openTagEnd
+3╭─ -else-if(y)
+ │  │       │╰─ tagArgs.value
+ │  │       ╰─ tagArgs "(y)"
+ │  ├─ closeTagEnd(-if)
+ │  ├─ closeTagEnd(span)
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName "-else-if"
+4╭─   -my-tag
+ │  │ ╰─ tagName "-my-tag"
+ ╰─ ╰─ openTagEnd
+5╭─ 
+ │  ├─ openTagEnd
+ │  ├─ closeTagEnd(-else-if)
+ ╰─ ╰─ closeTagEnd(-my-tag)

src/__tests__/fixtures/concise-tag-name-hyphen/input.marko

@@ -0,0 +1,4 @@
+-if(x)
+  span
+-else-if(y)
+  -my-tag

src/__tests__/fixtures/open-tag-ended-before-name/__snapshots__/open-tag-ended-before-name.expected.txt

@@ -0,0 +1,20 @@
+1╭─ ,;
+2╭─ <,/>
+ │  │ ├─ openTagEnd:selfClosed "/>"
+ │  │ ╰─ tagName
+ │  ├─ closeTagEnd()
+ │  ├─ openTagEnd
+ │  ├─ tagName
+ ╰─ ╰─ openTagStart
+3╭─ <,></>
+ │  │ ││ ├─ closeTagEnd()
+ │  │ ││ ╰─ closeTagName
+ │  │ │╰─ closeTagStart "</"
+ │  │ ├─ openTagEnd
+ │  │ ╰─ tagName
+ ╰─ ╰─ openTagStart
+4├─ ,
+5╭─ 
+ │  ├─ closeTagEnd()
+ │  ├─ openTagEnd
+ ╰─ ╰─ tagName

src/__tests__/fixtures/open-tag-ended-before-name/input.marko

@@ -0,0 +1,4 @@
+,;
+<,/>
+<,></>
+,

src/states/CONCISE_HTML_CONTENT.ts

@@ -1,6 +1,7 @@
 import {
   htmlEOF,
   isWhitespaceCode,
+  isWordCode,
   STATE,
   type StateDefinition,
 } from "../internal.ts";
@@ -106,6 +107,11 @@ export const CONCISE_HTML_CONTENT: StateDefinition = {
       }
 
       switch (code) {
+        case CODE.SEMICOLON:
+          // An empty line, as after a tag ended by ";".
+          this.pos++; // skip ;
+          STATE.endConciseLine(this, data);
+          return;
         case CODE.OPEN_ANGLE_BRACKET:
           this.beginMixedMode = true;
           this.beginHtmlBlock(undefined, false); // pos stays at <
@@ -121,6 +127,11 @@ export const CONCISE_HTML_CONTENT: StateDefinition = {
           if (data.charCodeAt(this.pos + 1) === CODE.HYPHEN) {
             this.enterState(STATE.BEGIN_DELIMITED_HTML_BLOCK);
             return; // pos stays at the first -, BEGIN_DELIMITED_HTML_BLOCK parses it
+          } else if (
+            parentTag?.type !== TagType.text &&
+            isWordCode(data.charCodeAt(this.pos + 1))
+          ) {
+            break; // a tag name starting with "-" (eg "-if")
           } else {
             this.emitError(
               this.pos,

src/states/OPEN_TAG.ts

@@ -2,10 +2,12 @@ import {
   isIndentCode,
   isLineCode,
   isWhitespaceCode,
+  isWordCode,
   matchesCloseAngleBracket,
   matchesCloseParen,
   matchesPipe,
   type Meta,
+  type Parser,
   type Ranges,
   STATE,
   type StateDefinition,
@@ -69,9 +71,22 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
 
   exit(tag) {
     const { selfClosed } = tag;
+    const start = this.pos - (this.isConcise ? 0 : selfClosed ? 2 : 1);
+
+    if (!tag.tagName) {
+      // An open tag can end before a name (eg a concise line of just ",", or
+      // "<,>"), so name it empty where it ends, as one starting with "|" is.
+      tag.tagName = {
+        start,
+        end: start,
+        quasis: [{ start, end: start }],
+        expressions: [],
+      };
+      tag.type = this.options.onOpenTagName?.(tag.tagName) || tag.type;
+    }
 
     this.options.onOpenTagEnd?.({
-      start: this.pos - (this.isConcise ? 0 : selfClosed ? 2 : 1),
+      start,
       end: this.pos,
       selfClosed,
     });
@@ -150,40 +165,17 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
         if (code === CODE.SEMICOLON) {
           this.pos++; // skip ;
           this.exitState();
-          if (!this.consumeWhitespaceOnLine(0)) {
-            switch (data.charCodeAt(this.pos)) {
-              case CODE.FORWARD_SLASH:
-                switch (data.charCodeAt(this.pos + 1)) {
-                  case CODE.FORWARD_SLASH:
-                    this.enterState(STATE.JS_COMMENT_LINE);
-                    this.pos += 2; // skip //
-                    return;
-                  case CODE.ASTERISK:
-                    this.enterState(STATE.JS_COMMENT_BLOCK);
-                    this.pos += 2; // skip /*
-                    return;
-                }
-                break;
-              case CODE.OPEN_ANGLE_BRACKET:
-                if (this.lookAheadFor("!--")) {
-                  this.enterState(STATE.HTML_COMMENT);
-                  this.pos += 4; // skip <!--
-                  return;
-                }
-                break;
-            }
-
-            this.emitError(
-              this.pos,
-              ErrorCode.INVALID_CODE_AFTER_SEMICOLON,
-              "A semicolon indicates the end of a line. Only comments may follow it.",
-            );
-          }
+          endConciseLine(this, data);
           return;
         }
 
         if (code === CODE.HYPHEN) {
           if (data.charCodeAt(this.pos + 1) !== CODE.HYPHEN) {
+            if (!tag.tagName && isWordCode(data.charCodeAt(this.pos + 1))) {
+              this.enterState(STATE.TAG_NAME); // eg "-if"
+              return;
+            }
+
             this.emitError(
               tag,
               ErrorCode.MALFORMED_OPEN_TAG,
@@ -236,6 +228,12 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
             return;
           }
 
+          if (!tag.tagName) {
+            // eg "[a=1]" at a line start: an empty name, as with "|x|".
+            this.enterState(STATE.TAG_NAME);
+            return; // pos stays at [, which ends the name
+          }
+
           tag.stage = TAG_STAGE.ATTR_GROUP;
           this.pos++;
           continue;
@@ -527,6 +525,39 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
   },
 };
 
+/** Only comments may follow the ";" ending a concise line. */
+export function endConciseLine(parser: Parser, data: string) {
+  if (parser.consumeWhitespaceOnLine(0)) return;
+
+  switch (data.charCodeAt(parser.pos)) {
+    case CODE.FORWARD_SLASH:
+      switch (data.charCodeAt(parser.pos + 1)) {
+        case CODE.FORWARD_SLASH:
+          parser.enterState(STATE.JS_COMMENT_LINE);
+          parser.pos += 2; // skip //
+          return;
+        case CODE.ASTERISK:
+          parser.enterState(STATE.JS_COMMENT_BLOCK);
+          parser.pos += 2; // skip /*
+          return;
+      }
+      break;
+    case CODE.OPEN_ANGLE_BRACKET:
+      if (parser.lookAheadFor("!--")) {
+        parser.enterState(STATE.HTML_COMMENT);
+        parser.pos += 4; // skip <!--
+        return;
+      }
+      break;
+  }
+
+  parser.emitError(
+    parser.pos,
+    ErrorCode.INVALID_CODE_AFTER_SEMICOLON,
+    "A semicolon indicates the end of a line. Only comments may follow it.",
+  );
+}
+
 function shouldTerminateConciseTagVar(
   code: number,
   data: string,