ci(eslint): add @cspell/eslint-plugin to prevent misspelling (error) (TanStack#6718)

* ci: add @cspell/eslint-plugin to prevent misspelling

* ci(eslint/cspell): convert rule as error

* fix(cspell): reduce unnecessary words to check

* fix(eslint): remove `ouuid` as @cspell/spellchecker's words

Author: manudeli

.eslintrc.cjs

@@ -6,6 +6,7 @@ const config = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', 'import'],
   extends: [
+    'plugin:@cspell/recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:import/recommended',
@@ -34,6 +35,27 @@ const config = {
     },
   },
   rules: {
+    '@cspell/spellchecker': [
+      'error',
+      {
+        cspell: {
+          words: [
+            'tanstack', // Our package scope
+            'tsqd', // Our public interface (TanStack Query Devtools shorthand)
+            'retryer', // Our public interface
+            'Promisable', // Our public interface
+            'extralight', // Our public interface
+            'codemod', // We support our codemod
+
+            'TSES', // @typescript-eslint package's interface
+            'tsup', // We use tsup as builder
+            'solidjs', // Our target framework
+            'tabular-nums', // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
+            'todos', // Too general word to be caught as error
+          ],
+        },
+      },
+    ],
     '@typescript-eslint/array-type': [
       'error',
       { default: 'generic', readonly: 'generic' },

examples/react/optimistic-updates-cache/src/pages/index.tsx

@@ -41,7 +41,7 @@ function Example() {
     // When mutate is called:
     onMutate: async (newTodo: string) => {
       setText('')
-      // Cancel any outgoing refetches
+      // Cancel any outgoing refetch
       // (so they don't overwrite our optimistic update)
       await queryClient.cancelQueries(todoListOptions)
 

package.json

@@ -37,6 +37,7 @@
   },
   "namespace": "@tanstack",
   "devDependencies": {
+    "@cspell/eslint-plugin": "^8.3.2",
     "@solidjs/testing-library": "^0.8.5",
     "@tanstack/config": "^0.3.2",
     "@testing-library/jest-dom": "^6.1.5",

packages/angular-query-experimental/src/util/assert-injector/assert-injector.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @cspell/spellchecker */
 /**
  * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.
  *
@@ -8,6 +9,7 @@
  * For more information about the original code, see
  * https://github.com/nartc/ngxtension-platform
  */
+/* eslint-enable */
 
 import {
   InjectionToken,

packages/angular-query-experimental/src/util/assert-injector/assert-injector.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @cspell/spellchecker */
 /**
  * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.
  *
@@ -8,6 +9,7 @@
  * For more information about the original code, see
  * https://github.com/nartc/ngxtension-platform
  */
+/* eslint-enable */
 
 import {
   Injector,

packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @cspell/spellchecker */
 /**
  * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.
  *
@@ -8,6 +9,7 @@
  * For more information about the original code, see
  * https://github.com/nartc/ngxtension-platform
  */
+/* eslint-enable */
 
 import { TestBed } from '@angular/core/testing'
 import { createNoopInjectionToken } from './create-injection-token'

packages/angular-query-experimental/src/util/create-injection-token/create-injection-token.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @cspell/spellchecker */
 /**
  * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.
  *
@@ -8,6 +9,7 @@
  * For more information about the original code, see
  * https://github.com/nartc/ngxtension-platform
  */
+/* eslint-enable */
 
 import {
   type EnvironmentProviders,

packages/codemods/src/v5/remove-overloads/__testfixtures__/default-import.input.tsx

@@ -200,11 +200,11 @@ export const WithIdentifiers = () => {
 }
 
 export const SecondArgumentIsAFunctionExample = () => {
-  useQuery(ordersCacheKeys.groupOrders(ouuid), () => api.getPatientGroupOrders(ouuid).then((r) => r.data))
+  useQuery(ordersCacheKeys.groupOrders(id), () => api.getPatientGroupOrders(id).then((r) => r.data))
 
   const rest = 'rest'
   const of = 1
   const functionArguments = { foo: 'bar' }
 
-  useQuery(ordersCacheKeys.groupOrders(ouuid), () => api.getPatientGroupOrders(ouuid).then((r) => r.data), rest, of, functionArguments)
+  useQuery(ordersCacheKeys.groupOrders(id), () => api.getPatientGroupOrders(id).then((r) => r.data), rest, of, functionArguments)
 }

packages/codemods/src/v5/remove-overloads/__testfixtures__/default-import.output.tsx

@@ -486,16 +486,16 @@ export const WithIdentifiers = () => {
 
 export const SecondArgumentIsAFunctionExample = () => {
   useQuery({
-    queryKey: ordersCacheKeys.groupOrders(ouuid),
-    queryFn: () => api.getPatientGroupOrders(ouuid).then((r) => r.data)
+    queryKey: ordersCacheKeys.groupOrders(id),
+    queryFn: () => api.getPatientGroupOrders(id).then((r) => r.data)
   })
 
   const rest = 'rest'
   const of = 1
   const functionArguments = { foo: 'bar' }
 
   useQuery({
-    queryKey: ordersCacheKeys.groupOrders(ouuid),
-    queryFn: () => api.getPatientGroupOrders(ouuid).then((r) => r.data)
+    queryKey: ordersCacheKeys.groupOrders(id),
+    queryFn: () => api.getPatientGroupOrders(id).then((r) => r.data)
   }, rest, of, functionArguments)
 }

packages/eslint-plugin-query/src/__tests__/exhaustive-deps.test.ts

@@ -364,13 +364,13 @@ ruleTester.run('exhaustive-deps', rule, {
         const CONST_VAL = 1
         function useHook() {
           const queryClient = useQueryClient()
-          const kueryKlient = useQueryClient()
+          const queryClient2 = useQueryClient()
           useQuery({
             queryKey: ["foo"],
             queryFn: () => {
                 doSomething(queryClient)
                 queryClient.invalidateQueries()
-                doSomethingSus(kueryKlient)
+                doSomethingSus(queryClient2)
             }
           });
         }

packages/eslint-plugin-query/src/rules/no-rest-desctructuring/no-rest-destructuring.test.ts

@@ -7,7 +7,7 @@ const ruleTester = new ESLintUtils.RuleTester({
   settings: {},
 })
 
-ruleTester.run('no-rest-desctructuring', rule, {
+ruleTester.run('no-rest-destructuring', rule, {
   valid: [
     {
       name: 'useQuery is not captured',

packages/query-core/src/query.ts

@@ -330,7 +330,7 @@ export class Query<
   ): Promise<TData> {
     if (this.state.fetchStatus !== 'idle') {
       if (this.state.dataUpdatedAt && fetchOptions?.cancelRefetch) {
-        // Silently cancel current fetch if the user wants to cancel refetches
+        // Silently cancel current fetch if the user wants to cancel refetch
         this.cancel({ silent: true })
       } else if (this.#promise) {
         // make sure that retries that were potentially cancelled due to unmounts can continue

packages/query-core/src/queryObserver.ts

@@ -234,7 +234,7 @@ export class QueryObserver<
       // arrives, it finds the old `observer.currentResult` which is related
       // to the old QueryKey. Which means that currentResult and selectData are
       // out of sync already.
-      // To solve this, we move the cursor of the currentResult everytime
+      // To solve this, we move the cursor of the currentResult every time
       // an observer reads an optimistic value.
 
       // When keeping the previous data, the result doesn't change until new

packages/query-core/src/tests/hydration.test.tsx

@@ -15,7 +15,7 @@ async function fetchData<TData>(value: TData, ms?: number): Promise<TData> {
 }
 
 describe('dehydration and rehydration', () => {
-  test('should work with serializeable values', async () => {
+  test('should work with serializable values', async () => {
     const queryCache = new QueryCache()
     const queryClient = createQueryClient({ queryCache })
     await queryClient.prefetchQuery({

packages/query-core/src/tests/infiniteQueryBehavior.test.tsx

@@ -167,7 +167,7 @@ describe('InfiniteQueryBehavior', () => {
     // Refetch the infinite query
     await observer.refetch()
 
-    // Only 2 pages should be refetched
+    // Only 2 pages should refetch
     expect(queryFnSpy).toHaveBeenCalledTimes(2)
 
     expect(queryFnSpy).toHaveBeenNthCalledWith(1, {

packages/query-core/src/tests/notifyManager.test.tsx

@@ -68,13 +68,13 @@ describe('notifyManager', () => {
     expect(notifySpy).toHaveBeenCalledTimes(1)
   })
 
-  it('typedefs should catch proper signatures', async () => {
+  it('typeDefs should catch proper signatures', async () => {
     const notifyManagerTest = createNotifyManager()
 
     // we define some fn with its signature:
     const fn: (a: string, b: number) => string = (a, b) => a + b
 
-    //now somefn expect to be called with args [a: string, b: number]
+    //now someFn expect to be called with args [a: string, b: number]
     const someFn = notifyManagerTest.batchCalls(fn)
 
     someFn('im happy', 4)

packages/query-core/src/tests/queryClient.test.tsx

@@ -196,7 +196,7 @@ describe('queryClient', () => {
       expect(() => {
         queryClient.setQueryData([key, user], (prevUser?: typeof user) => ({
           ...prevUser!,
-          name: 'Edvin',
+          name: 'James',
         }))
       }).not.toThrow()
     })
@@ -433,7 +433,7 @@ describe('queryClient', () => {
       ).resolves.toEqual('bar')
     })
 
-    test('should return the cached query data if the query is found and cached query data is falsey', async () => {
+    test('should return the cached query data if the query is found and cached query data is falsy', async () => {
       const key = queryKey()
       const queryFn = () => Promise.resolve(0)
 

packages/query-core/src/tests/queryObserver.test.tsx

@@ -682,7 +682,7 @@ describe('queryObserver', () => {
     unsubscribe()
   })
 
-  test('should not use replaceEqualDeep for select value when structuralSharing option is true and placeholderdata is defined', () => {
+  test('should not use replaceEqualDeep for select value when structuralSharing option is true and placeholderData is defined', () => {
     const key = queryKey()
 
     const data = { value: 'data' }
@@ -719,7 +719,7 @@ describe('queryObserver', () => {
     expect(observer.getCurrentResult().data).toBe(selectedData2)
   })
 
-  test('should not use an undefined value returned by select as placeholderdata', () => {
+  test('should not use an undefined value returned by select as placeholderData', () => {
     const key = queryKey()
 
     const data = { value: 'data' }

packages/query-core/src/types.ts

@@ -278,7 +278,7 @@ export interface QueryObserverOptions<
       ) => boolean | 'always')
   /**
    * If set to `true`, the query will refetch on mount if the data is stale.
-   * If set to `false`, will disable additional instances of a query to trigger background refetches.
+   * If set to `false`, will disable additional instances of a query to trigger background refetch.
    * If set to `'always'`, the query will always refetch on mount.
    * If set to a function, the function will be executed with the latest data and query to compute the value
    * Defaults to `true`.

packages/query-devtools/src/Devtools.tsx

@@ -330,16 +330,16 @@ const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
       }
     }
 
-    const unsub = () => {
+    const unsubscribe = () => {
       if (isResizing()) {
         setIsResizing(false)
       }
       document.removeEventListener('mousemove', runDrag, false)
-      document.removeEventListener('mouseUp', unsub, false)
+      document.removeEventListener('mouseUp', unsubscribe, false)
     }
 
     document.addEventListener('mousemove', runDrag, false)
-    document.addEventListener('mouseup', unsub, false)
+    document.addEventListener('mouseup', unsubscribe, false)
   }
 
   let panelRef!: HTMLDivElement
@@ -2062,7 +2062,7 @@ const setupQueryCacheSubscription = () => {
     return client.getQueryCache()
   })
 
-  const unsub = queryCache().subscribe((q) => {
+  const unsubscribe = queryCache().subscribe((q) => {
     batch(() => {
       for (const [callback, value] of queryCacheMap.entries()) {
         if (!value.shouldUpdate(q)) continue
@@ -2073,10 +2073,10 @@ const setupQueryCacheSubscription = () => {
 
   onCleanup(() => {
     queryCacheMap.clear()
-    unsub()
+    unsubscribe()
   })
 
-  return unsub
+  return unsubscribe
 }
 
 const createSubscribeToQueryCacheBatcher = <T,>(
@@ -2122,7 +2122,7 @@ const setupMutationCacheSubscription = () => {
     return client.getMutationCache()
   })
 
-  const unsub = mutationCache().subscribe(() => {
+  const unsubscribe = mutationCache().subscribe(() => {
     for (const [callback, setter] of mutationCacheMap.entries()) {
       queueMicrotask(() => {
         setter(callback(mutationCache))
@@ -2132,10 +2132,10 @@ const setupMutationCacheSubscription = () => {
 
   onCleanup(() => {
     mutationCacheMap.clear()
-    unsub()
+    unsubscribe()
   })
 
-  return unsub
+  return unsubscribe
 }
 
 const createSubscribeToMutationCacheBatcher = <T,>(

packages/query-devtools/src/__tests__/utils.test.ts

@@ -91,6 +91,7 @@ describe('Utils tests', () => {
           ['fr', 'bonjour'],
         ])
 
+        /* eslint-disable @cspell/spellchecker */
         const newData = updateNestedDataByPath(oldData, ['fr'], 'salut')
 
         expect(newData).not.toBe(oldData) // should not be the same reference
@@ -108,10 +109,12 @@ describe('Utils tests', () => {
           }
         `)
       })
+      /* eslint-enable */
     })
 
     describe('nested data', () => {
       it('should update data correctly', async () => {
+        /* eslint-disable @cspell/spellchecker */
         const oldData = new Map([
           [
             'pumpkin-pie',
@@ -368,6 +371,7 @@ describe('Utils tests', () => {
             },
           }
         `)
+        /* eslint-enable */
       })
     })
   })
@@ -469,6 +473,7 @@ describe('Utils tests', () => {
 
     describe('nested data', () => {
       it('should delete nested items correctly', async () => {
+        /* eslint-disable @cspell/spellchecker */
         const oldData = new Map([
           [
             'pumpkin-pie',
@@ -720,6 +725,7 @@ describe('Utils tests', () => {
             },
           }
         `)
+        /* eslint-enable */
       })
     })
   })

packages/query-devtools/src/index.tsx

@@ -3,7 +3,7 @@ import { createSignal, lazy } from 'solid-js'
 import { setupStyleSheet } from './utils'
 import type {
   QueryClient,
-  onlineManager as TonlineManager,
+  onlineManager as TOnlineManager,
 } from '@tanstack/query-core'
 import type { DevtoolsComponentType } from './Devtools'
 import type {
@@ -21,7 +21,7 @@ export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
 
 class TanstackQueryDevtools {
   #client: Signal<QueryClient>
-  #onlineManager: typeof TonlineManager
+  #onlineManager: typeof TOnlineManager
   #queryFlavor: string
   #version: string
   #isMounted = false