fix: Fix vscode-graphql-syntax’s grammar to support string literals o…

…n 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
graphql · Mar 1, 2024 · e502c41 · e502c41
1 parent dfe083a
commit e502c41
Show file tree

Hide file tree

Showing 7 changed files with 459 additions and 216 deletions.
diff --git a/.changeset/famous-games-begin.md b/.changeset/famous-games-begin.md
@@ -0,0 +1,5 @@
+---
+'vscode-graphql-syntax': patch
+---
+
+Fix TextMate grammar to support string literals that don’t immediately follow a function call's left-parenthesis (`(`).
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -4,39 +4,33 @@
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*\\(?\\s*(`|')",
-      "beginCaptures": {
-        "1": {
-          "name": "variable.other.class.js"
-        },
-        "2": {
-          "name": "entity.name.function.tagged-template.js"
-        },
-        "3": {
-          "name": "entity.name.function.tagged-template.js"
-        },
-        "4": {
-          "name": "comment.graphql.js"
-        },
-        "5": {
-          "name": "punctuation.definition.string.template.begin.js"
-        }
-      },
-      "end": "(`|')",
-      "endCaptures": {
-        "0": {
-          "name": "punctuation.definition.string.template.end.js"
-        }
-      },
+      "begin": "(?<=(?:(?:Relay\\??\\.)QL|gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)\\(",
+      "end": "\\)",
       "patterns": [
         {
-          "include": "source.graphql"
+          "begin": "(`|')",
+          "end": "(`|')",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.template.begin.js"
+            }
+          },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.template.end.js"
+            }
+          },
+          "patterns": [
+            {
+              "include": "source.graphql"
+            }
+          ]
         }
       ]
     },
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*\\(?\\s*(?:<.*>)(`|')",
+      "begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)|(/\\* GraphQL \\*/))\\s*(`|')",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -48,6 +42,9 @@
           "name": "entity.name.function.tagged-template.js"
         },
         "4": {
+          "name": "comment.graphql.js"
+        },
+        "5": {
           "name": "punctuation.definition.string.template.begin.js"
         }
       },

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md b/packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md
@@ -26,6 +26,50 @@ const Component = () => {
 };
 ```
 
+```js
+const variable = 1;
+
+const queryA = graphql(`
+  query {
+    something(arg: ${variable})
+  }
+`);
+
+const queryB = graphql(
+  `
+    query {
+      something(arg: ${variable})
+    }
+  `
+);
+
+const queryC = graphql(
+  'query { something(arg: ${variable}) }'
+);
+```
+
+```ts
+const variable: number = 1;
+
+const queryA = graphql(`
+  query {
+    something(arg: ${variable})
+  }
+`);
+
+const queryB = graphql(
+  `
+    query {
+      something(arg: ${variable})
+    }
+  `
+);
+
+const queryC = graphql(
+  'query { something(arg: ${variable}) }'
+);
+```
+
 ### svelte
 
 ```svelte

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
@@ -37,8 +37,18 @@ const graphql = graphql(`
   }
 `);
 
+const graphql = graphql(
+  `
+    query($id: ID!) { test }
+  `,
+  [var1, var2]
+);
+
 const query = /* GraphQL */ 'query { id } ';
-const query = graphql('query { id } ');
+const query = graphql('query($id: ID!) { id } ');
+const query = graphql(
+  'query($id: ID!) { test }'
+);
 
 const queryWithInlineComment = `#graphql
  query {
@@ -59,7 +69,6 @@ const queryWithInlineComment = `#graphql
         }
     }
 `;
-// TODO: fix this
 const queryWithInlineComment = `
 #graphql
  query {

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts b/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
@@ -25,9 +25,27 @@ const query = graphql<SomeGeneric>`
   }
 `;
 
-// TODO: Fix this
 const query = graphql<Generic>('query { id }');
 
+const query = graphql(
+  'query { id }'
+);
+
+const query = graphql<Generic>(
+  'query { id }'
+);
+
+const query = graphql(`
+  query { id }
+`);
+
+const query = graphql(
+  `
+    query { id }
+  `,
+  [var1, var2]
+);
+
 const queryWithInlineComment = `#graphql
  query {
         user(id: "5", name: boolean) {