From ce75cdd7369d0d0cfcf209cf07810eae18501814 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Thu, 25 Jan 2024 02:01:41 +0000
Subject: [PATCH 01/13] Allow newlines after `graphql(` before start of query
 string

---
 packages/vscode-graphql-syntax/grammars/graphql.js.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index 6d78e1c2818..297d4b26236 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -4,7 +4,7 @@
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*\\(?\\s*(`|'|\")",
+      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*(\\(\\s*[\\n\\s]*)?(`|'|\")",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"

From ba22e0358f1b89d3382e320eed6367f53839d1d5 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Thu, 25 Jan 2024 02:03:32 +0000
Subject: [PATCH 02/13] Fix mistaken reverse order of optional `(` and generic
 `<.*>`

---
 packages/vscode-graphql-syntax/grammars/graphql.js.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index 297d4b26236..eaeb93e52dd 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -36,7 +36,7 @@
     },
     {
       "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*\\(?\\s*(`|'|\")",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"

From af534aca7ab5a808c6cd9bc58aa2889c921148d4 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Thu, 25 Jan 2024 02:04:03 +0000
Subject: [PATCH 03/13] Replace `(` in second match with newline one

---
 packages/vscode-graphql-syntax/grammars/graphql.js.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index eaeb93e52dd..6c1f784284f 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -36,7 +36,7 @@
     },
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*(?:<.*>)\\s*\\(?\\s*(`|'|\")",
+      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*(?:<.*>)\\s*(\\(\\s*[\\n\\s]*)?(`|'|\")",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"

From 62f8746ce97991d7ede5c179d7035b618c79624f Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Fri, 26 Jan 2024 12:59:12 +0000
Subject: [PATCH 04/13] Match graphql calls separately for string literals
 inside calls

---
 .../grammars/graphql.js.json                  | 44 ++++++++-----------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index 6c1f784284f..7de6a94c044 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -4,39 +4,28 @@
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*(\\(\\s*[\\n\\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"
+            }
+          },
+          "patterns": [
+            {
+              "include": "source.graphql"
+            }
+          ]
         }
       ]
     },
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*(?:<.*>)\\s*(\\(\\s*[\\n\\s]*)?(`|'|\")",
+      "begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)|(/\\* GraphQL \\*/))\\s*(`|'|\")",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -48,6 +37,9 @@
           "name": "entity.name.function.tagged-template.js"
         },
         "4": {
+          "name": "comment.graphql.js"
+        },
+        "5": {
           "name": "punctuation.definition.string.template.begin.js"
         }
       },

From 3d615ca21aec673c0042e32eae75a9c6a680a8b4 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Fri, 26 Jan 2024 13:02:36 +0000
Subject: [PATCH 05/13] Add changeset

---
 .changeset/famous-games-begin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/famous-games-begin.md

diff --git a/.changeset/famous-games-begin.md b/.changeset/famous-games-begin.md
new file mode 100644
index 00000000000..e7a8255dc05
--- /dev/null
+++ 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 paranthesis (`(`).

From bac851b4cf0c108c69f64ad84ad9ba1318e9acfb Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Fri, 26 Jan 2024 13:12:12 +0000
Subject: [PATCH 06/13] Update snapshots

---
 .../__snapshots__/js-grammar.spec.ts.snap     | 382 +++++++++---------
 1 file changed, 196 insertions(+), 186 deletions(-)

diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
index f16fc4b554a..6571669ba22 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
@@ -108,11 +108,9 @@ something                              | meta.embedded.block.graphql meta.select
 \`                                      | punctuation.definition.string.template.end.js
 ;                                      | 
                                        | 
-const graphql =                        | 
-                                       | 
-graphql                                | entity.name.function.tagged-template.js
+const graphql = graphql                | 
 (                                      | 
-\`                                      | punctuation.definition.string.template.begin.js
+\`                                      | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
                                        | meta.embedded.block.graphql
 query                                  | meta.embedded.block.graphql keyword.operation.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
@@ -143,8 +141,9 @@ something                              | meta.embedded.block.graphql meta.select
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                                      | punctuation.definition.string.template.end.js
-);                                     | 
+\`                                      | meta.embedded.block.graphql
+)                                      | 
+;                                      | 
                                        | 
 const query =                          | 
                                        | 
@@ -161,11 +160,9 @@ id                                     | meta.embedded.block.graphql meta.select
                                        | meta.embedded.block.graphql
 '                                      | punctuation.definition.string.template.end.js
 ;                                      | 
-const query =                          | 
-                                       | 
-graphql                                | entity.name.function.tagged-template.js
+const query = graphql                  | 
 (                                      | 
-'                                      | punctuation.definition.string.template.begin.js
+'                                      | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
 query                                  | meta.embedded.block.graphql keyword.operation.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 {                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
@@ -174,8 +171,9 @@ id                                     | meta.embedded.block.graphql meta.select
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
                                        | meta.embedded.block.graphql
-'                                      | punctuation.definition.string.template.end.js
-);                                     | 
+'                                      | meta.embedded.block.graphql
+)                                      | 
+;                                      | 
                                        | 
 const queryWithInlineComment =         | 
 \`                                      | taggedTemplates punctuation.definition.string.template.begin.js
@@ -356,180 +354,192 @@ hello                  | meta.embedded.block.graphql meta.selectionset.graphql v
 `;
 
 exports[`inline.graphql grammar > should tokenize a simple typescript file 1`] = `
-/* eslint-disable */                            | 
-// @ts-nocheck                                  | 
-                                                | 
-gql                                             | entity.name.function.tagged-template.js
-\`                                               | punctuation.definition.string.template.begin.js
-                                                | meta.embedded.block.graphql
-query                                           | meta.embedded.block.graphql keyword.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                                               | punctuation.definition.string.template.end.js
-;                                               | 
-                                                | 
-graphql                                         | entity.name.function.tagged-template.js
-<SomeGeneric>                                   | 
-\`                                               | punctuation.definition.string.template.begin.js
-                                                | meta.embedded.block.graphql
-query                                           | meta.embedded.block.graphql keyword.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                                               | punctuation.definition.string.template.end.js
-;                                               | 
-                                                | 
-const query =                                   | 
-                                                | 
-graphql                                         | entity.name.function.tagged-template.js
-<SomeGeneric>                                   | 
-\`                                               | punctuation.definition.string.template.begin.js
-                                                | meta.embedded.block.graphql
-query                                           | meta.embedded.block.graphql keyword.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                                               | punctuation.definition.string.template.end.js
-;                                               | 
-                                                | 
-// TODO: Fix this                               | 
-const query = graphql<Generic>('query { id }'); | 
-                                                | 
-const queryWithInlineComment =                  | 
-\`                                               | taggedTemplates punctuation.definition.string.template.begin.js
-#graphql                                        | taggedTemplates comment.line.graphql.js
-                                                | taggedTemplates meta.embedded.block.graphql
-query                                           | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-{                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-user                                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                                              | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                                        | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-}                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                                               | taggedTemplates punctuation.definition.string.template.end.js
-;                                               | 
-                                                | 
-const queryWithLeadingComment =                 | 
-                                                | 
-/* GraphQL */                                   | comment.graphql.js
-                                                | 
-\`                                               | punctuation.definition.string.template.begin.js
-                                                | meta.embedded.block.graphql
-query                                           | meta.embedded.block.graphql keyword.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                                               | punctuation.definition.string.template.end.js
-;                                               | 
-                                                | 
+/* eslint-disable */            | 
+// @ts-nocheck                  | 
+                                | 
+gql                             | entity.name.function.tagged-template.js
+\`                               | punctuation.definition.string.template.begin.js
+                                | meta.embedded.block.graphql
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                               | punctuation.definition.string.template.end.js
+;                               | 
+                                | 
+graphql                         | entity.name.function.tagged-template.js
+<SomeGeneric>                   | 
+\`                               | punctuation.definition.string.template.begin.js
+                                | meta.embedded.block.graphql
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                               | punctuation.definition.string.template.end.js
+;                               | 
+                                | 
+const query =                   | 
+                                | 
+graphql                         | entity.name.function.tagged-template.js
+<SomeGeneric>                   | 
+\`                               | punctuation.definition.string.template.begin.js
+                                | meta.embedded.block.graphql
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                               | punctuation.definition.string.template.end.js
+;                               | 
+                                | 
+// TODO: Fix this               | 
+const query = graphql<Generic>  | 
+(                               | 
+'                               | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+'                               | meta.embedded.block.graphql
+)                               | 
+;                               | 
+                                | 
+const queryWithInlineComment =  | 
+\`                               | taggedTemplates punctuation.definition.string.template.begin.js
+#graphql                        | taggedTemplates comment.line.graphql.js
+                                | taggedTemplates meta.embedded.block.graphql
+query                           | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+{                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+user                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                              | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                        | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+}                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                               | taggedTemplates punctuation.definition.string.template.end.js
+;                               | 
+                                | 
+const queryWithLeadingComment = | 
+                                | 
+/* GraphQL */                   | comment.graphql.js
+                                | 
+\`                               | punctuation.definition.string.template.begin.js
+                                | meta.embedded.block.graphql
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                               | punctuation.definition.string.template.end.js
+;                               | 
+                                | 
 `;
 
 exports[`inline.graphql grammar > should tokenize a simple vue sfc comp file 1`] = `

From eae5fea5ea635521202d24e3e6ec1678674ecc49 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Fri, 26 Jan 2024 13:15:16 +0000
Subject: [PATCH 07/13] Add additional snapshot tests

---
 .../tests/__fixtures__/test.ts                |  9 +++++-
 .../__snapshots__/js-grammar.spec.ts.snap     | 31 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts b/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
index b8e507901b6..3b217653033 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
@@ -25,9 +25,16 @@ 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 queryWithInlineComment = `#graphql
  query {
         user(id: "5", name: boolean) {
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
index 6571669ba22..5827c9e8bbc 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
@@ -457,7 +457,6 @@ something                       | meta.embedded.block.graphql meta.selectionset.
 \`                               | punctuation.definition.string.template.end.js
 ;                               | 
                                 | 
-// TODO: Fix this               | 
 const query = graphql<Generic>  | 
 (                               | 
 '                               | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
@@ -470,6 +469,36 @@ id                              | meta.embedded.block.graphql meta.selectionset.
 }                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
 '                               | meta.embedded.block.graphql
 )                               | 
+;                               | 
+                                | 
+const query = graphql           | 
+(                               | 
+                                | meta.embedded.block.graphql
+'                               | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+'                               | meta.embedded.block.graphql
+)                               | 
+;                               | 
+                                | 
+const query = graphql<Generic>  | 
+(                               | 
+                                | meta.embedded.block.graphql
+'                               | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+'                               | meta.embedded.block.graphql
+)                               | 
 ;                               | 
                                 | 
 const queryWithInlineComment =  | 

From f8469c23324ed18a1441c8c0bec91e0d054c3b85 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Fri, 26 Jan 2024 13:22:56 +0000
Subject: [PATCH 08/13] Add missing endCaptures to new rule

---
 .../vscode-graphql-syntax/grammars/graphql.js.json     |  5 +++++
 .../tests/__snapshots__/js-grammar.spec.ts.snap        | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index 7de6a94c044..c1f08159744 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -15,6 +15,11 @@
               "name": "punctuation.definition.string.template.begin.js"
             }
           },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.template.end.js"
+            }
+          },
           "patterns": [
             {
               "include": "source.graphql"
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
index 5827c9e8bbc..1f3306adb58 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
@@ -141,7 +141,7 @@ something                              | meta.embedded.block.graphql meta.select
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                                      | meta.embedded.block.graphql
+\`                                      | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                                      | 
 ;                                      | 
                                        | 
@@ -171,7 +171,7 @@ id                                     | meta.embedded.block.graphql meta.select
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
                                        | meta.embedded.block.graphql
-'                                      | meta.embedded.block.graphql
+'                                      | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                                      | 
 ;                                      | 
                                        | 
@@ -467,7 +467,7 @@ query                           | meta.embedded.block.graphql keyword.operation.
 id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
                                 | meta.embedded.block.graphql meta.selectionset.graphql
 }                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-'                               | meta.embedded.block.graphql
+'                               | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                               | 
 ;                               | 
                                 | 
@@ -482,7 +482,7 @@ query                           | meta.embedded.block.graphql keyword.operation.
 id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
                                 | meta.embedded.block.graphql meta.selectionset.graphql
 }                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-'                               | meta.embedded.block.graphql
+'                               | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                               | 
 ;                               | 
                                 | 
@@ -497,7 +497,7 @@ query                           | meta.embedded.block.graphql keyword.operation.
 id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
                                 | meta.embedded.block.graphql meta.selectionset.graphql
 }                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-'                               | meta.embedded.block.graphql
+'                               | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                               | 
 ;                               | 
                                 | 

From 133b2af93adb16ca4b089e397f1c45fee5fda9bb Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Fri, 26 Jan 2024 13:26:30 +0000
Subject: [PATCH 09/13] Expand test and remove outdated comment

---
 .../tests/__fixtures__/test.js                   |  4 +++-
 .../tests/__snapshots__/js-grammar.spec.ts.snap  | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
index 4c74f4045fc..114072dc005 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
@@ -38,6 +38,9 @@ const graphql = graphql(`
 
 const query = /* GraphQL */ 'query { id } ';
 const query = graphql('query { id } ');
+const query = graphql(
+  'query { id } '
+);
 
 const queryWithInlineComment = `#graphql
  query {
@@ -58,7 +61,6 @@ const queryWithInlineComment = `#graphql
         }
     }
 `;
-// TODO: fix this
 const queryWithInlineComment = `
 #graphql
  query {
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
index 1f3306adb58..292dce5c664 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
@@ -173,6 +173,21 @@ id                                     | meta.embedded.block.graphql meta.select
                                        | meta.embedded.block.graphql
 '                                      | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                                      | 
+;                                      | 
+const query = graphql                  | 
+(                                      | 
+                                       | meta.embedded.block.graphql
+'                                      | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql
+'                                      | meta.embedded.block.graphql punctuation.definition.string.template.end.js
+)                                      | 
 ;                                      | 
                                        | 
 const queryWithInlineComment =         | 
@@ -270,7 +285,6 @@ something                              | taggedTemplates meta.embedded.block.gra
 }                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
 \`                                      | taggedTemplates punctuation.definition.string.template.end.js
 ;                                      | 
-// TODO: fix this                      | 
 const queryWithInlineComment = \`       | 
 #graphql                               | 
  query {                               | 

From 057f22e378bd74d13928917b1541c81704aa94e7 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Sun, 28 Jan 2024 09:46:15 +0000
Subject: [PATCH 10/13] Add additional tests for original test samples

---
 .../tests/__fixtures__/test.js                |  7 +++
 .../tests/__fixtures__/test.ts                | 11 ++++
 .../__snapshots__/js-grammar.spec.ts.snap     | 53 +++++++++++++++++++
 3 files changed, 71 insertions(+)

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
index 114072dc005..709c37f8a1d 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
@@ -36,6 +36,13 @@ const graphql = graphql(`
   }
 `);
 
+const graphql = graphql(
+  `
+    query { test }
+  `,
+  [var1, var2]
+);
+
 const query = /* GraphQL */ 'query { id } ';
 const query = graphql('query { id } ');
 const query = graphql(
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts b/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
index 3b217653033..5ae8cefaad3 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
@@ -35,6 +35,17 @@ 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) {
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
index 292dce5c664..7f7067ef4d5 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
@@ -143,6 +143,25 @@ something                              | meta.embedded.block.graphql meta.select
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
 \`                                      | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                                      | 
+;                                      | 
+                                       | 
+const graphql = graphql                | 
+(                                      | 
+                                       | meta.embedded.block.graphql
+\`                                      | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
+                                       | meta.embedded.block.graphql
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+test                                   | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql
+\`                                      | meta.embedded.block.graphql punctuation.definition.string.template.end.js
+,                                      | meta.embedded.block.graphql
+  [var1, var2]                         | meta.embedded.block.graphql
+)                                      | 
 ;                                      | 
                                        | 
 const query =                          | 
@@ -513,6 +532,40 @@ id                              | meta.embedded.block.graphql meta.selectionset.
 }                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
 '                               | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                               | 
+;                               | 
+                                | 
+const query = graphql           | 
+(                               | 
+\`                               | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
+                                | meta.embedded.block.graphql
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                               | meta.embedded.block.graphql punctuation.definition.string.template.end.js
+)                               | 
+;                               | 
+                                | 
+const query = graphql           | 
+(                               | 
+                                | meta.embedded.block.graphql
+\`                               | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
+                                | meta.embedded.block.graphql
+query                           | meta.embedded.block.graphql keyword.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+id                              | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                | meta.embedded.block.graphql
+\`                               | meta.embedded.block.graphql punctuation.definition.string.template.end.js
+,                               | meta.embedded.block.graphql
+  [var1, var2]                  | meta.embedded.block.graphql
+)                               | 
 ;                               | 
                                 | 
 const queryWithInlineComment =  | 

From 90be966092a5e070eced75d05b1800f323309c71 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Mon, 29 Jan 2024 17:30:43 +0000
Subject: [PATCH 11/13] Update famous-games-begin.md

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>
---
 .changeset/famous-games-begin.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/famous-games-begin.md b/.changeset/famous-games-begin.md
index e7a8255dc05..ae10f9af58d 100644
--- a/.changeset/famous-games-begin.md
+++ b/.changeset/famous-games-begin.md
@@ -2,4 +2,4 @@
 'vscode-graphql-syntax': patch
 ---
 
-Fix Textmate grammar to support string literals that don’t immediately follow a function call paranthesis (`(`).
+Fix TextMate grammar to support string literals that don’t immediately follow a function call's left-parenthesis (`(`).

From 50d8e3cef901023024e107d4d4b1235180360be2 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Sun, 4 Feb 2024 16:17:37 +0000
Subject: [PATCH 12/13] Update snapshots

---
 .../grammars/graphql.js.json                  | 12 +++++-----
 .../tests/__fixtures__/test.js                |  6 ++---
 .../__snapshots__/js-grammar.spec.ts.snap     | 24 +++++++++++++++++--
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index d6555b94b32..89704e30495 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -8,8 +8,8 @@
       "end": "\\)",
       "patterns": [
         {
-          "begin": "[`']",
-          "end": "[`']",
+          "begin": "(`|')",
+          "end": "(`|')",
           "beginCaptures": {
             "0": {
               "name": "punctuation.definition.string.template.begin.js"
@@ -30,7 +30,7 @@
     },
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)|(/\\* GraphQL \\*/))\\s*[`']",
+      "begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)|(/\\* GraphQL \\*/))\\s*(`|')",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -48,7 +48,7 @@
           "name": "punctuation.definition.string.template.begin.js"
         }
       },
