fix: script offset if vue-sfc contains template above (#3135)

Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>
graphql · May 10, 2023 · 28b1b5a · 28b1b5a
1 parent 707f3cb
commit 28b1b5a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/.changeset/thin-poems-search.md b/.changeset/thin-poems-search.md
@@ -0,0 +1,5 @@
+---
+'graphql-language-service-server': patch
+---
+
+fixed wrong script tag offset for vue-sfc
diff --git a/packages/graphql-language-service-server/src/__tests__/findGraphQLTags-test.ts b/packages/graphql-language-service-server/src/__tests__/findGraphQLTags-test.ts
@@ -238,6 +238,25 @@ query {id}
     const contents = findGraphQLTags(text, '.vue');
     expect(contents[0].template).toEqual(`
 query {id}`);
+    expect(contents[0].range.start.line).toEqual(2);
+    expect(contents[0].range.end.line).toEqual(4);
+  });
+
+  it('finds queries in tagged templates in Vue SFC using <script setup> and template above', async () => {
+    const text = `<template>
+      <div/>
+    </template>
+<script setup lang="ts">
+gql\`
+query {id}
+\`;
+</script>
+`;
+    const contents = findGraphQLTags(text, '.vue');
+    expect(contents[0].template).toEqual(`
+query {id}`);
+    expect(contents[0].range.start.line).toEqual(4);
+    expect(contents[0].range.end.line).toEqual(6);
   });
 
   it('finds queries in tagged templates in Vue SFC using normal <script>', async () => {
@@ -251,6 +270,25 @@ query {id}
     const contents = findGraphQLTags(text, '.vue');
     expect(contents[0].template).toEqual(`
 query {id}`);
+    expect(contents[0].range.start.line).toEqual(2);
+    expect(contents[0].range.end.line).toEqual(4);
+  });
+
+  it('finds queries in tagged templates in Vue SFC using normal <script> and template above', async () => {
+    const text = `<template>
+    <div/>
+  </template>
+<script lang="ts">
+gql\`
+query {id}
+\`;
+</script>
+`;
+    const contents = findGraphQLTags(text, '.vue');
+    expect(contents[0].template).toEqual(`
+query {id}`);
+    expect(contents[0].range.start.line).toEqual(4);
+    expect(contents[0].range.end.line).toEqual(6);
   });
 
   it('finds queries in tagged templates in Vue SFC using <script lang="tsx">', async () => {

diff --git a/packages/graphql-language-service-server/src/findGraphQLTags.ts b/packages/graphql-language-service-server/src/findGraphQLTags.ts
@@ -76,6 +76,7 @@ type ParseVueSFCResult =
   | { type: 'error'; errors: Error[] }
   | {
       type: 'ok';
+      scriptOffset: number;
       scriptSetupAst?: import('@babel/types').Statement[];
       scriptAst?: import('@babel/types').Statement[];
     };
@@ -98,13 +99,15 @@ function parseVueSFC(source: string): ParseVueSFCResult {
         type: 'ok',
         scriptSetupAst: [],
         scriptAst: [],
+        scriptOffset: 0
       };
     }
     return { type: 'error', errors: [error as Error] };
   }
 
   return {
     type: 'ok',
+    scriptOffset: scriptBlock.loc.start.line - 1,
     scriptSetupAst: scriptBlock?.scriptSetupAst,
     scriptAst: scriptBlock?.scriptAst,
   };
@@ -124,6 +127,8 @@ export function findGraphQLTags(
 
   let parsedASTs: { [key: string]: any }[] = [];
 
+  let scriptOffset = 0;
+
   if (isVueLike) {
     const parseVueSFCResult = parseVueSFC(text);
     if (parseVueSFCResult.type === 'error') {
@@ -142,6 +147,8 @@ export function findGraphQLTags(
     if (parseVueSFCResult.scriptSetupAst !== undefined) {
       parsedASTs.push(...parseVueSFCResult.scriptSetupAst);
     }
+
+    scriptOffset = parseVueSFCResult.scriptOffset;
   } else {
     const isTypeScript = ['.ts', '.tsx', '.cts', '.mts'].includes(ext);
     if (isTypeScript) {
@@ -179,9 +186,10 @@ export function findGraphQLTags(
           ? 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),
+        new Position(loc.start.line - 1 + scriptOffset, loc.start.column),
+        new Position(loc.end.line - 1 + scriptOffset, loc.end.column),
       );
+
       result.push({
         tag: '',
         template,
@@ -226,8 +234,8 @@ export function findGraphQLTags(
         }
         if (loc) {
           const range = new Range(
-            new Position(loc.start.line - 1, loc.start.column),
-            new Position(loc.end.line - 1, loc.end.column),
+            new Position(loc.start.line - 1 + scriptOffset, loc.start.column),
+            new Position(loc.end.line - 1 + scriptOffset, loc.end.column),
           );
 
           result.push({