Skip to content

Highlight within javascript tagged template strings #6

@sj26

Description

@sj26

I've been using something like this in after/syntax/javascript/graphql.vim attempting to highlight graphql as tagged template literals within javascript files using @pangloss' vim-javascript:

if exists('b:current_syntax')
  let s:current_syntax=b:current_syntax
  unlet b:current_syntax
endif
syn include @jsGraphql syntax/graphql.vim
if exists('s:current_syntax')
  let b:current_syntax=s:current_syntax
endif

syntax match   jsTaggedTemplateGraphql "\(graphql\|Relay\.QL\)\%(`\)\@=" nextgroup=jsTemplateStringGraphql
syntax region  jsTemplateStringGraphql start="`" end="`" contains=jsTemplateExpression,jsSpecial,@jsGraphql extend contained
syntax cluster jsExpression add=jsTaggedTemplateGraphql

hi def link jsTaggedTemplateGraphql jsTaggedTemplate
hi def link jsTemplateStringGraphql jsTemplateString

It works for Relay.QL or graphql tagged template strings:

export default Relay.createContainer(MyComponent, {
  fragments: {
    root: => Relay.QL`
      fragment on MyType {
        field
        anotherField
        connection {
          moreFields
        }
      }
    `
  }
})

This sort-of works. It doesn't recognise javascript template expressions correctly, i.e. in graphql`foo ${bar} baz` bar isn't parsed as javascript, it just continues to parse them as graphql varables/constants, and I can't figure that out.

It might be nice if there were support built-in here!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions