Skip to content

fix(eslint-plugin) separate legacy and modern dts files #8972

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 8, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/react/basic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"preview": "vite preview",
"test:eslint": "eslint ./src"
},
"dependencies": {
"@tanstack/query-sync-storage-persister": "^5.72.0",
Expand Down
3 changes: 3 additions & 0 deletions examples/react/eslint-legacy/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": ["plugin:@tanstack/query/recommended"]
}
27 changes: 27 additions & 0 deletions examples/react/eslint-legacy/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

pnpm-lock.yaml
yarn.lock
package-lock.json

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
6 changes: 6 additions & 0 deletions examples/react/eslint-legacy/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Example

To run this example:

- `npm install`
- `npm run dev`
16 changes: 16 additions & 0 deletions examples/react/eslint-legacy/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/svg+xml" href="/emblem-light.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />

<title>TanStack Query React Basic Example App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions examples/react/eslint-legacy/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "@tanstack/query-example-eslint-legacy",
"private": true,
"type": "module",
"scripts": {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you want this example to be lintend in CI, you need to add a test:eslint script and we’ll have to remove the --exclude here:

"test:eslint": "nx affected --target=test:eslint --exclude=examples/**",

Not sure why examples were excluded, most of them don’t have that task specified anyways 🤷

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, but it seems like something is off with packages that I didn't touch 😅

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah sadly, some tests are flaky. I’ll ship it

"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test:eslint": "eslint ./src"
},
"dependencies": {
"@tanstack/query-sync-storage-persister": "^5.72.0",
"@tanstack/react-query": "^5.72.0",
"@tanstack/react-query-devtools": "^5.72.0",
"@tanstack/react-query-persist-client": "^5.72.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.72.0",
"eslint": "^8.16.0",
"@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25",
"@vitejs/plugin-react": "^4.3.4",
"typescript": "5.8.2",
"vite": "^6.2.4"
}
}
13 changes: 13 additions & 0 deletions examples/react/eslint-legacy/public/emblem-light.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
161 changes: 161 additions & 0 deletions examples/react/eslint-legacy/src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import * as React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
},
})

const persister = createSyncStoragePersister({
storage: window.localStorage,
})

type Post = {
id: number
title: string
body: string
}

function usePosts() {
return useQuery({
queryKey: ['posts'],
queryFn: async (): Promise<Array<Post>> => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
return await response.json()
},
})
}

function Posts({
setPostId,
}: {
setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
const queryClient = useQueryClient()
const { status, data, error, isFetching } = usePosts()

return (
<div>
<h1>Posts</h1>
<div>
{status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
<span>Error: {error.message}</span>
) : (
<>
<div>
{data.map((post) => (
<p key={post.id}>
<a
onClick={() => setPostId(post.id)}
href="#"
style={
// We can access the query data here to show bold links for
// ones that are cached
queryClient.getQueryData(['post', post.id])
? {
fontWeight: 'bold',
color: 'green',
}
: {}
}
>
{post.title}
</a>
</p>
))}
</div>
<div>{isFetching ? 'Background Updating...' : ' '}</div>
</>
)}
</div>
</div>
)
}

const getPostById = async (id: number): Promise<Post> => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${id}`,
)
return await response.json()
}

function usePost(postId: number) {
return useQuery({
queryKey: ['post', postId],
queryFn: () => getPostById(postId),
enabled: !!postId,
})
}

function Post({
postId,
setPostId,
}: {
postId: number
setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
const { status, data, error, isFetching } = usePost(postId)

return (
<div>
<div>
<a onClick={() => setPostId(-1)} href="#">
Back
</a>
</div>
{!postId || status === 'pending' ? (
'Loading...'
) : status === 'error' ? (
<span>Error: {error.message}</span>
) : (
<>
<h1>{data.title}</h1>
<div>
<p>{data.body}</p>
</div>
<div>{isFetching ? 'Background Updating...' : ' '}</div>
</>
)}
</div>
)
}

function App() {
const [postId, setPostId] = React.useState(-1)

return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister }}
>
<p>
As you visit the posts below, you will notice them in a loading state
the first time you load them. However, after you return to this list and
click on any posts you have already visited again, you will see them
load instantly and background refresh right before your eyes!{' '}
<strong>
(You may need to throttle your network speed to simulate longer
loading sequences)
</strong>
</p>
{postId > -1 ? (
<Post postId={postId} setPostId={setPostId} />
) : (
<Posts setPostId={setPostId} />
)}
<ReactQueryDevtools initialIsOpen />
</PersistQueryClientProvider>
)
}

const rootElement = document.getElementById('root') as HTMLElement
ReactDOM.createRoot(rootElement).render(<App />)
24 changes: 24 additions & 0 deletions examples/react/eslint-legacy/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src", "eslint.config.js"]
}
6 changes: 6 additions & 0 deletions examples/react/eslint-legacy/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
plugins: [react()],
})
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"test": "pnpm run test:ci",
"test:pr": "nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build",
"test:ci": "nx run-many --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build",
"test:eslint": "nx affected --target=test:eslint --exclude=examples/**",
"test:eslint": "nx affected --target=test:eslint",
"test:format": "pnpm run prettier --check",
"test:sherif": "sherif -i typescript -p \"./integrations/*\" -p \"./examples/*\"",
"test:lib": "nx affected --target=test:lib --exclude=examples/**",
Expand Down Expand Up @@ -100,8 +100,7 @@
"@tanstack/vue-query": "workspace:*",
"@tanstack/vue-query-devtools": "workspace:*",
"@types/react": "^19.0.1",
"@types/react-dom": "^19.0.2",
"eslint": "$eslint"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to remove that line so I could use a specific version of eslint inside examples. If you have a better idea, please let me know.

"@types/react-dom": "^19.0.2"
}
}
}
21 changes: 12 additions & 9 deletions packages/eslint-plugin-query/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,29 +31,32 @@
"test:lib": "vitest",
"test:lib:dev": "pnpm run test:lib --watch",
"test:build": "publint --strict && attw --pack",
"build": "tsup && node ./scripts/patch-missing-export-equals.js"
"build": "tsup --tsconfig tsconfig.prod.json"
},
"type": "module",
"types": "dist/index.d.ts",
"main": "dist/index.cjs",
"module": "dist/index.js",
"types": "build/legacy/index.d.ts",
"main": "build/legacy/index.cjs",
"module": "build/legacy/index.js",
"react-native": "src/index.ts",
"exports": {
".": {
"import": {
"@tanstack/custom-condition": "./src/index.ts",
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
"types": "./build/modern/index.d.ts",
"default": "./build/modern/index.js"
},
"require": {
"types": "./dist/index.d.cts",
"default": "./dist/index.cjs"
"types": "./build/modern/index.d.cts",
"default": "./build/modern/index.cjs"
}
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"dist"
"build",
"src",
"!src/__tests__"
],
"dependencies": {
"@typescript-eslint/utils": "^8.18.1"
Expand Down
Loading
Loading