migrate react config (#245)

* migrate react config Signed-off-by: Kangrui Johann Ye <[email protected]> * migrate react hooks config Signed-off-by: Kangrui Johann Ye <[email protected]> * migrate jsx a11y config Signed-off-by: Kangrui Johann Ye <[email protected]> * fix typescript version for internal types Signed-off-by: Kangrui Johann Ye <[email protected]> * bump version Signed-off-by: Kangrui Johann Ye <[email protected]> --------- Signed-off-by: Kangrui Johann Ye <[email protected]>
cloudflightio · Oct 16, 2024 · 350f78d · 350f78d
1 parent 7ece559
commit 350f78d
Show file tree

Hide file tree

Showing 24 changed files with 706 additions and 266 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -15,7 +15,6 @@ export default tseslint.config(
         // until we are done with migrating everything to v9
         ignores: [
             'packages/eslint-plugin-angular/src/configs/format-template.ts',
-            'packages/eslint-plugin-react/*',
             'packages/eslint-plugin-typescript/src/configs/index.ts',
             'packages/eslint-plugin-typescript/src/configs/json.ts',
             'packages/eslint-plugin-typescript/src/configs/package.ts',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "private": true,
     "volta": {
         "node": "20.12.2",
@@ -44,11 +44,11 @@
         "eslint-import-resolver-typescript": "3.6.3",
         "eslint-plugin-import-x": "4.3.1",
         "eslint-plugin-json-es": "1.6.0",
-        "eslint-plugin-jsx-a11y": "6.8.0",
+        "eslint-plugin-jsx-a11y": "6.10.0",
         "eslint-plugin-n": "17.10.3",
         "eslint-plugin-no-unsanitized": "4.1.2",
-        "eslint-plugin-react": "7.34.1",
-        "eslint-plugin-react-hooks": "4.6.2",
+        "eslint-plugin-react": "7.37.1",
+        "eslint-plugin-react-hooks": "5.0.0",
         "eslint-plugin-rxjs": "5.0.3",
         "eslint-plugin-security": "3.0.1",
         "eslint-plugin-vue": "9.28.0",

diff --git a/packages/eslint-plugin-angular/package.json b/packages/eslint-plugin-angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-angular",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "description": "Cloudflight eslint-plugin & eslint-config for angular",
     "volta": {
         "extends": "../../package.json"

diff --git a/packages/eslint-plugin-angular/src/index.ts b/packages/eslint-plugin-angular/src/index.ts
@@ -14,6 +14,7 @@ export const cloudflightAngularTypescriptConfig = tseslint.config(
             ...angular.configs.tsRecommended,
         ],
         processor: angular.processInlineTemplates,
+        name: 'cloudflight/angular/typescript/rules',
         rules: {
             ...eslintRules,
             ...typescriptEslintRules,
@@ -29,6 +30,7 @@ export const cloudflightAngularTemplateConfig = tseslint.config(
             ...angular.configs.templateRecommended,
             ...angular.configs.templateAccessibility,
         ],
+        name: 'cloudflight/angular/template/rules',
         rules: {
             ...angularTemplateEslintRules,
             // todo: this should be its own config

diff --git a/packages/eslint-plugin-node/package.json b/packages/eslint-plugin-node/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-node",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "description": "Cloudflight eslint-plugin & eslint-config for node",
     "volta": {
         "extends": "../../package.json"

diff --git a/packages/eslint-plugin-node/src/index.ts b/packages/eslint-plugin-node/src/index.ts
@@ -16,6 +16,7 @@ export const cloudflightNodeConfig = tseslint.config(
             nounsanitized.configs.recommended,
             pluginSecurity.configs.recommended,
         ],
+        name: 'cloudflight/node/rules',
         rules: {
             ...nodeRules,
             ...securityRules,

diff --git a/packages/eslint-plugin-react/README.md b/packages/eslint-plugin-react/README.md
@@ -9,7 +9,6 @@ You can find the directory of all rules including their reasoning [here](src/con
 The following dependencies are required:
 
 ```
-"@cloudflight/eslint-plugin-typescript": ">=0.26.0",
 "eslint": ">=9.0.0 < 10.0.0"
 ```
 
@@ -25,19 +24,40 @@ In your `package.json` add the following:
   }
 ```
 
-The plugin provides 1 configuration:
-
--   @cloudflight/react/recommended
-    -   Contains rules for React files
-
-Now open your `.eslintrc.js` and add one of the configurations:
-
+Now open your `eslint.config.mjs` and add one of the configurations:
+
+```ts
+import { cloudflightReactConfig } from '@cloudflight/eslint-plugin-react';
+import { includeIgnoreFile } from '@eslint/compat';
+import { dirname, normalize, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const directory = dirname(fileURLToPath(import.meta.url));
+const gitignorePath = normalize(resolve(directory, '.gitignore'));
+
+export default [
+    includeIgnoreFile(gitignorePath),
+    ...cloudflightReactConfig,
+    {
+        languageOptions: {
+            parserOptions: {
+                project: ['tsconfig*(.*).json'],
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        settings: {
+            'import-x/resolver': {
+                typescript: {
+                    alwaysTryTypes: true,
+                    project: ['tsconfig*(.*).json'],
+                },
+            },
+            react: {
+                version: 'detect',
+            },
+        },
+    },
+];
 ```
-require('@rushstack/eslint-patch/modern-module-resolution');
 
-module.exports = {
-    ...
-    extends: ['plugin:@cloudflight/react/recommended'],
-    ...
-};
-```
+When executing your next `eslint .` it will now validate your code against the cloudflight-recommended rules.
diff --git a/packages/eslint-plugin-react/package.json b/packages/eslint-plugin-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-react",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "description": "Cloudflight eslint-plugin & eslint-config for React",
     "volta": {
         "extends": "../../package.json"
@@ -22,20 +22,22 @@
     "publishConfig": {
         "access": "public"
     },
-    "private": true,
     "scripts": {
-        "build-packagex": "tsc"
+        "build-package": "tsc"
     },
     "dependencies": {
-        "eslint-plugin-jsx-a11y": "^6.8.0",
-        "eslint-plugin-react": "^7.34.1",
-        "eslint-plugin-react-hooks": "^4.6.2"
+        "@cloudflight/eslint-plugin-typescript": "workspace:*",
+        "@typescript-eslint/parser": "^8.8.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.1",
+        "eslint-plugin-react-hooks": "^5.0.0"
     },
     "peerDependencies": {
-        "@cloudflight/eslint-plugin-typescript": "workspace:*",
         "eslint": ">=9.0.0 < 10.0.0"
     },
     "devDependencies": {
+        "@types/eslint-plugin-jsx-a11y": "workspace:*",
+        "@types/eslint-plugin-react-hooks": "workspace:*",
         "typescript": "5.5.4"
     }
 }
diff --git a/packages/eslint-plugin-react/src/configs/index.ts b/packages/eslint-plugin-react/src/configs/index.ts
diff --git a/packages/eslint-plugin-react/src/configs/react.ts b/packages/eslint-plugin-react/src/configs/react.ts
@@ -0,0 +1,22 @@
+import {TSESLint} from '@typescript-eslint/utils';
+
+export const reactRules: TSESLint.Linter.RulesRecord = {
+    'react/static-property-placement': ['error', 'static public field'],
+    'react/jsx-fragments': ['error', 'element'],
+    'react/sort-comp': [
+        1,
+        {
+            order: [
+                'type-annotations',
+                'static-variables',
+                'instance-variables',
+                'lifecycle',
+                'static-methods',
+                'instance-methods',
+                'everything-else',
+                'render',
+            ],
+        },
+    ],
+    'react/no-array-index-key': ['error'],
+};
diff --git a/packages/eslint-plugin-react/src/configs/recommended/recommended.config.ts b/packages/eslint-plugin-react/src/configs/recommended/recommended.config.ts
diff --git a/packages/eslint-plugin-react/src/index.ts b/packages/eslint-plugin-react/src/index.ts
@@ -1,2 +1,63 @@
-export {configs} from './configs';
-export {rules} from './rules';
+import tseslint from 'typescript-eslint';
+import {
+    cloudflightTypescriptBaseConfig,
+    cloudflightTypescriptConfig, cloudflightTypescriptDisableTypeCheckedConfig,
+    cloudflightTypescriptImportConfig
+} from '@cloudflight/eslint-plugin-typescript';
+import type {TSESLint} from '@typescript-eslint/utils';
+import * as tsParser from '@typescript-eslint/parser';
+// see https://github.com/jsx-eslint/eslint-plugin-react/issues/3838
+// eslint-disable-next-line import-x/default
+import react from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import {reactRules} from './configs/react';
+
+export const cloudflightReactConfig = tseslint.config(
+    ...cloudflightTypescriptConfig,
+    {
+        files: ['**/*.{js,jsx,mjs,cjs,ts,mts,cts,tsx}'],
+        plugins: {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            'react-hooks': pluginReactHooks as TSESLint.FlatConfig.Plugin,
+        },
+        extends: [
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...cloudflightTypescriptBaseConfig,
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...cloudflightTypescriptImportConfig,
+            // type assertion is workaround for incorrect TypeScript types in eslint-plugin-react
+            // see https://github.com/jsx-eslint/eslint-plugin-react/issues/3838
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            react.configs.flat.recommended as TSESLint.FlatConfig.Config,
+            // type assertion is workaround for incorrect TypeScript types in eslint-plugin-react
+            // see https://github.com/jsx-eslint/eslint-plugin-react/issues/3838
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            react.configs.flat['jsx-runtime'] as TSESLint.FlatConfig.Config,
+            jsxA11y.flatConfigs.recommended,
+        ],
+        languageOptions: {
+            parser: tsParser,
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parserOptions: {
+                jsxPragma: null,
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        name: 'cloudflight/react/rules',
+        rules: {
+            ...pluginReactHooks.configs.recommended.rules,
+            ...reactRules,
+        }
+    },
+    {
+        files: ['**/*.{js,jsx,mjs,cjs}'],
+        extends: [
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...cloudflightTypescriptDisableTypeCheckedConfig,
+        ],
+    },
+);
diff --git a/packages/eslint-plugin-react/src/rules/index.ts b/packages/eslint-plugin-react/src/rules/index.ts
diff --git a/packages/eslint-plugin-typescript/package.json b/packages/eslint-plugin-typescript/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-typescript",
-    "version": "1.0.0-rc7",
+    "version": "1.0.0-rc8",
     "description": "Cloudflight eslint-plugin & eslint-config for typescript",
     "volta": {
         "extends": "../../package.json"

diff --git a/packages/eslint-plugin-typescript/src/index.ts b/packages/eslint-plugin-typescript/src/index.ts
@@ -10,7 +10,7 @@ import {importEslintRules} from './configs/import';
 
 /**
  * @deprecated Use `cloudflightTypescriptConfig` instead
- * This is only for internal use because eslint-plugin-import-x cannot work with vue-eslint-parser
+ * This is only for internal use only
  */
 export const cloudflightTypescriptBaseConfig = tseslint.config(
     {
@@ -23,37 +23,54 @@ export const cloudflightTypescriptBaseConfig = tseslint.config(
             ...tseslint.configs.strictTypeChecked,
             ...tseslint.configs.stylisticTypeChecked,
         ],
+        name: 'cloudflight/typescript/base-rules',
         rules: {
             ...eslintRules,
             ...typescriptEslintRules,
             ...customRules,
-        }
-    },
-    {
-        files: ['**/*.{js,mjs,cjs}'],
-        extends: [tseslint.configs.disableTypeChecked],
-        rules: {
-            ...typescriptEslintRulesDisableTypeChecked,
-        }
+        },
     },
 );
 
+/**
+ * @deprecated Use `cloudflightTypescriptConfig` instead
+ * This is only for internal use only
+ */
+export const cloudflightTypescriptImportConfig = tseslint.config({
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts}'],
+    extends: [
+        eslintPluginImportX.flatConfigs.recommended,
+        eslintPluginImportX.flatConfigs.typescript,
+    ],
+    languageOptions: {
+        parser: tsParser,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    name: 'cloudflight/typescript/import-rules',
+    rules: {
+        ...importEslintRules,
+    },
+});
+
+/**
+ * @deprecated Use `cloudflightTypescriptConfig` instead
+ * This is only for internal use only
+ */
+export const cloudflightTypescriptDisableTypeCheckedConfig = tseslint.config({
+    files: ['**/*.{js,mjs,cjs}'],
+    extends: [tseslint.configs.disableTypeChecked],
+    name: 'cloudflight/typescript/disable-type-checked-rules',
+    rules: {
+        ...typescriptEslintRulesDisableTypeChecked,
+    },
+});
+
 export const cloudflightTypescriptConfig = tseslint.config(
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     ...cloudflightTypescriptBaseConfig,
-    {
-        files: ['**/*.{js,mjs,cjs,ts,mts,cts}'],
-        extends: [
-            eslintPluginImportX.flatConfigs.recommended,
-            eslintPluginImportX.flatConfigs.typescript,
-        ],
-        languageOptions: {
-            parser: tsParser,
-            ecmaVersion: 'latest',
-            sourceType: 'module',
-        },
-        rules: {
-            ...importEslintRules,
-        },
-    }
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    ...cloudflightTypescriptImportConfig,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    ...cloudflightTypescriptDisableTypeCheckedConfig,
 );