feat(react-x): add 'jsx-uses-react' rule

Author: Rel1cx

apps/website/content/docs/rules/meta.json

@@ -4,6 +4,7 @@
     "---Core Rules---",
     "jsx-no-duplicate-props",
     "jsx-no-undef",
+    "jsx-uses-react",
     "jsx-uses-vars",
     "no-access-state-in-setstate",
     "no-array-index-key",

apps/website/content/docs/rules/overview.mdx

@@ -27,6 +27,7 @@ Linter rules can have false positives, false negatives, and some rules are depen
 | :----------------------------------------------------------------------------------- | :- | :------: | :---------------------------------------------------------------------------------------------------- | :-----: |
 | [`jsx-no-duplicate-props`](./jsx-no-duplicate-props)                                 | 1️⃣  |          | Disallow duplicate props in JSX elements                                                             |           |
 | [`jsx-no-undef`](./jsx-no-undef)                                                     | 0️⃣  |          | Disallow undefined variables in JSX elements                                                         |           |
+| [`jsx-uses-react`](./jsx-uses-react)                                                 | 1️⃣  |          | Marks React variables as used when JSX is used in the file                                            |           |
 | [`jsx-uses-vars`](./jsx-uses-vars)                                                   | 1️⃣  |          | Marks variables used in JSX elements as used                                                         |           |
 | [`no-access-state-in-setstate`](./no-access-state-in-setstate)                       | 2️⃣  |          | Disallow accessing `this.state` inside `setState` calls                                              |           |
 | [`no-array-index-key`](./no-array-index-key)                                         | 1️⃣  |          | Disallow an item's index in the array as its key                                                     |           |

packages/plugins/eslint-plugin-react-x/src/configs/recommended-typescript.ts

@@ -8,6 +8,7 @@ export const rules = {
   ...recommended.rules,
   "react-x/jsx-no-duplicate-props": "off",
   "react-x/jsx-no-undef": "off",
+  "react-x/jsx-uses-react": "off",
   "react-x/jsx-uses-vars": "off",
 } as const satisfies RulePreset;
 

packages/plugins/eslint-plugin-react-x/src/configs/recommended.ts

