refactor: JSX fragments related rules no longer rely on 'jsxPragma' and 'jsxPragmaFrag' in 'react-x' settings (#893)

Author: Rel1cx

.markdownlint.json

@@ -1,6 +1,7 @@
 {
   "extends": "markdownlint/style/all",
   "MD013": false,
+  "MD024": false,
   "MD033": false,
   "MD041": false
 }

CHANGELOG.md

@@ -75,7 +75,6 @@
 - [isDeclaredInRenderPropLoose](functions/isDeclaredInRenderPropLoose.md)
 - [isForwardRef](functions/isForwardRef.md)
 - [isForwardRefCall](functions/isForwardRefCall.md)
-- [isFragmentElement](functions/isFragmentElement.md)
 - [isFromReact](functions/isFromReact.md)
 - [isFunctionOfRenderMethod](functions/isFunctionOfRenderMethod.md)
 - [isInitializedFromReact](functions/isInitializedFromReact.md)

packages/core/docs/README.md

@@ -166,6 +166,8 @@ The identifier that’s used for JSX Element creation.
 
 `"createElement"`
 
+**Deprecated**
+
 #### jsxPragmaFrag
 
 `string`
@@ -180,6 +182,8 @@ This should not be a member expression (i.e. use "Fragment" instead of "React.Fr
 
 `"Fragment"`
 
+**Deprecated**
+
 #### polymorphicPropName
 
 `string`

packages/core/docs/functions/isFragmentElement.md

@@ -1,3 +1,2 @@
 export * from "./get-element-represent-name";
 export * from "./hierarchy";
-export * from "./misc";

packages/core/docs/functions/isInitializedFromReact.md

@@ -197,9 +197,9 @@ ruleTester.run(RULE_NAME, rule, {
     /* tsx */ `<>{cloneElement(children, { ref: childrenRef })}</>`,
     {
       code: /* tsx */ `
-        <React.SomeFragment>
+        <SomeReact.SomeFragment>
           {<Foo />}
-        </React.SomeFragment>
+        </SomeReact.SomeFragment>
       `,
       settings: {
         "react-x": {
@@ -208,14 +208,6 @@ ruleTester.run(RULE_NAME, rule, {
         },
       },
     },
-    {
-      code: /* tsx */ `<NotReact.Fragment />`,
-      settings: {
-        "react-x": {
-          strictImportCheck: true,
-        },
-      },
-    },
     {
       code: /* tsx */ `{foo}`,
       options: [{ allowExpressions: false }],

packages/core/src/element/index.ts

@@ -1,10 +1,8 @@
 import * as AST from "@eslint-react/ast";
-import { isFragmentElement } from "@eslint-react/core";
 import * as JSX from "@eslint-react/jsx";
 import type { RuleContext, RuleFeature } from "@eslint-react/types";
 import { AST_NODE_TYPES } from "@typescript-eslint/types";
 import type { TSESTree } from "@typescript-eslint/utils";
-import { isMatching, P } from "ts-pattern";
 
 import { createRule } from "../utils";
 
@@ -19,48 +17,62 @@ export type MessageID =
   | "noUselessFragment"
   | "noUselessFragmentInBuiltIn";
 
-// eslint-disable-next-line @typescript-eslint/consistent-return
-function check(
+type Options = [
+  {
+    allowExpressions: boolean;
+  },
+];
+
+const defaultOptions = [{
+  allowExpressions: true,
+}] as const satisfies Options;
+
+function checkAndReport(
   node: TSESTree.JSXElement | TSESTree.JSXFragment,
   context: RuleContext,
   allowExpressions: boolean,
 ) {
   const initialScope = context.sourceCode.getScope(node);
+  // return if the fragment is keyed (e.g. <Fragment key={key}>)
   if (JSX.isKeyedElement(node, initialScope)) return;
+  // report if the fragment is placed inside a built-in component (e.g. <div><></></div>)
   if (JSX.isBuiltInElement(node.parent)) context.report({ messageId: "noUselessFragmentInBuiltIn", node });
+  // report and return if the fragment has no children (e.g. <></>)
   if (node.children.length === 0) return context.report({ messageId: "noUselessFragment", node });
-  const isChildren = AST.isOneOf([AST_NODE_TYPES.JSXElement, AST_NODE_TYPES.JSXFragment])(node.parent);
-  const [firstChildren] = node.children;
-  // <Foo content={<>ee eeee eeee ...</>} />
-  if (allowExpressions && node.children.length === 1 && JSX.isLiteral(firstChildren) && !isChildren) return;
-  if (!allowExpressions && isChildren) {
+  const isChildElement = AST.isOneOf([AST_NODE_TYPES.JSXElement, AST_NODE_TYPES.JSXFragment])(node.parent);
+  switch (true) {
+    // <Foo content={<>ee eeee eeee ...</>} />
+    case allowExpressions
+      && !isChildElement
+      && node.children.length === 1
+      && JSX.isLiteral(node.children.at(0)): {
+      return;
+    }
     // <Foo><>hello, world</></Foo>
-    return context.report({ messageId: "noUselessFragment", node });
-  } else if (!allowExpressions && !isChildren && node.children.length === 1) {
-    // const foo = <>{children}</>;
-    // return <>{children}</>;
-    return context.report({ messageId: "noUselessFragment", node });
+    case !allowExpressions
+      && isChildElement: {
+      return context.report({ messageId: "noUselessFragment", node });
+    }
+    case !allowExpressions
+      && !isChildElement
+      && node.children.length === 1: {
+      // const foo = <>{children}</>;
+      // return <>{children}</>;
+      return context.report({ messageId: "noUselessFragment", node });
+    }
   }
   const nonPaddingChildren = node.children.filter((child) => !JSX.isPaddingSpaces(child));
-  if (nonPaddingChildren.length > 1) return;
-  if (nonPaddingChildren.length === 0) return context.report({ messageId: "noUselessFragment", node });
-  const [first] = nonPaddingChildren;
-  if (
-    isMatching({ type: AST_NODE_TYPES.JSXExpressionContainer, expression: P.not(AST_NODE_TYPES.CallExpression) }, first)
-  ) return;
-  context.report({ messageId: "noUselessFragment", node });
+  const firstNonPaddingChild = nonPaddingChildren.at(0);
+  switch (true) {
+    case nonPaddingChildren.length === 0:
+    case nonPaddingChildren.length === 1
+      && firstNonPaddingChild?.type !== AST_NODE_TYPES.JSXExpressionContainer: {
+      return context.report({ messageId: "noUselessFragment", node });
+    }
+  }
+  return;
 }
 
-type Options = [
-  {
-    allowExpressions: boolean;
-  },
-];
-
-const defaultOptions = [{
-  allowExpressions: true,
-}] as const satisfies Options;
-
 export default createRule<Options, MessageID>({
   meta: {
     type: "problem",
@@ -88,11 +100,11 @@ export default createRule<Options, MessageID>({
     const { allowExpressions = true } = option;
     return {
       JSXElement(node) {
-        if (!isFragmentElement(node, context)) return;
-        check(node, context, allowExpressions);
+        if (JSX.getElementName(node.openingElement).split(".").at(-1) !== "Fragment") return;
+        checkAndReport(node, context, allowExpressions);
       },
       JSXFragment(node) {
-        check(node, context, allowExpressions);
+        checkAndReport(node, context, allowExpressions);
       },
     };
   },

packages/core/src/element/misc.ts

@@ -33,13 +33,5 @@ ruleTester.run(RULE_NAME, rule, {
     "<Fragment key={item.id}>{item.value}</Fragment>",
     "<Fooo content={<>eeee ee eeeeeee eeeeeeee</>} />",
     "<>{foos.map(foo => foo)}</>",
-    {
-      code: /* tsx */ `<NotReact.Fragment />`,
-      settings: {
-        "react-x": {
-          strictImportCheck: true,
-        },
-      },
-    },
   ],
 });