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:

• https://github.com/microsoft/TypeScript-TmLanguage/issues/761#issuecomment-515186694
• https://github.com/microsoft/TypeScript-TmLanguage/issues/949#issuecomment-1423374471
• https://github.com/microsoft/vscode-textmate/issues/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:

• https://github.com/microsoft/TypeScript-TmLanguage/commit/88a7e09e927ea2a135db60810d6a1fe8f589d165

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:

• https://github.com/frigus02/vscode-sql-tagged-template-literals/issues/20
• https://github.com/frigus02/vscode-sql-tagged-template-literals/pull/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 https://github.com/thebearingedge/vscode-sql-lit/issues/13#issuecomment-1550486134