chore: upgrade to typescript-eslint v8

change/@fluentui-eslint-plugin-9708d729-ebb2-44cd-8fe1-30cf46fc403d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: bump minimal typescript version to 4.8.4",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-web-components-ad9feaa2-0083-4a09-a62c-4f26d54356c6.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "resolve eslint errors after upgrade to typescript-eslint v8",
+  "packageName": "@fluentui/web-components",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

package.json

@@ -87,7 +87,7 @@
     "@phenomnomnominal/tsquery": "6.1.3",
     "@playwright/test": "1.44.0",
     "@react-native/babel-preset": "0.73.21",
-    "@rnx-kit/eslint-plugin": "0.7.2",
+    "@rnx-kit/eslint-plugin": "0.8.2",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@storybook/addon-a11y": "7.6.20",
     "@storybook/addon-actions": "7.6.20",
@@ -173,10 +173,10 @@
     "@types/webpack-hot-middleware": "2.25.9",
     "@types/yargs": "13.0.11",
     "@types/yargs-unparser": "2.0.1",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
-    "@typescript-eslint/rule-tester": "7.18.0",
-    "@typescript-eslint/utils": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.8.1",
+    "@typescript-eslint/parser": "8.8.1",
+    "@typescript-eslint/rule-tester": "8.8.1",
+    "@typescript-eslint/utils": "8.8.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
@@ -233,7 +233,7 @@
     "eslint-plugin-deprecation": "3.0.0",
     "eslint-plugin-es": "4.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "28.6.0",
+    "eslint-plugin-jest": "28.8.0",
     "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-playwright": "0.15.3",

packages/eslint-plugin/package.json

@@ -15,12 +15,12 @@
   },
   "dependencies": {
     "@griffel/eslint-plugin": "^1.6.4",
-    "@rnx-kit/eslint-plugin": "^0.7.2",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/utils": "^7.18.0",
-    "@typescript-eslint/rule-tester": "7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@typescript-eslint/type-utils": "^7.18.0",
+    "@rnx-kit/eslint-plugin": "^0.8.2",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/utils": "^8.8.1",
+    "@typescript-eslint/rule-tester": "8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "@typescript-eslint/type-utils": "^8.8.1",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "eslint": "^8.0.0",
-    "typescript": "^4.7.5"
+    "typescript": "^4.8.4"
   },
   "files": [
     "src"

packages/eslint-plugin/src/rules/ban-context-export/index.js

@@ -35,7 +35,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Ban export of React context or context selector objects',
-      recommended: 'recommended',
     },
     messages: {
       nativeContext: '{{exportName}} should not be exported directly',

packages/eslint-plugin/src/rules/ban-context-export/index.test.js

@@ -3,43 +3,40 @@ const { RuleTester } = require('@typescript-eslint/rule-tester');
 const path = require('path');
 const rule = require('./index');
 
-const ruleTester = new RuleTester({
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: path.resolve(__dirname, './fixtures/ban-context-export/tsconfig.json'),
-    tsconfigRootDir: path.resolve(__dirname, './fixtures/ban-context-export'),
-  },
-});
+const ruleTester = new RuleTester();
 
 /**
  * @param {string} fixtureName
  */
