feat(vue): add a mixed vue/graphql processor

Author: mat813

examples/vue-code-file/.eslintrc.cjs

@@ -8,7 +8,7 @@ module.exports = {
     {
       files: ['*.js', '*.vue'],
       parser: 'vue-eslint-parser',
-      processor: '@graphql-eslint/graphql',
+      processor: '@graphql-eslint/graphql-vue',
       extends: ['eslint:recommended','plugin:vue/base'],
       env: {
         es6: true,

packages/plugin/package.json

@@ -32,6 +32,7 @@
     "graphql"
   ],
   "peerDependencies": {
+    "eslint-plugin-vue": "9.14.1",
     "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {

packages/plugin/src/index.ts

@@ -1,12 +1,12 @@
-import { processor } from './processor.js';
+import { processor, processorWithVue } from './processor.js';
 
 export { parseForESLint } from './parser.js';
 export { rules } from './rules/index.js';
 export * from './testkit.js';
 export * from './types.js';
 export { requireGraphQLSchemaFromContext, requireSiblingsOperations } from './utils.js';
 
-export const processors = { graphql: processor };
+export const processors = { graphql: processor, 'graphql-vue': processorWithVue };
 
 export { configs } from './configs/index.js';
 export { flatConfigs } from './flat-configs.js';

packages/plugin/src/processor.ts

@@ -124,3 +124,37 @@ export const processor: Linter.Processor<Block | string> = {
     return result.sort((a, b) => a.line - b.line || a.column - b.column);
   },
 };
+
+let vueProcessors: Record<string, Linter.Processor<Block | string>>;
+
+export const processorWithVue: Linter.Processor<Block | string> = {
+  // Get supportsAutofix and preprocess from the normal processor
+  ...processor,
+
+  postprocess(messages, filePath) {
+    if (messages.length > 0) {
+      // try to load the vue plugin
+      if (vueProcessors === undefined) {
+        try {
+          vueProcessors = require('eslint-plugin-vue').processors;
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(error);
+          vueProcessors = {};
+        }
+      }
+
+      // If we have a vue processor, pass it the last element that contains the
+      // full SFC code for processing
+      if (vueProcessors['.vue']?.postprocess !== undefined) {
+        const last = messages.length - 1;
+        messages[last] = vueProcessors['.vue'].postprocess([messages[last]], filePath);
+      }
+
+      // And pass everything to the graphql processor
+      return processor.postprocess!(messages, filePath);
+    } else {
+      return messages.flat();
+    }
+  },
+};