fix: improve typescript angle bracket parsing

.changeset/major-experts-start.md

@@ -0,0 +1,5 @@
+---
+"htmljs-parser": minor
+---
+
+Improve expression parsing for typescript, especially around multi line generics.

README.md

@@ -201,15 +201,18 @@ const parser = createParser({
         // TagType.void makes this a void element (cannot have children).
         return TagType.void;
       case "html-comment":
+      case "html-script":
+      case "html-style":
       case "script":
       case "style":
       case "textarea":
         // TagType.text makes the child content text only (with placeholders).
         return TagType.text;
-      case "class":
       case "export":
       case "import":
       case "static":
+      case "client":
+      case "server":
         // TagType.statement makes this a statement tag where the content following the tag name will be parsed as script code until we reach a new line, eg for `import x from "y"`).
         return TagType.statement;
     }

package.json

@@ -63,18 +63,16 @@
     "bench": "tsx bench.mts",
     "build": "tsc -b && tsx build.mts",
     "change": "changeset add",
-    "ci:test": "nyc npm run mocha -- --forbid-only",
+    "ci:test": "nyc npm test -- --forbid-only",
     "format": "npm run lint:eslint -- --fix && npm run lint:prettier -- --write && (fixpack || true)",
     "lint": "tsc -b && npm run lint:eslint && npm run lint:prettier -- -l && fixpack",
     "lint:eslint": "eslint -f visualstudio .",
     "lint:prettier": "prettier \"./**/*{.ts,.js,.json,.md,.yml,rc}\"",
-    "mocha": "cross-env NODE_ENV=test mocha \"./src/**/__tests__/*.test.ts\"",
     "prepare": "husky",
     "release": "npm run build && changeset publish",
     "report": "open ./coverage/lcov-report/index.html",
-    "test": "npm run mocha -- --watch",
-    "test:inspect": "npm test -- --inspect",
-    "test:update": "npm run mocha -- --update",
+    "test": "cross-env NODE_ENV=test mocha \"./src/**/__tests__/*.test.ts\"",
+    "test:update": "npm test -- --update",
     "version": "changeset version && npm i --package-lock-only"
   },
   "types": "dist/index.d.ts"

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

src/__tests__/fixtures/ts-function-type/input.marko

@@ -0,0 +1 @@
+<div value=fn as (x: number) => string />

src/__tests__/fixtures/ts-generic-complex/__snapshots__/ts-generic-complex.expected.txt

@@ -0,0 +1,15 @@
+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
+2╭─ <div value=x satisfies Map<string, Array<Record<K, V>>> />
+ │  ││   │    ││                                            ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x satisfies Map<string, Array<Record<K, V>>>"
+ │  ││   │    ╰─ attrValue "=x satisfies Map<string, Array<Record<K, V>>>"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
+3╰─ 

src/__tests__/fixtures/ts-generic-complex/input.marko

@@ -0,0 +1,2 @@
+<div value=x as Map<string, Array<Record<K, V>>> />
+<div value=x satisfies Map<string, Array<Record<K, V>>> />

src/__tests__/fixtures/ts-generic-function-type/__snapshots__/ts-generic-function-type.expected.txt

@@ -0,0 +1,15 @@
+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
+2╭─ <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
+3╰─ 

src/__tests__/fixtures/ts-generic-function-type/input.marko

@@ -0,0 +1,2 @@
+<div value=fn as <T>(x: T) => T />
+<div value=fn as < T >(x: T) => T />

src/__tests__/fixtures/ts-generic-simple/__snapshots__/ts-generic-simple.expected.txt

@@ -0,0 +1,15 @@
+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
+2╭─ <div value=x as Array< T > />
+ │  ││   │    ││               ╰─ openTagEnd:selfClosed "/>"
+ │  ││   │    │╰─ attrValue.value "x as Array< T >"
+ │  ││   │    ╰─ attrValue "=x as Array< T >"
+ │  ││   ╰─ attrName "value"
+ │  │╰─ tagName "div"
+ ╰─ ╰─ openTagStart
+3╰─ 

