support for templates with replacement expressions

this adds support for template strings with variable replacement expressions. they will be replaced by a blank whitespace chracter. characters *will* be off for the same line
graphql · acao · Dec 9, 2021 · Dec 9, 2021 · Dec 9, 2021 · 3aa6c6dec9399035391679816e02e87a1d7f663f
commit 3aa6c6dec9399035391679816e02e87a1d7f663f
diff --git a/.changeset/nasty-hornets-mix.md b/.changeset/nasty-hornets-mix.md
@@ -0,0 +1,5 @@
+---
+'graphql-language-service-server': patch
+---
+
+Support template literals and tagged template literals with replacement expressions
diff --git a/packages/graphql-language-service-server/package.json b/packages/graphql-language-service-server/package.json
@@ -30,6 +30,7 @@
     "graphql": "^15.5.0 || ^16.0.0"
   },
   "dependencies": {
+    "@babel/types": "^7.16.0",
     "@babel/parser": "^7.13.13",
     "dotenv": "8.2.0",
     "graphql-config": "^4.1.0",

diff --git a/packages/graphql-language-service-server/src/__tests__/MessageProcessor-test.ts b/packages/graphql-language-service-server/src/__tests__/MessageProcessor-test.ts
@@ -442,6 +442,106 @@ query Test {
 `);
   });
 
+  it('parseDocument finds queries in multi-expression tagged templates using tsx', async () => {
+    const text = `
+import {gql} from 'react-apollo';
+import {B} from 'B';
+import A from './A';
+const someValue = 'value'
+const QUERY: string = gql\`
+query Test {
+  test {
+    value
+    $\{someValue}
+    ...FragmentsComment
+  }
+  $\{someValue}
+}\`
+
+export function Example(arg: string) {
+  return <div>{QUERY}</div>
+}`;
+
+    const contents = parseDocument(text, 'test.tsx');
+    expect(contents[0].query).toEqual(`
+query Test {
+  test {
+    value
+
+    ...FragmentsComment
+  }
+
+}`);
+  });
+  // TODO: why an extra line here?
+  it('parseDocument finds queries in multi-expression tagged template with declarations with using tsx', async () => {
+    const text = `
+import {gql} from 'react-apollo';
+import {B} from 'B';
+import A from './A';
+const someValue = 'value'
+type SomeType = { test: any }
+const QUERY: string = gql<SomeType>\`
+query Test {
+  test {
+    value
+    $\{someValue}
+    ...FragmentsComment
+  }
+  $\{someValue}
+}\`
+
+export function Example(arg: string) {
+  return <div>{QUERY}</div>
+}`;
+
+    const contents = parseDocument(text, 'test.tsx');
+    expect(contents[0].query).toEqual(`
+query Test {
+  test {
+    value
+
+    ...FragmentsComment
+  }
+
+}`);
+  });
+
+  it('parseDocument finds queries in multi-expression template strings using tsx', async () => {
+    const text = `
+import {gql} from 'react-apollo';
+import {B} from 'B';
+import A from './A';
+const someValue = 'value'
+const QUERY: string =
+/* GraphQL */
+\`
+query Test {
+  test {
+    value
+    \${someValue}
+    ...FragmentsComment
+  }
+}
+\${A.fragments.test}
+\`
+
+export function Example(arg: string) {
+  return <div>{QUERY}</div>
+}`;
+
+    const contents = parseDocument(text, 'test.tsx');
+    expect(contents[0].query).toEqual(`
+query Test {
+  test {
+    value
+
+    ...FragmentsComment
+  }
+}
+`);
+  });
+
   it('parseDocument finds queries in #graphql-annotated templates', async () => {
     const text = `
 import {gql} from 'react-apollo';

diff --git a/packages/graphql-language-service-server/src/findGraphQLTags.ts b/packages/graphql-language-service-server/src/findGraphQLTags.ts
@@ -136,6 +136,7 @@ export function findGraphQLTags(text: string, ext: string): TagResult[] {
                 new Position(loc.start.line - 1, loc.start.column),
                 new Position(loc.end.line - 1, loc.end.column),
               );
+
               result.push({
                 tag: tagName,
                 template,
@@ -154,14 +155,27 @@ export function findGraphQLTags(text: string, ext: string): TagResult[] {
       const tagName = getGraphQLTagName(node.tag);
       if (tagName) {
         const loc = node.quasi.quasis[0].loc;
+        const template =
+          node.quasi.quasis.length > 1
+            ? node.quasi.quasis.map(quasi => quasi.value.raw).join('')
+            : node.quasi.quasis[0].value.raw;
+        if (loc && node.quasi.quasis.length > 1) {
+          const last = node.quasi.quasis.pop();
+          if (last?.loc?.end) {
+            loc.end = last.loc.end;
+          }
+        }
         if (loc) {
           const range = new Range(
             new Position(loc.start.line - 1, loc.start.column),
             new Position(loc.end.line - 1, loc.end.column),
           );
+
           result.push({
             tag: tagName,
-            template: node.quasi.quasis[0].value.raw,
+            template: template.endsWith('\n')
+              ? template.slice(0, template.length - 1)
+              : template,
             range,
           });
         }
@@ -177,20 +191,31 @@ export function findGraphQLTags(text: string, ext: string): TagResult[] {
       if (hasGraphQLPrefix || hasGraphQLComment) {
         const loc = node.quasis[0].loc;
         if (loc) {
+          if (node.quasis.length > 1) {
+            const last = node.quasis.pop();
+            if (last?.loc?.end) {
+              loc.end = last.loc.end;
+            }
+          }
+          const template =
+            node.quasis.length > 1
+              ? node.quasis.map(quasi => quasi.value.raw).join('')
+              : node.quasis[0].value.raw;
           const range = new Range(
             new Position(loc.start.line - 1, loc.start.column),
             new Position(loc.end.line - 1, loc.end.column),
           );
           result.push({
             tag: '',
-            template: node.quasis[0].value.raw,
+            template,
             range,
           });
         }
       }
     },
   };
   visit(ast, visitors);
+
   return result;
 }