feat: add JSX fragment factory to error message (#1051)

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.spec.ts

@@ -22,10 +22,66 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: tsx`<>text</>`,
+      code: tsx`
+        /** @jsx createElement */
+        /** @jsxFrag Fragment */
+
+        const element = <><div /></>;
+      `,
+      errors: [
+        {
+          messageId: "avoidShorthandFragment",
+          data: {
+            jsxFragmentFactory: "Fragment",
+          },
+        },
+      ],
+    },
+    {
+      code: tsx`
+        /** @jsx React.createElement */
+        /** @jsxFrag React.Fragment */
+
+        const element = <><div /></>;
+      `,
+      errors: [
+        {
+          messageId: "avoidShorthandFragment",
+          data: {
+            jsxFragmentFactory: "React.Fragment",
+          },
+        },
+      ],
+    },
+    {
+      code: tsx`
+        /** @jsx h */
+        /** @jsxFrag Fragment */
+
+        const element = <><div /></>;
+      `,
+      errors: [
+        {
+          messageId: "avoidShorthandFragment",
+          data: {
+            jsxFragmentFactory: "Fragment",
+          },
+        },
+      ],
+    },
+    {
+      code: tsx`
+        /** @jsx Preact.h */
+        /** @jsxFrag Preact.Fragment */
+
+        const element = <><div /></>;
+      `,
       errors: [
         {
           messageId: "avoidShorthandFragment",
+          data: {
+            jsxFragmentFactory: "Preact.Fragment",
+          },
         },
       ],
     },

packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.ts

@@ -1,6 +1,6 @@
-import type { RuleContext, RuleFeature } from "@eslint-react/kit";
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
+import { JsxConfig, type RuleContext, type RuleFeature } from "@eslint-react/kit";
 
 import { createRule } from "../utils";
 
@@ -18,7 +18,7 @@ export default createRule<[], MessageID>({
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
-      avoidShorthandFragment: "Avoid using shorthand fragment syntax. Use 'Fragment' component instead.",
+      avoidShorthandFragment: "Avoid using shorthand fragment syntax. Use '{{jsxFragmentFactory}}' component instead.",
     },
     schema: [],
   },
@@ -28,11 +28,21 @@ export default createRule<[], MessageID>({
 });
 
 export function create(context: RuleContext<MessageID, []>): RuleListener {
+  const jsxConfigFromContext = JsxConfig.getFromContext(context);
+  const jsxConfigFromAnnotation = JsxConfig.getFromAnnotation(context);
+  const jsxConfig = {
+    ...jsxConfigFromContext,
+    ...jsxConfigFromAnnotation,
+  };
+
   return {
     JSXFragment(node) {
       context.report({
         messageId: "avoidShorthandFragment",
         node,
+        data: {
+          jsxFragmentFactory: jsxConfig.jsxFragmentFactory,
+        },
       });
     },
   };