feat(plugins/naming-convention): add 'context-name' rule to enforce naming conventions for contexts

Author: Rel1cx

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

@@ -82,6 +82,7 @@
     "hooks-extra-prefer-use-state-lazy-initialization",
     "---Naming Convention Rules---",
     "naming-convention-component-name",
+    "naming-convention-context-name",
     "naming-convention-filename",
     "naming-convention-filename-extension",
     "naming-convention-use-state",

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

@@ -114,6 +114,7 @@ full: true
 | Rule                                                           | ✅ | Features | Description                                                                      |
 | :------------------------------------------------------------- | :- | :------- | :------------------------------------------------------------------------------- |
 | [`component-name`](./naming-convention-component-name)         | 0️⃣  | `🔍` `⚙️` | Enforces naming conventions for components.                                      |
+| [`context-name`](./naming-convention-context-name)             | 0️⃣  | `🔍` `⚙️` | Enforces naming conventions for context providers.                               |
 | [`filename`](./naming-convention-filename)                     | 0️⃣  | `🔍` `⚙️` | Enforces naming convention for JSX files.                                        |
 | [`filename-extension`](./naming-convention-filename-extension) | 0️⃣  | `🔍` `⚙️` | Enforces consistent use of the JSX file extension.                               |
 | [`use-state`](./naming-convention-use-state)                   | 0️⃣  | `🔍`     | Enforces destructuring and symmetric naming of `useState` hook value and setter. |

packages/plugins/eslint-plugin-react-naming-convention/package.json

@@ -53,6 +53,7 @@
     "@eslint-react/core": "workspace:*",
     "@eslint-react/eff": "workspace:*",
     "@eslint-react/jsx": "workspace:*",
+    "@eslint-react/var": "workspace:*",
     "@eslint-react/shared": "workspace:*",
     "@typescript-eslint/scope-manager": "^8.25.0",
     "@typescript-eslint/type-utils": "^8.25.0",

packages/plugins/eslint-plugin-react-naming-convention/src/plugin.ts

@@ -1,5 +1,6 @@
 import { name, version } from "../package.json";
 import componentName from "./rules/component-name";
+import contextName from "./rules/context-name";
 import filename from "./rules/filename";
 import filenameExtension from "./rules/filename-extension";
 import useState from "./rules/use-state";