src/__tests__/fixtures/ts-generic-simple/input.marko

@@ -0,0 +1,2 @@
+<div value=x as Array<T> />
+<div value=x as Array< T > />

src/__tests__/fixtures/ts-intersection-type/__snapshots__/ts-intersection-type.expected.txt

@@ -0,0 +1,14 @@
+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
+2╭─ <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

src/__tests__/fixtures/ts-intersection-type/input.marko

@@ -0,0 +1,2 @@
+<div value=x as A & B<T> />
+<div value=x as A & B< T > />

src/__tests__/fixtures/ts-keyof-typeof/__snapshots__/ts-keyof-typeof.expected.txt

@@ -0,0 +1,8 @@
+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
+2╰─ 

src/__tests__/fixtures/ts-keyof-typeof/input.marko

@@ -0,0 +1 @@
+<div value=x as keyof typeof T />

src/__tests__/fixtures/ts-nested-generics/__snapshots__/ts-nested-generics.expected.txt

@@ -0,0 +1,15 @@
+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
+2╭─ <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
+3╰─ 

src/__tests__/fixtures/ts-nested-generics/input.marko

@@ -0,0 +1,2 @@
+<div value=x as Promise<Array<Record<string, number>>> />
+<div value=x as Promise< Array< Record< string, number > > > />

src/__tests__/fixtures/ts-static-type/__snapshots__/ts-static-type.expected.txt

@@ -0,0 +1,11 @@
+1╭─ static type Foo = Array<
+ ╰─ ╰─ tagName "static"
+2├─   Bar
+3├─ >
+4╭─ 
+ ╰─ ╰─ openTagEnd
+5╭─ div
+ ╰─ ╰─ tagName "div"
+6╭─ 
+ │  ├─ openTagEnd
+ ╰─ ╰─ closeTagEnd(div)

src/__tests__/fixtures/ts-static-type/input.marko

@@ -0,0 +1,5 @@
+static type Foo = Array<
+  Bar
+>
+
+div

src/__tests__/fixtures/ts-tag-var-type-generic/__snapshots__/ts-tag-var-type-generic.expected.txt

@@ -0,0 +1,13 @@
+1╭─ const/foo:Bar<
+ │  │    │╰─ tagVar.value "foo:Bar<\n  A,\n  B\n>"
+ │  │    ╰─ tagVar "/foo:Bar<\n  A,\n  B\n>"
+ ╰─ ╰─ tagName "const"
+2├─   A,
+3├─   B
+4╭─ > = baz
+ │    │ ╰─ attrValue.value "baz"
+ │    ├─ attrValue "= baz"
+ ╰─   ╰─ attrName
+5╭─ 
+ │  ├─ openTagEnd
+ ╰─ ╰─ closeTagEnd(const)

src/__tests__/fixtures/ts-tag-var-type-generic/input.marko

@@ -0,0 +1,4 @@
+const/foo:Bar<
+  A,
+  B
+> = baz

src/__tests__/fixtures/ts-type-statement/__snapshots__/ts-type-statement.expected.txt

@@ -0,0 +1,31 @@
+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
+19╭─ static const x: Foo<
+  ╰─ ╰─ tagName "static"
+20├─   1,
+21├─   2
+22├─ > = baz;
+23╭─ 
+  ╰─ ╰─ openTagEnd

src/__tests__/fixtures/ts-type-statement/input.marko

@@ -0,0 +1,22 @@
+static interface Foo<
+  A,
+  B,
+> {
+  x: 1
+}
+
+static type Bar<
+  A,
+  B,
+> = A &
+    B
+
+static declare const x: Foo<
+  1,
+  2
+>;
+
+static const x: Foo<
+  1,
+  2
+> = baz;