Not highlighted with TypeScript Generics

[ariesclark]

The following code should be properly highlighted, but is not. Removing the generic type will cause the string to be highlighted again.

const { data } = await sql<{
  date: Date;
  foo: number;
  bar: number;
}>`
  select
    toStartOfInterval(timestamp, ${interval(5, "minute")}) AS date,
    sum(_sample_interval * double2) / sum(_sample_interval) as foo,
    sum(_sample_interval * double3) / sum(_sample_interval) as bar

  from analytics

  where timestamp >= now() - ${interval(7, "day")}
    and timestamp <= now()
    and index1 = ${worldId}

  group by date
  order by date
`;

[herenickname]

+1

[karlhorky]

Generic type arguments can be implemented (⚠️ if they are on a single line - I'll come back to this in a followup comment) - check out working versions of this feature in the following VS Code extensions:

1. SQL tagged template literals by @frigus02 (repo: https://github.com/frigus02/vscode-sql-tagged-template-literals)
2. Inline SQL by @notyetspecified (repo: https://github.com/notyetspecified/vscode-sql-template-literal)

In the following PR by @KristjanTammekivi, the generic type parameter feature was added to Inline SQL:

• fix: allow type parameters, tagged template literals that end with Sql notyetspecified/vscode-sql-template-literal#2

[karlhorky]

The problem with the original example in this current issue by @ariesclark above is that the 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 (/* sql */ comment)

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

sql<{
  value: number
-}[]>`
+}[]>/* sql */ `
  SELECT 1 value;
`

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

[vicary]

This actually breaks coloring for the rest of the documents with generics.

[KristjanTammekivi]

This actually breaks coloring for the rest of the documents with generics.

I can't seem to replicate

Can you give a full example? Here's mine:

const sql = <T>(q): any => {
    return {
        execute: (db) => {}
    }
}

interface F {
    now: string;
}

const db = {};

await sql<F>`SELECT NOW(6) AS 'now'`.execute(db);
const boo = true;

await sql<{ now: string }>`SELECT NOW(6) AS 'now'`.execute(db);
const foo = true;

await sql`SELECT NOW(6) AS 'now'`.execute(db);
const moo = true;


export { };

[vicary]

@KristjanTammekivi testing with your snippet below:

With the extension enabled

With the extension disabled

[KristjanTammekivi]

Ah my bad, I thought this was the same extension as I made a contribution to because I was mentioned here. I'm using this extension:

[vicary]

@KristjanTammekivi nice ad (and i'm sold) =D