bump eslint, eslint-plugins and fix new warnings (#3896)

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* aa

* [skip ci]

* fix

* migrate `graphiql` from `jest` to `vitest`

* add .js extension

* add .js extension

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* add

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* clean up deps

* clean up deps

* clean up deps

* clean up deps

* clean up deps

* upd

* upd

* more changes from graphiql v4

* more

* fix path isn't exported

* fix integration tests

* fix e2e

* bump

* add changeset

* remove unneeded beforeDevServer.js

* found case which was not optimized

* Delete .changeset/sour-onions-rhyme.md

* Delete .changeset/silly-nails-double.md

* polish graphiql tests setup

* polish graphiql tests setup

* should be good

* prettier

* upd

* remove `vite-plugin-commonjs`

* remove react compiler patch, and use 19.1.0-rc.1 version

* remove react compiler patch, and use 19.1.0-rc.1 version

* lock update

* use requestAnimationFrame instead of setTimeout

* use requestAnimationFrame instead of setTimeout

* Update packages/graphiql-react/src/editor/hooks.ts

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* upd

* upd

* upd

* upd

* upd

* bump eslint, eslint-plugins and fix new warnings

* update deps

* Update docs/migration/graphiql-2.0.0.md

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>

Author: dimaMachina

.changeset/eleven-buses-peel.md

@@ -0,0 +1,11 @@
+---
+'graphql-language-service-server': patch
+'graphql-language-service': patch
+'vscode-graphql-execution': patch
+'codemirror-graphql': patch
+'@graphiql/toolkit': patch
+'@graphiql/react': patch
+'monaco-graphql': patch
+---
+
+bump eslint, eslint-plugins and fix new warnings

.eslintrc.js

@@ -167,9 +167,8 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': [
           'error',
           {
-            varsIgnorePattern: '^React$',
+            varsIgnorePattern: '^(React|_)', // allow underscores in destructuring
             argsIgnorePattern: '^_',
-            ignoreRestSiblings: true,
           },
         ],
 
