fix: improve typescript angle bracket parsing

DylanPiercey · DylanPiercey · commit 59a910eec291 · 2025-08-03T13:04:38.000-06:00
diff --git a/.changeset/major-experts-start.md b/.changeset/major-experts-start.md
@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+Improve expression parsing for typescript, especially around multi line generics.
diff --git a/src/__tests__/fixtures/ts-function-type/__snapshots__/ts-function-type.expected.txt b/src/__tests__/fixtures/ts-function-type/__snapshots__/ts-function-type.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=fn as (x: number) => string />
+ │  ││   │    ││                           ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "fn as (x: number) => string"
+ │  ││   │    ╰─ attrValue "=fn as (x: number) => string"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-function-type/input.marko b/src/__tests__/fixtures/ts-function-type/input.marko
@@ -0,0 +1 @@
+<div value=fn as (x: number) => string />
diff --git a/src/__tests__/fixtures/ts-generic-complex/__snapshots__/ts-generic-complex.expected.txt b/src/__tests__/fixtures/ts-generic-complex/__snapshots__/ts-generic-complex.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=x as Map<string, Array<Record<K, V>>> />
+ │  ││   │    ││                                     ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as Map<string, Array<Record<K, V>>>"
+ │  ││   │    ╰─ attrValue "=x as Map<string, Array<Record<K, V>>>"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-generic-complex/input.marko b/src/__tests__/fixtures/ts-generic-complex/input.marko
@@ -0,0 +1 @@
+<div value=x as Map<string, Array<Record<K, V>>> />
diff --git a/src/__tests__/fixtures/ts-generic-function-type/__snapshots__/ts-generic-function-type.expected.txt b/src/__tests__/fixtures/ts-generic-function-type/__snapshots__/ts-generic-function-type.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=fn as <T>(x: T) => T />
+ │  ││   │    ││                    ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "fn as <T>(x: T) => T"
+ │  ││   │    ╰─ attrValue "=fn as <T>(x: T) => T"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-generic-function-type/input.marko b/src/__tests__/fixtures/ts-generic-function-type/input.marko
@@ -0,0 +1 @@
+<div value=fn as <T>(x: T) => T />
diff --git a/src/__tests__/fixtures/ts-generic-simple/__snapshots__/ts-generic-simple.expected.txt b/src/__tests__/fixtures/ts-generic-simple/__snapshots__/ts-generic-simple.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=x as Array<T> />
+ │  ││   │    ││             ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as Array<T>"
+ │  ││   │    ╰─ attrValue "=x as Array<T>"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-generic-simple/input.marko b/src/__tests__/fixtures/ts-generic-simple/input.marko
@@ -0,0 +1 @@
+<div value=x as Array<T> />
diff --git a/src/__tests__/fixtures/ts-intersection-type/__snapshots__/ts-intersection-type.expected.txt b/src/__tests__/fixtures/ts-intersection-type/__snapshots__/ts-intersection-type.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=x as A & B<T> />
+ │  ││   │    ││             ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as A & B<T>"
+ │  ││   │    ╰─ attrValue "=x as A & B<T>"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-intersection-type/input.marko b/src/__tests__/fixtures/ts-intersection-type/input.marko
@@ -0,0 +1 @@
+<div value=x as A & B<T> />
diff --git a/src/__tests__/fixtures/ts-keyof-typeof/__snapshots__/ts-keyof-typeof.expected.txt b/src/__tests__/fixtures/ts-keyof-typeof/__snapshots__/ts-keyof-typeof.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=x as keyof typeof T />
+ │  ││   │    ││                   ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as keyof typeof T"
+ │  ││   │    ╰─ attrValue "=x as keyof typeof T"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-keyof-typeof/input.marko b/src/__tests__/fixtures/ts-keyof-typeof/input.marko
@@ -0,0 +1 @@
+<div value=x as keyof typeof T />
diff --git a/src/__tests__/fixtures/ts-nested-generics/__snapshots__/ts-nested-generics.expected.txt b/src/__tests__/fixtures/ts-nested-generics/__snapshots__/ts-nested-generics.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=x as Promise<Array<Record<string, number>>> />
+ │  ││   │    ││                                           ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as Promise<Array<Record<string, number>>>"
+ │  ││   │    ╰─ attrValue "=x as Promise<Array<Record<string, number>>>"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-nested-generics/input.marko b/src/__tests__/fixtures/ts-nested-generics/input.marko
@@ -0,0 +1 @@
+<div value=x as Promise<Array<Record<string, number>>> />
diff --git a/src/__tests__/fixtures/ts-type-statement/__snapshots__/ts-intersection-type.expected.txt b/src/__tests__/fixtures/ts-type-statement/__snapshots__/ts-intersection-type.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=x as A & B<T> />
+ │  ││   │    ││             ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as A & B<T>"
+ │  ││   │    ╰─ attrValue "=x as A & B<T>"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-type-statement/__snapshots__/ts-type-statement.expected.txt b/src/__tests__/fixtures/ts-type-statement/__snapshots__/ts-type-statement.expected.txt
@@ -0,0 +1,24 @@
+1╭─ static interface Foo<
+ ╰─ ╰─ tagName "static"
+2├─   A,
+3├─   B,
+4├─ > {
+5├─   x: 1
+6├─ }
+7╭─ 
+ ╰─ ╰─ openTagEnd
+8╭─ static type Bar<
+ ╰─ ╰─ tagName "static"
+9├─   A,
+10├─   B,
+11├─ > = A &
+12├─     B
+13╭─ 
+  ╰─ ╰─ openTagEnd
+14╭─ static declare const x: Foo<
+  ╰─ ╰─ tagName "static"
+15├─   1,
+16├─   2
+17├─ >;
+18╭─ 
+  ╰─ ╰─ openTagEnd
diff --git a/src/__tests__/fixtures/ts-type-statement/input.marko b/src/__tests__/fixtures/ts-type-statement/input.marko
@@ -0,0 +1,17 @@
+static interface Foo<
+  A,
+  B,
+> {
+  x: 1
+}
+
+static type Bar<
+  A,
+  B,
+> = A &
+    B
+
+static declare const x: Foo<
+  1,
+  2
+>;
diff --git a/src/__tests__/fixtures/ts-union-type/__snapshots__/ts-union-type.expected.txt b/src/__tests__/fixtures/ts-union-type/__snapshots__/ts-union-type.expected.txt
@@ -0,0 +1,7 @@
+1╭─ <div value=x as A | B<T> />
+ │  ││   │    ││             ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as A | B<T>"
+ │  ││   │    ╰─ attrValue "=x as A | B<T>"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
diff --git a/src/__tests__/fixtures/ts-union-type/input.marko b/src/__tests__/fixtures/ts-union-type/input.marko
@@ -0,0 +1 @@
+<div value=x as A | B<T> />
diff --git a/src/states/EXPRESSION.ts b/src/states/EXPRESSION.ts
@@ -13,6 +13,7 @@ export interface ExpressionMeta extends Meta {
   groupStack: number[];
   operators: boolean;
   wasComment: boolean;
+  groupAngleBracket: boolean;
   terminatedByEOL: boolean;
   terminatedByWhitespace: boolean;
   consumeIndentedContent: boolean;
@@ -23,21 +24,26 @@ export interface ExpressionMeta extends Meta {
 const shouldTerminate = () => false;
 
 const unaryKeywords = [
+  "asserts",
   "async",
   "await",
-  "keyof",
   "class",
   "function",
+  "infer",
+  "is",
+  "keyof",
   "new",
+  "readonly",
   "typeof",
+  "unique",
   "void",
 ] as const;
 
 const binaryKeywords = [
-  "instanceof",
-  "in",
   "as",
   "extends",
+  "instanceof", // Note: instanceof must be checked before `in`
+  "in",
   "satisfies",
 ] as const;
 
@@ -54,6 +60,7 @@ export const EXPRESSION: StateDefinition<ExpressionMeta> = {
       shouldTerminate,
       operators: false,
       wasComment: false,
+      groupAngleBracket: false,
       terminatedByEOL: false,
       terminatedByWhitespace: false,
       consumeIndentedContent: false,
@@ -81,7 +88,11 @@ export const EXPRESSION: StateDefinition<ExpressionMeta> = {
           );
           if (prevNonWhitespacePos > expression.start) {
             wasExpression =
-              lookBehindForOperator(this.data, prevNonWhitespacePos) !== -1;
+              lookBehindForOperator(
+                expression,
+                this.data,
+                prevNonWhitespacePos,
+              ) !== -1;
           }
         }
 
@@ -134,10 +145,25 @@ export const EXPRESSION: StateDefinition<ExpressionMeta> = {
       case CODE.OPEN_CURLY_BRACE:
         expression.groupStack.push(CODE.CLOSE_CURLY_BRACE);
         break;
+      case CODE.OPEN_ANGLE_BRACKET:
+        if (expression.groupAngleBracket) {
+          expression.groupStack.push(CODE.CLOSE_ANGLE_BRACKET);
+        }
+        break;
 
       case CODE.CLOSE_PAREN:
       case CODE.CLOSE_SQUARE_BRACKET:
-      case CODE.CLOSE_CURLY_BRACE: {
+      case CODE.CLOSE_CURLY_BRACE:
+      case CODE.CLOSE_ANGLE_BRACKET: {
+        if (
+          code === CODE.CLOSE_ANGLE_BRACKET &&
+          !(
+            expression.groupAngleBracket &&
+            this.lookAtCharCodeAhead(-1) !== CODE.EQUAL
+          )
+        ) {
+          break;
+        }
         if (!expression.groupStack.length) {
           return this.emitError(
             expression,
@@ -254,7 +280,7 @@ function checkForOperators(
   if (!expression.operators) return false;
 
   const { pos, data } = parser;
-  if (lookBehindForOperator(data, pos) !== -1) {
+  if (lookBehindForOperator(expression, data, pos) !== -1) {
     parser.consumeWhitespace();
     parser.forward = 0;
     return true;
@@ -275,7 +301,7 @@ function checkForOperators(
         nextNonSpace,
       )
     ) {
-      const lookAheadPos = lookAheadForOperator(data, nextNonSpace);
+      const lookAheadPos = lookAheadForOperator(expression, data, nextNonSpace);
       if (lookAheadPos !== -1) {
         parser.pos = lookAheadPos;
         parser.forward = 0;
@@ -287,7 +313,11 @@ function checkForOperators(
   return false;
 }
 
-function lookBehindForOperator(data: string, pos: number): number {
+function lookBehindForOperator(
+  expression: ExpressionMeta,
+  data: string,
+  pos: number,
+): number {
   const curPos = pos - 1;
   const code = data.charCodeAt(curPos);
 
@@ -299,13 +329,19 @@ function lookBehindForOperator(data: string, pos: number): number {
     case CODE.EQUAL:
     case CODE.EXCLAMATION:
     case CODE.OPEN_ANGLE_BRACKET:
-    case CODE.CLOSE_ANGLE_BRACKET:
     case CODE.PERCENT:
     case CODE.PIPE:
     case CODE.QUESTION:
     case CODE.TILDE:
       return curPos;
 
+    case CODE.CLOSE_ANGLE_BRACKET:
+      return curPos > 0 && data.charCodeAt(curPos - 1) === CODE.EQUAL
+        ? curPos - 1
+        : expression.groupAngleBracket
+          ? -1
+          : curPos;
+
     case CODE.PERIOD: {
       // Only matches `.` followed by something that could be an identifier.
       const nextPos = lookAheadWhile(isWhitespaceCode, data, pos);
@@ -319,6 +355,7 @@ function lookBehindForOperator(data: string, pos: number): number {
         // Check if we should continue for another reason.
         // eg "typeof++ x"
         return lookBehindForOperator(
+          expression,
           data,
           lookBehindWhile(isWhitespaceCode, data, curPos - 2),
         );
@@ -331,8 +368,7 @@ function lookBehindForOperator(data: string, pos: number): number {
       for (const keyword of unaryKeywords) {
         const keywordPos = lookBehindFor(data, curPos, keyword);
         if (keywordPos !== -1) {
-          const prevCode = data.charCodeAt(keywordPos - 1);
-          return prevCode === CODE.PERIOD || isWordCode(prevCode)
+          return isWordOrPeriodCode(data.charCodeAt(keywordPos - 1))
             ? -1
             : keywordPos;
         }
@@ -342,7 +378,11 @@ function lookBehindForOperator(data: string, pos: number): number {
   }
 }
 
-function lookAheadForOperator(data: string, pos: number): number {
+function lookAheadForOperator(
+  expression: ExpressionMeta,
+  data: string,
+  pos: number,
+): number {
   switch (data.charCodeAt(pos)) {
     case CODE.AMPERSAND:
     case CODE.ASTERISK:
@@ -377,21 +417,15 @@ function lookAheadForOperator(data: string, pos: number): number {
         if (nextPos === -1) continue;
 
         const max = data.length - 1;
-        if (nextPos === max) return -1;
-
-        let nextCode = data.charCodeAt(nextPos + 1);
-        if (isWhitespaceCode(nextCode)) {
-          // skip any whitespace after the operator
-          nextPos = lookAheadWhile(isWhitespaceCode, data, nextPos + 2);
-          if (nextPos === max) return -1;
-          nextCode = data.charCodeAt(nextPos);
-        } else {
-          // bail if we didn't match a space keyword.
-          return -1;
-        }
+        if (nextPos === max || !isWhitespaceCode(data.charCodeAt(nextPos + 1)))
+          break;
+
+        // skip any whitespace after the operator
+        nextPos = lookAheadWhile(isWhitespaceCode, data, nextPos + 2);
+        if (nextPos === max) break;
 
         // finally check that this is not followed by a terminator.
-        switch (nextCode) {
+        switch (data.charCodeAt(nextPos)) {
           case CODE.COLON:
           case CODE.COMMA:
           case CODE.EQUAL:
@@ -400,6 +434,12 @@ function lookAheadForOperator(data: string, pos: number): number {
           case CODE.SEMICOLON:
             return -1;
           default:
+            switch (keyword) {
+              case "as":
+              case "satisfies":
+                expression.groupAngleBracket = true;
+                break;
+            }
             return nextPos;
         }
       }
@@ -427,6 +467,10 @@ function canFollowDivision(code: number) {
   }
 }
 
+function isWordOrPeriodCode(code: number) {
+  return code === CODE.PERIOD || isWordCode(code);
+}
+
 function isWordCode(code: number) {
   return (
     (code >= CODE.UPPER_A && code <= CODE.UPPER_Z) ||
diff --git a/src/states/OPEN_TAG.ts b/src/states/OPEN_TAG.ts
@@ -302,6 +302,7 @@ export const OPEN_TAG: StateDefinition<OpenTagMeta> = {
 
             const expr = this.enterState(STATE.EXPRESSION);
             expr.operators = true;
+            expr.groupAngleBracket = true;
             expr.terminatedByWhitespace = true;
             expr.shouldTerminate = this.isConcise
               ? shouldTerminateConciseTagVar
diff --git a/src/states/TAG_NAME.ts b/src/states/TAG_NAME.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"htmljs-parser": minor
 +---
++
 +Improve expression parsing for typescript, especially around multi line generics.
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<div value=fn as (x: number) => string />`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<div value=x as Map<string, Array<Record<K, V>>> />`