From 9862aafbf792f4268a3a291cc952d09de5c657db Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Tue, 27 Dec 2022 19:05:03 +0100
Subject: [PATCH] report errors on first character for `*.vue`/`*.svelte` code,
 due graphql-tag-pluck limitation we can't know right location

---
 .changeset/breezy-walls-invent.md             |  5 ++
 .vscode/launch.json                           |  2 +-
 .vscode/settings.json                         |  9 +++
 examples/vue-code-file/test.vue               |  3 +
 packages/plugin/src/processor.ts              | 24 +++++--
 .../tests/__snapshots__/examples.spec.md      | 72 +++----------------
 6 files changed, 45 insertions(+), 70 deletions(-)
 create mode 100644 .changeset/breezy-walls-invent.md

diff --git a/.changeset/breezy-walls-invent.md b/.changeset/breezy-walls-invent.md
new file mode 100644
index 00000000000..e6a293f18a2
--- /dev/null
+++ b/.changeset/breezy-walls-invent.md
@@ -0,0 +1,5 @@
+---
+'@graphql-eslint/eslint-plugin': patch
+---
+
+report errors on first character for `*.vue`/`*.svelte` code, due graphql-tag-pluck limitation we can't know right location
diff --git a/.vscode/launch.json b/.vscode/launch.json
index f8786627f7e..d4849e12691 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,7 +5,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "pwa-node",
+      "type": "node",
       "request": "launch",
       "name": "Debug Tests",
       "skipFiles": ["<node_internals>/**"],
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6c04be0339a..20cce1ab1f3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -16,5 +16,14 @@
       "mode": "auto",
       "changeProcessCWD": true
     }
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "graphql",
+    "vue",
+    "svelte"
   ]
 }
diff --git a/examples/vue-code-file/test.vue b/examples/vue-code-file/test.vue
index 3418360b22d..d666f4e5cc7 100644
--- a/examples/vue-code-file/test.vue
+++ b/examples/vue-code-file/test.vue
@@ -1,3 +1,6 @@
+<template>
+  <span>test</span>
+</template>
 <script>
 /* eslint-disable no-unused-vars */
 
diff --git a/packages/plugin/src/processor.ts b/packages/plugin/src/processor.ts
index 740a90044e0..40d367b3408 100644
--- a/packages/plugin/src/processor.ts
+++ b/packages/plugin/src/processor.ts
@@ -6,6 +6,7 @@ import {
 import { asArray } from '@graphql-tools/utils';
 import { GraphQLConfig } from 'graphql-config';
 import { loadOnDiskGraphQLConfig } from './graphql-config.js';
+import { REPORT_ON_FIRST_CHARACTER } from './utils.js';
 
 export type Block = Linter.ProcessorFile & {
   lineOffset: number;
@@ -58,19 +59,20 @@ export const processor: Linter.Processor<Block | string> = {
         skipIndent: true,
         ...pluckConfig,
       });
-      const isSvelte = filePath.endsWith('.svelte');
 
       const blocks: Block[] = sources.map(item => ({
         filename: 'document.graphql',
         text: item.body,
-        lineOffset: item.locationOffset.line - (isSvelte ? 3 : 1),
+        lineOffset: item.locationOffset.line - 1,
         // @ts-expect-error -- `index` field exist but show ts error
-        offset: item.locationOffset.index + (isSvelte ? -52 : 1),
+        offset: item.locationOffset.index + 1,
       }));
       blocksMap.set(filePath, blocks);
 
       return [...blocks, code /* source code must be provided and be last */];
-    } catch {
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
       // in case of parsing error return code as is
       return [code];
     }
@@ -80,7 +82,19 @@ export const processor: Linter.Processor<Block | string> = {
     for (let i = 0; i < blocks.length; i += 1) {
       const { lineOffset, offset } = blocks[i];
 
-      for (const message of messages[i]) {
+      for (const message of messages[i] || []) {
+        const isVueOrSvelte = /\.(vue|svelte)$/.test(filePath);
+        if (isVueOrSvelte) {
+          // We can't show correct report location because after processing with
+          // graphql-tag-pluck location is incorrect, disable fixes as well
+          delete message.endLine;
+          delete message.endColumn;
+          delete message.fix;
+          delete message.suggestions;
+          Object.assign(message, REPORT_ON_FIRST_CHARACTER);
+          continue;
+        }
+
         message.line += lineOffset;
         // endLine can not exist if only `loc: { start, column }` was provided to context.report
         if (typeof message.endLine === 'number') {
diff --git a/packages/plugin/tests/__snapshots__/examples.spec.md b/packages/plugin/tests/__snapshots__/examples.spec.md
index 210694dc9e5..a7f3f09ce4e 100644
--- a/packages/plugin/tests/__snapshots__/examples.spec.md
+++ b/packages/plugin/tests/__snapshots__/examples.spec.md
@@ -241,49 +241,21 @@ exports[`Examples > should work in svelte 1`] = `
     filePath: examples/svelte-code-file/test.svelte,
     messages: [
       {
-        column: 3,
-        endColumn: 8,
-        endLine: 5,
-        line: 5,
+        column: 0,
+        line: 1,
         message: Anonymous GraphQL operations are forbidden. Make sure to name your query!,
         messageId: no-anonymous-operations,
         nodeType: null,
         ruleId: @graphql-eslint/no-anonymous-operations,
         severity: 2,
-        suggestions: [
-          {
-            desc: Rename to \`user\`,
-            fix: {
-              range: [
-                78,
-                78,
-              ],
-              text:  user,
-            },
-          },
-        ],
       },
       {
-        column: 9,
-        endColumn: 18,
-        endLine: 13,
-        line: 13,
+        column: 0,
+        line: 1,
         message: Operation "UserQuery" should not have "Query" suffix,
         nodeType: Name,
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
-        suggestions: [
-          {
-            desc: Rename to \`User\`,
-            fix: {
-              range: [
-                166,
-                175,
-              ],
-              text: User,
-            },
-          },
-        ],
       },
     ],
   },
@@ -296,49 +268,21 @@ exports[`Examples > should work in vue 1`] = `
     filePath: examples/vue-code-file/test.vue,
     messages: [
       {
-        column: 3,
-        endColumn: 8,
-        endLine: 5,
-        line: 5,
+        column: 0,
+        line: 1,
         message: Anonymous GraphQL operations are forbidden. Make sure to name your query!,
         messageId: no-anonymous-operations,
         nodeType: null,
         ruleId: @graphql-eslint/no-anonymous-operations,
         severity: 2,
-        suggestions: [
-          {
-            desc: Rename to \`user\`,
-            fix: {
-              range: [
-                78,
-                78,
-              ],
-              text:  user,
-            },
-          },
-        ],
       },
       {
-        column: 9,
-        endColumn: 18,
-        endLine: 13,
-        line: 13,
+        column: 0,
+        line: 1,
         message: Operation "UserQuery" should not have "Query" suffix,
         nodeType: Name,
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
-        suggestions: [
-          {
-            desc: Rename to \`User\`,
-            fix: {
-              range: [
-                166,
-                175,
-              ],
-              text: User,
-            },
-          },
-        ],
       },
     ],
   },