feat(eslint-plugin-query): Add compatibility with flat config

docs/eslint/eslint-plugin-query.md

@@ -19,34 +19,68 @@ $ yarn add -D @tanstack/eslint-plugin-query
 $ bun add -D @tanstack/eslint-plugin-query
 ```
 
-## Usage
+## Flat Config (`eslint.config.js`)
 
-To enable all of the recommended rules for our plugin, add `plugin:@tanstack/eslint-plugin-query/recommended` in extends:
+### Recommended setup
 
-```json
-{
-  "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
-}
+To enable all of the recommended rules for our plugin, add the following config:
+
+```js
+import pluginQuery from '@tanstack/eslint-plugin-query'
+
+export default [
+  ...pluginQuery.configs['flat/recommended'],
+  // Any other config...
+]
+```
+
+### Custom setup
+
+Alternatively, you can load the plugin and configure only the rules you want to use:
+
+```js
+import pluginQuery from '@tanstack/eslint-plugin-query'
+
+export default [
+  {
+    plugins: {
+      '@tanstack/query': pluginQuery,
+    },
+    rules: {
+      '@tanstack/query/exhaustive-deps': 'error',
+    },
+  },
+  // Any other config...
+]
 ```
 
-### Alternative config
+## Legacy Config (`.eslintrc`)
 
-Alternatively, add `@tanstack/eslint-plugin-query` to the plugins section of your `.eslintrc` configuration file:
+### Recommended setup
+
+To enable all of the recommended rules for our plugin, add `plugin:@tanstack/eslint-plugin-query/recommended` in extends:
 
 ```json
 {
-  "plugins": ["@tanstack/query"]
+  "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
 }
 ```
 
-Then configure the rules you want to use under the rules section:
+### Custom setup
+
+Alternatively, add `@tanstack/eslint-plugin-query` to the plugins section, and configure the rules you want to use:
 
 ```json
 {
+  "plugins": ["@tanstack/query"],
   "rules": {
-    "@tanstack/query/exhaustive-deps": "error",
-    "@tanstack/query/no-rest-destructuring": "warn",
-    "@tanstack/query/stable-query-client": "error"
+    "@tanstack/query/exhaustive-deps": "error"
   }
 }
 ```
+
+## Rules
+
+- [@tanstack/query/exhaustive-deps](../exhaustive-deps)
+- [@tanstack/query/no-rest-destructuring](../exhaustive-deps)
+- [@tanstack/query/stable-query-client](../exhaustive-deps)

examples/react/basic-graphql-request/src/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {

examples/react/basic-typescript/eslint.config.js

@@ -0,0 +1,19 @@
+import { tanstackConfig } from '@tanstack/config/eslint'
+import pluginQuery from '@tanstack/eslint-plugin-query'
+import pluginReact from '@eslint-react/eslint-plugin'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+
+export default [
+  ...tanstackConfig,
+  ...pluginQuery.configs['flat/recommended'],
+  pluginReact.configs.recommended,
+  {
+    plugins: {
+      'react-hooks': pluginReactHooks,
+    },
+    rules: {
+      'react-hooks/exhaustive-deps': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
+]

examples/react/basic-typescript/src/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react'
 import ReactDOM from 'react-dom/client'
 import axios from 'axios'

examples/react/basic-typescript/tsconfig.json

@@ -20,5 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", "eslint.config.js"]
 }

examples/react/basic/src/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import axios from 'axios'

examples/react/default-query-function/src/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import axios from 'axios'

examples/react/simple/src/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {

package.json

@@ -40,7 +40,7 @@
   },
   "namespace": "@tanstack",
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.15.3",
+    "@arethetypeswrong/cli": "^0.16.0",
     "@cspell/eslint-plugin": "^8.9.1",
     "@eslint-react/eslint-plugin": "^1.5.16",
     "@solidjs/testing-library": "^0.8.8",

packages/eslint-plugin-query/.attw.json

@@ -0,0 +1,3 @@
+{
+  "ignoreRules": ["false-export-default"]
+}

packages/eslint-plugin-query/src/index.ts

@@ -1,2 +1,47 @@
-export { configs } from './configs'
-export { rules } from './rules'
+import { rules } from './rules'
+import type { ESLint, Linter } from 'eslint'
+import type { RuleModule } from '@typescript-eslint/utils/ts-eslint'
+
+type RuleKey = keyof typeof rules
+
+interface Plugin extends Omit<ESLint.Plugin, 'rules'> {
+  rules: Record<RuleKey, RuleModule<any, any, any>>
+  configs: Record<
+    string,
+    ESLint.ConfigData | Linter.FlatConfig | Array<Linter.FlatConfig>
+  >
+}
+
+const plugin: Plugin = {
+  meta: {
+    name: '@tanstack/eslint-plugin-query',
+  },
+  configs: {},
+  rules,
+}
+
+// Assign configs here so we can reference `plugin`
+Object.assign(plugin.configs, {
+  recommended: {
+    plugins: ['@tanstack/eslint-plugin-query'],
+    rules: {
+      '@tanstack/query/exhaustive-deps': 'error',
+      '@tanstack/query/no-rest-destructuring': 'warn',
+      '@tanstack/query/stable-query-client': 'error',
+    },
+  },
+  'flat/recommended': [
+    {
+      plugins: {
+        '@tanstack/query': plugin,
+      },
+      rules: {
+        '@tanstack/query/exhaustive-deps': 'error',
+        '@tanstack/query/no-rest-destructuring': 'warn',
+        '@tanstack/query/stable-query-client': 'error',
+      },
+    },
+  ],
+})
+
+export default plugin