fix(vscode-graphql-syntax): don't highlight .graphql() member calls as embedded GraphQL

.changeset/fix-graphql-method-highlight.md

@@ -0,0 +1,5 @@
+---
+'vscode-graphql-syntax': patch
+---
+
+Prevent GraphQL syntax highlighting from leaking into JavaScript and TypeScript after `.graphql()` member calls.

.oxfmtrc.json

@@ -6,7 +6,11 @@
   "proseWrap": "never",
   "printWidth": 80,
   "sortPackageJson": false,
-  "ignorePatterns": ["**/CHANGELOG.md", "working-group/agendas/**"],
+  "ignorePatterns": [
+    "**/CHANGELOG.md",
+    "working-group/agendas/**",
+    "packages/vscode-graphql-syntax/tests/__fixtures__/**"
+  ],
   "overrides": [
     {
       "files": ["*.md", "*.mdx"],

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

@@ -1,9 +1,9 @@
 {
   "scopeName": "inline.graphql",
-  "injectionSelector": "L:(meta.embedded.block.javascript | meta.embedded.block.typescript | source.js | source.ts | source.tsx | source.vue | source.svelte | source.astro | text.html.vue) -source.graphql -inline.graphql -string -comment",
+  "injectionSelector": "L:(meta.embedded.block.javascript | meta.embedded.block.typescript | source.js | source.ts | source.tsx | source.vue | source.svelte | source.astro | text.html.vue) -source.graphql -inline.graphql -string -comment -meta.function-call",
   "patterns": [
     {
-      "begin": "\\s*+(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*\\(",
+      "begin": "\\s*+(?:(Relay)\\??\\.)(QL)|(?<!\\.(?:\\s|/\\*[\\s\\S]*?\\*/|//[^\\r\\n]*(?:\\r?\\n|$))*)(?<![#$\\w])(gql|graphql|graphql\\.experimental)\\s*(?:(?<typeArguments><(?:\"(?:[^\"\\\\\\r\\n]|\\\\.)*\"|'(?:[^'\\\\\\r\\n]|\\\\.)*'|[^<>\"'\\r\\n]+|\\g<typeArguments>)*>))?\\s*\\(",
       "end": "\\)",
       "beginCaptures": {
         "1": {
@@ -57,7 +57,7 @@
     },
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)\\s*(?:<.*>)?\\s*)|(/\\* GraphQL \\*/))\\s*(`|')",
+      "begin": "\\s*+(?:(?:(?:(Relay)\\??\\.)(QL)|(?<!\\.(?:\\s|/\\*[\\s\\S]*?\\*/|//[^\\r\\n]*(?:\\r?\\n|$))*)(?<![#$\\w])(gql|graphql|graphql\\.experimental)\\s*(?:(?<typeArguments><(?:\"(?:[^\"\\\\\\r\\n]|\\\\.)*\"|'(?:[^'\\\\\\r\\n]|\\\\.)*'|[^<>\"'\\r\\n]+|\\g<typeArguments>)*>))?\\s*)|(/\\* GraphQL \\*/))\\s*(`|')",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -68,10 +68,10 @@
         "3": {
           "name": "entity.name.function.tagged-template.js"
         },
-        "4": {
+        "5": {
           "name": "comment.graphql.js"
         },
-        "5": {
+        "6": {
           "name": "punctuation.definition.string.template.begin.js"
         }
       },

packages/vscode-graphql-syntax/tests/__fixtures__/multiline-member.ts

@@ -0,0 +1,2 @@
+client.
+  graphql('query { id }');

packages/vscode-graphql-syntax/tests/__fixtures__/source.ts.json

@@ -0,0 +1,11 @@
+{
+  "scopeName": "source.ts.test",
+  "patterns": [
+    {
+      "name": "meta.function-call.ts",
+      "begin": "\\b[_$[:alpha:]][_$[:alnum:]]*\\.\\s*$",
+      "end": "(?=\\()",
+      "patterns": [{ "include": "$self" }]
+    }
+  ]
+}

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

@@ -101,3 +101,35 @@ const queryWithLeadingAboveComment =
       }
     }
   `;
+
+const response = await client.graphql(graphql, { issue });
+
+client. graphql(graphql, { issue });
+
+client./* comment */graphql(graphql, { issue });
+
+if (response) {
+  const afterAmplify = true;
+}
+
+foo.graphql();
+
+const afterMember = 'after';
+
+class PrivateGraphqlClient {
+  #graphql(query) {
+    return query;
+  }
+
+  execute() {
+    return this.#graphql('query { id }');
+  }
+}
+
+const afterPrivateMember = 'after';
+
+graphql.experimental(`query { id }`);
+
+obj.graphql.experimental(`query { id }`);
+
+const afterExperimental = true;

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

@@ -27,6 +27,14 @@ const query = graphql<SomeGeneric>`
 
 const query = graphql<Generic>('query { id }');
 
+const nestedQuery = graphql<Result<User>>('query { id }');
+
+const nestedTaggedQuery = graphql<Result<User>>`query { id }`;
+
+const quotedGenericQuery = graphql<{ operator: '>' }>('query { id }');
+
+const afterQuotedGeneric = 'after';
+
 const query = graphql('query { id }');
 
 const query = graphql<Generic>('query { id }');
@@ -61,3 +69,23 @@ const queryWithLeadingComment = /* GraphQL */ `
     }
   }
 `;
+
+const response = await client.graphql<Response>(graphql, { issue });
+
+client. graphql<Response>(graphql, { issue });
+
+client./* comment */graphql<Response>(graphql, { issue });
+
+if (response) {
+  const afterAmplify = true;
+}
+
+foo.graphql();
+
+const afterMember = 'after';
+
+graphql.experimental(`query { id }`);
+
+obj.graphql.experimental(`query { id }`);
+
+const afterExperimental = true;

packages/vscode-graphql-syntax/tests/__utilities__/utilities.ts

@@ -103,8 +103,14 @@ async function vscodeOnigurumaLib() {
 }
 
 function loadConfiguration() {
-  return packageJson.contributes.grammars.map(grammar => ({
-    ...grammar,
-    path: path.join(__dirname, '..', '..', grammar.path),
-  }));
+  return [
+    ...packageJson.contributes.grammars.map(grammar => ({
+      ...grammar,
+      path: path.join(__dirname, '..', '..', grammar.path),
+    })),
+    {
+      scopeName: 'source.ts.test',
+      path: path.join(__dirname, '..', '__fixtures__', 'source.ts.json'),
+    },
+  ];
 }

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

@@ -8,6 +8,17 @@ describe('inline.graphql grammar', () => {
     const result = await tokenizeFile('__fixtures__/test.ts', scope);
     expect(result).toMatchSnapshot();
   });
+  it('should not tokenize multiline member calls as GraphQL', async () => {
+    const result = await tokenizeFile(
+      '__fixtures__/multiline-member.ts',
+      'source.ts.test',
+    );
+    expect(
+      result.some(token =>
+        token.scopes.includes('meta.embedded.block.graphql'),
+      ),
+    ).toBe(false);
+  });
   it('should tokenize a simple ecmascript file', async () => {
     const result = await tokenizeFile('__fixtures__/test.js', scope);
     expect(result).toMatchSnapshot();

resources/custom-words.txt

@@ -254,3 +254,4 @@ wonka
 yoshiakis
 zdravo
 zustand
+alnum