graphql · dunnbobcat · Mar 4, 2025 · Mar 4, 2025 · Mar 16, 2025
diff --git a/.changeset/twelve-rings-sin.md b/.changeset/twelve-rings-sin.md
@@ -0,0 +1,5 @@
+---
+'vscode-graphql-syntax': minor
+---
+
+Added support for GraphQL embedded in Hack files
diff --git a/packages/vscode-graphql-syntax/README.md b/packages/vscode-graphql-syntax/README.md
@@ -12,6 +12,7 @@ matching.
 - PHP (example: [test.php](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.php))
 - Markdown (examples: [test.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.md) & [test-py.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md))
 - Scala (example: [test.scala](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.scala))
+- Hack (example: [test.hack](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.hack))
 
 You'll want to install this if you do not use `graphql-config`, or want to use
 the highlighting with other extensions than `vscode-graphql`

diff --git a/packages/vscode-graphql-syntax/grammars/graphql.hack.json b/packages/vscode-graphql-syntax/grammars/graphql.hack.json
@@ -0,0 +1,130 @@
+{
+  "scopeName": "inline.graphql.hack",
+  "injectionSelector": "L:(meta.embedded.block.hack | source.hack -string -comment)",
+  "patterns": [
+    {
+      "contentName": "meta.embedded.block.graphql",
+      "begin": "(<<<)\\s*(\"?)(GRAPHQL|GQL)(\\2)(\\s*)$",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.section.embedded.begin.php"
+        },
+        "1": {
+          "name": "punctuation.definition.string.php"
+        },
+        "3": {
+          "name": "keyword.operator.heredoc.php"
+        },
+        "5": {
+          "name": "invalid.illegal.trailing-whitespace.php"
+        }
+      },
+      "end": "^\\s*(\\3)(?![A-Za-z0-9_\\x{7f}-\\x{10ffff}])",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.embedded.end.php"
+        },
+        "1": {
+          "name": "keyword.operator.heredoc.php"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.graphql"
+        }
+      ]
+    },
+    {
+      "begin": "(<<<)\\s*'(GRAPHQL|GQL)'(\\s*)$",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.section.embedded.begin.php"
+        },
+        "1": {
+          "name": "punctuation.definition.string.php"
+        },
+        "2": {
+          "name": "keyword.operator.nowdoc.php"
+        },
+        "3": {
+          "name": "invalid.illegal.trailing-whitespace.php"
+        }
+      },
+      "contentName": "source.graphql",
+      "end": "^\\s*(\\2)(?![A-Za-z0-9_\\x{7f}-\\x{10ffff}])",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.embedded.end.php"
+        },
+        "1": {
+          "name": "keyword.operator.nowdoc.php"
+        }
+      },
+      "name": "meta.embedded.graphql",
+      "patterns": [
+        {
+          "include": "source.graphql"
+        }
+      ]
+    },
+    {
+      "begin": "(/\\*\\*\\s*(@lang\\s*GraphQL|Graphi?QL|graphql)\\s*\\*/)\\s*(')",
+      "beginCaptures": {
+        "1": {
+          "name": "punctuation.definition.comment.php"
+        },
+        "3": {
+          "name": "punctuation.definition.string.begin.php"
+        }
+      },
+      "contentName": "source.graphql",
+      "end": "'",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.definition.string.end.php"
+        }
+      },
+      "name": "meta.embedded.graphql",
+      "patterns": [
+        {
+          "include": "source.graphql"
+        }
+      ]
+    },
+    {
+      "begin": "((/\\*\\*|//)\\s*(@lang\\s*GraphQL|Graphi?QL|graphql)\\s*(\\*/)?)(\\s*)$",
+      "beginCaptures": {
+        "1": {
+          "name": "punctuation.definition.comment.php"
+        },
+        "5": {
+          "name": "invalid.illegal.trailing-whitespace.php"
+        }
+      },
+      "end": "(?<=')",
+      "patterns": [
+        {
+          "begin": "'",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.begin.php"
+            }
+          },
+          "contentName": "source.graphql",
+          "end": "'",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.end.php"
+            }
+          },
+          "name": "meta.embedded.graphql",
+          "patterns": [
+            {
+              "include": "source.graphql"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/vscode-graphql-syntax/package.json b/packages/vscode-graphql-syntax/package.json
@@ -143,6 +143,18 @@
         "embeddedLanguages": {
           "meta.embedded.block.graphql": "graphql"
         }
+      },
+      {
+        "injectTo": [
+          "source.hack",
+          "text.html.markdown",
+          "text.html.derivative"
+        ],
+        "scopeName": "inline.graphql.hack",
+        "path": "./grammars/graphql.hack.json",
+        "embeddedLanguages": {
+          "meta.embedded.block.graphql": "graphql"
+        }
       }
     ]
   },

diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.hack b/packages/vscode-graphql-syntax/tests/__fixtures__/test.hack
@@ -0,0 +1,17 @@
+<?hh
+
+$query = <<<GRAPHQL
+  query {
+    site {
+      name
+    }
+  }
+GRAPHQL;
+
+$query = /** @lang GraphQL */ '
+  query {
+    site {
+      name
+    }
+  }
+';
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/hack-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/hack-grammar.spec.ts.snap
@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`inline.graphql.hack grammar > should tokenize a simple hack file 1`] = `
+<?hh                 | 
+                     | 
+$query =             | 
+<<<                  | punctuation.section.embedded.begin.php punctuation.definition.string.php
+GRAPHQL              | punctuation.section.embedded.begin.php keyword.operator.heredoc.php
+                     | 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
+site                 | meta.embedded.block.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.selectionset.graphql
+name                 | 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
+GRAPHQL              | punctuation.section.embedded.end.php keyword.operator.heredoc.php
+;                    | 
+                     | 
+$query =             | 
+/** @lang GraphQL */ | meta.embedded.graphql punctuation.definition.comment.php
+                     | meta.embedded.graphql
+'                    | meta.embedded.graphql punctuation.definition.string.begin.php
+                     | meta.embedded.graphql source.graphql
+query                | meta.embedded.graphql source.graphql keyword.operation.graphql
+                     | meta.embedded.graphql source.graphql meta.selectionset.graphql
+{                    | meta.embedded.graphql source.graphql meta.selectionset.graphql punctuation.operation.graphql
+                     | meta.embedded.graphql source.graphql meta.selectionset.graphql
+site                 | meta.embedded.graphql source.graphql meta.selectionset.graphql variable.graphql
+                     | meta.embedded.graphql source.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                    | meta.embedded.graphql source.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                     | meta.embedded.graphql source.graphql meta.selectionset.graphql meta.selectionset.graphql
+name                 | meta.embedded.graphql source.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                     | meta.embedded.graphql source.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                    | meta.embedded.graphql source.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                     | meta.embedded.graphql source.graphql meta.selectionset.graphql
+}                    | meta.embedded.graphql source.graphql meta.selectionset.graphql punctuation.operation.graphql
+'                    | meta.embedded.graphql punctuation.definition.string.end.php
+;                    | 
+                     | 
+`;
diff --git a/packages/vscode-graphql-syntax/tests/hack-grammar.spec.ts b/packages/vscode-graphql-syntax/tests/hack-grammar.spec.ts
@@ -0,0 +1,10 @@
+import { tokenizeFile } from './__utilities__/utilities';
+
+describe('inline.graphql.hack grammar', () => {
+  const scope = 'inline.graphql.hack';
+
+  it('should tokenize a simple hack file', async () => {
+    const result = await tokenizeFile('__fixtures__/test.hack', scope);
+    expect(result).toMatchSnapshot();
+  });
+});