Rel1cx · Rel1cx · Dec 30, 2024 · Dec 30, 2024 · Dec 30, 2024
diff --git a/.markdownlint.json b/.markdownlint.json
@@ -1,6 +1,7 @@
 {
   "extends": "markdownlint/style/all",
   "MD013": false,
+  "MD024": false,
   "MD033": false,
   "MD041": false
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/packages/core/docs/README.md b/packages/core/docs/README.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)

diff --git a/packages/core/docs/functions/isFragmentElement.md b/packages/core/docs/functions/isFragmentElement.md
diff --git a/packages/core/docs/functions/isInitializedFromReact.md b/packages/core/docs/functions/isInitializedFromReact.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`

diff --git a/packages/core/src/element/index.ts b/packages/core/src/element/index.ts
@@ -1,3 +1,2 @@
 export * from "./get-element-represent-name";
 export * from "./hierarchy";
-export * from "./misc";
diff --git a/packages/core/src/element/misc.ts b/packages/core/src/element/misc.ts
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.spec.ts
@@ -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 }],

diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.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);
       },
     };
   },

diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.spec.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,
-        },
-      },
-    },
   ],
 });
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts
@@ -1,5 +1,5 @@
-import { isFragmentElement } from "@eslint-react/core";
 import { F, O } from "@eslint-react/eff";
+import * as JSX from "@eslint-react/jsx";
 import type { RuleFeature } from "@eslint-react/types";
 import type { TSESTree } from "@typescript-eslint/types";
 import type { ReportDescriptor } from "@typescript-eslint/utils/ts-eslint";
@@ -30,7 +30,7 @@ export default createRule<[], MessageID>({
   name: RULE_NAME,
   create(context) {
     function getReportDescriptor(node: TSESTree.JSXElement): O.Option<ReportDescriptor<MessageID>> {
-      if (!isFragmentElement(node, context)) return O.none();
+      if (JSX.getElementName(node.openingElement).split(".").at(-1) !== "Fragment") return O.none();
       const hasAttributes = node.openingElement.attributes.length > 0;
       if (hasAttributes) return O.none();
       return O.some({

diff --git a/packages/shared/docs/functions/defineSettings.md b/packages/shared/docs/functions/defineSettings.md
@@ -154,6 +154,8 @@ The identifier that’s used for JSX Element creation.
 
 `"createElement"`
 
+**Deprecated**
+
 #### jsxPragmaFrag
 
 `string` = `...`
@@ -168,6 +170,8 @@ This should not be a member expression (i.e. use "Fragment" instead of "React.Fr
 
 `"Fragment"`
 
+**Deprecated**
+
 #### polymorphicPropName
 
 `string` = `...`
@@ -335,7 +339,7 @@ This allows to specify a custom import location for React when not using the off
 `"@pika/react"`
 ```
 
-### jsxPragma?
+### ~~jsxPragma?~~
 
 > `optional` **jsxPragma**: `string`
 
@@ -345,7 +349,9 @@ The identifier that’s used for JSX Element creation.
 
 `"createElement"`
 
-### jsxPragmaFrag?
+#### Deprecated
+
+### ~~jsxPragmaFrag?~~
 
 > `optional` **jsxPragmaFrag**: `string`
 
@@ -359,6 +365,8 @@ This should not be a member expression (i.e. use "Fragment" instead of "React.Fr
 
 `"Fragment"`
 
+#### Deprecated
+
 ### polymorphicPropName?
 
 > `optional` **polymorphicPropName**: `string`

diff --git a/packages/shared/src/schemas.ts b/packages/shared/src/schemas.ts
@@ -101,12 +101,14 @@ export const ESLintReactSettingsSchema = object({
   /**
    * The identifier that’s used for JSX Element creation.
    * @default `"createElement"`
+   * @deprecated
    */
   jsxPragma: optional(string()),
   /**
    * The identifier that’s used for JSX fragment elements.
    * @description This should not be a member expression (i.e. use "Fragment" instead of "React.Fragment").
    * @default `"Fragment"`
+   * @deprecated
    */
   jsxPragmaFrag: optional(string()),
   /**

diff --git a/website/pages/docs/advanced-configuration.mdx b/website/pages/docs/advanced-configuration.mdx
@@ -17,8 +17,6 @@ export default [
     settings: {
       "react-x": {
         importSource: "react",
-        jsxPragma: "createElement",
-        jsxPragmaFrag: "Fragment",
         additionalHooks: {
           useLayoutEffect: ["useIsomorphicLayoutEffect"],
         },

diff --git a/website/pages/docs/configurations.mdx b/website/pages/docs/configurations.mdx
@@ -15,20 +15,6 @@ This allows to specify a custom import location for React when not using the off
 
 (e.g. `@pika/react`, etc)
 
-### `jsxPragma`
-
-(type: `string`, default: `"createElement"`)
-
-The identifier that's used for JSX Element creation.\
-This should not be a member expression (i.e. use `"createElement"` instead of `"React.createElement"`).
-
-### `jsxPragmaFrag`
-
-(type: `string`, default: `"Fragment"`)
-
-The identifier that's used for JSX fragment elements.\
-This should not be a member expression (i.e. use `"Fragment"` instead of `"React.Fragment"`).
-
 ### `version`
 
 (type: `string`, default: `"detect"`)
@@ -82,9 +68,6 @@ export default [
     ...eslintReact.configs.recommended,
     settings: {
       "react-x": {
-        importSource: "react",
-        jsxPragma: "createElement",
-        jsxPragmaFrag: "Fragment",
         additionalHooks: {
           useLayoutEffect: ["useIsomorphicLayoutEffect"],
         },