@nighttrax/eslint-config-tsx 12.4.0 → 13.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nighttrax/eslint-config-tsx",
-  "version": "12.4.0",
+  "version": "13.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,14 +22,15 @@
     "url": "git+https://github.com/NiGhTTraX/eslint-config.git"
   },
   "dependencies": {
-    "eslint-plugin-jsx-a11y": "~6.10.2",
-    "eslint-plugin-react": "~7.37.5",
-    "eslint-plugin-react-hooks": "~7.0.0",
-    "eslint-plugin-react-you-might-not-need-an-effect": "~0.9.0",
-    "@nighttrax/eslint-config-ts": "12.2.0"
+    "@eslint-react/eslint-plugin": "~5.8.12",
+    "@eslint-react/kit": "~5.8.12",
+    "@typescript-eslint/utils": "~8.60.1",
+    "eslint-plugin-react-you-might-not-need-an-effect": "~1.0.0",
+    "typescript-eslint": "~8.60.1",
+    "@nighttrax/eslint-config-ts": "13.0.0"
   },
   "peerDependencies": {
-    "eslint": "^9.0.0",
+    "eslint": "^10.0.0",
     "prettier": "^3.0.0",
     "typescript": "^5.0.0 || ^6.0.0"
   },

package/src/react.mjs

@@ -1,8 +1,8 @@
-import react from "eslint-plugin-react";
-import jsxA11y from "eslint-plugin-jsx-a11y";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactYouMightNotNeedAnEffect from "eslint-plugin-react-you-might-not-need-an-effect";
+import react from "@eslint-react/eslint-plugin";
+import eslintReactKit from "@eslint-react/kit";
 import { EXTENSIONS, nighttraxTS } from "@nighttrax/eslint-config-ts";
+import reactYouMightNotNeedAnEffect from "eslint-plugin-react-you-might-not-need-an-effect";
+import { functionComponentDefinition } from "./rules/function-component-definition.mts";
 
 /**
  * @param {import('typescript-eslint').InfiniteDepthConfigWithExtends[]} [configs]
@@ -19,37 +19,25 @@ export const nighttraxReact = (
 ) =>
   nighttraxTS(
     [
-      react.configs.flat.recommended,
-      react.configs.flat["jsx-runtime"],
-      reactHooks.configs.flat["recommended-latest"],
-      jsxA11y["flatConfigs"].recommended,
-      reactYouMightNotNeedAnEffect.configs.recommended,
+      react.configs["strict-type-checked"],
+      eslintReactKit().use(functionComponentDefinition).getConfig(),
 
       {
+        plugins: {
+          "@no-effect": reactYouMightNotNeedAnEffect,
+        },
         settings: {
-          react: {
+          "react-x": {
             version,
           },
         },
         rules: {
-          // This usually warns for memoized or forwardRef-ed components, which is fine.
-          "react/display-name": "off",
-          "react/function-component-definition": [
-            "error",
-            {
-              namedComponents: "arrow-function",
-              unnamedComponents: "arrow-function",
-            },
-          ],
-          "react/jsx-no-leaked-render": "error",
-          "react/jsx-boolean-value": ["error", "never"],
-          "react/forward-ref-uses-ref": "error",
-          "react/jsx-no-useless-fragment": "error",
-          "react/jsx-fragments": "error",
-          "react/jsx-curly-brace-presence": "error",
+          "@stylistic/jsx-curly-brace-presence": "error",
+          "@stylistic/jsx-shorthand-boolean": "error",
+          "@stylistic/jsx-shorthand-fragment": "error",
 
-          // Produces some false positives, plus it seems to be covered by react-hooks/set-state-in-effect.
-          "react-you-might-not-need-an-effect/no-derived-state": "off",
+          "@no-effect/no-pass-live-state-to-parent": "error",
+          "@no-effect/no-event-handler": "error",
         },
       },
 

package/src/rules/function-component-definition.mts

@@ -0,0 +1,89 @@
+import type { RuleFunction } from "@eslint-react/kit";
+import { merge } from "@eslint-react/kit";
+import { AST_NODE_TYPES } from "@typescript-eslint/utils";
+
+/** Enforce arrow function definitions for function components. */
+export function functionComponentDefinition(): RuleFunction {
+  return (context, { collect, hint }) => {
+    const { query, visitor } = collect.components(context, {
+      hint:
+        hint.component.Default &
+        ~hint.component.DoNotIncludeFunctionDefinedAsObjectMethod,
+    });
+
+    return merge(visitor, {
+      "Program:exit"(program) {
+        // ─── Iterate all components ────────────────────
+        for (const { node } of query.all(program)) {
+          // › Guard: must not already be arrow function
+          if (node.type === AST_NODE_TYPES.ArrowFunctionExpression) {
+            continue;
+          }
+
+          context.report({
+            node,
+            message:
+              "Function components must be defined with arrow functions.",
+            suggest: [
+              {
+                desc: "Convert to arrow function.",
+                fix(fixer) {
+                  const src = context.sourceCode;
+
+                  if (node.generator) {
+                    return null;
+                  }
+
+                  const prefix = node.async ? "async " : "";
+                  const typeParams = node.typeParameters
+                    ? src.getText(node.typeParameters)
+                    : "";
+                  const params = `(${node.params.map((p) => src.getText(p)).join(", ")})`;
+                  const returnType = node.returnType
+                    ? src.getText(node.returnType)
+                    : "";
+                  const body = src.getText(node.body);
+
+                  // ─── Case: function declaration ──────────────
+                  if (
+                    node.type === AST_NODE_TYPES.FunctionDeclaration &&
+                    node.id
+                  ) {
+                    return fixer.replaceText(
+                      node,
+                      `const ${node.id.name} = ${prefix}${typeParams}${params}${returnType} => ${body};`,
+                    );
+                  }
+
+                  // ─── Case: function expression in variable ───
+                  if (
+                    node.type === AST_NODE_TYPES.FunctionExpression &&
+                    node.parent.type === AST_NODE_TYPES.VariableDeclarator
+                  ) {
+                    return fixer.replaceText(
+                      node,
+                      `${prefix}${typeParams}${params}${returnType} => ${body}`,
+                    );
+                  }
+
+                  // ─── Case: object method shorthand ───────────
+                  if (
+                    node.type === AST_NODE_TYPES.FunctionExpression &&
+                    node.parent.type === AST_NODE_TYPES.Property
+                  ) {
+                    return fixer.replaceText(
+                      node.parent,
+                      `${src.getText(node.parent.key)}: ${prefix}${typeParams}${params}${returnType} => ${body}`,
+                    );
+                  }
+
+                  return null;
+                },
+              },
+            ],
+          });
+        }
+      },
+    });
+  };
+}