Syntax error for TypeScript generics

[bajtos]

Describe the bug

Chroma seems to not understand TypeScript generics with multiple template arguments and/or template arguments using a generic type too.

Consider the following TypeScript code:

export class AuditingRepository<
  T extends Entity,
  ID,
  Relations extends object = {}
> extends DefaultCrudRepository<T, ID, Relations> {
}

Chroma v0.8.2 and Hugo v0.78.2 render the code with a comma (,) characters highlighted in red - perhaps suggesting an error?

To Reproduce

Save the following text to bug.ts.

export class AuditingRepository<
  T extends Entity,
  ID,
  Relations extends object = {}
> extends DefaultCrudRepository<T, ID, Relations> {
}

Run chroma as follows:

chroma -s autumn --html --html-lines --html-lines-table --html-inline-styles bug.ts > bug.html

Open the produced HTML file in a Chromium-based browers. You should see the same output as on my screenshot posted above.

[fredrare]

Cause

This happens because the TypeScript lexer also detects JSX. In the case of generics, they are not actually being treated as such, but rather as JSX elements. For this reason, the , is not allowed. Note that this is also an issue in case you want to add something like Required<Pick<T, Key>>, because the < character is not allowed inside a JSX tag for obvious reasons. This may happen with any TypeScript specific syntax that would not be correct in jsx.

Solution

Without needing to modify the lexer, you can bypass this error simply adding a space between < and the generic you want to use. The JSX rules only apply when there are no spaces between that sign and the tag name, so it treats them as 2 separate entities: Operator and NameOther. Of course, given that this solution leaves you with ✨asymmetrical✨ generics, also add an space before > to please your eyes.

[alecthomas]

Fixed in #1002 thanks to @fredrare !