refactor: add 'createReport' helper (#1002)

Author: Rel1cx

apps/website/package.json

@@ -35,7 +35,7 @@
     "@local/configs": "workspace:*",
     "@mdx-js/mdx": "^3.1.0",
     "@next/eslint-plugin-next": "^15.2.3",
-    "@tailwindcss/postcss": "^4.0.14",
+    "@tailwindcss/postcss": "^4.0.15",
     "@tsconfig/next": "^2.0.3",
     "@tsconfig/node22": "^22.0.0",
     "@tsconfig/strictest": "^2.0.5",
@@ -58,7 +58,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unicorn": "^57.0.0",
     "postcss": "^8.5.3",
-    "tailwindcss": "^4.0.14",
+    "tailwindcss": "^4.0.15",
     "tailwindcss-animated": "^2.0.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.27.0"

packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.ts

@@ -1,12 +1,11 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 /* eslint-disable */
 // Ported from https://github.com/jsx-eslint/eslint-plugin-react/blob/master/lib/rules/no-unknown-property.js
 // TODO: Port to TypeScript
-
+// @ts-nocheck
 import { getSettingsFromContext } from "@eslint-react/shared";
 import { createRule } from "../utils";
-import { compare, compareVersions } from "compare-versions";
+import { compare } from "compare-versions";
+import { createReport } from "@eslint-react/shared";
 import type { RuleContext, RuleFeature } from "@eslint-react/shared";
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 
@@ -1091,6 +1090,7 @@ export default createRule({
 });
 
 export function create(context: RuleContext<MessageID, unknown[]>): RuleListener {
+  const report = createReport(context);
   function getIgnoreConfig() {
     return context.options[0]?.ignore || DEFAULTS.ignore;
   }
@@ -1117,8 +1117,9 @@ export function create(context: RuleContext<MessageID, unknown[]>): RuleListener
 
       if (isValidDataAttribute(name)) {
         if (getRequireDataLowercase() && hasUpperCaseCharacter(name)) {
-          report(context, messages.dataLowercaseRequired, "dataLowercaseRequired", {
+          report({
             node,
+            messageId: "dataLowercaseRequired",
             data: {
               name: actualName,
               lowerCaseName: actualName.toLowerCase(),
@@ -1146,8 +1147,9 @@ export function create(context: RuleContext<MessageID, unknown[]>): RuleListener
       if (tagName && allowedTags) {
         // Scenario 1A: Allowed attribute found where not supposed to, report it
         if (allowedTags.indexOf(tagName) === -1) {
-          report(context, messages.invalidPropOnTag, "invalidPropOnTag", {
+          report({
             node,
+            messageId: "invalidPropOnTag",
             data: {
               name: actualName,
               allowedTags: allowedTags.join(", "),
@@ -1172,8 +1174,9 @@ export function create(context: RuleContext<MessageID, unknown[]>): RuleListener
 
       if (hasStandardNameButIsNotUsed) {
         // Scenario 2B: The name of the attribute is close to a standard one, report it with the standard name
-        report(context, messages.unknownPropWithStandardName, "unknownPropWithStandardName", {
+        report({
           node,
+          messageId: "unknownPropWithStandardName",
           data: {
             name: actualName,
             standardName,
@@ -1186,8 +1189,9 @@ export function create(context: RuleContext<MessageID, unknown[]>): RuleListener
       }
 
       // Scenario 3: We have an attribute that is unknown, report it
-      report(context, messages.unknownProp, "unknownProp", {
+      report({
         node,
+        messageId: "unknownProp",
         data: {
           name: actualName,
         },
@@ -1204,13 +1208,6 @@ function getText(context, node) {
   return context.sourceCode.getText(node);
 }
 
-function report(context, message, messageId, data) {
-  context.report({
-    messageId,
-    ...data,
-  });
-}
-
 function testReactVersion(context, comparator, version) {
   const { version: localVersion } = getSettingsFromContext(context);
   return compare(localVersion, version, comparator);

packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.ts

@@ -2,7 +2,7 @@ import * as AST from "@eslint-react/ast";
 import { isCloneElementCall, isCreateElementCall, isInitializedFromReact } from "@eslint-react/core";
 import { _ } from "@eslint-react/eff";
 import type { RuleContext, RuleFeature } from "@eslint-react/shared";
-import { report, unsafeDecodeSettings } from "@eslint-react/shared";
+import { createReport, unsafeDecodeSettings } from "@eslint-react/shared";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
 import type { TSESTree } from "@typescript-eslint/utils";
 import type { ReportDescriptor, RuleListener } from "@typescript-eslint/utils/ts-eslint";
@@ -127,6 +127,7 @@ export default createRule<[], MessageID>({
 });
 
 export function create(context: RuleContext<MessageID, []>): RuleListener {
+  const report = createReport(context);
   const indexParamNames: Array<string | _> = [];
 
   function isArrayIndex(node: TSESTree.Node): node is TSESTree.Identifier {
@@ -217,7 +218,7 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
           continue;
         }
         getReportDescriptors(prop.value)
-          .map(report(context));
+          .forEach(report);
       }
     },
     "CallExpression:exit"() {
@@ -234,7 +235,7 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
         return;
       }
       getReportDescriptors(node.value.expression)
-        .map(report(context));
+        .forEach(report);
     },
   };
 }

packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.ts

@@ -1,7 +1,7 @@
 import * as AST from "@eslint-react/ast";
 import { _, flow, identity } from "@eslint-react/eff";
 import type { RuleContext, RuleFeature } from "@eslint-react/shared";
-import { getSettingsFromContext, report } from "@eslint-react/shared";
+import { createReport, getSettingsFromContext } from "@eslint-react/shared";
 import * as VAR from "@eslint-react/var";
 import { getConstrainedTypeAtLocation } from "@typescript-eslint/type-utils";
 import type { TSESTree } from "@typescript-eslint/types";
@@ -260,7 +260,7 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
       })
       .otherwise(() => _);
   }
-  const visitorFunction = flow(getReportDescriptor, report(context));
+  const visitorFunction = flow(getReportDescriptor, createReport(context));
   return {
     "JSXExpressionContainer > ConditionalExpression": visitorFunction,
     "JSXExpressionContainer > LogicalExpression": visitorFunction,

packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.ts

@@ -1,7 +1,7 @@
 import * as AST from "@eslint-react/ast";
 import { isChildrenToArrayCall } from "@eslint-react/core";
 import * as JSX from "@eslint-react/jsx";
-import { report, type RuleContext, type RuleFeature } from "@eslint-react/shared";
+import { createReport, type RuleContext, type RuleFeature } from "@eslint-react/shared";
 import type { TSESTree } from "@typescript-eslint/types";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
 import type { ReportDescriptor, RuleListener } from "@typescript-eslint/utils/ts-eslint";
@@ -35,6 +35,7 @@ export default createRule<[], MessageID>({
 });
 
 export function create(context: RuleContext<MessageID, []>): RuleListener {
+  const report = createReport(context);
   const state = { isWithinChildrenToArray: false };
 
   function checkIteratorElement(node: TSESTree.Node): null | ReportDescriptor<MessageID> {
@@ -102,7 +103,7 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
       const initialScope = context.sourceCode.getScope(node);
       for (const element of elements) {
         if (!JSX.hasAttribute("key", element.openingElement.attributes, initialScope)) {
-          report(context)({
+          report({
             messageId: "missingKey",
             node: element,
           });
@@ -123,12 +124,10 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
         return;
       }
       if (fn.body.type === T.BlockStatement) {
-        for (const descriptor of checkBlockStatement(fn.body)) {
-          report(context)(descriptor);
-        }
+        checkBlockStatement(fn.body).forEach(report);
         return;
       }
-      report(context)(checkExpression(fn.body));
+      report(checkExpression(fn.body));
     },
     "CallExpression:exit"(node) {
       if (!isChildrenToArrayCall(context, node)) {
@@ -141,7 +140,7 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
         return;
       }
       if (node.parent.type === T.ArrayExpression) {
-        report(context)({
+        report({
           messageId: "unexpectedFragmentSyntax",
           node,
         });

packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts

@@ -36,7 +36,7 @@ function trimLikeReact(text: string) {
   return text.slice(start, end);
 }
 
-function checkAndReport(
+function doCheck(
   context: RuleContext,
   node: TSESTree.JSXElement | TSESTree.JSXFragment,
   allowExpressions: boolean,
@@ -194,10 +194,10 @@ export function create(context: RuleContext<MessageID, Options>, [option]: Optio
   return {
     JSXElement(node) {
       if (!JSX.isFragmentElement(node)) return;
-      checkAndReport(context, node, allowExpressions);
+      doCheck(context, node, allowExpressions);
     },
     JSXFragment(node) {
-      checkAndReport(context, node, allowExpressions);
+      doCheck(context, node, allowExpressions);
     },
   };
 }

packages/shared/docs/README.md

@@ -43,9 +43,9 @@
 
 ## Functions
 
+- [createReport](functions/createReport.md)
 - [getId](functions/getId.md)
 - [getReactVersion](functions/getReactVersion.md)
 - [getSettingsFromContext](functions/getSettingsFromContext.md)
 - [isInEditorEnv](functions/isInEditorEnv.md)
 - [isInGitHooksOrLintStaged](functions/isInGitHooksOrLintStaged.md)
-- [report](functions/report.md)

packages/shared/docs/functions/report.md renamed to packages/shared/docs/functions/createReport.md

@@ -2,11 +2,13 @@
 
 ***
 
-[@eslint-react/shared](../README.md) / report
+[@eslint-react/shared](../README.md) / createReport
 
-# Function: report()
+# Function: createReport()
 
-> **report**\<`MessageID`\>(`context`): (`descriptor`) => `void`
+> **createReport**\<`MessageID`\>(`context`): (`descriptor`) => `void`
+
+Creates a report function that can conditionally report a descriptor.
 
 ## Type Parameters
 
@@ -20,10 +22,14 @@
 
 [`RuleContext`](../type-aliases/RuleContext.md)
 
+The context of the rule
+
 ## Returns
 
 `Function`
 
+A function that takes a descriptor and reports it if it's not null or undefined
+
 ### Parameters
 
 #### descriptor

packages/shared/src/create-report.ts

@@ -0,0 +1,15 @@
+import type { _ } from "@eslint-react/eff";
+import type { ReportDescriptor } from "@typescript-eslint/utils/ts-eslint";
+
+import type { RuleContext } from "./types";
+
+/**
+ * Creates a report function that can conditionally report a descriptor.
+ * @param context - The context of the rule
+ * @returns A function that takes a descriptor and reports it if it's not null or undefined
+ */
+export function createReport<MessageID extends string>(context: RuleContext) {
+  return (descriptor: _ | null | ReportDescriptor<MessageID>) => {
+    if (descriptor != null) context.report(descriptor);
+  };
+}

packages/shared/src/index.ts

@@ -1,9 +1,9 @@
 export * from "./constants";
+export * from "./create-report";
 export * from "./create-rule";
 export * from "./env";
 export * from "./get-id";
 export * from "./get-react-version";
-export * from "./report";
 export * from "./schemas";
 export * from "./settings";
 export type * from "./types";