From 28b1b5a016787ec4119d28f057a9d93814d4e310 Mon Sep 17 00:00:00 2001
From: puelo <tobias-ka@gmx.de>
Date: Wed, 10 May 2023 18:30:39 +0200
Subject: [PATCH] fix: script offset if vue-sfc contains template above (#3135)

Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>
---
 .changeset/thin-poems-search.md               |  5 +++
 .../src/__tests__/findGraphQLTags-test.ts     | 38 +++++++++++++++++++
 .../src/findGraphQLTags.ts                    | 16 ++++++--
 3 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/thin-poems-search.md

diff --git a/.changeset/thin-poems-search.md b/.changeset/thin-poems-search.md
new file mode 100644
index 00000000000..23bac05937a
--- /dev/null
+++ 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
index fbc9966f79e..cab838fae88 100644
--- 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
index 7f738dbc19a..f1db5397e68 100644
--- 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,6 +99,7 @@ function parseVueSFC(source: string): ParseVueSFCResult {
         type: 'ok',
         scriptSetupAst: [],
         scriptAst: [],
+        scriptOffset: 0
       };
     }
     return { type: 'error', errors: [error as Error] };
@@ -105,6 +107,7 @@ function parseVueSFC(source: string): ParseVueSFCResult {
 
   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({