Update eslint deps for compatibility with new TS version

apps/codesandbox-react-template/src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
-  Fabric,
+  ThemeProvider,
   Checkbox,
   ChoiceGroup,
   Dropdown,
@@ -42,7 +42,7 @@ function start(): void {
   }
 
   ReactDOM.render(
-    <Fabric>
+    <ThemeProvider>
       <Stack gap={8}>
         <Checkbox label="Unchecked checkbox (uncontrolled)" />
         <ChoiceGroup defaultSelectedKey="B" options={choicegroupOptions} label="Pick One" required />
@@ -56,7 +56,7 @@ function start(): void {
           styles={dropdownStyles}
         />
       </Stack>
-    </Fabric>,
+    </ThemeProvider>,
     _rootDiv,
   );
 }

apps/pr-deploy-site/.eslintrc.json

@@ -1,6 +1,13 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/node"],
   "root": true,
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "../../tsconfig.json"
+      }
+    }
+  },
   "overrides": [
     {
       // pr-deploy-site.js is run without transpiling in all browsers, which means it must use

apps/pr-deploy-site/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "clean": "just-scripts clean",
     "generate:site": "just-scripts generate:site",
-    "lint": "eslint --ext .js,.ts ."
+    "lint": "eslint --ext .js,.ts --cache ."
   },
   "license": "MIT",
   "devDependencies": {

apps/test-bundles/.eslintrc.json

@@ -1,4 +1,11 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/node"],
-  "root": true
+  "root": true,
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "../../tsconfig.json"
+      }
+    }
+  }
 }

change/@fluentui-babel-make-styles-2ef10ec4-234c-42f4-b437-453bc28bea93.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove unused eslint-disables",
+  "packageName": "@fluentui/babel-make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-cra-template-6911be48-4884-4ebe-be08-b16768692212.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update eslint config",
+  "packageName": "@fluentui/cra-template",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-eslint-plugin-9cd92621-624a-4360-a184-5c6acc542fa2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Update dependencies, remove eslint@6 from peer deps, and remove usage of process.cwd()",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-foundation-legacy-7575028c-16c0-40d9-adf8-a20401e679ca.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Mark old ThemeProvider as deprecated to avoid confusion",
+  "packageName": "@fluentui/foundation-legacy",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-69e887fa-7196-4231-8a45-a673a0a5798e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update eslint-disables and rename a type param to avoid shadowing (does not affect consumers)",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-examples-3814d184-6fa6-4370-b783-8bfa8b0a4bd4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update eslint overrides in examples; replace some Fabric and Customizer usage with ThemeProvider",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-monaco-editor-d8b0f947-e58a-4398-b408-b4d2f62c447a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update demo page to use ThemeProvider not Fabric",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-positioning-c9e5b414-7605-494f-bffc-da67de90434f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove unused eslint-disable",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-edc73cc6-4a60-44f5-9572-20839cf8f04f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "ComponentState: fix shadowing and doc syntax for type params",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-utilities-3f648248-f47c-4f53-937e-bad736868c1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update eslint-disables in tests",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-web-components-7e5e411d-c0e3-4394-8cc0-1e1b4d9ba7c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove unused import",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

lint-staged.config.js

@@ -1,15 +1,11 @@
 // @ts-check
 
-const { configHelpers } = require('./packages/eslint-plugin/src/index');
-
-const eslintGlob = `*.{${configHelpers.extensions.join(',')}}`;
-
 // https://www.npmjs.com/package/lint-staged
 module.exports = {
-  // Run eslint in fix mode followed by prettier (must be done in sequence, separate from other
-  // prettier formatting, since both commands can modify files)
-  [eslintGlob]: ['node ./scripts/lint-staged/eslint', 'prettier --write'],
-
-  // Run prettier on non-eslintable files (ignores handled by .prettierignore)
-  [`!(${eslintGlob})`]: 'prettier --write',
+  // Run eslint in fix mode for applicable files followed by prettier.
+  // - The eslint wrapper handles filtering which files should be linted, since we need to both:
+  //   - respect ignore files (which eslint doesn't do by default when passed a specific file path)
+  //   - match the set of files that are linted by the package's normal `lint` command
+  // - Prettier must be run in sequence after eslint since both of them can modify files
+  '*': ['node ./scripts/lint-staged/eslint', 'prettier --write'],
 };

