From ccd930309957896f5d22ed59d40a67803ee77868 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Fri, 22 Nov 2024 03:32:13 +0700
Subject: [PATCH] Fix report lint issues not on first char of file for `.vue`
 and support ESLint fixes and suggestions (#2735)

* move

* rename

* more

* more

* more

* more

* more

* more

* more

* moree

* moree

* moree

* moree

* more

* more

* more

* [skip ci]

* more

* fix icons

* update docs to use Nextra 4

* [skip ci]

* fix lint [skip ci]

* more [skip ci]

* more

* upd

* pnpm dedupe

* yoyo

* aa

* aa

* build pass

* more

* aa

* aa

* [skip ci]

* Update examples/vue-code-file/test.vue [skip ci]

Co-authored-by: Brendan Mulholland <github@bmulholland.ca>

* polish

* add changeset

---------

Co-authored-by: Brendan Mulholland <github@bmulholland.ca>
---
 .changeset/fast-fishes-shake.md               |  5 ++
 examples/vue-code-file/eslint.config.js       | 22 +++--
 examples/vue-code-file/package.json           |  5 +-
 examples/vue-code-file/test.vue               |  6 +-
 .../__tests__/__snapshots__/examples.spec.md  | 80 ++++++++++++++++++-
 packages/plugin/__tests__/examples.spec.ts    |  2 +-
 packages/plugin/src/graphql-config.ts         | 14 +++-
 packages/plugin/src/parser.ts                 |  8 +-
 packages/plugin/src/processor.ts              |  5 ++
 pnpm-lock.yaml                                | 75 +++++++++++++++--
 10 files changed, 195 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/fast-fishes-shake.md

diff --git a/.changeset/fast-fishes-shake.md b/.changeset/fast-fishes-shake.md
new file mode 100644
index 00000000000..b867f15b5ad
--- /dev/null
+++ b/.changeset/fast-fishes-shake.md
@@ -0,0 +1,5 @@
+---
+'@graphql-eslint/eslint-plugin': patch
+---
+
+fix reporting lint issues not on first char of file for `.vue` and support ESLint fixes and suggestions for them. Use [new official example](https://github.com/dimaMachina/graphql-eslint/blob/master/examples/vue-code-file/eslint.config.js)
diff --git a/examples/vue-code-file/eslint.config.js b/examples/vue-code-file/eslint.config.js
index d4c93c8b4bc..39bd26547b5 100644
--- a/examples/vue-code-file/eslint.config.js
+++ b/examples/vue-code-file/eslint.config.js
@@ -1,18 +1,30 @@
-import vueParser from 'vue-eslint-parser';
+import { mergeProcessors } from 'eslint-merge-processors';
+import pluginVue from 'eslint-plugin-vue';
+import processorVueBlocks from 'eslint-processor-vue-blocks';
 import js from '@eslint/js';
 import graphqlPlugin from '@graphql-eslint/eslint-plugin';
 
 export default [
   {
-    files: ['**/*.js', '**/*.vue'],
+    files: ['**/*.js'],
     processor: graphqlPlugin.processor,
     rules: js.configs.recommended.rules,
   },
+  ...pluginVue.configs['flat/recommended'],
   {
     files: ['**/*.vue'],
-    languageOptions: {
-      parser: vueParser,
-    },
+    // `eslint-plugin-vue` will set a default processor for `.vue` files
+    // we use `eslint-merge-processors` to extend it
+    processor: mergeProcessors([
+      pluginVue.processors.vue,
+      processorVueBlocks({
+        blocks: {
+          script: true,
+          scriptSetup: true,
+          customBlocks: true,
+        },
+      }),
+    ]),
   },
   {
     files: ['**/*.graphql'],
diff --git a/examples/vue-code-file/package.json b/examples/vue-code-file/package.json
index 6a1efbe91ff..4bb097d8f8e 100644
--- a/examples/vue-code-file/package.json
+++ b/examples/vue-code-file/package.json
@@ -12,8 +12,9 @@
   },
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "workspace:*",
-    "@vue/compiler-sfc": "3.5.13",
     "eslint": "9.14.0",
-    "vue-eslint-parser": "9.4.3"
+    "eslint-merge-processors": "^0.1.0",
+    "eslint-plugin-vue": "^9.31.0",
+    "eslint-processor-vue-blocks": "^0.1.2"
   }
 }
diff --git a/examples/vue-code-file/test.vue b/examples/vue-code-file/test.vue
index d666f4e5cc7..60194b815e5 100644
--- a/examples/vue-code-file/test.vue
+++ b/examples/vue-code-file/test.vue
@@ -1,9 +1,9 @@
 <template>
-  <span>test</span>
+  <!-- use the variables to satisfy the no-unused-vars lint -->
+  <span>{{ GET_USER }}</span>
+  <span>{{ GET_ANOTHER_USER }}</span>
 </template>
 <script>
-/* eslint-disable no-unused-vars */
-
 const GET_USER = /* GraphQL */ `
   query {
     user {
diff --git a/packages/plugin/__tests__/__snapshots__/examples.spec.md b/packages/plugin/__tests__/__snapshots__/examples.spec.md
index a5604b4232b..cab5484eb18 100644
--- a/packages/plugin/__tests__/__snapshots__/examples.spec.md
+++ b/packages/plugin/__tests__/__snapshots__/examples.spec.md
@@ -626,21 +626,71 @@ exports[`Examples > should work in vue 1`] = `
     filePath: examples/vue-code-file/test.vue,
     messages: [
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 16,
+        endLine: 7,
+        line: 7,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 4,
+        endColumn: 9,
+        endLine: 8,
+        line: 8,
         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: [
+                40,
+                40,
+              ],
+              text:  user,
+            },
+          },
+        ],
       },
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 24,
+        endLine: 15,
+        line: 15,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 10,
+        endColumn: 19,
+        endLine: 16,
+        line: 16,
         message: Operation "UserQuery" should not have "Query" suffix,
         nodeType: Name,
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`User\`,
+            fix: {
+              range: [
+                128,
+                137,
+              ],
+              text: User,
+            },
+          },
+        ],
       },
     ],
   },
@@ -669,6 +719,28 @@ exports[`Examples > should work in vue 2`] = `
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
       },
