Add injections for GraphQL template literals and function calls (#16368)

Affan Shahid created 1 year ago

This PR adds syntax highlighting support for `gql` and `graphql` tagged
literals. It also adds highlighting for `graphql()` and `gql()` function
calls, which are another common way to define queries.

Note: I am using the
[`graphql`](https://github.com/11bit/zed-extension-graphql) extension to
provide syntax highlighting

Before:
<img width="413" alt="image"
src="https://github.com/user-attachments/assets/114a98be-9790-4cdf-ba98-553f777ff08a">

After:
<img width="418" alt="image"
src="https://github.com/user-attachments/assets/98fc5dfd-d1a3-45c4-be8e-063cf68b6e6e">

Release Notes:

- Added syntax highlighting for `graphql` tagged template literals and
function calls in javascript, typescript and tsx languages.

Change summary

crates/languages/src/javascript/injections.scm | 11 +++++++++++
crates/languages/src/tsx/injections.scm        | 11 +++++++++++
crates/languages/src/typescript/injections.scm | 12 ++++++++++++
3 files changed, 34 insertions(+)

Detailed changes

crates/languages/src/javascript/injections.scm

@@ -47,3 +47,14 @@
                               (#set! "language" "yaml"))
 )
 
+(call_expression
+  function: (identifier) @_name (#match? @_name "^g(raph)?ql$")
+  arguments: (template_string (string_fragment) @content
+                              (#set! "language" "graphql"))
+)
+
+(call_expression
+  function: (identifier) @_name (#match? @_name "^g(raph)?ql$")
+  arguments: (arguments (template_string (string_fragment) @content
+                              (#set! "language" "graphql")))
+)

crates/languages/src/tsx/injections.scm

@@ -47,3 +47,14 @@
                               (#set! "language" "yaml"))
 )
 
+(call_expression
+  function: (identifier) @_name (#match? @_name "^g(raph)?ql$")
+  arguments: (template_string (string_fragment) @content
+                              (#set! "language" "graphql"))
+)
+
+(call_expression
+  function: (identifier) @_name (#match? @_name "^g(raph)?ql$")
+  arguments: (arguments (template_string (string_fragment) @content
+                              (#set! "language" "graphql")))
+)

crates/languages/src/typescript/injections.scm

@@ -50,3 +50,15 @@
   arguments: (template_string (string_fragment) @content
                               (#set! "language" "yaml"))
 )
+
+(call_expression
+  function: (identifier) @_name (#match? @_name "^g(raph)?ql$")
+  arguments: (template_string (string_fragment) @content
+                              (#set! "language" "graphql"))
+)
+
+(call_expression
+  function: (identifier) @_name (#match? @_name "^g(raph)?ql$")
+  arguments: (arguments (template_string (string_fragment) @content
+                              (#set! "language" "graphql")))
+)