report errors on first character for *.vue/*.svelte code, due graphql-tag-pluck limitation we can't know right location (#1346)

Author: dimaMachina

.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

.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>/**"],

.vscode/settings.json

@@ -16,5 +16,14 @@
       "mode": "auto",
       "changeProcessCWD": true
     }
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "graphql",
+    "vue",
+    "svelte"
   ]
 }

examples/vue-code-file/test.vue

@@ -1,3 +1,6 @@
+<template>
+  <span>test</span>
+</template>
 <script>
 /* eslint-disable no-unused-vars */
 

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') {

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,
-            },
-          },
-        ],
       },
     ],
   },