Skip to content

Commit e502c41

Browse files
kittenkitten
authoredMar 1, 2024··
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
·
monaco-graphql@1.6.0cm6-graphql@0.0.14
1 parent dfe083a commit e502c41

File tree

7 files changed

+459
-216
lines changed

7 files changed

+459
-216
lines changed
 

‎.changeset/famous-games-begin.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'vscode-graphql-syntax': patch
3+
---
4+
5+
Fix TextMate grammar to support string literals that don’t immediately follow a function call's left-parenthesis (`(`).

‎packages/vscode-graphql-syntax/grammars/graphql.js.json

+23-26
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,33 @@
44
"patterns": [
55
{
66
"contentName": "meta.embedded.block.graphql",
7-
"begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*\\(?\\s*(`|')",
8-
"beginCaptures": {
9-
"1": {
10-
"name": "variable.other.class.js"
11-
},
12-
"2": {
13-
"name": "entity.name.function.tagged-template.js"
14-
},
15-
"3": {
16-
"name": "entity.name.function.tagged-template.js"
17-
},
18-
"4": {
19-
"name": "comment.graphql.js"
20-
},
21-
"5": {
22-
"name": "punctuation.definition.string.template.begin.js"
23-
}
24-
},
25-
"end": "(`|')",
26-
"endCaptures": {
27-
"0": {
28-
"name": "punctuation.definition.string.template.end.js"
29-
}
30-
},
7+
"begin": "(?<=(?:(?:Relay\\??\\.)QL|gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)\\(",
8+
"end": "\\)",
319
"patterns": [
3210
{
33-
"include": "source.graphql"
11+
"begin": "(`|')",
12+
"end": "(`|')",
13+
"beginCaptures": {
14+
"0": {
15+
"name": "punctuation.definition.string.template.begin.js"
16+
}
17+
},
18+
"endCaptures": {
19+
"0": {
20+
"name": "punctuation.definition.string.template.end.js"
21+
}
22+
},
23+
"patterns": [
24+
{
25+
"include": "source.graphql"
26+
}
27+
]
3428
}
3529
]
3630
},
3731
{
3832
"contentName": "meta.embedded.block.graphql",
39-
"begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*\\(?\\s*(?:<.*>)(`|')",
33+
"begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)|(/\\* GraphQL \\*/))\\s*(`|')",
4034
"beginCaptures": {
4135
"1": {
4236
"name": "variable.other.class.js"
@@ -48,6 +42,9 @@
4842
"name": "entity.name.function.tagged-template.js"
4943
},
5044
"4": {
45+
"name": "comment.graphql.js"
46+
},
47+
"5": {
5148
"name": "punctuation.definition.string.template.begin.js"
5249
}
5350
},

‎packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md

+44
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,50 @@ const Component = () => {
2626
};
2727
```
2828

29+
```js
30+
const variable = 1;
31+
32+
const queryA = graphql(`
33+
query {
34+
something(arg: ${variable})
35+
}
36+
`);
37+
38+
const queryB = graphql(
39+
`
40+
query {
41+
something(arg: ${variable})
42+
}
43+
`
44+
);
45+
46+
const queryC = graphql(
47+
'query { something(arg: ${variable}) }'
48+
);
49+
```
50+
51+
```ts
52+
const variable: number = 1;
53+
54+
const queryA = graphql(`
55+
query {
56+
something(arg: ${variable})
57+
}
58+
`);
59+
60+
const queryB = graphql(
61+
`
62+
query {
63+
something(arg: ${variable})
64+
}
65+
`
66+
);
67+
68+
const queryC = graphql(
69+
'query { something(arg: ${variable}) }'
70+
);
71+
```
72+
2973
### svelte
3074

3175
```svelte

‎packages/vscode-graphql-syntax/tests/__fixtures__/test.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,18 @@ const graphql = graphql(`
3737
}
3838
`);
3939

40+
const graphql = graphql(
41+
`
42+
query($id: ID!) { test }
43+
`,
44+
[var1, var2]
45+
);
46+
4047
const query = /* GraphQL */ 'query { id } ';
41-
const query = graphql('query { id } ');
48+
const query = graphql('query($id: ID!) { id } ');
49+
const query = graphql(
50+
'query($id: ID!) { test }'
51+
);
4252

4353
const queryWithInlineComment = `#graphql
4454
query {
@@ -59,7 +69,6 @@ const queryWithInlineComment = `#graphql
5969
}
6070
}
6171
`;
62-
// TODO: fix this
6372
const queryWithInlineComment = `
6473
#graphql
6574
query {

‎packages/vscode-graphql-syntax/tests/__fixtures__/test.ts

+19-1
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,27 @@ const query = graphql<SomeGeneric>`
2525
}
2626
`;
2727

28-
// TODO: Fix this
2928
const query = graphql<Generic>('query { id }');
3029

30+
const query = graphql(
31+
'query { id }'
32+
);
33+
34+
const query = graphql<Generic>(
35+
'query { id }'
36+
);
37+
38+
const query = graphql(`
39+
query { id }
40+
`);
41+
42+
const query = graphql(
43+
`
44+
query { id }
45+
`,
46+
[var1, var2]
47+
);
48+
3149
const queryWithInlineComment = `#graphql
3250
query {
3351
user(id: "5", name: boolean) {

‎packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap

+313-187
Large diffs are not rendered by default.

‎packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap

+44
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,50 @@ graphql\` |
107107
const Component = () => { |
108108
return <div> </div>; |
109109
}; |
110+
\`\`\` |
111+
|
112+
\`\`\`js |
113+
const variable = 1; |
114+
|
115+
const queryA = graphql(\` |
116+
query { |
117+
something(arg: \${variable}) |
118+
} |
119+
\`); |
120+
|
121+
const queryB = graphql( |
122+
\` |
123+
query { |
124+
something(arg: \${variable}) |
125+
} |
126+
\` |
127+
); |
128+
|
129+
const queryC = graphql( |
130+
'query { something(arg: \${variable}) }' |
131+
); |
132+
\`\`\` |
133+
|
134+
\`\`\`ts |
135+
const variable: number = 1; |
136+
|
137+
const queryA = graphql(\` |
138+
query { |
139+
something(arg: \${variable}) |
140+
} |
141+
\`); |
142+
|
143+
const queryB = graphql( |
144+
\` |
145+
query { |
146+
something(arg: \${variable}) |
147+
} |
148+
\` |
149+
); |
150+
|
151+
const queryC = graphql( |
152+
'query { something(arg: \${variable}) }' |
153+
); |
110154
\`\`\` |
111155
|
112156
### svelte |

0 commit comments

Comments
 (0)
Please sign in to comment.