feat: update jsx-shorthand rules to use new message format and policy options

Rel1cx · Rel1cx · commit 37773e8da055 · 2025-04-29T00:23:26.000+08:00
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-boolean.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-boolean.spec.ts
@@ -8,27 +8,52 @@ ruleTester.run(RULE_NAME, rule, {
     {
       code: tsx`<input disabled={true} />`,
       errors: [{
-        messageId: "omitAttributeValue",
-        data: { propName: "disabled" },
+        messageId: "jsxShorthandBoolean",
+        data: { message: "Omit attribute value for 'disabled'." },
       }],
       output: tsx`<input disabled />`,
     },
     {
       code: tsx`<App foo={true} />`,
       errors: [{
-        messageId: "omitAttributeValue",
-        data: { propName: "foo" },
+        messageId: "jsxShorthandBoolean",
+        data: { message: "Omit attribute value for 'foo'." },
       }],
       output: tsx`<App foo />`,
     },
     {
       code: tsx`<App foo={true} bar />`,
       errors: [{
-        messageId: "omitAttributeValue",
-        data: { propName: "foo" },
+        messageId: "jsxShorthandBoolean",
+        data: { message: "Omit attribute value for 'foo'." },
       }],
       output: tsx`<App foo bar />`,
     },
+    {
+      code: tsx`<App foo={true} bar={false} />`,
+      errors: [{
+        messageId: "jsxShorthandBoolean",
+        data: { message: "Omit attribute value for 'foo'." },
+      }],
+      output: tsx`<App foo bar={false} />`,
+    },
+    {
+      code: tsx`<App foo={true} bar={false} baz />`,
+      errors: [{
+        messageId: "jsxShorthandBoolean",
+        data: { message: "Omit attribute value for 'foo'." },
+      }],
+      output: tsx`<App foo bar={false} baz />`,
+    },
+    {
+      code: tsx`<input disabled />`,
+      errors: [{
+        messageId: "jsxShorthandBoolean",
+        data: { message: "Set attribute value for 'disabled'." },
+      }],
+      options: [-1],
+      output: tsx`<input disabled={true} />`,
+    },
   ],
   valid: [
     ...allValid,
@@ -37,5 +62,9 @@ ruleTester.run(RULE_NAME, rule, {
     "<App foo bar />",
     "<App foo bar={false} />",
     "<App foo bar={false} baz />",
+    {
+      code: tsx`<App foo={true} />`,
+      options: [-1],
+    },
   ],
 });
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-boolean.ts b/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-boolean.ts
@@ -5,6 +5,7 @@ import type { JSONSchema4 } from "@typescript-eslint/utils/json-schema";
 
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 
+import type { CamelCase } from "string-ts";
 import * as ER from "@eslint-react/core";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
 import { createRule } from "../utils";
@@ -16,21 +17,19 @@ export const RULE_FEATURES = [
   "FIX",
 ] as const satisfies RuleFeature[];
 
-export type MessageID =
-  | "omitAttributeValue"
-  | "setAttributeValue";
+export type MessageID = CamelCase<typeof RULE_NAME>;
 
 type Options = readonly [
   | _
   | RulePolicy,
 ];
 
-const defaultOptions = ["prefer"] as const satisfies Options;
+const defaultOptions = [1] as const satisfies Options;
 
 const schema = [
   {
-    type: "string",
-    enum: ["prefer", "avoid"],
+    type: "integer",
+    enum: [-1, 1],
   },
 ] as const satisfies [JSONSchema4];
 
@@ -43,8 +42,7 @@ export default createRule<Options, MessageID>({
     },
     fixable: "code",
     messages: {
-      omitAttributeValue: "Value must be omitted for boolean attribute `{{propName}}`",
-      setAttributeValue: "Value must be set for boolean attribute `{{propName}}`",
+      jsxShorthandBoolean: "{{message}}",
     },
     schema,
   },
@@ -58,31 +56,35 @@ export function create(context: RuleContext<MessageID, Options>): RuleListener {
   return {
     JSXAttribute(node: TSESTree.JSXAttribute) {
       const { value } = node;
-      if (policy === "avoid" && value == null) {
-        context.report({
-          messageId: "setAttributeValue",
-          node,
-          data: {
-            propName: ER.getAttributeName(context, node),
-          },
-          fix: (fixer) => fixer.insertTextAfter(node.name, `={true}`),
-        });
-        return;
-      }
-
-      const hasValueTrue = value?.type === T.JSXExpressionContainer
-        && value.expression.type === T.Literal
-        && value.expression.value === true;
       const propName = ER.getAttributeName(context, node);
-      if (policy === "prefer" && hasValueTrue) {
-        context.report({
-          messageId: "omitAttributeValue",
-          node: node.value ?? node,
-          data: {
-            propName,
-          },
-          fix: (fixer) => fixer.removeRange([node.name.range[1], value.range[1]]),
-        });
+
+      switch (true) {
+        case policy === 1
+          && value?.type === T.JSXExpressionContainer
+          && value.expression.type === T.Literal
+          && value.expression.value === true: {
+          context.report({
+            messageId: "jsxShorthandBoolean",
+            node,
+            data: {
+              message: `Omit attribute value for '${propName}'.`,
+            },
+            fix: (fixer) => fixer.removeRange([node.name.range[1], value.range[1]]),
+          });
+          break;
+        }
+        case policy === -1
+          && value === null: { // eslint-disable-line local/prefer-eqeq-nullish-comparison
+          context.report({
+            messageId: "jsxShorthandBoolean",
+            node: node.value ?? node,
+            data: {
+              message: `Set attribute value for '${propName}'.`,
+            },
+            fix: (fixer) => fixer.insertTextAfter(node.name, `={true}`),
+          });
+          break;
+        }
       }
     },
   };
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-fragment.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-fragment.spec.ts
@@ -40,6 +40,25 @@ ruleTester.run(RULE_NAME, rule, {
         </>
       `,
     },
+    {
+      code: tsx`
+        <>
+            <div />
+        </>
+      `,
+      errors: [
+        {
+          messageId: "jsxShorthandFragment",
+          data: { message: "Use 'Fragment' component instead of fragment shorthand syntax." },
+        },
+      ],
+      options: [-1],
+      output: tsx`
+        <React.Fragment>
+            <div />
+        </React.Fragment>
+      `,
+    },
   ],
   valid: [
     ...allValid,
@@ -54,5 +73,13 @@ ruleTester.run(RULE_NAME, rule, {
     tsx`<Fragment key={item.id}>{item.value}</Fragment>`,
     tsx`<Fooo content={<>eeee ee eeeeeee eeeeeeee</>} />`,
     tsx`<>{foos.map(foo => foo)}</>`,
+    {
+      code: tsx`
+        <React.Fragment>
+            <div />
+        </React.Fragment>
+      `,
+      options: [-1],
+    },
   ],
 });
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/jsx-shorthand-fragment.ts
@@ -1,20 +1,38 @@
-import type { RuleContext, RuleFeature } from "@eslint-react/kit";
+import type { _ } from "@eslint-react/eff";
 import type { TSESTree } from "@typescript-eslint/types";
+import type { JSONSchema4 } from "@typescript-eslint/utils/json-schema";
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
-import * as ER from "@eslint-react/core";
 
+import * as ER from "@eslint-react/core";
+import { JsxConfig, type RuleContext, type RuleFeature, type RulePolicy } from "@eslint-react/kit";
+import { match } from "ts-pattern";
 import { createRule } from "../utils";
 
 export const RULE_NAME = "jsx-shorthand-fragment";
 
 export const RULE_FEATURES = [
+  "CFG",
   "FIX",
 ] as const satisfies RuleFeature[];
 
 export type MessageID = CamelCase<typeof RULE_NAME>;
 
-export default createRule<[], MessageID>({
+type Options = readonly [
+  | _
+  | RulePolicy,
+];
+
+const defaultOptions = [1] as const satisfies Options;
+
+const schema = [
+  {
+    type: "integer",
+    enum: [-1, 1],
+  },
+] as const satisfies [JSONSchema4];
+
+export default createRule<Options, MessageID>({
   meta: {
     type: "problem",
     docs: {
@@ -23,37 +41,68 @@ export default createRule<[], MessageID>({
     },
     fixable: "code",
     messages: {
-      jsxShorthandFragment: "Use fragment shorthand syntax instead of 'Fragment' component.",
+      jsxShorthandFragment: "{{message}}",
     },
-    schema: [],
+    schema,
   },
   name: RULE_NAME,
   create,
-  defaultOptions: [],
+  defaultOptions,
 });
 
-export function create(context: RuleContext<MessageID, []>): RuleListener {
-  return {
-    JSXElement(node: TSESTree.JSXElement) {
-      if (!ER.isFragmentElement(context, node)) return;
-      const hasAttributes = node.openingElement.attributes.length > 0;
-      if (hasAttributes) {
-        return;
-      }
-      context.report({
-        messageId: "jsxShorthandFragment",
-        node,
-        fix: (fixer) => {
-          const { closingElement, openingElement } = node;
-          if (closingElement == null) {
-            return [];
-          }
-          return [
-            fixer.replaceTextRange([openingElement.range[0], openingElement.range[1]], "<>"),
-            fixer.replaceTextRange([closingElement.range[0], closingElement.range[1]], "</>"),
-          ];
-        },
-      });
-    },
+export function create(context: RuleContext<MessageID, Options>): RuleListener {
+  const policy = context.options[0] ?? defaultOptions[0];
+  const jsxConfig = {
+    ...JsxConfig.getFromContext(context),
+    ...JsxConfig.getFromAnnotation(context),
   };
+
+  const { jsxFragmentFactory } = jsxConfig;
+
+  return match<number, RuleListener>(policy)
+    .with(1, () => ({
+      JSXElement(node: TSESTree.JSXElement) {
+        if (!ER.isFragmentElement(context, node)) return;
+        const hasAttributes = node.openingElement.attributes.length > 0;
+        if (hasAttributes) return;
+        context.report({
+          messageId: "jsxShorthandFragment",
+          node,
+          data: { message: "Use fragment shorthand syntax instead of 'Fragment' component." },
+          fix: (fixer) => {
+            const { closingElement, openingElement } = node;
+            if (closingElement == null) {
+              return [];
+            }
+            return [
+              fixer.replaceTextRange([openingElement.range[0], openingElement.range[1]], "<>"),
+              fixer.replaceTextRange([closingElement.range[0], closingElement.range[1]], "</>"),
+            ];
+          },
+        });
+      },
+    }))
+    .with(-1, () => ({
+      JSXFragment(node: TSESTree.JSXFragment) {
+        context.report({
+          messageId: "jsxShorthandFragment",
+          node,
+          data: { message: "Use 'Fragment' component instead of fragment shorthand syntax." },
+          fix: (fixer) => {
+            const { closingFragment, openingFragment } = node;
+            return [
+              fixer.replaceTextRange(
+                [openingFragment.range[0], openingFragment.range[1]],
+                "<" + jsxFragmentFactory + ">",
+              ),
+              fixer.replaceTextRange(
+                [closingFragment.range[0], closingFragment.range[1]],
+                "</" + jsxFragmentFactory + ">",
+              ),
+            ];
+          },
+        });
+      },
+    }))
+    .otherwise(() => ({}));
 }
diff --git a/packages/utilities/kit/src/types.ts b/packages/utilities/kit/src/types.ts
@@ -43,4 +43,4 @@ export type RuleFeature =
   | "TSC" // TypeScript Type Checking
   | "EXP"; // Experimental
 
-export type RulePolicy = "prefer" | "avoid";
+export type RulePolicy = number;
