[ESLint] enable unicorn/prefer-at rule (#3046)

* format

* fixes

.changeset/lazy-rabbits-wink.md

@@ -0,0 +1,10 @@
+---
+'codemirror-graphql': patch
+'@graphiql/react': patch
+'@graphiql/toolkit': patch
+'graphql-language-service': patch
+'graphql-language-service-cli': patch
+'graphql-language-service-server': patch
+---
+
+Prefer .at() method for index access

.eslintrc.js

@@ -237,6 +237,7 @@ module.exports = {
       { extensions: ['.tsx', '.jsx'], allow: 'as-needed' },
     ],
 
+    'unicorn/prefer-at': 'error',
     'unicorn/consistent-destructuring': 'error',
     'prefer-destructuring': ['error', { VariableDeclarator: { object: true } }],
     'promise/no-multiple-resolved': 'error',

packages/codemirror-graphql/src/results/mode.ts

@@ -9,14 +9,8 @@
 
 import CodeMirror from 'codemirror';
 
-import {
-  list,
-  t,
-  onlineParser,
-  p,
-  State,
-  Token,
-} from 'graphql-language-service';
+import { list, t, onlineParser, p, Token } from 'graphql-language-service';
+import indent from '../utils/mode-indent';
 
 /**
  * This mode defines JSON, but provides a data-laden parser state to enable
@@ -44,25 +38,6 @@ CodeMirror.defineMode('graphql-results', config => {
   };
 });
 
-function indent(
-  this: CodeMirror.Mode<any> & {
-    electricInput?: RegExp;
-    config?: CodeMirror.EditorConfiguration;
-  },
-  state: State,
-  textAfter: string,
-) {
-  const { levels, indentLevel } = state;
-  // If there is no stack of levels, use the current level.
-  // Otherwise, use the top level, preemptively dedenting for close braces.
-  const level =
-    !levels || levels.length === 0
-      ? indentLevel
-      : levels[levels.length - 1] -
-        (this.electricInput?.test(textAfter) ? 1 : 0);
-  return (level || 0) * (this.config?.indentUnit || 0);
-}
-
 /**
  * The lexer rules. These are exactly as described by the spec.
  */

packages/codemirror-graphql/src/utils/mode-indent.ts

@@ -25,7 +25,6 @@ export default function indent(
   const level =
     !levels || levels.length === 0
       ? indentLevel
-      : levels[levels.length - 1] -
-        (this.electricInput?.test(textAfter) ? 1 : 0);
+      : levels.at(-1)! - (this.electricInput?.test(textAfter) ? 1 : 0);
   return (level || 0) * (this.config?.indentUnit || 0);
 }

packages/codemirror-graphql/src/variables/mode.ts

@@ -18,6 +18,7 @@ import {
   State,
   Token,
 } from 'graphql-language-service';
+import indent from '../utils/mode-indent';
 
 /**
  * This mode defines JSON, but provides a data-laden parser state to enable
@@ -45,25 +46,6 @@ CodeMirror.defineMode('graphql-variables', config => {
   };
 });
 
-function indent(
-  this: CodeMirror.Mode<any> & {
-    electricInput?: RegExp;
-    config?: CodeMirror.EditorConfiguration;
-  },
-  state: State,
-  textAfter: string,
-) {
-  const { levels, indentLevel } = state;
-  // If there is no stack of levels, use the current level.
-  // Otherwise, use the top level, preemptively dedenting for close braces.
-  const level =
-    !levels || levels.length === 0
-      ? indentLevel
-      : levels[levels.length - 1] -
-        (this.electricInput?.test(textAfter) ? 1 : 0);
-  return (level || 0) * (this.config?.indentUnit || 0);
-}
-
 /**
  * The lexer rules. These are exactly as described by the spec.
  */

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

@@ -21,7 +21,7 @@ export function DocExplorer() {
     caller: DocExplorer,
   });
 