@@ -356,7 +355,8 @@ module.exports = {
         'unicorn/prefer-dom-node-text-content': 'error',
         quotes: ['error', 'single', { avoidEscape: true }], // Matches Prettier, but also replaces backticks with single quotes
         // TODO: Fix all errors for the following rules included in recommended config
-        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
+        'import-x/no-named-as-default-member': 'off',
       },
     },
     {
@@ -372,6 +372,9 @@ module.exports = {
         '@typescript-eslint/consistent-type-assertions': 'error',
         '@typescript-eslint/no-duplicate-type-constituents': 'error',
         // TODO: Fix all errors for the following rules included in recommended config
+        '@typescript-eslint/no-deprecated': 'off',
+        '@typescript-eslint/no-unsafe-function-type': 'off',
+
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
@@ -381,12 +384,37 @@ module.exports = {
         '@typescript-eslint/no-namespace': 'off',
       },
       parserOptions: {
-        project: [
-          'packages/*/tsconfig.json',
-          'examples/*/tsconfig.json',
-          'packages/graphiql/cypress/tsconfig.json',
-          'tsconfig.eslint.json',
-        ],
+        projectService: {
+          allowDefaultProject: [
+            'examples/monaco-graphql-react-vite/vite.config.ts',
+            'packages/*/vitest.config.mts',
+            'packages/*/vite.config.mts',
+
+            'packages/cm6-graphql/__tests__/test.spec.ts',
+            'packages/graphiql-react/setup-files.ts',
+            'packages/graphiql/src/GraphiQL.spec.tsx',
+            'packages/vscode-graphql-syntax/tests/*.spec.ts',
+            'packages/graphql-language-service-cli/src/__tests__/*.test.ts',
+            'packages/monaco-graphql/test/monaco-editor.test.ts',
+
+            'packages/codemirror-graphql/setup-files.ts',
+            'packages/codemirror-graphql/src/__tests__/testSchema.ts',
+            'packages/codemirror-graphql/src/__tests__/*.test.ts',
+            'packages/codemirror-graphql/src/{variables,utils,results}/__tests__/*.test.ts',
+
+            'packages/graphql-language-service/benchmark/index.ts',
+            'packages/graphql-language-service/src/{utils,parser,interface}/__tests__/*.test.ts',
+            'packages/graphql-language-service/src/parser/__tests__/OnlineParserUtils.ts',
+
+            'packages/graphql-language-service-server/src/__tests__/*.{spec,test}.ts',
+            'packages/graphql-language-service-server/src/__tests__/__utils__/utils.ts',
+            'packages/graphql-language-service-server/src/__tests__/__utils__/MockProject.ts',
+
+            'packages/vscode-graphql-syntax/tests/__utilities__/serializer.ts',
+            'packages/vscode-graphql-syntax/tests/__utilities__/utilities.ts',
+          ],
+          maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 100,
+        },
       },
     },
     // Cypress plugin, global, etc., only for cypress directory

docs/migration/graphiql-2.0.0.md

@@ -103,11 +103,11 @@ easy access to its props, state and methods by attaching a ref to it like so:
 ```tsx
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
-import React from 'react';
+import { Component } from 'react';
 
 const fetcher = createGraphiQLFetcher({ url: 'https://my.endpoint' });
 
-class MyComponent extends React.Component {
+class MyComponent extends Component {
   _graphiql: GraphiQL;
 
   componentDidMount() {

package.json

@@ -93,35 +93,35 @@
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.7",
     "@manypkg/get-packages": "^1.1.3",
-    "@shopify/eslint-plugin": "^45.0.0",
+    "@shopify/eslint-plugin": "^48.0.2",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
     "@types/codemirror": "^0.0.90",
     "@types/express": "^4.17.11",
     "@types/fetch-mock": "^7.3.2",
     "@types/jest": "^29.5.2",
     "@types/node": "^16.18.4",
     "@types/ws": "8.2.2",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
     "babel-jest": "^29.4.3",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "concurrently": "^7.0.0",
     "copy": "^0.3.2",
     "cspell": "^5.15.2",
-    "eslint": "9.14.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-import-x": "^3.1.0",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-promise": "^7.0.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint": "9.25.1",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-import-resolver-typescript": "^4.3.4",
+    "eslint-plugin-cypress": "^4.3.0",
+    "eslint-plugin-import-x": "^4.11.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-mdx": "^3.4.1",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "eslint-plugin-sonar": "^0.14.1",
     "eslint-plugin-sonarjs": "^1.0.4",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-unicorn": "^56.0.0",
     "execa": "^7.1.1",
     "identity-obj-proxy": "^3.0.0",
     "fetch-mock": "6.5.2",

packages/codemirror-graphql/src/index.d.ts

@@ -13,7 +13,5 @@ declare module 'codemirror' {
     hint?: ShowHintOptions['hint'];
   }
 
-  interface CodeMirrorHintMap {}
-
-  const hint: CodeMirrorHintMap;
+  const hint: object;
 }

packages/graphiql-react/src/editor/response-editor.tsx

@@ -1,7 +1,8 @@
 import { formatError } from '@graphiql/toolkit';
 import type { Position, Token } from 'codemirror';
-import { ComponentType, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import { ComponentType, useEffect, useRef, JSX } from 'react';
+// eslint-disable-next-line react/no-deprecated -- We can't refactor to root.unmount() from React 18 because we support React 16/17 too
+import { unmountComponentAtNode, render } from 'react-dom';
 import { useSchemaContext } from '../schema';
 
 import {
@@ -28,8 +29,7 @@ export type ResponseTooltipType = ComponentType<{
 
 export type UseResponseEditorArgs = CommonEditorProps & {
   /**
-   * Customize the tooltip when hovering over properties in the response
-   * editor.
+   * Customize the tooltip when hovering over properties in the response editor.
    */
   responseTooltip?: ResponseTooltipType;
 };
@@ -52,6 +52,7 @@ function importCodeMirrorImports() {
     { useCommonAddons: false },
   );
 }
+
 // To make react-compiler happy, otherwise complains about - Hooks may not be referenced as normal values
 const _useResponseEditor = useResponseEditor;
 
@@ -109,15 +110,11 @@ export function useResponseEditor(
               <ImagePreview key="image-preview" token={token} />,
             );
           }
-
-          // We can't refactor to root.unmount() from React 18 because we support React 16/17 too
           if (!infoElements.length) {
-            // eslint-disable-next-line react/no-deprecated -- We still support React 16/17
-            ReactDOM.unmountComponentAtNode(tooltipDiv);
+            unmountComponentAtNode(tooltipDiv);
             return null;
           }
-          // eslint-disable-next-line react/no-deprecated -- We still support React 16/17
-          ReactDOM.render(infoElements, tooltipDiv);
+          render(infoElements, tooltipDiv);
           return tooltipDiv;
         },
       );

packages/graphiql-react/src/explorer/components/utils.tsx

@@ -6,6 +6,7 @@ import {
   isListType,
   isNonNullType,
 } from 'graphql';
+import { JSX } from 'react';
 
 export function renderType(
   type: GraphQLType,

packages/graphiql-react/src/explorer/context.tsx

@@ -18,7 +18,7 @@ import { useSchemaContext } from '../schema';
 import { createContextHook, createNullableContext } from '../utility/context';
 
 export type ExplorerFieldDef =
-  | GraphQLField<{}, {}, {}>
+  | GraphQLField<unknown, unknown>
   | GraphQLInputField
   | GraphQLArgument;
 
@@ -116,8 +116,10 @@ export function ExplorerContextProvider(props: ExplorerContextProviderProps) {
           return oldNavStack;
         }
         const newNavStack: ExplorerNavStack = [initialNavStackItem];
-        let lastEntity: GraphQLNamedType | GraphQLField<any, any, any> | null =
-          null;
+        let lastEntity:
+          | GraphQLNamedType
+          | GraphQLField<unknown, unknown>
+          | null = null;
         for (const item of oldNavStack) {
           if (item === initialNavStackItem) {
             // No need to copy the initial item

packages/graphiql-react/src/toolbar/button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, MouseEventHandler, useState } from 'react';
+import { forwardRef, MouseEventHandler, useState, JSX } from 'react';
 import { clsx } from 'clsx';
 import { Tooltip, UnStyledButton } from '../ui';
 

packages/graphiql-react/src/ui/button-group.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, JSX } from 'react';
 import { clsx } from 'clsx';
 
 import './button-group.css';