feat(plugins/x): add 'no-context-provider' (#873)

Author: Rel1cx

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

@@ -44,6 +44,7 @@ export default [
       "react-x/no-component-will-mount": "error",
       "react-x/no-component-will-receive-props": "error",
       "react-x/no-component-will-update": "error",
+      "react-x/no-context-provider": "warn",
       "react-x/no-create-ref": "error",
       "react-x/no-default-props": "error",
       "react-x/no-direct-mutation-state": "error",
@@ -94,6 +95,7 @@ export default [
 | `no-component-will-mount`                | Prevents using `componentWillMount`.                                                                 | ⛔  |     |     |
 | `no-component-will-receive-props`        | Prevents using `componentWillReceiveProps`.                                                          | ⛔  |     |     |
 | `no-component-will-update`               | Prevents using `componentWillUpdate`.                                                                | ⛔  |     |     |
+| `no-context-provider`                    | Prevents using `Context.Provider`.                                                                   | ⛔  |     |     |
 | `no-create-ref`                          | Prevents using `createRef`.                                                                          | ⛔  |     |     |
 | `no-default-props`                       | Prevents using `defaultProps` property in favor of ES6 default parameters.                           |  ✔️  |     |     |
 | `no-direct-mutation-state`               | Prevents direct mutation of `this.state`.                                                            |  ✔️  |     |     |

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

@@ -22,6 +22,7 @@ import noComplexConditionalRendering from "./rules/no-complex-conditional-render
 import noComponentWillMount from "./rules/no-component-will-mount";
 import noComponentWillReceiveProps from "./rules/no-component-will-receive-props";
 import noComponentWillUpdate from "./rules/no-component-will-update";
+import noContextProvider from "./rules/no-context-provider";
 import noCreateRef from "./rules/no-create-ref";
 import noDefaultProps from "./rules/no-default-props";
 import noDirectMutationState from "./rules/no-direct-mutation-state";
@@ -90,6 +91,7 @@ export default {
     "no-component-will-mount": noComponentWillMount,
     "no-component-will-receive-props": noComponentWillReceiveProps,
     "no-component-will-update": noComponentWillUpdate,
+    "no-context-provider": noContextProvider,
     "no-create-ref": noCreateRef,
     "no-default-props": noDefaultProps,
     "no-direct-mutation-state": noDirectMutationState,

packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.spec.ts

@@ -0,0 +1,57 @@
+import { ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./no-context-provider";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: "<Context.Provider />",
+      errors: [{ messageId: "noContextProvider" }],
+      output: "<Context />",
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: "<Context.Provider><App /></Context.Provider>",
+      errors: [{ messageId: "noContextProvider" }],
+      output: "<Context><App /></Context>",
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: "<Context.Provider>{children}</Context.Provider>",
+      errors: [{ messageId: "noContextProvider" }],
+      output: "<Context>{children}</Context>",
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: "<Foo.Bar.Provider>{children}</Foo.Bar.Provider>",
+      errors: [{ messageId: "noContextProvider" }],
+      output: "<Foo.Bar>{children}</Foo.Bar>",
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+  ],
+  valid: [
+    {
+      code: "<Context.Provider />",
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
+  ],
+});

packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.ts

@@ -0,0 +1,51 @@
+import * as JSX from "@eslint-react/jsx";
+import { decodeSettings, normalizeSettings } from "@eslint-react/shared";
+import { compare } from "compare-versions";
+import type { CamelCase } from "string-ts";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "no-context-provider";
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow the use of '<Context.Provider>'",
+    },
+    fixable: "code",
+    messages: {
+      noContextProvider: "In React 19, you can render '<Context>' as a provider instead of '<Context.Provider>'.",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create(context) {
+    if (!context.sourceCode.text.includes(".Provider")) return {};
+    const { version } = normalizeSettings(decodeSettings(context.settings));
+    if (compare(version, "19.0.0", "<")) return {};
+    return {
+      JSXElement(node) {
+        const elementName = JSX.getElementName(node.openingElement);
+        if (!elementName.endsWith(".Provider")) return;
+        context.report({
+          messageId: "noContextProvider",
+          node,
+          fix(fixer) {
+            const providerName = elementName.replace(/\.Provider$/, "");
+            const openingElement = node.openingElement;
+            const closingElement = node.closingElement;
+            if (!closingElement) return fixer.replaceText(openingElement.name, providerName);
+            return [
+              fixer.replaceText(openingElement.name, providerName),
+              fixer.replaceText(closingElement.name, providerName),
+            ];
+          },
+        });
+      },
+    };
+  },
+  defaultOptions: [],
+});

packages/plugins/eslint-plugin/src/configs/all.ts

@@ -30,6 +30,7 @@ export const rules = {
   "@eslint-react/no-component-will-mount": "error",
   "@eslint-react/no-component-will-receive-props": "error",
   "@eslint-react/no-component-will-update": "error",
+  "@eslint-react/no-context-provider": "warn",
   "@eslint-react/no-create-ref": "error",
   "@eslint-react/no-default-props": "error",
   "@eslint-react/no-direct-mutation-state": "error",

packages/plugins/eslint-plugin/src/configs/core.ts

@@ -19,6 +19,7 @@ export const rules = {
   "@eslint-react/no-component-will-mount": "error",
   "@eslint-react/no-component-will-receive-props": "error",
   "@eslint-react/no-component-will-update": "error",
+  "@eslint-react/no-context-provider": "warn",
   "@eslint-react/no-create-ref": "error",
   "@eslint-react/no-default-props": "error",
   "@eslint-react/no-direct-mutation-state": "error",

website/pages/docs/rules/_meta.ts

@@ -26,6 +26,7 @@ export default {
   "no-component-will-mount": "no-component-will-mount",
   "no-component-will-receive-props": "no-component-will-receive-props",
   "no-component-will-update": "no-component-will-update",
+  "no-context-provider": "no-context-provider",
   "no-create-ref": "no-create-ref",
   "no-default-props": "no-default-props",
   "no-direct-mutation-state": "no-direct-mutation-state",

website/pages/docs/rules/no-context-provider.mdx

@@ -0,0 +1,47 @@
+# no-context-provider
+
+## Rule category
+
+Restriction.
+
+## What it does
+
+Disallows using `<Context.Provider>`.
+
+## Why is this bad?
+
+In React 19, you can render `<Context>` as a provider instead of `<Context.Provider>`.
+
+## Examples
+
+### Failing
+
+```tsx
+const ThemeContext = createContext('');
+
+function App({children}) {
+  return (
+    <ThemeContext.Provider value="light">
+      {children}
+    </ThemeContext>
+  );
+}
+```
+
+### Passing
+
+```tsx
+const ThemeContext = createContext('');
+
+function App({children}) {
+  return (
+    <ThemeContext value="dark">
+      {children}
+    </ThemeContext>
+  );
+}
+```
+
+## Further reading
+
+- [React: `<Context>` as a provider](https://react.dev/blog/2024/12/05/react-19#context-as-a-provider)

website/pages/docs/rules/overview.md

@@ -42,6 +42,7 @@
 | [`no-component-will-mount`](no-component-will-mount)                               | Prevents using `componentWillMount`.                                                                 | ⛔  |     |     |
 | [`no-component-will-receive-props`](no-component-will-receive-props)               | Prevents using `componentWillReceiveProps`.                                                          | ⛔  |     |     |
 | [`no-component-will-update`](no-component-will-update)                             | Prevents using `componentWillUpdate`.                                                                | ⛔  |     |     |
+| [`no-context-provider`](no-context-provider)                                       | Prevents using `<Context.Provider>`.                                                                 | ⛔  |     |     |
 | [`no-create-ref`](no-create-ref)                                                   | Prevents using `createRef`.                                                                          | ⛔  |     |     |
 | [`no-default-props`](no-default-props)                                             | Prevents using `defaultProps` property in favor of ES6 default parameters.                           |  ✔️  |     |     |
 | [`no-direct-mutation-state`](no-direct-mutation-state)                             | Prevents direct mutation of `this.state`.                                                            |  ✔️  |     |     |