inline_sql_syntax Not highlighted with TypeScript Generics

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
`;

Sep 11 '23 01:09 ariesclark

+1

Oct 08 '23 16:10 herenickname

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:

SQL tagged template literals by @frigus02 (repo: https://github.com/frigus02/vscode-sql-tagged-template-literals)
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:

https://github.com/notyetspecified/vscode-sql-template-literal/pull/2

Nov 19 '23 15:11 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:

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

Nov 19 '23 15:11 karlhorky

Workaround (`/* sql */` comment)

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

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

Credit: @Net in https://github.com/thebearingedge/vscode-sql-lit/issues/13#issuecomment-1550486134

Nov 19 '23 16:11 karlhorky

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

Apr 15 '24 17:04 vicary

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 { };