@@ -5,6 +5,7 @@ export const name = "react-x/recommended";
 
 export const rules = {
   "react-x/jsx-no-duplicate-props": "warn",
+  "react-x/jsx-uses-react": "warn",
   "react-x/jsx-uses-vars": "warn",
   "react-x/no-access-state-in-setstate": "error",
   "react-x/no-array-index-key": "warn",

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

@@ -3,6 +3,7 @@ import avoidShorthandBoolean from "./rules/avoid-shorthand-boolean";
 import avoidShorthandFragment from "./rules/avoid-shorthand-fragment";
 import jsxNoDuplicateProps from "./rules/jsx-no-duplicate-props";
 import jsxNoUndef from "./rules/jsx-no-undef";
+import jsxUsesReact from "./rules/jsx-uses-react";
 import jsxUsesVars from "./rules/jsx-uses-vars";
 import noAccessStateInSetstate from "./rules/no-access-state-in-setstate";
 import noArrayIndexKey from "./rules/no-array-index-key";
@@ -113,6 +114,7 @@ export const plugin = {
     // Part: JSX only rules
     "jsx-no-duplicate-props": jsxNoDuplicateProps,
     "jsx-no-undef": jsxNoUndef,
+    "jsx-uses-react": jsxUsesReact,
     "jsx-uses-vars": jsxUsesVars,
 
     // Part: deprecated rules

packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-react.md

@@ -0,0 +1,65 @@
+---
+title: jsx-uses-react
+---
+
+**Full Name in `eslint-plugin-react-x`**
+
+```plain copy
+react-x/jsx-uses-react
+```
+
+**Full Name in `@eslint-react/eslint-plugin`**
+
+```plain copy
+@eslint-react/jsx-uses-react
+```
+
+**Presets**
+
+- `core`
+- `recommended`
+
+## Description
+
+Marks React variables as used when JSX is used in the file.
+
+If you are using the `@jsx` pragma this rule will mark the designated variable and not the React one.
+
+This rule does nothing when using the [New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or if the `no-unused-vars` rule is not enabled.
+
+## Examples
+
+### Failing
+
+```tsx
+import React from "react";
+// nothing to do with React
+```
+
+```tsx
+/** @jsx Foo */
+import React from "react";
+// nothing to do with React
+
+const Hello = <div>Hello</div>;
+```
+
+### Passing
+
+```tsx
+import React from "react";
+
+const Hello = <div>Hello</div>;
+```
+
+```tsx
+/** @jsx Foo */
+import Foo from "foo";
+
+const Hello = <div>Hello</div>;
+```
+
+## Implementation
+
+- [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-react.ts)
+- [Test source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-react.spec.ts)

packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-react.spec.ts

@@ -0,0 +1,27 @@
+import tsx from "dedent";
+
+import { allValid, ruleTester } from "../../../../../test";
+import rule from "./jsx-uses-react";
+
+ruleTester.run("no-unused-vars", rule, {
+  // TODO: Add invalid test cases
+  invalid: [],
+  valid: [
+    ...allValid,
+    {
+      code: tsx`
+        import React from "react";
+
+        const Hello = <div>Hello</div>;
+      `,
+    },
+    {
+      code: tsx`
+        /** @jsx Foo */
+        import Foo from "foo";
+
+        const Hello = <div>Hello</div>;
+      `,
+    },
+  ],
+});

packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-react.ts

@@ -0,0 +1,48 @@
+import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
+import type { CamelCase } from "string-ts";
+import { JsxRuntime, type RuleContext, type RuleFeature } from "@eslint-react/kit";
+
+import { JsxEmit } from "typescript";
+import { createRule } from "../utils";
+
+export const RULE_NAME = "jsx-uses-react";
+
+export const RULE_FEATURES = [] as const satisfies RuleFeature[];
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Marks React variables as used when JSX is used in the file.",
+      [Symbol.for("rule_features")]: RULE_FEATURES,
+    },
+    messages: {
+      jsxUsesReact: "",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create,
+  defaultOptions: [],
+});
+
+export function create(context: RuleContext<MessageID, []>): RuleListener {
+  const { jsx, jsxFactory, jsxFragmentFactory, reactNamespace } = JsxRuntime.getJsxRuntimeOptionsFromContext(context);
+  // If we are using the New JSX Transform, this rule should do nothing.
+  if (jsx === JsxEmit.ReactJSX || jsx === JsxEmit.ReactJSXDev) return {};
+  return {
+    JSXFragment(node) {
+      context.sourceCode.markVariableAsUsed(jsxFragmentFactory, node);
+    },
+    JSXOpeningElement(node) {
+      context.sourceCode.markVariableAsUsed(reactNamespace, node);
+      context.sourceCode.markVariableAsUsed(jsxFactory, node);
+    },
+    JSXOpeningFragment(node) {
+      context.sourceCode.markVariableAsUsed(reactNamespace, node);
+      context.sourceCode.markVariableAsUsed(jsxFactory, node);
+    },
+  };
+}

packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-vars.spec.ts

@@ -1,9 +1,10 @@
 import tsx from "dedent";
 
 import { allValid, ruleTester } from "../../../../../test";
-import rule, { RULE_NAME } from "./jsx-uses-vars";
+import rule from "./jsx-uses-vars";
 
-ruleTester.run(RULE_NAME, rule, {
+ruleTester.run("no-unused-vars", rule, {
+  // TODO: Add invalid test cases
   invalid: [],
   valid: [
     ...allValid,

packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-vars.ts

@@ -19,7 +19,7 @@ export default createRule<[], MessageID>({
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
-      jsxUsesVars: "JSX variables should be marked as used.",
+      jsxUsesVars: "",
     },
     schema: [],
   },