+      {
+        column: 7,
+        endColumn: 15,
+        endLine: 7,
+        line: 7,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 7,
+        endColumn: 23,
+        endLine: 15,
+        line: 15,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
     ],
   },
 ]
diff --git a/packages/plugin/__tests__/examples.spec.ts b/packages/plugin/__tests__/examples.spec.ts
index acc4973d7d0..35b5ce455a1 100644
--- a/packages/plugin/__tests__/examples.spec.ts
+++ b/packages/plugin/__tests__/examples.spec.ts
@@ -114,7 +114,7 @@ describe('Examples', () => {
 
   it('should work in vue', () => {
     const cwd = path.join(CWD, 'examples', 'vue-code-file');
-    testESLintOutput(cwd, 2);
+    testESLintOutput(cwd, 4);
   });
 
   it('should work in multiple projects', () => {
diff --git a/packages/plugin/src/graphql-config.ts b/packages/plugin/src/graphql-config.ts
index 1129e442252..e95ce7b00b6 100644
--- a/packages/plugin/src/graphql-config.ts
+++ b/packages/plugin/src/graphql-config.ts
@@ -1,3 +1,4 @@
+import fs from 'node:fs';
 import path from 'node:path';
 import debugFactory from 'debug';
 import { GraphQLConfig, GraphQLExtensionDeclaration, loadConfigSync } from 'graphql-config';
@@ -7,10 +8,21 @@ import { ParserOptions } from './types.js';
 const debug = debugFactory('graphql-eslint:graphql-config');
 let graphQLConfig: GraphQLConfig;
 
+/**
+ * Filepath can be a virtual file, so we need to find the first existing path
+ *
+ */
+export function getFirstExistingPath(filePath: string): string {
+  while (!fs.existsSync(filePath)) {
+    filePath = path.dirname(filePath);
+  }
+  return filePath;
+}
+
 export function loadOnDiskGraphQLConfig(filePath: string): GraphQLConfig {
   return loadConfigSync({
     // load config relative to the file being linted
-    rootDir: path.dirname(filePath),
+    rootDir: getFirstExistingPath(path.dirname(filePath)),
     throwOnMissing: false,
     extensions: [codeFileLoaderExtension],
   });
diff --git a/packages/plugin/src/parser.ts b/packages/plugin/src/parser.ts
index a08fe51e32b..63101189ab7 100644
--- a/packages/plugin/src/parser.ts
+++ b/packages/plugin/src/parser.ts
@@ -4,12 +4,12 @@ import { GraphQLProjectConfig, IGraphQLProject } from 'graphql-config';
 import { parseGraphQLSDL, Source } from '@graphql-tools/utils';
 import { getDocuments } from './documents.js';
 import { convertToESTree, extractComments, extractTokens } from './estree-converter/index.js';
-import { loadGraphQLConfig } from './graphql-config.js';
+import { getFirstExistingPath, loadGraphQLConfig } from './graphql-config.js';
 import { version } from './meta.js';
 import { getSchema } from './schema.js';
 import { getSiblings } from './siblings.js';
 import { GraphQLESLintParseResult, ParserOptions, Schema } from './types.js';
-import { CWD, VIRTUAL_DOCUMENT_REGEX } from './utils.js';
+import { CWD } from './utils.js';
 
 const debug = debugFactory('graphql-eslint:parser');
 
@@ -44,11 +44,9 @@ export function parseForESLint(code: string, options: ParserOptions): GraphQLESL
     const { document } = parseGraphQLSDL(filePath, code, { noLocation: false });
     let project: GraphQLProjectConfig;
     let schema: Schema, documents: Source[];
-
     if (typeof window === 'undefined') {
       const gqlConfig = loadGraphQLConfig(options);
-      const realFilepath = filePath.replace(VIRTUAL_DOCUMENT_REGEX, '');
-      project = gqlConfig.getProjectForFile(realFilepath);
+      project = gqlConfig.getProjectForFile(getFirstExistingPath(filePath));
       documents = getDocuments(project);
     } else {
       documents = [
diff --git a/packages/plugin/src/processor.ts b/packages/plugin/src/processor.ts
index 21ff05faa4e..90617016fcc 100644
--- a/packages/plugin/src/processor.ts
+++ b/packages/plugin/src/processor.ts
@@ -29,6 +29,11 @@ export const processor = {
   },
   supportsAutofix: true,
   preprocess(code, filePath) {
+    if (process.env.ESLINT_USE_FLAT_CONFIG !== 'false' && filePath.endsWith('.vue')) {
+      throw new Error(
+        "Processing of `.vue` files is no longer supported, follow the new official vue example for ESLint's flat config https://github.com/dimaMachina/graphql-eslint/tree/master/examples/vue-code-file",
+      );
+    }
     if (!onDiskConfigLoaded) {
       onDiskConfig = loadOnDiskGraphQLConfig(filePath);
       onDiskConfigLoaded = true;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7ab4796ea49..e1fc3410c6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,15 +225,18 @@ importers:
       '@graphql-eslint/eslint-plugin':
         specifier: workspace:*
         version: link:../../packages/plugin/dist
-      '@vue/compiler-sfc':
-        specifier: 3.5.13
-        version: 3.5.13
       eslint:
         specifier: 9.14.0
         version: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
-      vue-eslint-parser:
-        specifier: 9.4.3
-        version: 9.4.3(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint-merge-processors:
+        specifier: ^0.1.0
+        version: 0.1.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint-plugin-vue:
+        specifier: ^9.31.0
+        version: 9.31.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint-processor-vue-blocks:
+        specifier: ^0.1.2
+        version: 0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
 
   packages/plugin:
     dependencies:
@@ -4152,6 +4155,11 @@ packages:
     peerDependencies:
       eslint: '>=8.0.0'
 
+  eslint-merge-processors@0.1.0:
+    resolution: {integrity: sha512-IvRXXtEajLeyssvW4wJcZ2etxkR9mUf4zpNwgI+m/Uac9RfXHskuJefkHUcawVzePnd6xp24enp5jfgdHzjRdQ==}
+    peerDependencies:
+      eslint: '*'
+
   eslint-module-utils@2.12.0:
     resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
     engines: {node: '>=4'}
@@ -4302,12 +4310,24 @@ packages:
     peerDependencies:
       eslint: '>=8.56.0'
 
+  eslint-plugin-vue@9.31.0:
+    resolution: {integrity: sha512-aYMUCgivhz1o4tLkRHj5oq9YgYPM4/EJc0M7TAKRLCUA5OYxRLAhYEVD2nLtTwLyixEFI+/QXSvKU9ESZFgqjQ==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+
   eslint-plugin-yml@1.15.0:
     resolution: {integrity: sha512-leC8APYVOsKyWUlvRwVhewytK5wS70BfMqIaUplFstRfzCoVp0YoEroV4cUEvQrBj93tQ3M9LcjO/ewr6D4kjA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
 
+  eslint-processor-vue-blocks@0.1.2:
+    resolution: {integrity: sha512-PfpJ4uKHnqeL/fXUnzYkOax3aIenlwewXRX8jFinA1a2yCFnLgMuiH3xvCgvHHUlV2xJWQHbCTdiJWGwb3NqpQ==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.3.0
+      eslint: ^8.50.0 || ^9.0.0
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -4619,6 +4639,10 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -7013,6 +7037,10 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
   type-fest@0.6.0:
     resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
     engines: {node: '>=8'}
@@ -7441,6 +7469,10 @@ packages:
       utf-8-validate:
         optional: true
 
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
   xmldom-sre@0.1.31:
     resolution: {integrity: sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==}
     engines: {node: '>=0.1'}
@@ -12417,6 +12449,10 @@ snapshots:
       - bluebird
       - supports-color
 
+  eslint-merge-processors@0.1.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
+    dependencies:
+      eslint: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
+
   eslint-module-utils@2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(typescript@5.6.3))(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)))(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)))(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
     dependencies:
       debug: 3.2.7
@@ -12709,6 +12745,20 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
+  eslint-plugin-vue@9.31.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.6.3
+      vue-eslint-parser: 9.4.3(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-yml@1.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
     dependencies:
       debug: 4.3.7
@@ -12720,6 +12770,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
+    dependencies:
+      '@vue/compiler-sfc': 3.5.13
+      eslint: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -13103,6 +13158,10 @@ snapshots:
 
   globals@11.12.0: {}
 
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
   globals@14.0.0: {}
 
   globals@15.12.0: {}
@@ -16010,6 +16069,8 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@0.20.2: {}
+
   type-fest@0.6.0: {}
 
   type-fest@0.8.1: {}
@@ -16538,6 +16599,8 @@ snapshots:
 
   ws@8.18.0: {}
 
+  xml-name-validator@4.0.0: {}
+
   xmldom-sre@0.1.31: {}
 
   y18n@5.0.8: {}