fix(eslint-plugin): make import/no-extraneous-dependencies work for react config

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

@@ -1,13 +1,6 @@
 {
   "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,12 +7,12 @@
   "scripts": {
     "clean": "just-scripts clean",
     "generate:site": "just-scripts generate:site",
-    "lint": "eslint --ext .js,.ts --cache ."
+    "lint": "eslint --ext .js,.ts --cache .",
+    "type-check": "tsc -p ."
   },
   "license": "MIT",
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "^1.0.0",
-    "@microsoft/eslint-plugin-sdl": "0.1.9"
+    "@fluentui/scripts": "^1.0.0"
   }
 }

apps/pr-deploy-site/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../scripts/tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "allowJs": true
+  },
+  "include": ["pr-deploy-site.js", "just.config.ts"]
+}

apps/vr-tests-react-components/package.json

@@ -33,12 +33,15 @@
     "@fluentui/react-popover": "9.0.0-rc.5",
     "@fluentui/react-positioning": "9.0.0-rc.5",
     "@fluentui/react-provider": "9.0.0-rc.5",
+    "@fluentui/react-radio": "9.0.0-beta.2",
+    "@fluentui/react-shared-contexts": "9.0.0-rc.4",
     "@fluentui/react-slider": "9.0.0-beta.10",
     "@fluentui/react-switch": "9.0.0-rc.5",
     "@fluentui/react-tabs": "9.0.0-beta.8",
     "@fluentui/react-text": "9.0.0-rc.5",
     "@fluentui/react-theme": "9.0.0-rc.4",
     "@fluentui/react-tooltip": "9.0.0-rc.5",
+    "@fluentui/react-utilities": "9.0.0-rc.5",
     "@fluentui/scripts": "^1.0.0",
     "@griffel/react": "1.0.0",
     "react": "16.14.0",

change/@fluentui-cra-template-1441b2ce-805e-4783-b54d-d0dc1405794e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(cra-template): remove import/resolve from lint config",
+  "packageName": "@fluentui/cra-template",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-eslint-plugin-6b96c0dd-b3e9-49e3-9668-83ccf7e28620.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(eslint-plugin): make import/no-extraneous-dependencies work for react config",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-accordion-a88290b3-b03a-40b9-a8cc-d24ab80c5071.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fixup! fix(react-accordion): fix missing dependencies",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-c63280cc-55c6-4360-aa31-5ced2bd439ae.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fixup! fix(react-avatar): fix missing dependencies",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-6b800570-deea-41a1-a565-0987a0589347.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore(react-components): fix lint issues exposed by import/no-extrenaus-dependency rule",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-conformance-griffel-7dbc04a7-7597-4437-a96b-cbde034b0fe0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(react-conformance-griffel): add react-conformance missing dependency",
+  "packageName": "@fluentui/react-conformance-griffel",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-c610d38f-97b5-4686-ab4d-ec59b20d764a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(react-provider): fix lint issues",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-7eea6ae2-201d-49d4-8749-15add0838235.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(react-tabs): fix missing dependencies and lint warnings",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -93,6 +93,7 @@
     "@griffel/webpack-loader": "2.0.0",
     "@linaria/babel-preset": "3.0.0-beta.14",
     "@microsoft/api-extractor": "7.18.1",
+    "@microsoft/eslint-plugin-sdl": "0.1.9",
     "@nrwl/cli": "13.8.1",
     "@nrwl/devkit": "13.8.1",
     "@nrwl/jest": "13.8.1",
@@ -179,10 +180,10 @@
     "eslint": "7.25.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.5.0",
     "eslint-plugin-deprecation": "1.2.1",
     "eslint-plugin-es": "4.1.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jest": "23.20.0",
     "eslint-plugin-jsdoc": "^36.0.7",
     "eslint-plugin-jsx-a11y": "6.4.1",
@@ -416,6 +417,14 @@
           "ci-info",
           "node-fetch"
         ]
+      },
+      {
+        "packages": [
+          "@fluentui/react-conformance-griffel"
+        ],
+        "dependencies": [
+          "@fluentui/react-conformance"
+        ]
       }
     ]
   },

