chore: migrate to @typescript-eslint v5

change/@fluentui-eslint-plugin-669887b0-9b17-45c4-998d-ef9cf756aea2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate to typescript-eslint v5 and refactor experimental-tools to tools api usage",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-6857164b-7564-4bec-a608-93f37fac86a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "style: ignore exposed lint issue",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -103,17 +103,16 @@
     "@phenomnomnominal/tsquery": "6.1.3",
     "@playwright/test": "1.44.0",
     "@react-native/babel-preset": "0.73.21",
+    "@rnx-kit/eslint-plugin": "0.4.2",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "@storybook/addons": "6.5.15",
     "@storybook/addon-a11y": "6.5.15",
     "@storybook/addon-actions": "6.5.15",
     "@storybook/addon-docs": "6.5.15",
     "@storybook/addon-essentials": "6.5.15",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-links": "6.5.15",
-    "@storybook/addons": "6.5.15",
-    "@storybook/api": "6.5.15",
     "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/channels": "6.5.15",
     "@storybook/client-api": "6.5.15",
     "@storybook/components": "6.5.15",
     "@storybook/core": "6.5.15",
@@ -181,9 +180,9 @@
     "@types/webpack-hot-middleware": "2.25.9",
     "@types/yargs": "13.0.11",
     "@types/yargs-unparser": "2.0.1",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/experimental-utils": "4.22.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/utils": "5.62.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
@@ -224,17 +223,17 @@
     "eslint": "7.25.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "8.3.0",
-    "eslint-import-resolver-typescript": "2.5.0",
-    "eslint-plugin-deprecation": "1.2.1",
+    "eslint-import-resolver-typescript": "2.7.1",
+    "eslint-plugin-deprecation": "1.6.0",
     "eslint-plugin-es": "4.1.0",
-    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-jest": "23.20.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jest": "26.9.0",
     "eslint-plugin-jsdoc": "48.2.0",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-playwright": "0.15.3",
     "eslint-plugin-react": "7.26.0",
     "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react-hooks": "4.3.0",
     "express": "4.19.2",
     "extract-comments": "1.1.0",
     "file-loader": "6.2.0",