-function getParserOptions(fixtureName) {
+function getLanguageOptions(fixtureName) {
   return {
-    project: path.resolve(__dirname, `./fixtures/${fixtureName}/tsconfig.json`),
-    tsconfigRootDir: path.resolve(__dirname, `./fixtures/${fixtureName}`),
+    parserOptions: {
+      parser: '@typescript-eslint/parser',
+      project: path.resolve(__dirname, `./fixtures/${fixtureName}/tsconfig.json`),
+      tsconfigRootDir: path.resolve(__dirname, `./fixtures/${fixtureName}`),
+    },
   };
 }
 
 ruleTester.run('ban-context-export', rule, {
   valid: [
     {
-      parserOptions: getParserOptions('internal-export'),
+      languageOptions: getLanguageOptions('internal-export'),
       code: `
           export { MyContext } from './context'
       `,
       filename: 'src/internal/index.ts',
     },
     {
-      parserOptions: getParserOptions('not-a-context'),
+      languageOptions: getLanguageOptions('not-a-context'),
       code: `
           export { MyContext } from './context'
       `,
       filename: 'src/index.ts',
     },
     {
       options: [{ exclude: ['**/special-path/**/*'] }],
-      parserOptions: getParserOptions('exclude'),
+      languageOptions: getLanguageOptions('exclude'),
       code: `
       import * as React from 'react';
       export const MyContext = React.createContext({});
@@ -50,23 +47,23 @@ ruleTester.run('ban-context-export', rule, {
   invalid: [
     {
       errors: [{ messageId: 'nativeContext' }],
-      parserOptions: getParserOptions('export-specifier'),
+      languageOptions: getLanguageOptions('export-specifier'),
       code: `
           export { MyContext } from './context'
       `,
       filename: 'src/index.ts',
     },
     {
       errors: [{ messageId: 'contextSelector' }],
-      parserOptions: getParserOptions('context-selector'),
+      languageOptions: getLanguageOptions('context-selector'),
       code: `
       export { MyContext } from './context'
       `,
       filename: 'src/index.ts',
     },
     {
       errors: [{ messageId: 'nativeContext' }],
-      parserOptions: getParserOptions('named-export'),
+      languageOptions: getLanguageOptions('named-export'),
       code: `
       import * as React from 'react';
       export const MyContext = React.createContext({});
@@ -75,7 +72,7 @@ ruleTester.run('ban-context-export', rule, {
     },
     {
       errors: [{ messageId: 'contextSelector' }],
-      parserOptions: getParserOptions('named-export'),
+      languageOptions: getLanguageOptions('named-export'),
       code: `
       import { createContext } from '@proj/react-context-selector';
       export const MyContext = createContext({});
@@ -85,7 +82,7 @@ ruleTester.run('ban-context-export', rule, {
     {
       errors: [{ messageId: 'nativeContext' }],
       options: [{ exclude: ['**/wrong-path/**/*'] }],
-      parserOptions: getParserOptions('exclude'),
+      languageOptions: getLanguageOptions('exclude'),
       code: `
       import * as React from 'react';
       export const MyContext = React.createContext({});

packages/eslint-plugin/src/rules/ban-instanceof-html-element/index.js

@@ -4,7 +4,6 @@ const createRule = require('../../utils/createRule');
 
 /**
  * @typedef {import('./types').HTMLElementConstructorName} HTMLElementConstructorName
- *
  */
 
 module.exports = createRule({
@@ -13,7 +12,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Ban usage of instanceof HTMLElement comparison',
-      recommended: 'recommended',
     },
     messages: {
       invalidBinaryExpression: 'instanceof {{right}} should be avoided, use isHTMLElement instead.',

packages/eslint-plugin/src/rules/ban-instanceof-html-element/index.test.js

@@ -1,9 +1,7 @@
 const { RuleTester } = require('@typescript-eslint/rule-tester');
 const rule = require('./index');
 
-const ruleTester = new RuleTester({
-  parser: '@typescript-eslint/parser',
-});
+const ruleTester = new RuleTester();
 
 ruleTester.run('ban-instanceof-htmlelement', rule, {
   valid: [

packages/eslint-plugin/src/rules/deprecated-keyboard-event-props.js

@@ -2,15 +2,18 @@
 const createRule = require('../utils/createRule');
 const { ESLintUtils } = require('@typescript-eslint/utils');
 
+/**
+ * @typedef { import('@typescript-eslint/utils').TSESLint.RuleMetaDataDocs} RuleMetaDataDocs
+ */
+
 module.exports = createRule({
   name: 'deprecated-keyboard-event-props',
   meta: {
     type: 'problem',
-    docs: {
+    docs: /** @type {RuleMetaDataDocs} */ ({
       description: 'Forbid use of deprecated KeyboardEvent props "which" and "keyCode".',
-      recommended: 'recommended',
       requiresTypeChecking: true,
-    },
+    }),
     messages: {
       deprecatedProp: 'KeyboardEvent prop "{{name}}" is deprecated (consider using @fluentui/keyboard-key instead)',
     },

packages/eslint-plugin/src/rules/no-context-default-value/index.test.js

@@ -1,9 +1,7 @@
 const { RuleTester } = require('@typescript-eslint/rule-tester');
 const rule = require('./index');
 
-const ruleTester = new RuleTester({
-  parser: '@typescript-eslint/parser',
-});
+const ruleTester = new RuleTester();
 
 ruleTester.run('no-context-default-value', rule, {
   valid: [

packages/eslint-plugin/src/rules/no-global-react.js

@@ -8,7 +8,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Prevent accidental references to the global React namespace',
-      recommended: 'recommended',
     },
     messages: {
       missingImport: 'You must explicitly import React to reference it',

packages/eslint-plugin/src/rules/no-restricted-imports/index.test.js

@@ -1,9 +1,7 @@
 const { RuleTester } = require('@typescript-eslint/rule-tester');
 const rule = require('./index');
 
-const ruleTester = new RuleTester({
-  parser: '@typescript-eslint/parser',
-});
+const ruleTester = new RuleTester();
 
 ruleTester.run('no-restricted-imports', rule, {
   valid: [

packages/eslint-plugin/src/rules/no-tslint-comments.js

@@ -7,7 +7,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Forbid tslint:disable/tslint:enable comments after ESLint migration.',
-      recommended: 'recommended',
     },
     messages: {
       tslint: 'tslint:{{verb}} comments are unnecessary with ESLint',

packages/fluentui/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts

@@ -121,9 +121,8 @@ export default class ComponentSourceManager extends React.Component<
 
     try {
       const formattedCode = prettifyCode(currentCode, prettierParser);
-
       this.setState({ currentCode: formattedCode, formattedCode });
-    } catch (e) {}
+    } catch {}
   };
 
   handleCodeReset = (): void => {

packages/fluentui/docs/src/components/ComponentDoc/ComponentSourceManager/getExampleModule.ts

@@ -26,7 +26,7 @@ const getExampleModule = (
       namedExports: examplesContext(modulePath),
       source: exampleSourcesContext(sourcePath),
     };
-  } catch (e) {
+  } catch {
     return null;
   }
 };

packages/fluentui/react-bindings/src/context-selector/useContextSelector.ts

@@ -53,7 +53,7 @@ export const useContextSelector = <Value, SelectedValue>(
         }
 
         return [payload[1], nextSelected] as const;
-      } catch (e) {
+      } catch {
         // ignored (stale props or some other reason)
       }
       return [...prevState] as const; // schedule update

packages/fluentui/react-bindings/src/context-selector/useContextSelectors.ts

@@ -79,7 +79,7 @@ export const useContextSelectors = <
         }
 
         return [payload[1], nextSelected] as const;
-      } catch (e) {
+      } catch {
         // ignored (stale props or some other reason)
       }
       return [...prevState] as const; // schedule update

packages/fluentui/react-bindings/src/utils/getWindow.ts

@@ -5,7 +5,7 @@ let _window: Window | undefined = undefined;
 // Caching the window value at the file scope lets us minimize the impact.
 try {
   _window = window;
-} catch (e) {
+} catch {
   /* no-op */
 }
 

packages/fluentui/react-builder/src/utils/treeStore.ts

@@ -37,7 +37,7 @@ export const readTreeFromURL = (url: string): JSONTreeElement | null => {
   }
   try {
     return treeParse(treeString);
-  } catch (e) {
+  } catch {
     // TODO: client should know it failed
     return null;
   }

packages/fluentui/react-northstar/src/utils/fontSizeUtility.ts

@@ -9,7 +9,7 @@ export const getDocumentRemSize = (): number => {
     try {
       // eslint-disable-next-line no-undef
       return getFontSizeValue(getComputedStyle(document.documentElement).fontSize) || DEFAULT_REM_SIZE_IN_PX;
-    } catch (e) {
+    } catch {
       return DEFAULT_REM_SIZE_IN_PX;
     }
   }

packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx

@@ -153,7 +153,7 @@ export function isConformant(
           const component = getComponent(wrapper);
           try {
             expect(component.is(tag)).toEqual(true);
-          } catch (err) {
+          } catch {
             expect(component.type()).not.toEqual(Component);
             expect(component.prop('as')).toEqual(tag);
           }
@@ -169,7 +169,7 @@ export function isConformant(
 
           try {
             expect(component.type()).toEqual(MyComponent);
-          } catch (err) {
+          } catch {
             expect(component.type()).not.toEqual(Component);
             expect(component.find('[as]').last().prop('as')).toEqual(MyComponent);
           }
@@ -187,7 +187,7 @@ export function isConformant(
 
           try {
             expect(component.type()).toEqual(MyComponent);
-          } catch (err) {
+          } catch {
             expect(component.type()).not.toEqual(Component);
             expect(component.prop('as')).toEqual(MyComponent);
           }
@@ -390,7 +390,7 @@ export function isConformant(
 
         try {
           expect(handlerSpy).toHaveBeenCalled();
-        } catch (err) {
+        } catch {
           throw new Error(
             [
               `<${constructorName} ${listenerName}={${handlerName}} />\n`,
@@ -422,7 +422,7 @@ export function isConformant(
           expectedArgs.forEach((expectedArg, argI) => {
             expect(lastHandlerCall[argI]).toEqual(expectedArg);
           });
-        } catch (err) {
+        } catch {
           throw new Error(
             [
               `<${constructorName} ${listenerName}={${handlerName}} />\n`,

packages/fluentui/react-northstar/test/utils/assertNodeContains.ts

@@ -9,7 +9,7 @@ export const assertNodeContains = (parentNode: Element, childSelector: string, i
   const didFind = parentNode.querySelector(childSelector) !== null;
   try {
     expect(didFind).toEqual(isPresent);
-  } catch (err) {
+  } catch {
     throw new Error(`${didFind ? 'Found' : 'Did not find'} "${childSelector}" in the ${parentNode}.`);
   }
 };