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)
             }
           });
         }