support for template strings with replacement expressions (#2111)

this adds some support for template strings with replacement expressions. this will get rid of the EOF parse error in many contexts when using replacements

they will be replaced by a blank whitespace character, newlines will remain intact

characters will be off for the same line

there are still some cases where daringly constructed template strings could break parsing for diagnostics, but in most common cases it should be fine!

.changeset/nasty-hornets-mix.md

@@ -0,0 +1,5 @@
+---
+'graphql-language-service-server': patch
+---
+
+Support template literals and tagged template literals with replacement expressions

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",

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';

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;
 }