Adjust TS/JS regexp for Document detection, also adjust TextMate #179
Conversation
| } | ||
| `; | ||
|
|
||
| // syntax highlighting cannot work in all examples after this - textmate grammars don't work over multiple lines like this |
There was a problem hiding this comment.
While we cannot syntax highlight anything after that line, the other features will still work. We could disable them with stricter regular expressions, but I'm not sure if we should.
| Array [ | ||
| "Q1", | ||
| "Q2", | ||
| "Q3", | ||
| "Q4", | ||
| "Q6", | ||
| "Q8", | ||
| "Q9", | ||
| "Q10", |
There was a problem hiding this comment.
We just test that all queries in the fixture are found by looking at the name, and the documentName function also checks that there were no syntax errors in the document.
| # ^^^ source.ts meta.block.ts meta.var.expr.ts | ||
| # ^^^^^^^ source.ts meta.block.ts meta.var.expr.ts markup.italic | ||
| # ^^^^ source.ts meta.block.ts meta.var.expr.ts | ||
| # ^^^^^ source.ts meta.block.ts meta.var.expr.ts meta.embedded.block.graphql keyword.operation.graphql |
There was a problem hiding this comment.
This shows that everything above the ^^^ here was detected as both meta.embedded.block.graphql and keyword.operation.graphql
| # ^ source.ts meta.block.ts meta.var.expr.ts keyword.operator.assignment.ts | ||
| # ^ source.ts meta.block.ts meta.var.expr.ts | ||
| # ^^^ source.ts meta.block.ts meta.var.expr.ts | ||
| # ^^^^^^^ source.ts meta.block.ts meta.var.expr.ts markup.italic |
There was a problem hiding this comment.
I've chosen to make the word GraphQL in the /* GraphQL */ comment here italic to highlight that it does something.
| "name": "entity.name.function.tagged-template.js" | ||
| "name": "meta.embedded.block.graphql comment.line.graphql.js" | ||
| }, | ||
| "2": { | ||
| "name": "punctuation.definition.string.template.begin.js" |
There was a problem hiding this comment.
I did remove these entity.name.function.tagged-template.js and punctuation.definition.string.template.begin.js since we don't want our grammar to attack tokens and highlight those, but we want the parent language to add them.
Instead, for only this pattern, we add meta.embedded.block.graphql comment.line.graphql.js", as the source.graphql matcher will only start working between start and end pattern, but we also want the GraphQL in the start pattern to be properly highlighted.
The other patterns don't add capture names, apart from markup.italic on the word gql/graphql/GraphQL inside of comments.
| @@ -3,43 +3,40 @@ | |||
| "injectionSelector": "L:source -string -comment", | |||
| "patterns": [ | |||
There was a problem hiding this comment.
This is split into four patterns now instead of one pattern that kinda tries to capture everything with a monster RegExp.
| @@ -3,43 +3,40 @@ | |||
| "injectionSelector": "L:source -string -comment", | |||
| "patterns": [ | |||
| { | |||
| "name": "taggedTemplates", | |||
There was a problem hiding this comment.
That name was applied to all the captures, but didn't seem to do anything. It's optional, so I removed it.
| "contentName": "meta.embedded.block.graphql", | ||
| "begin": "(Relay\\.QL|gql|graphql(\\.experimental)?)\\(?(`)", | ||
| "begin": "(?:Relay\\.QL|gql|graphql(\\.experimental)?)\\s*(?:<.*?>\\s*)?`", |
There was a problem hiding this comment.
We now also allow for TypeScript generics here - (?:<.*?>\\s*)?.
That might come in handy if we add those in a future version of graphql-tag
Co-authored-by: Jerel Miller <[email protected]>
Before:
After:
Before:
After:
Before:
After:
Before:
After: