From 05537711da39baeef815c7f9032e989ab328cfaa Mon Sep 17 00:00:00 2001 From: "Bobcat (Ben Dunn)" Date: Tue, 4 Mar 2025 10:37:49 -0800 Subject: [PATCH 1/2] [vscode-graphql-syntax] Add support for GraphQL embedded in Hack files Summary: This adds support for GraphQL strings within Hack files, bootstrapped from the existing PHP version. I followed the steps outlined in the README. Test Plan: - `yarn test -u` from package root - `yarn vsce:package` and install resulting VSIX - Load `test.hack` in VS Code - Observe nice syntax highlighting for GraphQL --- packages/vscode-graphql-syntax/README.md | 1 + .../grammars/graphql.hack.json | 130 ++++++++++++++++++ packages/vscode-graphql-syntax/package.json | 12 ++ .../tests/__fixtures__/test.hack | 17 +++ .../__snapshots__/hack-grammar.spec.ts.snap | 47 +++++++ .../tests/hack-grammar.spec.ts | 10 ++ 6 files changed, 217 insertions(+) create mode 100644 packages/vscode-graphql-syntax/grammars/graphql.hack.json create mode 100644 packages/vscode-graphql-syntax/tests/__fixtures__/test.hack create mode 100644 packages/vscode-graphql-syntax/tests/__snapshots__/hack-grammar.spec.ts.snap create mode 100644 packages/vscode-graphql-syntax/tests/hack-grammar.spec.ts diff --git a/packages/vscode-graphql-syntax/README.md b/packages/vscode-graphql-syntax/README.md index 19643a53794..93e81946067 100644 --- 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 new file mode 100644 index 00000000000..662fe97c102 --- /dev/null +++ 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 index 18bd302d0a5..474244292ed 100644 --- 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 new file mode 100644 index 00000000000..33e5e2d2a1b --- /dev/null +++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.hack @@ -0,0 +1,17 @@ + should tokenize a simple hack file 1`] = ` + { + const scope = 'inline.graphql.hack'; + + it('should tokenize a simple hack file', async () => { + const result = await tokenizeFile('__fixtures__/test.hack', scope); + expect(result).toMatchSnapshot(); + }); +}); From db77a2c2497ffa53545c3f5bafc7956ee5915f6b Mon Sep 17 00:00:00 2001 From: "Bobcat (Ben Dunn)" Date: Tue, 4 Mar 2025 10:37:49 -0800 Subject: [PATCH 2/2] [vscode-graphql-syntax] Add support for GraphQL embedded in Hack files Summary: This adds support for GraphQL strings within Hack files, bootstrapped from the existing PHP version. I followed the steps outlined in the README. Test Plan: - `yarn test -u` from package root - `yarn vsce:package` and install resulting VSIX - Load `test.hack` in VS Code - Observe nice syntax highlighting for GraphQL --- .changeset/twelve-rings-sin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/twelve-rings-sin.md diff --git a/.changeset/twelve-rings-sin.md b/.changeset/twelve-rings-sin.md new file mode 100644 index 00000000000..fd45c1e3905 --- /dev/null +++ b/.changeset/twelve-rings-sin.md @@ -0,0 +1,5 @@ +--- +'vscode-graphql-syntax': minor +--- + +Added support for GraphQL embedded in Hack files