Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support ES6 tagged template literals #1

Merged
merged 1 commit into from
Sep 3, 2017

Conversation

tessro
Copy link
Contributor

@tessro tessro commented Oct 20, 2016

This patch adds support for GraphQL syntax in ES6 tagged template literals. (As used by graphql-tag, for example.) By default, GraphQL syntax is highlighted in template literals tagged with gql or graphql. This can be configured via the g:graphql_tag_names array.

Note: this feature ties into vim-javascript's syntax groups, so it requires vim-javascript to work correctly. (If vim-javascript is missing, it should be ineffective and harmless.)

This patch adds support for GraphQL syntax in ES6 tagged template
literals. (As used by `graphql-tag`, for example.) By default, GraphQL
syntax is highlighted in template literals tagged with `gql` or
`graphql`. This can be configured via the `g:graphql_tag_names` array.
@jparise
Copy link
Owner

jparise commented Oct 21, 2016

This looks good, @paulrosania! I just have a couple of questions:

  1. Where can I find an example of these literals in practice? I'm not familiar with them, and I'd like to include something in the README that notes this capability. (Please feel free to add a README section if you're comfortable doing that.)
  2. Is it possible to include a test case for this syntax as a new test/es6.vader file? This relates to (1); I'm not sure how to best exercise this feature.

@jparise
Copy link
Owner

jparise commented Oct 21, 2016

Also, since this introduces a new configuration option (g:graphql_tag_names), I would like to document that in the README and probably introduce a help document, but I can handle the latter myself.

@tessro
Copy link
Contributor Author

tessro commented Oct 21, 2016

👋🏼 Hi! gql tagged template literals are the recommended way of passing queries into apollo-client. Lots of info in their README here: https://github.com/apollostack/graphql-tag.

Does this feel like a valid use case for including the feature in vim-graphql? If so, I'll update the patch with a README update and figure out how to establish test coverage.

@jparise
Copy link
Owner

jparise commented Oct 21, 2016

Thanks for the pointer! Yes, I think it makes sense to include this in vim-graphql.

@tjwebb
Copy link

tjwebb commented Oct 22, 2016

+1

endif

syntax region graphqlTemplateString start=+`+ skip=+\\\(`\|$\)+ end=+`+ contains=@GraphQLSyntax,jsTemplateVar,jsSpecial extend
exec 'syntax match graphqlTaggedTemplate +\%(' . join(g:graphql_tag_names, '\|') . '\)\%(`\)\@=+ nextgroup=graphqlTemplateString'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should allow an optional space between tag name and template string.

@jparise
Copy link
Owner

jparise commented Oct 31, 2016

@paulrosania, anything I can do to help?

@tessro
Copy link
Contributor Author

tessro commented Nov 8, 2016

Sorry for the delay on this – I intend to complete the patch but I haven't
been able to find the time. It'll be at least another week, so if you'd
prefer to keep the PR list clean feel free to close this in the meantime
and I'll reopen later.

On Mon, Oct 31, 2016 at 8:07 AM, Jon Parise [email protected]
wrote:

@paulrosania https://github.com/paulrosania, anything I can do to help?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAHcDEhDE7BvN1-i0h4FhIigWei4pn4ks5q5gQXgaJpZM4KbuDV
.

@jparise
Copy link
Owner

jparise commented Nov 8, 2016

@paulrosania, no rush at all. I just wanted to check in on progress and offer help as needed.

@sj26
Copy link

sj26 commented Jul 21, 2017

This kinda works for me:

mkdir -p ~/.vim/after/syntax/javascript/ ~/.vim/plugin/
wget https://github.com/paulrosania/vim-graphql/raw/tagged-template-literals/after/syntax/javascript/graphql.vim -O ~/.vim/after/syntax/javascript/graphql.vim
wget https://github.com/paulrosania/vim-graphql/raw/tagged-template-literals/plugin/graphql.vim -O ~/.vim/plugin/graphql.vim

It doesn't seem to highlight template literal interpolations as javascript espressions, though, it still scans them with the graphql syntax.

I also added Relay.QL to the tags per old school relay convention and it works great.

let b:current_syntax=s:current_syntax
endif

syntax region graphqlTemplateString start=+`+ skip=+\\\(`\|$\)+ end=+`+ contains=@GraphQLSyntax,jsTemplateVar,jsSpecial extend
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

s/jsTemplateVar/sTemplateExpression/ since pangloss/vim-javascript@88c85d9.

@jparise
Copy link
Owner

jparise commented Aug 27, 2017

I'll create a branch that includes this original work plus some follow-on changes soon.

jparise added a commit that referenced this pull request Sep 3, 2017
Building on #1, this commit makes the following minor changes:

 1. `g:graphql_tag_names` => `g:graphql_javascript_tags`
 2. `jsTemplateVar` => `jsTemplateExpression`, to reflect the
    change made in pangloss/vim-javascript@88c85d9
 3. Added `Relay.QL` to the list of recognized JavaScript tags
@jparise jparise merged commit 13e670b into jparise:master Sep 3, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants