chore: migrate to @typescript-eslint v5 (microsoft#31517)

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": "martinhochel@microsoft.com",
+ "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": "martinhochel@microsoft.com",
+ "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;
  }