fix: fixed 'no-context-provider' replaces '<Provider>' with '<>', closes #984 (#985)

Author: Rel1cx

packages/core/docs/README.md

@@ -43,13 +43,14 @@
 - [ERComponentHint](variables/ERComponentHint.md)
 - [ERPhaseRelevance](variables/ERPhaseRelevance.md)
 - [RE\_COMPONENT\_NAME](variables/RE_COMPONENT_NAME.md)
+- [RE\_COMPONENT\_NAME\_LOOSE](variables/RE_COMPONENT_NAME_LOOSE.md)
 - [RE\_HOOK\_NAME](variables/RE_HOOK_NAME.md)
 
 ## Functions
 
 - [getComponentNameFromIdentifier](functions/getComponentNameFromIdentifier.md)
 - [getFunctionComponentIdentifier](functions/getFunctionComponentIdentifier.md)
-- [hasNoneOrValidComponentName](functions/hasNoneOrValidComponentName.md)
+- [hasNoneOrLooseComponentName](functions/hasNoneOrLooseComponentName.md)
 - [isAssignmentToThisState](functions/isAssignmentToThisState.md)
 - [isChildrenCount](functions/isChildrenCount.md)
 - [isChildrenCountCall](functions/isChildrenCountCall.md)
@@ -67,6 +68,7 @@
 - [isComponentDidCatch](functions/isComponentDidCatch.md)
 - [isComponentDidMount](functions/isComponentDidMount.md)
 - [isComponentName](functions/isComponentName.md)
+- [isComponentNameLoose](functions/isComponentNameLoose.md)
 - [isComponentWillUnmount](functions/isComponentWillUnmount.md)
 - [isCreateContext](functions/isCreateContext.md)
 - [isCreateContextCall](functions/isCreateContextCall.md)

…functions/hasNoneOrValidComponentName.md …functions/hasNoneOrLooseComponentName.mdpackages/core/docs/functions/hasNoneOrValidComponentName.md renamed to packages/core/docs/functions/hasNoneOrLooseComponentName.md packages/core/docs/functions/hasNoneOrValidComponentName.md renamed to packages/core/docs/functions/hasNoneOrLooseComponentName.md

@@ -2,11 +2,11 @@
 
 ***
 
-[@eslint-react/core](../README.md) / hasNoneOrValidComponentName
+[@eslint-react/core](../README.md) / hasNoneOrLooseComponentName
 
-# Function: hasNoneOrValidComponentName()
+# Function: hasNoneOrLooseComponentName()
 
-> **hasNoneOrValidComponentName**(`context`, `node`): `boolean`
+> **hasNoneOrLooseComponentName**(`context`, `node`): `boolean`
 
 ## Parameters
 

packages/core/docs/functions/isComponentNameLoose.md

@@ -0,0 +1,19 @@
+[**@eslint-react/core**](../README.md)
+
+***
+
+[@eslint-react/core](../README.md) / isComponentNameLoose
+
+# Function: isComponentNameLoose()
+
+> **isComponentNameLoose**(`name`): `boolean`
+
+## Parameters
+
+### name
+
+`string`
+
+## Returns
+
+`boolean`

packages/core/docs/variables/RE_COMPONENT_NAME_LOOSE.md

@@ -0,0 +1,9 @@
+[**@eslint-react/core**](../README.md)
+
+***
+
+[@eslint-react/core](../README.md) / RE\_COMPONENT\_NAME\_LOOSE
+
+# Variable: RE\_COMPONENT\_NAME\_LOOSE
+
+> `const` **RE\_COMPONENT\_NAME\_LOOSE**: [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)

packages/core/src/component/component-collector.ts

@@ -13,7 +13,7 @@ import type { ERComponentHint } from "./component-collector-hint";
 import { DEFAULT_COMPONENT_HINT } from "./component-collector-hint";
 import { ERComponentFlag } from "./component-flag";
 import { getFunctionComponentIdentifier } from "./component-id";
-import { getComponentNameFromIdentifier, hasNoneOrValidComponentName } from "./component-name";
+import { getComponentNameFromIdentifier, hasNoneOrLooseComponentName } from "./component-name";
 import type { ERFunctionComponent } from "./component-semantic-node";
 import { hasValidHierarchy } from "./hierarchy";
 
