feat(plugins/x): add 'jsx-no-duplicate-props' (#851)

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/README.md

@@ -30,6 +30,7 @@ export default [
     rules: {
       // react-x recommended rules
       "react-x/ensure-forward-ref-using-ref": "warn",
+      "react-x/jsx-no-duplicate-props": "warn",
       "react-x/jsx-uses-vars": "warn",
       "react-x/no-access-state-in-setstate": "error",
       "react-x/no-array-index-key": "warn",
@@ -75,6 +76,7 @@ export default [
 | `avoid-shorthand-boolean`                | Prevents using shorthand syntax for boolean attributes.                                              | 🎨  |     |     |
 | `avoid-shorthand-fragment`               | Prevents using shorthand syntax for fragments.                                                       | 🎨  |     |     |
 | `ensure-forward-ref-using-ref`           | Requires that components wrapped with `forwardRef` must have a `ref` parameter.                      |  ✔️  |     |     |
+| `jsx-no-duplicate-props`                 | Prevents duplicate props in JSX.                                                                     |  ✔️  |     |     |
 | `jsx-uses-vars`                          | Prevents variables used in JSX to be marked as unused.                                               |  ✔️  |     |     |
 | `no-access-state-in-setstate`            | Prevents accessing `this.state` inside `setState` calls.                                             |  ✔️  |     |     |
 | `no-array-index-key`                     | Prevents using array `index` as `key`.                                                               | 🧐  |     |     |

packages/plugins/eslint-plugin-react-x/src/index.ts

@@ -5,6 +5,7 @@ import { name, version } from "../package.json";
 import avoidShorthandBoolean from "./rules/avoid-shorthand-boolean";
 import avoidShorthandFragment from "./rules/avoid-shorthand-fragment";
 import forwardRefUsingRef from "./rules/ensure-forward-ref-using-ref";
+import jsxNoDuplicateProps from "./rules/jsx-no-duplicate-props";
 import jsxUsesVars from "./rules/jsx-uses-vars";
 import noAccessStateInSetstate from "./rules/no-access-state-in-setstate";
 import noArrayIndexKey from "./rules/no-array-index-key";
@@ -71,6 +72,7 @@ export default {
     "avoid-shorthand-boolean": avoidShorthandBoolean,
     "avoid-shorthand-fragment": avoidShorthandFragment,
     "ensure-forward-ref-using-ref": forwardRefUsingRef,
+    "jsx-no-duplicate-props": jsxNoDuplicateProps,
     "jsx-uses-vars": jsxUsesVars,
     "no-access-state-in-setstate": noAccessStateInSetstate,
     "no-array-index-key": noArrayIndexKey,

packages/plugins/eslint-plugin-react-x/src/rules/jsx-no-duplicate-props.spec.ts

@@ -0,0 +1,31 @@
+import { allValid, ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./jsx-no-duplicate-props";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: /* tsx */ `<div a="1" a="2" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+    {
+      code: /* tsx */ `<div a="1" b="2" a="3" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+    {
+      code: /* tsx */ `<div a="1" {...b} a="2" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+    {
+      code: /* tsx */ `<div a="1" {...a} {...b} a="2" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+  ],
+  valid: [
+    ...allValid,
+    /* tsx */ `const a = <div a="1" aa="2" />;`,
+    /* tsx */ `const a = <div a="1" aa="2"><span a="1" aa="2" /></div>;`,
+    /* tsx */ `const a = <div a="1" b="2" />;`,
+    /* tsx */ `const a = <div a="1" {...b} />;`,
+    /* tsx */ `const a = <div {...a} {...b} />;`,
+  ],
+});

packages/plugins/eslint-plugin-react-x/src/rules/jsx-no-duplicate-props.ts

@@ -0,0 +1,45 @@
+import { isString } from "@eslint-react/tools";
+import { AST_NODE_TYPES } from "@typescript-eslint/types";
+import type { CamelCase } from "string-ts";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "jsx-no-duplicate-props";
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow duplicate props",
+    },
+    messages: {
+      jsxNoDuplicateProps: "Duplicate prop '{{name}}'",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const props: string[] = [];
+        for (const attr of node.attributes) {
+          if (attr.type === AST_NODE_TYPES.JSXSpreadAttribute) continue;
+          const name = attr.name.name;
+          if (!isString(name)) continue;
+          if (!props.includes(name)) {
+            props.push(name);
+            continue;
+          }
+          context.report({
+            messageId: "jsxNoDuplicateProps",
+            node: attr,
+            data: { name },
+          });
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+});

packages/plugins/eslint-plugin/src/index.ts

@@ -18,6 +18,7 @@ const allPreset = {
   "avoid-shorthand-boolean": "warn",
   "avoid-shorthand-fragment": "warn",
   "ensure-forward-ref-using-ref": "warn",
+  "jsx-no-duplicate-props": "warn",
   "jsx-uses-vars": "warn",
   "no-access-state-in-setstate": "error",
   "no-array-index-key": "warn",
@@ -100,6 +101,7 @@ const corePreset = {
   "ensure-forward-ref-using-ref": "warn",
   // "avoid-shorthand-boolean": "warn",
   // "avoid-shorthand-fragment": "warn",
+  "jsx-no-duplicate-props": "warn",
   "jsx-uses-vars": "warn",
   "no-access-state-in-setstate": "error",
   "no-array-index-key": "warn",
@@ -183,6 +185,8 @@ const recommendedPreset = {
 const recommendedTypeScriptPreset = {
   ...recommendedPreset,
   "dom/no-unknown-property": "off",
+  "jsx-no-duplicate-props": "off",
+  "jsx-uses-vars": "off",
 } as const satisfies RulePreset;
 
 const recommendedTypeCheckedPreset = {

website/pages/docs/rules/_meta.ts

@@ -9,6 +9,7 @@ export default {
     type: "separator",
   },
   "ensure-forward-ref-using-ref": "ensure-forward-ref-using-ref",
+  "jsx-no-duplicate-props": "jsx-no-duplicate-props",
   "jsx-uses-vars": "jsx-uses-vars",
   "no-access-state-in-setstate": "no-access-state-in-setstate",
   "no-array-index-key": "no-array-index-key",

website/pages/docs/rules/jsx-no-duplicate-props.mdx

@@ -0,0 +1,23 @@
+# jsx-no-duplicate-props
+
+## Rule category
+
+Correctness.
+
+## What it does
+
+This rule prevents the use of duplicate props in JSX elements.
+
+## Examples
+
+### Failing
+
+```tsx
+<Hello name="John" name="Doe" />;
+```
+
+### Passing
+
+```tsx
+<Hello name="John" />;
+```

website/pages/docs/rules/overview.md

@@ -26,6 +26,7 @@
 | [`avoid-shorthand-boolean`](avoid-shorthand-boolean)                               | Prevents using shorthand syntax for boolean attributes.                                              | 🎨  |     |     |
 | [`avoid-shorthand-fragment`](avoid-shorthand-fragment)                             | Prevents using shorthand syntax for fragments.                                                       | 🎨  |     |     |
 | [`ensure-forward-ref-using-ref`](ensure-forward-ref-using-ref)                     | Requires that components wrapped with `forwardRef` must have a `ref` parameter.                      |  ✔️  |     |     |
+| [`jsx-no-duplicate-props`](jsx-no-duplicate-props)                                 | Prevents duplicate props in JSX.                                                                     |  ✔️  |     |     |
 | [`jsx-uses-vars`](jsx-uses-vars)                                                   | Prevents variables used in JSX to be marked as unused.                                               |  ✔️  |     |     |
 | [`no-access-state-in-setstate`](no-access-state-in-setstate)                       | Prevents accessing `this.state` inside `setState` calls.                                             |  ✔️  |     |     |
 | [`no-array-index-key`](no-array-index-key)                                         | Prevents using array `index` as `key`.                                                               | 🧐  |     |     |