@@ -370,9 +369,8 @@
   },
   "resolutions": {
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/experimental-utils": "4.22.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "@types/jest-axe/axe-core": "4.7.2",
     "@microsoft/api-extractor/typescript": "4.9.5",
     "eslint": "7.25.0",

packages/eslint-plugin/package.json

@@ -9,27 +9,28 @@
   },
   "license": "MIT",
   "scripts": {
-    "lint": "tsc --noEmit && eslint --ext .js --cache .",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint --ext .js,.ts --cache ./src",
     "test": "yarn jest --passWithNoTests"
   },
   "dependencies": {
     "@griffel/eslint-plugin": "^1.6.3",
-    "@rnx-kit/eslint-plugin": "^0.2.5",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/experimental-utils": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@rnx-kit/eslint-plugin": "^0.4.2",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/utils": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-deprecation": "^1.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^23.13.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^26.9.0",
     "eslint-plugin-jsdoc": "^48.2.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "fs-extra": "^8.1.0",
-    "minimatch": "^3.0.4",
+    "minimatch": "^3.1.2",
     "jju": "^1.4.0"
   },
   "peerDependencies": {

packages/eslint-plugin/src/rules/ban-context-export/fixtures/not-a-context/src/context.ts

@@ -1,2 +1 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 export const MyContext = {};

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

@@ -1,12 +1,12 @@
 // @ts-check
-const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils');
 const minimatch = require('minimatch');
 
 const createRule = require('../../utils/createRule');
 const { getTypeServices } = require('../../utils/type-services');
 
-/** @typedef { import('@typescript-eslint/experimental-utils').TSESTree.VariableDeclarator } VariableDeclarator*/
-/** @typedef { import('@typescript-eslint/experimental-utils').TSESTree.ExportSpecifier} ExportSpecifier */
+/** @typedef { import('@typescript-eslint/utils').TSESTree.VariableDeclarator } VariableDeclarator*/
+/** @typedef { import('@typescript-eslint/utils').TSESTree.ExportSpecifier} ExportSpecifier */
 /**
  * @typedef {{
  *  exclude?: string[];
@@ -35,7 +35,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Ban export of React context or context selector objects',
-      category: 'Best Practices',
       recommended: 'error',
     },
     messages: {

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { ESLintUtils } = require('@typescript-eslint/experimental-utils');
+const { ESLintUtils } = require('@typescript-eslint/utils');
 const path = require('path');
 const rule = require('./index');
 

packages/eslint-plugin/src/rules/ban-imports.js

@@ -1,15 +1,15 @@
 // @ts-check
-const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils');
 const createRule = require('../utils/createRule');
 
 // Nasty syntax required for type imports until https://github.com/microsoft/TypeScript/issues/22160 is implemented.
 // For some reason just importing TSESTree and accessing properties off that doesn't work.
 /**
- * @typedef {import("@typescript-eslint/typescript-estree").TSESTree.ExportNamedDeclaration} ExportNamedDeclaration
- * @typedef {import("@typescript-eslint/typescript-estree").TSESTree.ExportSpecifier} ExportSpecifier
- * @typedef {import("@typescript-eslint/typescript-estree").TSESTree.Identifier} Identifier
- * @typedef {import("@typescript-eslint/typescript-estree").TSESTree.ImportDeclaration} ImportDeclaration
- * @typedef {import("@typescript-eslint/typescript-estree").TSESTree.ImportSpecifier} ImportSpecifier
+ * @typedef {import("@typescript-eslint/utils").TSESTree.ExportNamedDeclaration} ExportNamedDeclaration
+ * @typedef {import("@typescript-eslint/utils").TSESTree.ExportSpecifier} ExportSpecifier
+ * @typedef {import("@typescript-eslint/utils").TSESTree.Identifier} Identifier
+ * @typedef {import("@typescript-eslint/utils").TSESTree.ImportDeclaration} ImportDeclaration
+ * @typedef {import("@typescript-eslint/utils").TSESTree.ImportSpecifier} ImportSpecifier
  *
  * @typedef {{
  *   path?: string;
@@ -31,7 +31,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Ban importing (or re-exporting) certain identifiers from certain paths or modules.',
-      category: 'Best Practices',
       recommended: false,
     },
     messages: {

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

@@ -1,9 +1,8 @@
 // @ts-check
-const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils');
 const createRule = require('../../utils/createRule');
 
 /**
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").BinaryExpression} BinaryExpression
  * @typedef {import("@fluentui/react-utilities/src/utils/isHTMLElement").HTMLElementConstructorName} HTMLElementConstructorName
  *
  */
@@ -14,7 +13,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Ban usage of instanceof HTMLElement comparison',
-      category: 'Possible Errors',
       recommended: 'error',
     },
     messages: {
@@ -25,9 +23,6 @@ module.exports = createRule({
   },
   defaultOptions: [],
   create: context => ({
-    /**
-     * @param {BinaryExpression} binaryExpression
-     */
     // eslint-disable-next-line @typescript-eslint/naming-convention
     BinaryExpression(binaryExpression) {
       if (

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

@@ -1,5 +1,4 @@
-// @ts-nocheck
-const { ESLintUtils } = require('@typescript-eslint/experimental-utils');
+const { ESLintUtils } = require('@typescript-eslint/utils');
 const rule = require('./index');
 
 const ruleTester = new ESLintUtils.RuleTester({

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

@@ -1,14 +1,13 @@
 // @ts-check
 const createRule = require('../utils/createRule');
-const { ESLintUtils } = require('@typescript-eslint/experimental-utils');
+const { ESLintUtils } = require('@typescript-eslint/utils');
 
 module.exports = createRule({
   name: 'deprecated-keyboard-event-props',
   meta: {
     type: 'problem',
     docs: {
       description: 'Forbid use of deprecated KeyboardEvent props "which" and "keyCode".',
-      category: 'Best Practices',
       recommended: 'error',
       requiresTypeChecking: true,
     },

packages/eslint-plugin/src/rules/max-len.js

@@ -10,7 +10,6 @@ module.exports = createRule({
       // - it has options to detect and specially handle comments, strings, etc
       // - it checks the ignore regex without even a preliminary length check first
       description: 'Enforces a maximum line length, more cheaply than default ESLint version',
-      category: 'Best Practices',
       recommended: false,
     },
     messages: {

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

@@ -1,13 +1,8 @@
 // @ts-check
-const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils');
 const createRule = require('../../utils/createRule');
 
 /**
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").ImportDeclaration} ImportDeclaration
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").CallExpression} CallExpression
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").Expression} Expression
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").Identifier} Identifier
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").LeftHandSideExpression} LeftHandSideExpression
  *
  * @typedef {{
  *   imports: string[]
@@ -21,7 +16,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Restricts usage of default values on React context creation',
-      category: 'Best Practices',
       recommended: false,
     },
     messages: {
@@ -40,9 +34,8 @@ module.exports = createRule({
       },
     ],
   },
-  defaultOptions: [],
+  defaultOptions: /** @type {Options[]} */ ([]),
   create: context => {
-    /** @type {Options[]} */
     const options = context.options;
     const { imports } = options[0];
     /** @type {string[]} */
@@ -51,7 +44,7 @@ module.exports = createRule({
     const createContextParentIdentifiers = [];
 
     /**
-     * @param {LeftHandSideExpression} callee
+     * @param {import("@typescript-eslint/utils").TSESTree.LeftHandSideExpression} callee
      */
     function isCalleeCreateContext(callee) {
       if (
@@ -70,9 +63,6 @@ module.exports = createRule({
     }
 
     return {
-      /**
-       * @param {ImportDeclaration} importDeclaration
-       */
       // eslint-disable-next-line @typescript-eslint/naming-convention
       ImportDeclaration(importDeclaration) {
         if (typeof importDeclaration.source.value !== 'string' || !imports.includes(importDeclaration.source.value)) {
@@ -93,9 +83,6 @@ module.exports = createRule({
           }
         }
       },
-      /**
-       * @param {CallExpression} callExpression
-       */
       // eslint-disable-next-line @typescript-eslint/naming-convention
       CallExpression(callExpression) {
         const firstArgument = callExpression.arguments[0];
@@ -111,8 +98,8 @@ module.exports = createRule({
 });
 
 /**
- * @param {Expression} expression
- * @returns {expression is Identifier}
+ * @param {import("@typescript-eslint/utils").TSESTree.CallExpressionArgument} expression
+ * @returns {expression is import("@typescript-eslint/utils").TSESTree.Identifier}
  */
 function isArgumentNotUndefined(expression) {
   return expression.type !== AST_NODE_TYPES.Identifier || expression.name !== 'undefined';

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

@@ -1,5 +1,4 @@
-// @ts-nocheck
-const { ESLintUtils } = require('@typescript-eslint/experimental-utils');
+const { ESLintUtils } = require('@typescript-eslint/utils');
 const rule = require('./index');
 
 const ruleTester = new ESLintUtils.RuleTester({

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils');
 const createRule = require('../utils/createRule');
 
 module.exports = createRule({
@@ -8,7 +8,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Prevent accidental references to the global React namespace',
-      category: 'Best Practices',
       recommended: 'error',
     },
     messages: {

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

@@ -1,10 +1,10 @@
 // @ts-check
-const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
+const { AST_NODE_TYPES } = require('@typescript-eslint/utils');
 const createRule = require('../../utils/createRule');
 
 /**
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").ImportClause} ImportClause
- * @typedef {import("@typescript-eslint/types/dist/ts-estree").ImportDeclaration} ImportDeclaration
+ * @typedef {import("@typescript-eslint/utils").TSESTree.ImportClause} ImportClause
+ * @typedef {import("@typescript-eslint/utils").TSESTree.ImportDeclaration} ImportDeclaration
  *
  * Lookup for insertion point for new imports when moving a restricted import to a preferred import.
  * @typedef {{[preferredPkgName: string] : ImportDeclaration}} FixMap
@@ -25,7 +25,6 @@ module.exports = createRule({
     type: 'problem',
     docs: {
       description: 'Restricts imports of certain packages',
-      category: 'Best Practices',
       recommended: false,
     },
     messages: {
@@ -56,9 +55,8 @@ module.exports = createRule({
       },
     ],
   },
-  defaultOptions: [],
+  defaultOptions: /** @type {Options[]} */ ([]),
   create: context => {
-    /** @type {Options[]} */
     const options = context.options;
 
     if (!options.length) {
@@ -107,7 +105,7 @@ module.exports = createRule({
 
     return {
       // eslint-disable-next-line @typescript-eslint/naming-convention
-      ImportDeclaration: (/** @type {ImportDeclaration} */ imprt) => {
+      ImportDeclaration: imprt => {
         if (!imprt.source || (imprt.source && imprt.source.type !== AST_NODE_TYPES.Literal)) {
           return;
         }