@@ -101,7 +101,7 @@ export function useComponentCollector(
       const entry = getCurrentEntry();
       if (entry == null) return;
       const { body } = entry.node;
-      const isComponent = hasNoneOrValidComponentName(context, entry.node)
+      const isComponent = hasNoneOrLooseComponentName(context, entry.node)
         && JSX.isJSXValue(body, jsxCtx, hint)
         && hasValidHierarchy(context, entry.node, hint);
       if (!isComponent) return;
@@ -150,7 +150,7 @@ export function useComponentCollector(
     "ReturnStatement[type]"(node: TSESTree.ReturnStatement) {
       const entry = getCurrentEntry();
       if (entry == null) return;
-      const isComponent = hasNoneOrValidComponentName(context, entry.node)
+      const isComponent = hasNoneOrLooseComponentName(context, entry.node)
         && JSX.isJSXValue(node.argument, jsxCtx, hint)
         && hasValidHierarchy(context, entry.node, hint);
       if (!isComponent) return;

packages/core/src/component/component-name.ts

@@ -5,7 +5,17 @@ import type { TSESTree } from "@typescript-eslint/types";
 
 import { getFunctionComponentIdentifier } from "./component-id";
 
-export const RE_COMPONENT_NAME = /^_?[A-Z]/u;
+export const RE_COMPONENT_NAME = /^[A-Z]/u;
+
+export const RE_COMPONENT_NAME_LOOSE = /^_?[A-Z]/u;
+
+export function isComponentName(name: string) {
+  return RE_COMPONENT_NAME.test(name);
+}
+
+export function isComponentNameLoose(name: string) {
+  return RE_COMPONENT_NAME_LOOSE.test(name);
+}
 
 export function getComponentNameFromIdentifier(node: TSESTree.Identifier | TSESTree.Identifier[] | _) {
   if (node == null) return _;
@@ -14,15 +24,11 @@ export function getComponentNameFromIdentifier(node: TSESTree.Identifier | TSEST
     : node.name;
 }
 
-export function isComponentName(name: string) {
-  return RE_COMPONENT_NAME.test(name);
-}
-
-export function hasNoneOrValidComponentName(context: RuleContext, node: AST.TSESTreeFunction) {
+export function hasNoneOrLooseComponentName(context: RuleContext, node: AST.TSESTreeFunction) {
   const id = getFunctionComponentIdentifier(context, node);
   if (id == null) return true;
   const name = Array.isArray(id)
     ? id.at(-1)?.name
     : id.name;
-  return name != null && isComponentName(name);
+  return name != null && isComponentNameLoose(name);
 }

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

@@ -1,4 +1,4 @@
-import { getInstanceId, isCreateContextCall } from "@eslint-react/core";
+import { getInstanceId, isComponentName, isCreateContextCall } from "@eslint-react/core";
 import { _, identity } from "@eslint-react/eff";
 import type { RuleFeature } from "@eslint-react/shared";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
@@ -37,7 +37,7 @@ export default createRule<[], MessageID>({
           .with({ type: T.Identifier, name: P.select() }, identity)
           .with({ type: T.MemberExpression, property: { name: P.select(P.string) } }, identity)
           .otherwise(() => _);
-        if (name != null && /^[A-Z]/u.test(name) && name.endsWith("Context")) return;
+        if (name != null && isComponentName(name) && name.endsWith("Context")) return;
         context.report({
           messageId: "invalid",
           node: id,

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

@@ -5,14 +5,24 @@ import rule, { RULE_NAME } from "./no-context-provider";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
+    {
+      code: tsx`<Provider />`,
+      errors: [
+        {
+          messageId: "noContextProvider",
+        },
+      ],
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
     {
       code: tsx`<Context.Provider />`,
       errors: [
         {
           messageId: "noContextProvider",
-          data: {
-            contextName: "Context",
-          },
         },
       ],
       output: tsx`<Context />`,
@@ -27,9 +37,6 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [
         {
           messageId: "noContextProvider",
-          data: {
-            contextName: "ThemeContext",
-          },
         },
       ],
       output: tsx`<ThemeContext><App /></ThemeContext>`,
@@ -44,9 +51,6 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [
         {
           messageId: "noContextProvider",
-          data: {
-            contextName: "Context",
-          },
         },
       ],
       output: tsx`<Context>{children}</Context>`,
@@ -61,9 +65,6 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [
         {
           messageId: "noContextProvider",
-          data: {
-            contextName: "Foo.Bar",
-          },
         },
       ],
       output: tsx`<Foo.Bar>{children}</Foo.Bar>`,
@@ -73,6 +74,33 @@ ruleTester.run(RULE_NAME, rule, {
         },
       },
     },
+    {
+      code: tsx`<foo.Bar.Provider>{children}</foo.Bar.Provider>`,
+      errors: [
+        {
+          messageId: "noContextProvider",
+        },
+      ],
+      output: tsx`<foo.Bar>{children}</foo.Bar>`,
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: tsx`<foo.bar.Provider>{children}</foo.bar.Provider>`,
+      errors: [
+        {
+          messageId: "noContextProvider",
+        },
+      ],
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
   ],
   valid: [
     {
@@ -83,5 +111,45 @@ ruleTester.run(RULE_NAME, rule, {
         },
       },
     },
+    {
+      code: tsx`<Context />`,
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: tsx`<ThemeContext.Provider><App /></ThemeContext.Provider>`,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
+    {
+      code: tsx`<ThemeContext.Provider>{children}</ThemeContext.Provider>`,
+      settings: {
+        "react-x": {
+          version: "18.0.0",
+        },
+      },
+    },
+    {
+      code: tsx`<ThemeContext><App /></ThemeContext>`,
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
+    {
+      code: tsx`<ThemeContext>{children}</ThemeContext>`,
+      settings: {
+        "react-x": {
+          version: "19.0.0",
+        },
+      },
+    },
   ],
 });

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

@@ -1,3 +1,4 @@
+import { isComponentNameLoose } from "@eslint-react/core";
 import * as JSX from "@eslint-react/jsx";
 import type { RuleFeature } from "@eslint-react/shared";
 import { getSettingsFromContext } from "@eslint-react/shared";
@@ -24,38 +25,37 @@ export default createRule<[], MessageID>({
     },
     fixable: "code",
     messages: {
-      noContextProvider:
-        "In React 19, you can render '<{{contextName}}>' as a provider instead of '<{{contextName}}.Provider>'.",
+      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 {};
+    if (!context.sourceCode.text.includes("Provider")) return {};
     const { version } = getSettingsFromContext(context);
-    if (compare(version, "19.0.0", "<")) {
-      return {};
-    }
+    if (compare(version, "19.0.0", "<")) return {};
     return {
       JSXElement(node) {
-        const [name, ...rest] = JSX.getElementType(node).split(".").reverse();
-        if (name !== "Provider") return;
-        const contextName = rest.reverse().join(".");
+        const fullName = JSX.getElementType(node);
+        const parts = fullName.split(".");
+        const selfName = parts.pop();
+        const contextFullName = parts.join(".");
+        const contextSelfName = parts.pop();
+        if (selfName !== "Provider") return;
         context.report({
           messageId: "noContextProvider",
           node,
-          data: {
-            contextName,
-          },
           fix(fixer) {
+            if (contextSelfName == null) return null;
+            if (!isComponentNameLoose(contextSelfName)) return null;
             const openingElement = node.openingElement;
             const closingElement = node.closingElement;
             if (closingElement == null) {
-              return fixer.replaceText(openingElement.name, contextName);
+              return fixer.replaceText(openingElement.name, contextFullName);
             }
             return [
-              fixer.replaceText(openingElement.name, contextName),
-              fixer.replaceText(closingElement.name, contextName),
+              fixer.replaceText(openingElement.name, contextFullName),
+              fixer.replaceText(closingElement.name, contextFullName),
             ];
           },
         });

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

@@ -1,5 +1,5 @@
 import * as AST from "@eslint-react/ast";
-import { isClassComponent, isComponentName } from "@eslint-react/core";
+import { isClassComponent, isComponentNameLoose } from "@eslint-react/core";
 import type { RuleFeature } from "@eslint-react/shared";
 import * as VAR from "@eslint-react/var";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
@@ -44,7 +44,7 @@ export default createRule<[], MessageID>({
         if (property.type !== T.Identifier || property.name !== "defaultProps") {
           return;
         }
-        if (!isComponentName(object.name)) {
+        if (!isComponentNameLoose(object.name)) {
           return;
         }
         const variable = VAR.findVariable(object.name, context.sourceCode.getScope(node));