Include support for comment syntax in typescript

[cpitt]

Currently it appears that the comment based syntax highlighting only works with javascript files not typescript

const MyQuery = gql(`"#gql
  query MyQuery {
    ....
   }
 `)

It would be nice if this was supported in typescript aswell.

I've tried adding the following line to after/syntax/typescript/graphql.vim:

syntax region graphqlTemplateString matchgroup=typescriptTemplate start=+`#\s\{,4\}gql\>\s*$+ skip=+\\\\\|\\`+ end=+`+ contains=@GraphQLSyntax,typescriptTemplateSubstitution extend

Copying after/syntax/javascript/graphql.vim to no avail.

Happy to make a PR but need a push in the right direction to figuring out what I'm doing wrong.

Vim Version

[jparise]

That generally looks like the right approach, but I also see that it doesn't work as-is.

I'm afraid that I don't have any hints for getting this working at the moment; "overlaying" syntaxes has been the trickiest part of building this plugin.

[cpitt]

🤔

so the following for typescript:

syntax region graphqlTemplateString 
  \ start=+`#\s\{0,4\}\(gql\|graphql\)\s*$+ 
  \ skip=+\\\\\|\\`+ 
  \ end=+`+ 
  \ contains=@GraphQLSyntax,typescriptTemplateSubstitution extend

will correctly highlight

`# gql
   query MyQuery {
     .....
   }
`;

but not

const derp = `# gql
  query MyQuery {
     .....
   }
`;
//OR
const derp = gql(`# gql
  query MyQuery {
   .....
  }
`)

Admittedly I'm just kind of hacking at it with only the most basic understanding of how vim syntax works

[cpitt]

The following appears to work

syntax region graphqlTemplateString
      \ start=+`\(#\s\{,4\}\(gql\|graphql\)\)\@=+
      \ skip=+\\\\\|\\`+
      \ end=+`+me=s-1
      \ containedin=typescriptTemplate
      \ contained
      \ contains=@GraphQLSyntax,typescriptTemplateSubstitution extend

Perhaps someone with more knowledge can validated the approach

[jparise]

Closed by #83