update eslint plugins and fix errors

.changeset/gold-numbers-crash.md

@@ -0,0 +1,9 @@
+---
+"codemirror-graphql": patch
+"@graphiql/react": patch
+"graphql-language-service": patch
+"graphql-language-service-server": patch
+"monaco-graphql": patch
+---
+
+update eslint plugins and fix errors

.eslintrc.js

@@ -144,7 +144,6 @@ module.exports = {
         'no-useless-call': 'error',
         'no-useless-concat': 'error',
         'no-useless-return': 'off',
-        '@typescript-eslint/prefer-optional-chain': 'error',
         'no-warning-comments': 'off',
         radix: 'error',
         'require-await': 'off',
@@ -355,6 +354,7 @@ module.exports = {
       excludedFiles: ['**/*.{md,mdx}/*.{ts,tsx}'],
       // extends: ['plugin:@typescript-eslint/recommended-type-checked'],
       rules: {
+        '@typescript-eslint/prefer-optional-chain': 'error',
         '@typescript-eslint/no-unnecessary-type-assertion': 'error',
         '@typescript-eslint/no-floating-promises': 'error',
         '@typescript-eslint/non-nullable-type-assertion-style': 'error',

examples/monaco-graphql-webpack/src/index.ts

@@ -37,7 +37,7 @@ async function render() {
     .getElementById('toolbar')
     ?.setAttribute('style', 'display: inline-flex');
 
-  const toolbar = document.getElementById('toolbar')!;
+  const toolbar = document.getElementById('toolbar');
   const editors = createEditors();
   const {
     operationModel,

package.json

@@ -79,10 +79,12 @@
     "wsrun:noexamples": "wsrun --exclude-missing --exclude example-monaco-graphql-react-vite --exclude example-monaco-graphql-nextjs --exclude example-monaco-graphql-webpack --exclude example-graphiql-webpack"
   },
   "dependencies": {
-    "@arthurgeron/eslint-plugin-react-usememo": "^1.1.4",
+    "@arthurgeron/eslint-plugin-react-usememo": "^2.4.0",
     "@babel/cli": "^7.21.0",
     "@babel/core": "^7.21.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.20.2",
@@ -92,7 +94,7 @@
     "@changesets/changelog-github": "0.4.7",
     "@changesets/cli": "2.25.2",
     "@manypkg/get-packages": "^1.1.3",
-    "@shopify/eslint-plugin": "^42.1.0",
+    "@shopify/eslint-plugin": "^45.0.0",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@types/codemirror": "^0.0.90",
@@ -101,25 +103,25 @@
     "@types/jest": "^29.5.2",
     "@types/node": "^16.18.4",
     "@types/ws": "8.2.2",
-    "@typescript-eslint/eslint-plugin": "6.0.0-alpha.159",
-    "@typescript-eslint/parser": "6.0.0-alpha.159",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "babel-jest": "^29.4.3",
     "concurrently": "^7.0.0",
     "copy": "^0.3.2",
     "cspell": "^5.15.2",
-    "eslint": "^8.43.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.2",
-    "eslint-plugin-mdx": "^2.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-sonar": "^0.12.0",
-    "eslint-plugin-sonarjs": "^0.19.0",
-    "eslint-plugin-unicorn": "^47.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-cypress": "^3.3.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-sonar": "^0.14.1",
+    "eslint-plugin-sonarjs": "^1.0.3",
+    "eslint-plugin-unicorn": "^54.0.0",
     "execa": "^7.1.1",
     "fetch-mock": "6.5.2",
     "husky": "^4.2.3",

packages/codemirror-graphql/src/info.ts

@@ -98,11 +98,7 @@ CodeMirror.registerHelper(
       renderDescription(into, options, typeInfo.argDef);
       return into;
     }
-    if (
-      kind === 'EnumValue' &&
-      typeInfo.enumValue &&
-      typeInfo.enumValue.description
-    ) {
+    if (kind === 'EnumValue' && typeInfo.enumValue?.description) {
       const header = document.createElement('div');
       header.className = 'CodeMirror-info-header';
       renderEnumValue(header, typeInfo, options);

packages/codemirror-graphql/src/utils/jump-addon.ts

@@ -121,9 +121,7 @@ function onKeyDown(cm: CodeMirror.Editor, event: KeyboardEvent) {
 }
 
 const isMac =
-  typeof navigator !== 'undefined' &&
-  navigator &&
-  navigator.appVersion.includes('Mac');
+  typeof navigator !== 'undefined' && navigator?.appVersion.includes('Mac');
 
 function isJumpModifier(key: string) {
   return key === (isMac ? 'Meta' : 'Control');

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

@@ -105,9 +105,11 @@ export function useResponseEditor(
 
           // 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);
             return null;
           }
+          // eslint-disable-next-line react/no-deprecated -- We still support React 16/17
           ReactDOM.render(infoElements, tooltipDiv);
           return tooltipDiv;
         },

packages/graphiql/test/e2e-server.js

@@ -6,6 +6,7 @@
  */
 
 /* eslint-disable no-console */
+const { createServer } = require('node:http');
 const express = require('express');
 const path = require('node:path');
 const { createHandler } = require('graphql-http/lib/use/express');
@@ -17,13 +18,7 @@ const WebSocketsServer = require('./afterDevServer');
 
 // Server
 app.post('/graphql', createHandler({ schema }));
-
-app.get(
-  '/graphql',
-  createHandler({
-    schema,
-  }),
-);
+app.get('/graphql', createHandler({ schema }));
 
 app.post('/bad/graphql', (_req, res, next) => {
   res.json({ data: badSchema });
@@ -44,7 +39,8 @@ app.use(express.static(path.resolve(__dirname, '../')));
 app.use('index.html', express.static(path.resolve(__dirname, '../dev.html')));
 
 // messy but it allows close
-const server = require('node:http').createServer(app);
+const server = createServer(app);
+
 server.listen(process.env.PORT || 3100, function () {
   const { port } = this.address();
 
@@ -58,7 +54,5 @@ server.listen(process.env.PORT || 3100, function () {
     process.exit();
   });
 });
-const wsServer = WebSocketsServer();
 
-module.exports.server = server;
-module.exports.wsServer = wsServer;
+WebSocketsServer();

packages/graphql-language-service-server/src/GraphQLLanguageService.ts

@@ -201,8 +201,6 @@ export class GraphQLLanguageService {
       typeof extensions.customValidationRules === 'function'
     ) {
       customRules = extensions.customValidationRules(this._graphQLConfig);
-
-      /* eslint-enable no-implicit-coercion */
     }
     const schema = await this._graphQLCache.getSchema(
       projectName,

packages/graphql-language-service-server/src/MessageProcessor.ts

@@ -1010,9 +1010,7 @@ export class MessageProcessor {
           symbols.push(...docSymbols);
         }),
       );
-      return symbols.filter(
-        symbol => symbol?.name && symbol.name.includes(params.query),
-      );
+      return symbols.filter(symbol => symbol?.name?.includes(params.query));
     }
 
     return [];
@@ -1358,7 +1356,6 @@ export class MessageProcessor {
       const cachedDocument = this._textDocumentCache.get(uri);
       if (
         cachedDocument &&
-        textDocument &&
         textDocument?.version &&
         cachedDocument.version < textDocument.version
       ) {

packages/graphql-language-service-server/src/__tests__/GraphQLLanguageService.test.ts

@@ -28,7 +28,7 @@ describe('GraphQLLanguageService', () => {
   const mockCache = {
     async getSchema() {
       const config = this.getGraphQLConfig();
-      return config.getDefault()!.getSchema();
+      return config.getDefault().getSchema();
     },
 
     getGraphQLConfig() {

packages/graphql-language-service-server/src/__tests__/MessageProcessor.test.ts

@@ -450,7 +450,7 @@ describe('MessageProcessor', () => {
     );
     const project = messageProcessor._graphQLCache.getProjectForFile(
       test.textDocument.uri,
-    )!;
+    );
 
     const customResult = messageProcessor._getCustomLocateResult(
       project,

packages/graphql-language-service-server/src/__tests__/__utils__/MockProject.ts

@@ -101,9 +101,9 @@ export class MockProject {
   }
   private mockFiles() {
     const mockFiles = { ...defaultMocks };
-    Array.from(this.fileCache).map(([filename, text]) => {
+    for (const [filename, text] of this.fileCache) {
       mockFiles[this.filePath(filename)] = text;
-    });
+    }
     mockfs(mockFiles);
   }
   public filePath(filename: string) {

packages/graphql-language-service-server/src/parsers/vue.ts

@@ -8,8 +8,8 @@ type ParseVueSFCResult =
   | {
       type: 'ok';
       scriptOffset: number;
-      scriptSetupAst?: import('@babel/types').Statement[];
-      scriptAst?: import('@babel/types').Statement[];
+      scriptSetupAst?: Statement[];
+      scriptAst?: Statement[];
     };
 
 export function parseVueSFC(source: string): ParseVueSFCResult {
@@ -40,8 +40,8 @@ export function parseVueSFC(source: string): ParseVueSFCResult {
   return {
     type: 'ok',
     scriptOffset: scriptBlock.loc.start.line - 1,
-    scriptSetupAst: scriptBlock?.scriptSetupAst as Statement[],
-    scriptAst: scriptBlock?.scriptAst as BlockStatement[],
+    scriptSetupAst: scriptBlock.scriptSetupAst,
+    scriptAst: scriptBlock.scriptAst as BlockStatement[],
   };
 }
 

packages/graphql-language-service/src/interface/getAutocompleteSuggestions.ts

@@ -442,7 +442,7 @@ export function getAutocompleteSuggestions(
   return [];
 }
 
-const typeSystemCompletionItems = [
+const typeSystemCompletionItems: CompletionItem[] = [
   { label: 'type', kind: CompletionItemKind.Function },
   { label: 'interface', kind: CompletionItemKind.Function },
   { label: 'union', kind: CompletionItemKind.Function },
@@ -451,7 +451,7 @@ const typeSystemCompletionItems = [
   { label: 'schema', kind: CompletionItemKind.Function },
 ];
 
-const executableCompletionItems = [
+const executableCompletionItems: CompletionItem[] = [
   { label: 'query', kind: CompletionItemKind.Function },
   { label: 'mutation', kind: CompletionItemKind.Function },
   { label: 'subscription', kind: CompletionItemKind.Function },
@@ -460,34 +460,42 @@ const executableCompletionItems = [
 ];
 
 // Helper functions to get suggestions for each kinds
-function getSuggestionsForTypeSystemDefinitions(token: ContextToken) {
+function getSuggestionsForTypeSystemDefinitions(
+  token: ContextToken,
+): CompletionItem[] {
   return hintList(token, [
     { label: 'extend', kind: CompletionItemKind.Function },
     ...typeSystemCompletionItems,
   ]);
 }
 
-function getSuggestionsForExecutableDefinitions(token: ContextToken) {
+function getSuggestionsForExecutableDefinitions(
+  token: ContextToken,
+): CompletionItem[] {
   return hintList(token, executableCompletionItems);
 }
 
-function getSuggestionsForUnknownDocumentMode(token: ContextToken) {
+function getSuggestionsForUnknownDocumentMode(
+  token: ContextToken,
+): CompletionItem[] {
   return hintList(token, [
     { label: 'extend', kind: CompletionItemKind.Function },
     ...executableCompletionItems,
     ...typeSystemCompletionItems,
   ]);
 }
 
-function getSuggestionsForExtensionDefinitions(token: ContextToken) {
+function getSuggestionsForExtensionDefinitions(
+  token: ContextToken,
+): CompletionItem[] {
   return hintList(token, typeSystemCompletionItems);
 }
 
 function getSuggestionsForFieldNames(
   token: ContextToken,
   typeInfo: AllTypeInfo,
   options?: InternalAutocompleteOptions,
-): Array<CompletionItem> {
+): CompletionItem[] {
   if (typeInfo.parentType) {
     const { parentType } = typeInfo;
     // const { parentType, fieldDef, argDefs } = typeInfo;

packages/graphql-language-service/src/interface/getDefinition.ts

@@ -127,10 +127,6 @@ export async function getDefinitionQueryResultForArgument(
   typeName: string,
   dependencies: Array<ObjectTypeInfo>,
 ): Promise<DefinitionQueryResult> {
-  dependencies.filter(
-    ({ definition }) => definition.name && definition.name.value === typeName,
-  );
-
   const definitions: Array<Definition> = [];
 
   for (const { filePath, content, definition } of dependencies) {

packages/graphql-language-service/src/parser/onlineParser.ts

@@ -315,7 +315,6 @@ function isList(state: State): boolean | null | undefined {
     Array.isArray(state.rule) &&
     typeof state.rule[state.step] !== 'string' &&
     (state.rule[state.step] as Rule);
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- otherwise has type issue
   return step && step.isList;
 }