-      "end": "[`']",
+      "end": "(`|')",
       "endCaptures": {
         "0": {
           "name": "punctuation.definition.string.template.end.js"
@@ -63,7 +63,7 @@
     {
       "name": "taggedTemplates",
       "contentName": "meta.embedded.block.graphql",
-      "begin": "[`'](#graphql)",
+      "begin": "(`|')(#graphql)",
       "beginCaptures": {
         "1": {
           "name": "punctuation.definition.string.template.begin.js"
@@ -72,7 +72,7 @@
           "name": "comment.line.graphql.js"
         }
       },
-      "end": "[`']",
+      "end": "(`|')",
       "endCaptures": {
         "0": {
           "name": "punctuation.definition.string.template.end.js"
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
index f392e3cc564..616f41dd27e 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
@@ -39,15 +39,15 @@ const graphql = graphql(`
 
 const graphql = graphql(
   `
-    query { test }
+    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 } '
+  'query($id: ID!) { test }'
 );
 
 const queryWithInlineComment = `#graphql
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
index cedce912e99..3921a4178b3 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
@@ -155,6 +155,13 @@ const graphql = graphql                |
 \`                                      | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
                                        | meta.embedded.block.graphql
 query                                  | meta.embedded.block.graphql keyword.operation.graphql
+(                                      | meta.embedded.block.graphql meta.brace.round.graphql
+$id                                    | meta.embedded.block.graphql meta.variables.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.variables.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.variables.graphql
+ID                                     | meta.embedded.block.graphql meta.variables.graphql support.type.builtin.graphql
+!                                      | meta.embedded.block.graphql meta.variables.graphql keyword.operator.nulltype.graphql
+)                                      | meta.embedded.block.graphql meta.brace.round.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 {                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
@@ -187,6 +194,13 @@ const query = graphql                  |
 (                                      | 
 '                                      | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
 query                                  | meta.embedded.block.graphql keyword.operation.graphql
+(                                      | meta.embedded.block.graphql meta.brace.round.graphql
+$id                                    | meta.embedded.block.graphql meta.variables.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.variables.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.variables.graphql
+ID                                     | meta.embedded.block.graphql meta.variables.graphql support.type.builtin.graphql
+!                                      | meta.embedded.block.graphql meta.variables.graphql keyword.operator.nulltype.graphql
+)                                      | meta.embedded.block.graphql meta.brace.round.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 {                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
@@ -202,13 +216,19 @@ const query = graphql                  |
                                        | meta.embedded.block.graphql
 '                                      | meta.embedded.block.graphql punctuation.definition.string.template.begin.js
 query                                  | meta.embedded.block.graphql keyword.operation.graphql
+(                                      | meta.embedded.block.graphql meta.brace.round.graphql
+$id                                    | meta.embedded.block.graphql meta.variables.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.variables.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.variables.graphql
+ID                                     | meta.embedded.block.graphql meta.variables.graphql support.type.builtin.graphql
+!                                      | meta.embedded.block.graphql meta.variables.graphql keyword.operator.nulltype.graphql
+)                                      | meta.embedded.block.graphql meta.brace.round.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 {                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
-id                                     | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+test                                   | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
                                        | meta.embedded.block.graphql meta.selectionset.graphql
 }                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                       | meta.embedded.block.graphql
 '                                      | meta.embedded.block.graphql punctuation.definition.string.template.end.js
 )                                      | 
 ;                                      | 

From 84777a2ffff2450dcf95272ac64c1432d9e4c176 Mon Sep 17 00:00:00 2001
From: Phil Pluckthun <phil@kitten.sh>
Date: Wed, 21 Feb 2024 21:41:40 +0000
Subject: [PATCH 13/13] Extend test-js.md

---
 .../tests/__fixtures__/test-js.md             | 44 +++++++++++++++++++
 .../markdown-grammar.spec.ts.snap             | 44 +++++++++++++++++++
 2 files changed, 88 insertions(+)

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md b/packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md
index 76601d15497..71ab2138dda 100644
--- 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/__snapshots__/markdown-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap
index cb1a88a0b80..02b0aafc8b8 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap
@@ -107,6 +107,50 @@ graphql\`                                             |
 const Component = () => {                            | 
   return <div> </div>;                               | 
 };                                                   | 
+\`\`\`                                                  | 
+                                                     | 
+\`\`\`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                                           |