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
fix: Fix vscode-graphql-syntax’s grammar to support string literals on separate lines #3518
Conversation
🦋 Changeset detectedLatest commit: 84777a2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
a3a18f3
to
133b2af
Compare
@kitten thanks for this! to answer your questions, see the syntax extension readme |
also, can you add to the test fixtures the test case you originally hoped to cover? I don't see it present in your PR |
Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>
@kitten amazing work here! looking forward to getting this released I had to release a quick hotfix for the triple double quote syntax also, one last nice to have - maybe confirm a few weird pre-auto-formatted variations just to be sure we don't deprecate it somehow in the future. it's nice to have the strings always working no matter whether auto-formatting (prettier, etc) is used or has been applied for example, corner cases like this const query = graphql(
` query {
something
}
`); our LSP server uses normal AST parsing ofc, but with the textmate regexes so many things can go wrong haha if you don't have time to add corner cases, I can add them after of course! |
c029204
to
50d8e3c
Compare
@acao Merged that back 👍 I'm not too concerned either. No idea what the syntax currently says for single line Given that double-quotes re. corner cases, I'm not too concerned about adding all kinds of newline cases to the tests. There's one, which basically represents all possible cases; i.e. Edit: Just an example of why I think this is covered 🤔 Here's an alteration to the -const graphql = graphql(
- "\"\"\"comment\"\"\"\nquery($id: ID!) { test }",
- [var1, var2]
-);
+const graphql = graphql('"""comment"""\nquery($id: ID!) { test }', [
+ var1,
+ var2,
+]); |
Just came back from some holidays, so coming back to this, let me know if there's anything else we want to do here, or if we're good to go ✌️❤️ |
otherwise though it looks great! i will take a closer look and see about merging it soon |
actually, can you add some more test cases to |
@acao: re. not matching past multiple lines, I found a more detailed discussion here, which is where I initially ended up for this PR. Basically, what I meant was that I applied some of the additions to |
Just stumbled into this issue. Would love to see this merged soon. |
indeed, the fixtures in markdown do look for matches to the tokenized js/graphql results down to each charactrer! it helps us make sure that these cases continue to work when markdown characters might conflict with our js/ts template tags. as you can see, the markdown grammar is using the grammar you are modifying heavily! in the future, if you add the test cases to the end of the fixture file, the diff makes more sense, but that is often the case with snapshot serializers, including our custom textmate token serializer I hope to merge this and some other PRs today on my day off, so be on the lookout! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
awesome work, this is really comprehensive!
the regression snapshots will help tremendously if someone tries a "bugfix" for their corner case that breaks this scenario, which is exactly why we set up this snapshot suite!
this is a fantastic fix contribution to our ecosystem and many others that use our extension, so thank you @kitten !
There appears to be something awry with github actions, where it's not reporting the run status (for me at least), and the log output formatting is broken, but manually checking each job, it looks fine! merging now, thanks again! |
bad news - it appears this (missing) github actions event bug is also not triggering the changeset bot? good news - once the issue recovers, we will still be able to release the changes without a problem with the next merge to |
@acao Sorry for being annoying but when is this (i.e. v1.3.3) going to be released? |
It has already been released: https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql-syntax |
This seems to have caused a regression, showcased in #3542. |
no worries @kitten this happens! lets double check the snapshot suite and make sure we have the right fixtures for this case and/or see if the snapshot change reveals this bug. we can re-release no problem! I really need to create a pre-release flow for these extensions, but that's another discussion |
@aradalvand 0.9.2 is now released, and removes this regression by reverting the 0.9.1 release. thanks for reporting! |
@kitten I think the issue we can see from the snapshot side is that the end ` and ; i think are being tokenized by graphql somehow? So i think the query remains unterminated and attempts to highlight the rest of the file from the first graphql tag to the end of the file. i would look closely at the serializer results, and follow the readme instructions for performing manual builds to visually confirm the outcomes, where you open the fixture files and can confirm that everything is as expected |
I'll take a look! I've tested this before in VSCode, but I'm guessing there's either a case that isn't covered or I made a mistake while resolving conflicts 🤔 |
yeah, that's what I guessed as well! also, my bad for not manually confirming everything immediately pre-release myself, that's my job 😆 |
Not your job and not your job solely if you do consider it your job ❤️ I did confirm and double-check this, but it was a subtle mistake where the pattern wasn't quite matching, because the positive lookbehind failed, and was neither applying ts/js/etc highlighting inside the function call expression, nor was it then matching correctly after the pattern, since the pattern causes an error. At least that's my assumption. This does make me think that while this may sound silly, visual snapshots would be really helpful in the future, if the VSCode team is willing to provide such a tool 🤔 I found the issue and will open a follow-up PR |
…n separate lines (graphql#3518) * Allow newlines after `graphql(` before start of query string * Fix mistaken reverse order of optional `(` and generic `<.*>` * Replace `(` in second match with newline one * Match graphql calls separately for string literals inside calls * Add missing endCaptures to new rule
Fix is in a new PR here ❤️ #3545 |
…n separate lines (graphql#3518) * Allow newlines after `graphql(` before start of query string * Fix mistaken reverse order of optional `(` and generic `<.*>` * Replace `(` in second match with newline one * Match graphql calls separately for string literals inside calls * Add missing endCaptures to new rule
…n separate lines [Reapply & Fix] (#3545) * fix: Fix vscode-graphql-syntax’s grammar to support string literals on separate lines (#3518) * Allow newlines after `graphql(` before start of query string * Fix mistaken reverse order of optional `(` and generic `<.*>` * Replace `(` in second match with newline one * Match graphql calls separately for string literals inside calls * Add missing endCaptures to new rule * Remove lookbehind in grammar and add inner TS/JS source patterns Using a positive lookbehind can subtly break Textmate/VSCode’s syntax highlighting. The positive lookbehind (according to some online sources) can fail unexpectedly when they contain whitespace matches. This means that we should instead match explicitly, like the other patterns do. This means however, that we might match too much and I noticed that arguments to the function aren't highlighted correctly. According to the interpolation rule in `graphql.json` we now include patterns for JS/TS/etc as a fallback pattern. This fixes the issue and prevents the case where the rule was conflicting with normal JS/TS patterns in a different tmLanguage grammar. * Update test and add new “after” variable case * Revert changes to tests/__fixtures__/test-js.md
Summary
We're currently working on
gql.tada
, which is mostly compatible with the expected syntax ofgraphql
calls.However, while getting this in users hands we noticed that a specific grammar that Prettier formats
graphql()
calls into fails to be matched by the Textmate grammar invscode-graphql-syntax
.Specifically, when a GraphQL string literal is placed on a new line, the
begin
pattern of the rules can't match. This is a limitation in Textmate grammars, as it turns out, and we can't even manually match\n
patterns.I'm not an expert at Textmate grammars, but, in theory, a grammar rule that matches GraphQL calls as a lookbehind, then matches the inner string literal separately, should do the trick.
Follow-up questions
Set of changes
begin
rule (DELETED CHANGE)graphql(...)
calls then matching string literals insideTODO: fix this
) and add more grammar checks for JS