packages/cra-template/.eslintrc.json

@@ -1,13 +1,6 @@
 {
   "extends": ["plugin:@fluentui/eslint-plugin/react"],
   "root": true,
-  "settings": {
-    "import/resolver": {
-      "typescript": {
-        "project": "../../tsconfig.json"
-      }
-    }
-  },
   "overrides": [
     {
       "files": ["template/**/*.{ts,tsx}"],

packages/cra-template/package.json

@@ -9,7 +9,8 @@
   },
   "scripts": {
     "lint": "eslint --ext .js,.ts,.tsx .",
-    "test": "node -r @fluentui/scripts/babel/register scripts/test.ts"
+    "test": "node -r @fluentui/scripts/babel/register scripts/test.ts",
+    "type-check": "tsc -p ."
   },
   "license": "MIT",
   "files": [

packages/cra-template/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../scripts/tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["scripts"],
+  "exclude": ["node_modules", "template"]
+}

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

@@ -1,41 +1,36 @@
 // @ts-check
-const path = require('path');
 const configHelpers = require('../utils/configHelpers');
 
-const gitRoot = configHelpers.findGitRoot();
-
 /** @type {import("eslint").Linter.Config} */
 const config = {
+  root: true,
   extends: [
     // Provides both rules and some parser options and other settings
     'airbnb',
+    // add typescript support for import plugin - https://github.com/import-js/eslint-plugin-import/blob/main/config/typescript.js
+    'plugin:import/typescript',
     // Extended configs are applied in order, so these configs that turn other rules off should come last
     'prettier',
   ],
   parser: '@typescript-eslint/parser',
   plugins: [
+    'import',
     '@fluentui',
     '@rnx-kit',
     '@typescript-eslint',
     'deprecation',
-    'import',
     'jest',
     'jsdoc',
     'jsx-a11y',
     'react',
     'react-hooks',
   ],
   settings: {
-    // Some config suggestions copied from https://github.com/alexgorbatchev/eslint-import-resolver-typescript#configuration
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
-    },
     'import/resolver': {
+      // @see https://github.com/alexgorbatchev/eslint-import-resolver-typescript#configuration
       typescript: {
-        // 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')],
+        project: './tsconfig.json',
       },
     },
     jsdoc: {
@@ -102,7 +97,6 @@ const config = {
     'dot-notation': 'error',
     eqeqeq: ['error', 'always'],
     'guard-for-in': 'error',
-    'import/no-extraneous-dependencies': ['error', { devDependencies: false }],
     'jsx-a11y/tabindex-no-positive': 'error',
     'no-alert': 'error',
     'no-bitwise': 'error',
@@ -173,15 +167,7 @@ const config = {
     'default-case': 'off',
     'func-names': 'off',
     'global-require': 'off',
-    'import/extensions': 'off',
-    'import/first': 'off',
-    'import/newline-after-import': 'off',
-    'import/no-duplicates': 'off', // mostly redundant with no-duplicate-imports
-    'import/no-dynamic-require': 'off',
-    'import/no-mutable-exports': 'off',
-    'import/no-unresolved': 'off',
-    'import/no-useless-path-segments': 'off',
-    'import/order': 'off',
+
     'jsx-a11y/alt-text': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'jsx-a11y/aria-activedescendant-has-tabindex': 'off',
@@ -256,17 +242,13 @@ const config = {
     'no-restricted-syntax': 'off',
 
     // permanently disable because we disagree with these rules
-    'import/prefer-default-export': 'off',
     'no-await-in-loop': 'off', // contrary to rule docs, awaited things often are NOT parallelizable
     'react/jsx-props-no-spreading': 'off',
     'react/prop-types': 'off',
 
     // permanently disable due to performance issues (using custom rule `@fluentui/max-len` instead)
     'max-len': 'off',
 
-    // permanently disable due to being unnecessary or having limited benefit for TS
-    'import/export': 'off',
-
     // permanently disable due to perf problems and limited benefit
     // see here for perf testing (note that you must run eslint directly)
     // https://eslint.org/docs/developer-guide/working-with-rules#per-rule-performance
@@ -277,24 +259,40 @@ const config = {
     'react/no-unused-prop-types': 'off',
     'react/prefer-es6-class': 'off',
 
+    'jsdoc/check-tag-names': [
+      'error',
+      {
+        // Allow TSDoc tags @remarks and @defaultValue
+        definedTags: ['remarks', 'defaultValue'],
+      },
+    ],
+
+    /**
+     *
+     * import plugin rules
+     * @see https://github.com/import-js/eslint-plugin-import
+     */
+    'import/no-extraneous-dependencies': ['error', { devDependencies: false }],
+    'import/extensions': 'off',
+    'import/first': 'off',
+    'import/newline-after-import': 'off',
+    'import/no-duplicates': 'off', // mostly redundant with no-duplicate-imports
+    'import/no-dynamic-require': 'off',
+    'import/no-mutable-exports': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-useless-path-segments': 'off',
+    'import/order': 'off',
+    'import/prefer-default-export': 'off',
     // may cause perf problems per https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#eslint-plugin-import
     'import/no-cycle': 'off',
     'import/no-deprecated': 'off',
     'import/no-named-as-default': 'off',
     'import/no-unused-modules': 'off',
     // these ones aren't needed for TS and may cause perf problems
     'import/default': 'off',
-    'import/named': 'off',
     'import/namespace': 'off',
     'import/no-named-as-default-member': 'off',
-
-    'jsdoc/check-tag-names': [
-      'error',
-      {
-        // Allow TSDoc tags @remarks and @defaultValue
-        definedTags: ['remarks', 'defaultValue'],
-      },
-    ],
+    'import/export': 'off',
   },
 };
 
@@ -406,7 +404,13 @@ const getOverrides = () => [
   {
     files: [...configHelpers.devDependenciesFiles],
     rules: {
-      'import/no-extraneous-dependencies': ['error', { packageDir: ['.', gitRoot] }],
+      // - turning off this rule for non production code
+      // - it doesn't work for our use cases as it should
+      // - we don't wanna specify monorepo packages as devDependencies in package.json
+      // if they are used in non production code. This rule is unable to handle this scenario.
+      // TODO:
+      // As a follow up we will introduce `@nrwl/nx/enforce-module-boundaries` with {"banTransitiveDependencies": true}
+      'import/no-extraneous-dependencies': ['off'],
     },
   },
 ];

packages/react-accordion/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@fluentui/react-aria": "9.0.0-rc.5",
     "@fluentui/react-context-selector": "9.0.0-rc.5",
+    "@fluentui/react-shared-contexts": "9.0.0-rc.4",
     "@fluentui/react-icons": "^2.0.159-beta.10",
     "@griffel/react": "1.0.0",
     "@fluentui/react-tabster": "9.0.0-rc.5",

packages/react-avatar/package.json

@@ -36,6 +36,7 @@
     "@fluentui/react-badge": "9.0.0-rc.5",
     "@fluentui/react-icons": "^2.0.159-beta.10",
     "@fluentui/react-theme": "9.0.0-rc.4",
+    "@fluentui/react-shared-contexts": "9.0.0-rc.4",
     "@fluentui/react-utilities": "9.0.0-rc.5",
     "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"

packages/react-components/config/pre-copy.json

@@ -1,5 +1,5 @@
 {
   "copyTo": {
-    "unstable": ["./src/unstable/package.json"]
+    "unstable/package.json": "./src/unstable/package.json__tmpl__"
   }
 }

packages/react-conformance-griffel/package.json

@@ -22,10 +22,15 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "^1.0.0",
-    "@fluentui/react-conformance": "*"
+    "@fluentui/scripts": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <18.0.0",
+    "@types/react-dom": ">=16.8.0 <18.0.0",
+    "typescript": "^4.3.0"
   },
   "dependencies": {
+    "@fluentui/react-conformance": "^0.10.1",
     "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },

packages/react-tabs/package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@griffel/react": "1.0.0",
+    "@fluentui/react-context-selector": "9.0.0-rc.5",
     "@fluentui/react-tabster": "9.0.0-rc.5",
     "@fluentui/react-theme": "9.0.0-rc.4",
     "@fluentui/react-utilities": "9.0.0-rc.5",