chore: introduce Knip as dead-code removal tool (#6368)

* Add knip with inital config

* Rename vite.config.js → vite.config.js (`__dirname` not in ESM scope)

* chore: upgrade to knip v3

* chore(knip): remove duplicate exports

* chore(knip): remove unused types from query devtools

* chore(knip): do not export unused types

* chore(knip): run knip in ci

* chore(knip): ignore certain .d.ts files

* chore(knip): remove unused file

* chore(knip): use devtools in next integration

so the dependency doesn't show up as unused

* chore(knip): remove unused dependencies

* chore(knip): remove unused exports

* chore(knip): add unlisted dependencies

* chore(knip): remove unnecessary scope-manager dependency

* Update knip to 3.3.0

* Update knip to 3.3.1

* chore: ignore custom deps, remove unneeded file

* chore: remove unused util

* chore: remove esbuild dep as it's not directly used

* chore: bump tsup to match esbuild types with the plugin

* chore: remove unused peer deps

* chore: remove unneeded deps

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>
Co-authored-by: Damian Osipiuk <[email protected]>

Author: 3 people

.github/workflows/pr.yml

@@ -100,3 +100,24 @@ jobs:
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
       - name: Run prettier
         run: pnpm run test:format
+  knip:
+    name: Knip
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
+      - name: Install dependencies
+        run: pnpm --filter "./packages/**" --filter query --prefer-offline install
+      - name: Run Knip
+        run: pnpm knip

integrations/react-cra4/src/App.jsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 
-export const App = () => {
+const App = () => {
   const query = useQuery({
     queryKey: ['test'],
     queryFn: async () => {

integrations/react-cra5/src/App.jsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 
-export const App = () => {
+const App = () => {
   const query = useQuery({
     queryKey: ['test'],
     queryFn: async () => {

integrations/react-next/app/providers.tsx

@@ -1,11 +1,15 @@
 'use client'
 import * as React from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   const [queryClient] = React.useState(() => new QueryClient())
 
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools />
+    </QueryClientProvider>
   )
 }

integrations/react-vite4/src/App.jsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 
-export const App = () => {
+const App = () => {
   const query = useQuery({
     queryKey: ['test'],
     queryFn: async () => {

integrations/react-vite5/src/App.jsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 
-export const App = () => {
+const App = () => {
   const query = useQuery({
     queryKey: ['test'],
     queryFn: async () => {

integrations/solid-vite/src/App.jsx

@@ -1,7 +1,7 @@
 import { Match, Switch } from 'solid-js'
 import { createQuery } from '@tanstack/solid-query'
 
-export const App = () => {
+const App = () => {
   const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {

knip.ts

@@ -0,0 +1,28 @@
+// These aren't actual compilers, but performant & avoids root dependencies
+const svelteCompiler = (text: string) => text.matchAll(/import[^]*?'.*?'\n/gs)
+const vueCompiler = /<script\b[^>]*>([\s\S]*?)<\/script>/gm
+
+export default {
+  $schema: 'https://unpkg.com/knip@2/schema.json',
+  ignoreWorkspaces: ['examples/**'],
+  ignore: ['**/react-app-env.d.ts', '**/vite-env.d.ts'],
+  workspaces: {
+    'packages/codemods': {
+      entry: ['src/v4/*.js', 'src/v5/*/*.js'],
+      ignore: ['**/__testfixtures__/**'],
+    },
+    'packages/vue-query': {
+      ignore: ['**/__mocks__/**'],
+      ignoreDependencies: ['vue2', 'vue2.7'],
+    },
+  },
+  compilers: {
+    svelte: (text: string) => [...svelteCompiler(text)].join('\n'),
+    vue: (text) => {
+      const scripts = []
+      let match
+      while ((match = vueCompiler.exec(text))) scripts.push(match[1])
+      return scripts.join(';')
+    },
+  },
+}

package.json

@@ -41,8 +41,6 @@
     "@solidjs/testing-library": "^0.5.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.1",
     "@types/current-git-branch": "^1.1.5",
     "@types/eslint": "^8.44.0",
     "@types/git-log-parser": "^1.2.2",
@@ -58,11 +56,9 @@
     "@vitest/coverage-istanbul": "^0.33.0",
     "axios": "^1.5.1",
     "chalk": "^5.3.0",
-    "concurrently": "^8.2.2",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "current-git-branch": "^1.1.0",
-    "esbuild": "^0.18.20",
     "esbuild-plugin-file-path-extensions": "^1.0.0",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.8.0",
@@ -73,6 +69,7 @@
     "git-log-parser": "^1.2.0",
     "jsdom": "^22.1.0",
     "jsonfile": "^6.1.0",
+    "knip": "^3.3.1",
     "luxon": "^3.4.3",
     "nx": "^16.5.2",
     "nx-cloud": "^16.5.2",
@@ -86,13 +83,11 @@
     "sherif": "^0.5.0",
     "solid-js": "^1.8.1",
     "stream-to-array": "^2.3.0",
-    "ts-node": "^10.7.0",
-    "tsup": "^7.2.0",
+    "tsup": "^7.3.0",
     "type-fest": "^4.5.0",
     "typescript": "5.1.6",
     "vite": "^4.4.11",
-    "vitest": "^0.33.0",
-    "vue": "^3.3.0"
+    "vitest": "^0.33.0"
   },
   "pnpm": {
     "overrides": {

packages/eslint-plugin-query/src/utils/ast-utils.ts

@@ -1,7 +1,6 @@
 import { AST_NODE_TYPES } from '@typescript-eslint/utils'
 import { uniqueBy } from './unique-by'
 import type { TSESLint, TSESTree } from '@typescript-eslint/utils'
-import type TSESLintScopeManager from '@typescript-eslint/scope-manager'
 import type { RuleContext } from '@typescript-eslint/utils/dist/ts-eslint'
 
 export const ASTUtils = {
@@ -143,7 +142,7 @@ export const ASTUtils = {
   },
   isDeclaredInNode(params: {
     functionNode: TSESTree.Node
-    reference: TSESLintScopeManager.Reference
+    reference: TSESLint.Scope.Reference
     scopeManager: TSESLint.Scope.ScopeManager
   }) {
     const { functionNode, reference, scopeManager } = params

packages/query-core/src/tests/utils.ts

@@ -1,5 +1,4 @@
 import { vi } from 'vitest'
-import { act } from '@testing-library/react'
 import { QueryClient, onlineManager } from '..'
 import * as utils from '../utils'
 import type { SpyInstance } from 'vitest'
@@ -33,14 +32,6 @@ export function sleep(timeout: number): Promise<void> {
   })
 }
 
-export function setActTimeout(fn: () => void, ms?: number) {
-  return setTimeout(() => {
-    act(() => {
-      fn()
-    })
-  }, ms)
-}
-
 export const executeMutation = <TVariables>(
   queryClient: QueryClient,
   options: MutationOptions<any, any, TVariables, any>,

packages/query-devtools/src/Devtools.tsx

@@ -106,7 +106,9 @@ const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
 )
 const [panelWidth, setPanelWidth] = createSignal(0)
 
-export const DevtoolsComponent: Component<QueryDevtoolsProps> = (props) => {
+export type DevtoolsComponentType = Component<QueryDevtoolsProps>
+
+const DevtoolsComponent: DevtoolsComponentType = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
     prefix: 'TanstackQueryDevtools',
   })
@@ -133,7 +135,7 @@ export const DevtoolsComponent: Component<QueryDevtoolsProps> = (props) => {
 
 export default DevtoolsComponent
 
-export const Devtools: Component<DevtoolsPanelProps> = (props) => {
+const Devtools: Component<DevtoolsPanelProps> = (props) => {
   loadFonts()
 
   const theme = useTheme()
@@ -265,7 +267,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
   )
 }
 
-export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
+const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -1037,7 +1039,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
   )
 }
 
-export const QueryRow: Component<{ query: Query }> = (props) => {
+const QueryRow: Component<{ query: Query }> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -1137,7 +1139,7 @@ export const QueryRow: Component<{ query: Query }> = (props) => {
   )
 }
 
-export const MutationRow: Component<{ mutation: Mutation }> = (props) => {
+const MutationRow: Component<{ mutation: Mutation }> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles
@@ -1245,7 +1247,7 @@ export const MutationRow: Component<{ mutation: Mutation }> = (props) => {
   )
 }
 
-export const QueryStatusCount: Component = () => {
+const QueryStatusCount: Component = () => {
   const stale = createSubscribeToQueryCacheBatcher(
     (queryCache) =>
       queryCache()
@@ -1299,7 +1301,7 @@ export const QueryStatusCount: Component = () => {
   )
 }
 
-export const MutationStatusCount: Component = () => {
+const MutationStatusCount: Component = () => {
   const success = createSubscribeToMutationCacheBatcher(
     (mutationCache) =>
       mutationCache()
@@ -1369,7 +1371,7 @@ export const MutationStatusCount: Component = () => {
   )
 }
 
-export const QueryStatus: Component<QueryStatusProps> = (props) => {
+const QueryStatus: Component<QueryStatusProps> = (props) => {
   const theme = useTheme()
   const styles = createMemo(() => {
     return theme() === 'dark' ? darkStyles : lightStyles

packages/query-devtools/src/Explorer.tsx

@@ -22,7 +22,7 @@ import type { Query } from '@tanstack/query-core'
  * @example
  * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
  */
-export function chunkArray<T extends { label: string; value: unknown }>(
+function chunkArray<T extends { label: string; value: unknown }>(
   array: Array<T>,
   size: number,
 ): Array<Array<T>> {

packages/query-devtools/src/index.tsx

@@ -5,7 +5,7 @@ import type {
   QueryClient,
   onlineManager as TonlineManager,
 } from '@tanstack/query-core'
-import type { DevtoolsComponent } from './Devtools'
+import type { DevtoolsComponentType } from './Devtools'
 import type {
   DevToolsErrorType,
   DevtoolsButtonPosition,
@@ -30,7 +30,7 @@ class TanstackQueryDevtools {
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
   #errorTypes: Signal<Array<DevToolsErrorType> | undefined>
-  #Component: typeof DevtoolsComponent | undefined
+  #Component: DevtoolsComponentType | undefined
   #dispose?: () => void
 
   constructor(config: TanstackQueryDevtoolsConfig) {
@@ -86,7 +86,7 @@ class TanstackQueryDevtools {
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
       const [queryClient] = this.#client
-      let Devtools: typeof DevtoolsComponent
+      let Devtools: DevtoolsComponentType
 
       if (this.#Component) {
         Devtools = this.#Component

packages/query-devtools/src/theme.ts

@@ -309,15 +309,3 @@ export const tokens = {
     tooltip: 1800,
   },
 }
-
-export type ThemeConfigType = typeof tokens
-export type ThemeColorsAll = {
-  [key in keyof ThemeConfigType['colors']]: key
-}[keyof ThemeConfigType['colors']]
-export type AtomicThemeColors =
-  | 'white'
-  | 'black'
-  | 'transparent'
-  | 'current'
-  | 'inherit'
-export type ThemeColors = Exclude<ThemeColorsAll, AtomicThemeColors>

packages/query-devtools/src/utils.tsx

@@ -15,14 +15,7 @@ export function getQueryStatusLabel(query: Query) {
           : 'fresh'
 }
 
-export const queryStatusLabels = [
-  'fresh',
-  'stale',
-  'paused',
-  'inactive',
-  'fetching',
-] as const
-export type IQueryStatusLabel = (typeof queryStatusLabels)[number]
+type QueryStatusLabel = 'fresh' | 'stale' | 'paused' | 'inactive' | 'fetching'
 
 export function getSidedProp<T extends string>(
   prop: T,
@@ -71,7 +64,7 @@ export function getMutationStatusColor({
           : 'gray'
 }
 
-export function getQueryStatusColorByLabel(label: IQueryStatusLabel) {
+export function getQueryStatusColorByLabel(label: QueryStatusLabel) {
   return label === 'fresh'
     ? 'green'
     : label === 'stale'
@@ -156,8 +149,6 @@ export const convertRemToPixels = (rem: number) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
 }
 
-export const convertPixelsToRem = (px: number) => px / convertRemToPixels(1)
-
 export const getPreferredColorScheme = () => {
   const [colorScheme, setColorScheme] = createSignal<'light' | 'dark'>('dark')
 

packages/react-query-devtools/package.json

@@ -71,14 +71,10 @@
   "devDependencies": {
     "@tanstack/react-query": "workspace:*",
     "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^3.1.4"
+    "react": "^18.2.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "workspace:^",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0"
   }
 }