-  const navItem = explorerNavStack[explorerNavStack.length - 1];
+  const navItem = explorerNavStack.at(-1)!;
 
   let content: ReactNode = null;
   if (fetchError) {
@@ -55,7 +55,7 @@ export function DocExplorer() {
 
   let prevName;
   if (explorerNavStack.length > 1) {
-    prevName = explorerNavStack[explorerNavStack.length - 2].name;
+    prevName = explorerNavStack.at(-2)!.name;
   }
 
   return (

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

@@ -58,7 +58,7 @@ export function Search() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, []);
 
-  const navItem = explorerNavStack[explorerNavStack.length - 1];
+  const navItem = explorerNavStack.at(-1)!;
 
   const shouldSearchBoxAppear =
     explorerNavStack.length === 1 ||
@@ -198,7 +198,7 @@ export function useSearchResults(caller?: Function) {
     caller: caller || useSearchResults,
   });
 
-  const navItem = explorerNavStack[explorerNavStack.length - 1];
+  const navItem = explorerNavStack.at(-1)!;
 
   return useCallback(
     (searchValue: string) => {

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

@@ -83,7 +83,7 @@ export function ExplorerContextProvider(props: ExplorerContextProviderProps) {
 
   const push = useCallback((item: ExplorerNavStackItem) => {
     setNavStack(currentState => {
-      const lastItem = currentState[currentState.length - 1];
+      const lastItem = currentState.at(-1)!;
       return lastItem.def === item.def
         ? // Avoid pushing duplicate items
           currentState

packages/graphiql-toolkit/src/storage/query.ts

@@ -63,7 +63,7 @@ export class QueryStore {
   }
 
   fetchRecent() {
-    return this.items[this.items.length - 1];
+    return this.items.at(-1);
   }
 
   fetchAll() {

packages/graphql-language-service-cli/src/client.ts

@@ -56,8 +56,7 @@ export default function main(
     case 'autocomplete':
       const lines = text.split('\n');
       const row = parseInt(argv.row, 10) || lines.length - 1;
-      const column =
-        parseInt(argv.column, 10) || lines[lines.length - 1].length;
+      const column = parseInt(argv.column, 10) || lines.at(-1)!.length;
       const point = new Position(row, column);
       exitCode = _getAutocompleteSuggestions(text, point, schemaPath);
       break;

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

@@ -419,22 +419,16 @@ export class MessageProcessor {
     // with version information up-to-date, so that the textDocument contents
     // may be used during performing language service features,
     // e.g. auto-completions.
-    if (
-      !params ||
-      !params.textDocument ||
-      !params.contentChanges ||
-      !params.textDocument.uri
-    ) {
+    if (!params?.textDocument?.uri || !params.contentChanges) {
       throw new Error(
         '`textDocument`, `textDocument.uri`, and `contentChanges` arguments are required.',
       );
     }
-    const { textDocument } = params;
+    const { textDocument, contentChanges } = params;
     const { uri } = textDocument;
     const project = this._graphQLCache.getProjectForFile(uri);
     try {
-      const { contentChanges } = params;
-      const contentChange = contentChanges[contentChanges.length - 1];
+      const contentChange = contentChanges.at(-1)!;
 
       // As `contentChanges` is an array, and we just want the
       // latest update to the text, grab the last entry from the array.

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

@@ -68,7 +68,7 @@ export function parseDocument(
     const lines = query.split('\n');
     const range = new Range(
       new Position(0, 0),
-      new Position(lines.length - 1, lines[lines.length - 1].length - 1),
+      new Position(lines.length - 1, lines.at(-1)!.length - 1),
     );
     return [{ query, range }];
   }

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

@@ -149,9 +149,9 @@ function getToken(
       if (
         state.indentLevel &&
         levels.length > 0 &&
-        levels[levels.length - 1] < state.indentLevel
+        levels.at(-1)! < state.indentLevel
       ) {
-        state.indentLevel = levels[levels.length - 1];
+        state.indentLevel = levels.at(-1);
       }
     }
   }