@@ -11,6 +12,7 @@ export const plugin = {
   },
   rules: {
     "component-name": componentName,
+    "context-name": contextName,
     filename,
     "filename-extension": filenameExtension,
     "use-state": useState,

packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.md

@@ -0,0 +1,42 @@
+---
+title: context-name
+---
+
+**Full Name in `eslint-plugin-react-naming-convention`**
+
+```plain copy
+react-naming-convention/context-name
+```
+
+**Full Name in `@eslint-react/eslint-plugin`**
+
+```plain copy
+@eslint-react/naming-convention/context-name
+```
+
+**Features**
+
+`🔍`
+
+## What it does
+
+Enforces naming conventions for context providers.
+
+## Examples
+
+### Failing
+
+```tsx
+const Theme = createContext({});
+```
+
+### Passing
+
+```tsx
+const ThemeContext = createContext({});
+```
+
+## Implementation
+
+- [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.ts)
+- [Test source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.spec.ts)

packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.spec.ts

@@ -0,0 +1,28 @@
+import { allFunctions, ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./context-name";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: `
+      import { createContext } from "react";
+      const Foo = createContext({});
+    `,
+      errors: [{ messageId: "contextName" }],
+    },
+    {
+      code: `
+      import { createContext } from "react";
+      const Ctx = createContext({});
+    `,
+      errors: [{ messageId: "contextName" }],
+    },
+  ],
+  valid: [
+    ...allFunctions,
+    /* tsx */ `
+      import { createContext } from "react";
+      const MyContext = createContext({});
+    `,
+  ],
+});

packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.ts

@@ -0,0 +1,46 @@
+import * as AST from "@eslint-react/ast";
+import { isCreateContextCall } from "@eslint-react/core";
+import type { RuleFeature } from "@eslint-react/shared";
+import * as VAR from "@eslint-react/var";
+import type { CamelCase } from "string-ts";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "context-name";
+
+export const RULE_FEATURES = [
+  "CHK",
+] as const satisfies RuleFeature[];
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "enforce context name to end with `Context`.",
+    },
+    messages: {
+      contextName: "Context name must end with `Context`.",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create(context) {
+    if (!context.sourceCode.text.includes("createContext")) return {};
+    return {
+      CallExpression(node) {
+        if (!isCreateContextCall(context, node)) return;
+        const id = VAR.getVariableId(node);
+        if (id == null) return;
+        const name = context.sourceCode.getText(AST.getEcmaExpression(id));
+        if (name.endsWith("Context")) return;
+        context.report({
+          messageId: "contextName",
+          node: id,
+        });
+      },
+    };
+  },
+  defaultOptions: [],
+});

packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.md

@@ -31,6 +31,8 @@ Prevents non-stable values (i.e. object literals) from being used as a value for
 
 React will re-render all consumers of a context whenever the context value changes, and if the value is not stable, this can lead to unnecessary re-renders.
 
+In React 19 and later, the [`Context` component can be used via `<Context>` instead of `<Context.Provider>`](https://react.dev/blog/2024/12/05/react-19#context-as-a-provider), so it is recommended to use the [`context-name`](./naming-convention-context-name) rule to avoid false negatives.
+
 ## Examples
 
 ### Failing

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

@@ -88,6 +88,92 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = {}
+            return <Context value={foo}></Context>;
+        }
+      `,
+      errors: [{
+        messageId: "unstableContextValue",
+        data: {
+          type: "object expression",
+          suggestion: "Consider wrapping it in a useMemo hook.",
+        },
+      }],
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = []
+            return <CONTEXT value={foo}></CONTEXT>
+        }
+      `,
+      errors: [
+        {
+          messageId: "unstableContextValue",
+          data: {
+            type: "array expression",
+            suggestion: "Consider wrapping it in a useMemo hook.",
+          },
+        },
+      ],
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = []
+            return <ThemeContext value={foo}></ThemeContext>
+        }
+      `,
+      errors: [
+        {
+          messageId: "unstableContextValue",
+          data: {
+            type: "array expression",
+            suggestion: "Consider wrapping it in a useMemo hook.",
+          },
+        },
+      ],
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = []
+            return <THEME_CONTEXT value={foo}></THEME_CONTEXT>
+        }
+      `,
+      errors: [
+        {
+          messageId: "unstableContextValue",
+          data: {
+            type: "array expression",
+            suggestion: "Consider wrapping it in a useMemo hook.",
+          },
+        },
+      ],
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
   ],
   valid: [
     ...allValid,
@@ -127,5 +213,57 @@ ruleTester.run(RULE_NAME, rule, {
                   return <Context.Provider value={foo}></Context.Provider>;
               }
     `,
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = {}
+            return <Context value={foo}></Context>;
+        }
+      `,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = []
+            return <CONTEXT value={foo}></CONTEXT>
+        }
+      `,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = []
+            return <ThemeContext value={foo}></ThemeContext>
+        }
+      `,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
+    {
+      code: /* tsx */ `
+          function App() {
+            const foo = []
+            return <THEME_CONTEXT value={foo}></THEME_CONTEXT>
+        }
+      `,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
   ],
 });

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

@@ -1,9 +1,11 @@
 import * as AST from "@eslint-react/ast";
 import { isReactHookCall, useComponentCollector } from "@eslint-react/core";
 import { getOrUpdate } from "@eslint-react/eff";
-import type { RuleFeature } from "@eslint-react/shared";
+import * as JSX from "@eslint-react/jsx";
+import { getSettingsFromContext, type RuleFeature } from "@eslint-react/shared";
 import * as VAR from "@eslint-react/var";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
+import { compare } from "compare-versions";
 
 import { createRule } from "../utils";
 
@@ -30,19 +32,18 @@ export default createRule<[], MessageID>({
   },
   name: RULE_NAME,
   create(context) {
+    const { version } = getSettingsFromContext(context);
+    const isReact18OrBelow = compare(version, "19.0.0", "<");
     const { ctx, listeners } = useComponentCollector(context);
     const constructions = new Map<AST.TSESTreeFunction, VAR.ValueConstruction[]>();
 
     return {
       ...listeners,
       JSXOpeningElement(node) {
-        const openingElementName = node.name;
-        if (openingElementName.type !== T.JSXMemberExpression) {
-          return;
-        }
-        if (openingElementName.property.name !== "Provider") {
-          return;
-        }
+        const fullName = JSX.getElementName(node.parent);
+        const selfName = fullName.split(".").at(-1);
+        if (selfName == null) return;
+        if (!isContextName(selfName, isReact18OrBelow)) return;
         const functionEntry = ctx.getCurrentEntry();
         if (functionEntry == null) return;
         const attribute = node
@@ -86,3 +87,11 @@ export default createRule<[], MessageID>({
   },
   defaultOptions: [],
 });
+
+function isContextName(name: string, isReact18OrBelow: boolean): boolean {
+  if (name === "Provider") return true;
+  if (!isReact18OrBelow) {
+    return name.endsWith("Context") || name.endsWith("CONTEXT");
+  }
+  return false;
+}