package.json

@@ -110,6 +110,7 @@
     "cypress": "6.6.0",
     "cypress-real-events": "1.2.0",
     "danger": "^6.0.5",
+    "eslint": "7.25.0",
     "eslint-plugin-es": "4.1.0",
     "file-loader": "6.2.0",
     "gulp": "^4.0.2",
@@ -156,7 +157,7 @@
       "packages/*",
       "packages/fluentui/*",
       "scripts",
-      "tools/"
+      "tools"
     ],
     "nohoist": [
       "@fluentui/make-styles/@types/stylis",
@@ -178,6 +179,9 @@
   "resolutions": {
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/experimental-utils": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
     "eslint": "^7.1.0",
     "//": "pretty-format contains typing only supported by TS 3.8+ remove when support in this repo is available",
     "@testing-library/dom": "7.22.3",

packages/babel-make-styles/src/plugin.ts

@@ -440,7 +440,6 @@ export const plugin = declare<never, PluginObj<BabelPluginState>>(api => {
             const nodePath = styleNode.nodePath;
 
             if (styleNode.kind === 'SPREAD') {
-              // eslint-disable-next-line no-shadow
               const evaluationResult = (nodePath.get('argument') as NodePath<t.Expression>).evaluate();
 
               if (!evaluationResult.confident) {
@@ -450,7 +449,6 @@ export const plugin = declare<never, PluginObj<BabelPluginState>>(api => {
               }
 
               const stylesBySlots: Record<string, MakeStyles> = evaluationResult.value;
-              // eslint-disable-next-line no-shadow
               const resolvedStyles: ResolvedStylesBySlots<string> = {};
 
               Object.keys(stylesBySlots).forEach(slotName => {

packages/cra-template/.eslintrc.json

@@ -1,4 +1,11 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
-  "root": true
+  "root": true,
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "../../tsconfig.json"
+      }
+    }
+  }
 }

packages/eslint-plugin/package.json

@@ -9,29 +9,28 @@
   },
   "license": "MIT",
   "scripts": {
-    "lint": "eslint --ext .js src"
+    "lint": "tsc --noEmit && eslint --ext .js --cache ."
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/experimental-utils": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/experimental-utils": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-deprecation": "^1.1.0",
-    "eslint-plugin-import": "^2.21.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-deprecation": "^1.2.1",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^23.13.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jju": "^1.4.0"
   },
   "devDependencies": {
-    "@types/eslint": "^7.2.0",
-    "eslint": "^7.1.0"
+    "@types/eslint": "7.2.10"
   },
   "peerDependencies": {
-    "eslint": "^6.0.0 || ^7.0.0",
+    "eslint": "^7.0.0",
     "typescript": "^4.1.0"
   },
   "files": [

packages/eslint-plugin/src/configs/react.js

@@ -1,6 +1,9 @@
 // @ts-check
+const path = require('path');
 const configHelpers = require('../utils/configHelpers');
 
+const gitRoot = configHelpers.findGitRoot();
+
 /** @type {import("eslint").Linter.Config} */
 const config = {
   extends: [
@@ -20,8 +23,10 @@ const config = {
     },
     'import/resolver': {
       typescript: {
-        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory
-        directory: process.cwd(),
+        // always try to resolve types under `<root>@types` directory
+        alwaysTryTypes: true,
+        // NOTE: For packages without a tsconfig.json, override with "project": "../../tsconfig.json"
+        project: ['./tsconfig.json', path.join(gitRoot, 'tsconfig.json')],
       },
     },
   },
@@ -304,13 +309,15 @@ const getOverrides = () => [
           ],
         },
       ],
+      '@typescript-eslint/no-shadow': 'error',
 
       // permanently disable due to using other rules which do the same thing
       camelcase: 'off', // redundant with @typescript-eslint/naming-convention
 
       // permanently disable due to improper TS handling or unnecessary for TS
       // (and not covered by plugin:@typescript-eslint/eslint-recommended)
       'no-empty-function': 'off',
+      'no-shadow': 'off',
       'no-unused-vars': 'off',
       'react/jsx-filename-extension': 'off',
     },
@@ -360,12 +367,7 @@ const getOverrides = () => [
   {
     files: [...configHelpers.devDependenciesFiles],
     rules: {
-      'import/no-extraneous-dependencies': [
-        'error',
-        {
-          packageDir: [process.cwd(), configHelpers.findGitRoot()],
-        },
-      ],
+      'import/no-extraneous-dependencies': ['error', { packageDir: ['.', gitRoot] }],
     },
   },
 ];

packages/eslint-plugin/src/rules/no-visibility-modifiers.js

@@ -1,5 +1,5 @@
 // @ts-check
-/** @type {*} */
+// @ts-ignore
 const util = require('@typescript-eslint/eslint-plugin/dist/util');
 const { AST_NODE_TYPES } = require('@typescript-eslint/experimental-utils');
 const createRule = require('../utils/createRule');

packages/eslint-plugin/src/utils/configHelpers.js

@@ -38,9 +38,6 @@ const camelOrPascalOrUpperCase = `(${camelOrPascalCase}|${upperCase})`;
 const builtins = '^(any|Number|number|String|string|Boolean|boolean|Undefined|undefined)$';
 
 module.exports = {
-  /** File extensions to lint (with leading .) */
-  extensions: ['.ts', '.tsx', '.js', '.jsx'],
-
   /** Test-related files */
   testFiles,
 

packages/eslint-plugin/jsconfig.json → packages/eslint-plugin/tsconfig.json

@@ -1,10 +1,14 @@
 {
   "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true,
     "checkJs": true,
     "module": "commonjs",
     "moduleResolution": "node",
     "noUnusedLocals": true,
-    "strict": true
+    "skipLibCheck": true,
+    "strict": true,
+    "types": ["node"]
   },
   "include": ["src/**/*"]
 }

packages/fluentui/docs/src/examples/components/Pill/Variations/PillExampleActionable.tsx

@@ -5,6 +5,7 @@ const PillActionableExample = () => (
   <Pill
     actionable
     onDismiss={(e, data) => {
+      // eslint-disable-next-line no-console
       console.log(e, data);
     }}
   >

packages/fluentui/docs/src/types.ts

@@ -71,6 +71,7 @@ export type KnobGeneratorOptions = {
 };
 export type KnobDefinition = UseKnobOptions<any> & { hook: Function };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type KnobGenerator<T> = (options: KnobGeneratorOptions) => KnobDefinition;
 
 export type KnobComponentGenerators<P> = Partial<Record<keyof P, KnobGenerator<any>>>;

packages/fluentui/react-bindings/src/compose/consts.ts

@@ -80,7 +80,12 @@ export type Input<TElementType extends React.ElementType = 'div', TProps = {}> =
   | InputComposeComponent<TProps>
   | ComposeRenderFunction<TElementType, TProps & { as?: React.ElementType }>;
 
-export type ComposeRenderFunction<TElementType extends React.ElementType = 'div', TProps = {}, _TState = TProps> = (
+export type ComposeRenderFunction<
+  TElementType extends React.ElementType = 'div',
+  TProps = {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _TState = TProps
+> = (
   props: TProps,
   ref: React.Ref<TElementType extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[TElementType] : TElementType>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any