feat!(eslint-plugin-query): Migrate to ESLint v9 with Flat Config Support

[davidjbng]

This PR is a starting point to add support for the newly released ESLint v9 as well as exposing a new flat/recommended to be used in eslint.config.js.

Edit: I noticed the separate flat/recommended config may not be necessary given it exports the same rules as the recommended config anyway.

~I confirmed this works on my project testing only with eslint@9,~ but haven't tested the old recommended config, neither did I test with eslint@8.

Resources

I used the following resources to find out which changes to make

• Plugin Migration to Flat Config
• Implentation of eslint-plugin-jest
• Breaking Changes for plugin developers in ESLint v9

To Be Discussed

• [ ] Support for the Flat Config could be its own PR if the changes to support ESLint v9 turn out to be breaking
• [x] Use the existing 'recommended' config for Flat Config support if possible. *Rule definitions requirements seem to have changed so having a separate flat config is required to support both formats.
• [ ] Find a good way to fully test the exported config. Including the plugin object itself as required by flat config adds a circular reference with a lot of noise in the snapshot
• [ ] See if config types could be improved
• [ ] I had some trouble using the build locally and had to change the exports in packages.json from ./dist/esm/index.js to ./dist/esm/src/index.js to use the package installed from a directory. Probably not an issue if it works in ci, but wanted to mention it just in case.

TODO

• [ ] Update Docs
• [ ] Test with ESLint v8
• [ ] Update examples/react/shadow-dom and examples/react/basic-typescript

Related Issues

• typescript-eslint/typescript-eslint/issues/8211
• facebook/react/issues/28313

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2024 11:30am

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cf11b6a9d5371a5dbc67a88702b53cca148efe37. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3

---

Sent with 💌 from NxCloud.

[davidjbng]

Also note how eslint-plugin-react-hooks will handle v9 and flat config support in

• facebook/react/issues/28313
• facebook/react/pull/28773

[TkDodo]

Thanks for this. We'd definitely need to update docs and show how to use the plugin both for flat config and the v8 syntax.

[TkDodo]

lockfile seems to be outdated:

 ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with packages/eslint-plugin-query/package.json

[davidjbng]

lockfile seems to be outdated:

 ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with packages/eslint-plugin-query/package.json

The root package.json requires all packages to use the same ESLint version. https://github.com/TanStack/query/blob/fca5e7df77c7984d0505c3e924b879dcd9a5e763/package.json#L83-L89

Besides the ESLint Plugin - which I updated to v9 - eslint v8 is currently depended on by examples/react/shadow-dom and examples/react/basic-typescript which need to be fixed. Updating the examples to Flat Config is blocked by the upstream react plugin issues though.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a300d484750edb4b64bdefcc86abaac305d73b13:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[davidjbng]

I think this has to wait until it is offically supported by typescript-eslint which is tracked here

• typescript-eslint/typescript-eslint/issues/8211

The tests are still failing because of differences how rule definitions work for the flat config format, but @typescript-eslint/rule-tester isn't up to date to report those errors in typescript. Rather you get runtime errors directly from eslint.

[Newbie012]

It seems like typescript-eslint now supports ESLint 9 (https://github.com/typescript-eslint/typescript-eslint/issues/8211#issuecomment-2106427365)

[jgarplind]

You may want to consider adding these efforts to the issues over in the ESLint repo tracking overall progress among plugin developers.

That would be very useful for app developers like myself who try to keep track of how the various plug-ins we are using are progressing!

If flat config is not yet supported, add here. If flat config is supported but v9 is not, add here.

[davidjbng]

I will work on a new pr for eslint v9 first and then flat config