Support passing generic type parameters to html function?

[karlhorky]

Hi @mjbvz, first of all, thanks for your effort creating this extension, very useful!

I wanted to find out if you'd be open to supporting passing TypeScript generic type parameters to the html function? Eg. both of:

1. Single-line generic type parameters
2. Multi-line generic type parameters

The extension currently doesn't highlight with either of these:

Code:

const withHighlight = html`<div></div>`;
const noHighlight = html<string>` <div></div> `;
const alsoNoHighlight = html<
  // longer generic type parameter
  ButtonHTMLAttributes<HTMLButtonElement>
>` <div></div> `;

[mjbvz]

I'm open to it (if someone makes a PR :)

[karlhorky]

Looking at similar issues across other extensions, one problem with the example above is that the longer generic type argument spans multiple lines.

The root cause for this is a bit more of a problem, since TextMate grammars have limitations, as @sheetalkamat is familiar with:

• Multi line type definitions have wrong scope / highlighting microsoft/TypeScript-TmLanguage#761 (comment)
• Rendering of code broken after using require.resolve in the code microsoft/TypeScript-TmLanguage#949 (comment)
• How to define begin and end patterns which span multiple lines? microsoft/vscode-textmate#41

VS Code itself somehow gets around the limitations and can do correct syntax highlighting over multiple lines, maybe with Semantic Highlighting by @aeschli and @alexdima.

I also see some changes with regular expressions, which @sheetalkamat has also been maintaining:

• microsoft/TypeScript-TmLanguage@88a7e09

So maybe there is a way for a VS Code extension to also achieve this, by also using this Semantic Highlighting / these regular expressions.

The TextMate grammar limitations have also been explored in the following SQL tagged template literals VS Code extension, but no solution has yet appeared:

• Syntax highlighting does not work with type variables over multiple lines frigus02/vscode-sql-tagged-template-literals#20
• Support generics over multiple lines frigus02/vscode-sql-tagged-template-literals#21

[karlhorky]

Workaround (/* html */ comment)

Add a /* html */ comment after the multi-line generic

const alsoNoHighlight = html<
  // longer generic type parameter
  ButtonHTMLAttributes<HTMLButtonElement>
->` <div></div> `;
+>/* html */ ` <div></div> `;

Credit: @net in thebearingedge/vscode-sql-lit#13 (comment)