feat: ESLint v9 Support

[davidjbng]

Closes #7286

This PR adds support for ESLint v9 and is backwards compatible with ESLint v8.

I upgraded to the @typescript-eslint v8 alpha packages which support ESLint v9, but that required some type changes.

It is mostly the same as proposed in #7253 but does not yet support the flat config format. I will create a separate tracking issue for that.

Tests

• Tested with ESLint v8 - the changes are backwards compatible (afaik)
• Tested with ESLint v9 - https://github.com/davidjbng/eslint-plugin-query-v9-example

To Be Discussed

• Are the @typescript-eslint v8 alpha packages ok to merge or should we wait for a stable release?

Docs

I did not update any docs yet because there are basically no configuration changes required to use v9.
Flat config will be more important to document once it is supported.

[vercel]

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 10, 2024 1:10pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit c746f3f. 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

---

✅ Successfully ran 1 target

• 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.

[codesandbox-ci]

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 c746f3f:

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

[TkDodo]

Thank you 🙏 . Is this fully backwards compatible? Do we need to change the docs for users using the flat / legacy configs?

[TkDodo]

please also update eslint in the examples. It would serve as a good reference point to see if things are still working

[davidjbng]

Thank you 🙏 . Is this fully backwards compatible? Do we need to change the docs for users using the flat / legacy configs?

I am not aware flat config could be used before.

We could update the docs to say that ESLint v9 is supported with ESLINT_USE_FLAT_CONFIG=false if that is desired, but I would expect flat config support is added soon where I would add a full explanation on the new format.

In my test repo this was a non-breaking update with the following setup:
Legacy cjs config (.eslintrc.cjs) with the following package versions.

    "@typescript-eslint/eslint-plugin": "7.8.0",
    "@typescript-eslint/parser": "7.8.0",
    "eslint": "8.57.0",
    "eslint-import-resolver-typescript": "3.6.1",
    "eslint-plugin-import": "2.29.1",
    "eslint-plugin-jest": "27.9.0",
    "eslint-plugin-react": "7.34.1",
    "eslint-plugin-react-hooks": "4.6.2",

I installed the updated plugin from file after running pnpm build on the changes in this pr ("@tanstack/eslint-plugin-query": "file:../../query/packages/eslint-plugin-query").

[TkDodo]

okay thanks, so this is just for v9 support, not for flat config support?

[davidjbng]

please also update eslint in the examples. It would serve as a good reference point to see if things are still working

I tried to create a new example at first, but I was unsure on how to reference the plugin updates I had to do because the other examples were referencing published package versions.

I created this repo https://github.com/davidjbng/eslint-plugin-query-v9-example which is just a copy of basic-typescript with eslint v9 config

[davidjbng]

okay thanks, so this is just for v9 support, not for flat config support?

Yes. I opened a new issue for Flat Config here: #7544
It should not be a big change, but I wanted to keep things minimal to support v9 first.

[TkDodo]

okay the error that is left is from sherif, the tool we use to streamline dependencies in the monorepo. As discussed with other maintainers, I think the best move is to completely exclude examples and integrations from the sherif check.

I did that here: a42a2ed

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 43.85%. Comparing base (96aa461) to head (c746f3f).
Report is 18 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7543      +/-   ##
==========================================
+ Coverage   43.79%   43.85%   +0.06%     
==========================================
  Files         183      184       +1     
  Lines        7021     7025       +4     
  Branches     1535     1539       +4     
==========================================
+ Hits         3075     3081       +6     
+ Misses       3580     3578       -2     
  Partials      366      366              

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	∅ <ø> (∅)
@tanstack/angular-query-experimental	86.58% <0.00%> (ø)
@tanstack/eslint-plugin-query	85.46% <100.00%> (ø)
@tanstack/query-async-storage-persister	43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental	∅ <ø> (∅)
@tanstack/query-codemods	0.00% <ø> (ø)
@tanstack/query-core	92.77% <ø> (ø)
@tanstack/query-devtools	5.24% <ø> (ø)
@tanstack/query-persist-client-core	57.73% <ø> (ø)
@tanstack/query-sync-storage-persister	82.50% <ø> (ø)
@tanstack/react-query	92.72% <ø> (ø)
@tanstack/react-query-devtools	10.71% <ø> (ø)
@tanstack/react-query-next-experimental	∅ <ø> (∅)
@tanstack/react-query-persist-client	100.00% <ø> (ø)
@tanstack/solid-query	78.06% <100.00%> (+0.14%)	⬆️
@tanstack/solid-query-devtools	∅ <ø> (∅)
@tanstack/solid-query-persist-client	100.00% <ø> (ø)
@tanstack/svelte-query	68.66% <ø> (+1.33%)	⬆️
@tanstack/svelte-query-devtools	∅ <ø> (∅)
@tanstack/svelte-query-persist-client	100.00% <ø> (ø)
@tanstack/vue-query	70.60% <100.00%> (+0.13%)	⬆️
@tanstack/vue-query-devtools	∅ <ø> (∅)

[TkDodo]

alright, let' ship it

[MWhite-22]

FYI getting the below peer-dependency warning with this release. @TkDodo @davidjbng

I think the peer definition should either be >=8 or have || not a single | to seperate 8 and 9.

[TkDodo]

yes, someone please fix it. It should be:

"eslint": "^8 || ^9"

just like we have for react:

"react": "^18 || ^19"

[davidjbng]

Working on the fix.

Seems like npm fails to report peerDependency errors when installing from a file path. I found at least a few similar issues like this:

• [BUG] peerDependencies of package behave like dependencies when package is locally installed npm/cli#7143
• npm install should install peerDependencies of a local module  npm/cli#5108