updated type references to use React.JSX namespace and removed generic Element type

Author: talatkuyuk

README.md

@@ -409,7 +409,7 @@ type EvaluateProps<TScope> = {
 
 ```typescript
 type EvaluateResult<TFrontmatter, TScope> = {
-  content: JSX.Element;
+  content: React.JSX.Element;
   mod: Record<string, unknown>;
   frontmatter: TFrontmatter;
   scope: TScope;
@@ -700,10 +700,10 @@ _Go to the [evaluate](#the-evaluate-function) function_
 The `MDXRemote` component is used for rendering the MDX content on the server side. It is a react server component.
 
 ```typescript
-async function MDXRemote(props: MDXRemoteProps): Promise<JSX.Element> {}
+async function MDXRemote(props: MDXRemoteProps): Promise<React.JSX.Element> {}
 ```
 
-The `MDXRemote` component takes `MDXRemoteProps` and returns `JSX.Element` as a promise.
+The `MDXRemote` component takes `MDXRemoteProps` and returns `React.JSX.Element` as a promise.
 
 **Props of the `MDXRemote` component**
 
@@ -1202,7 +1202,7 @@ The option `disableParentContext` is a feature of `@mdx-js/mdx`. If it is `false
 
 ```typescript
 type HydrateResult = {
-  content: JSX.Element;
+  content: React.JSX.Element;
   mod: Record<string, unknown>;
   error?: Error;
 };
@@ -1274,10 +1274,10 @@ import { MDXClient } from "next-mdx-remote-client/csr";
 The `MDXClient` component is used for rendering the MDX content on the client side.
 
 ```typescript
-function MDXClient(props: MDXClientProps): JSX.Element {}
+function MDXClient(props: MDXClientProps): React.JSX.Element {}
 ```
 
-The `MDXClient` component takes `MDXClientProps` and returns `JSX.Element`. The `MDXClient` has no "options" parameter like `hydrate`.
+The `MDXClient` component takes `MDXClientProps` and returns `React.JSX.Element`. The `MDXClient` has no "options" parameter like `hydrate`.
 
 **Props of the `MDXClient` component**
 
@@ -1543,7 +1543,6 @@ In addition, the package exports the types from `mdx/types` so that developers d
 - `MDXContent`
 - `MDXProps`
 - `MDXModule`
-- `Element`
 
 ## Compatibility
 

migration_guide.md

@@ -665,7 +665,7 @@ The `evaluate` returns `mod` object for the exports, `scope`, and `error` object
 const { content, mod, frontmatter, scope, error } = await evaluate<Frontmatter, Scope>({source, options, components});
 
 type EvaluateResult<TFrontmatter, TScope> = {
-  content: JSX.Element;
+  content: React.JSX.Element;
   mod: Record<string, unknown>;
   frontmatter: TFrontmatter;
   scope: TScope;
@@ -817,7 +817,7 @@ type HydrateProps = {
 };
 
 type HydrateResult = {
-  content: JSX.Element;
+  content: React.JSX.Element;
   mod: Record<string, unknown>;
   error?: Error;
 };

src/csr/MDXClient.tsx

@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import type { MDXClientProps, Element } from "./types.js";
+import type { MDXClientProps } from "./types.js";
 import { hydrate } from "./hydrate.js";
 
 /**
  * renders the content on the client side (csr), which is provided by the "hydrate" function.
  */
-export function MDXClient(props: MDXClientProps): Element {
+export function MDXClient(props: MDXClientProps): React.JSX.Element {
   const { onError: ErrorComponent, ...rest } = props;
 
   const { content, error } = hydrate(rest);

src/csr/MDXClientAsync.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import type { MDXClientAsyncProps, Element } from "./types.js";
+import type { MDXClientAsyncProps } from "./types.js";
 import { hydrateAsync } from "./hydrateAsync.js";
 
 /**
@@ -13,7 +13,7 @@ import { hydrateAsync } from "./hydrateAsync.js";
  *
  * the content is going to be hydrated "asynchronously" in a useEffect hook.
  */
-export function MDXClientAsync(props: MDXClientAsyncProps): Element {
+export function MDXClientAsync(props: MDXClientAsyncProps): React.JSX.Element {
   const { onError: ErrorComponent, ...rest } = props;
 
   const { content, error } = hydrateAsync(rest);

src/csr/MDXClientLazy.tsx

@@ -3,15 +3,15 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import type { MDXClientProps, Element } from "./types.js";
+import type { MDXClientProps } from "./types.js";
 import { hydrateLazy } from "./hydrateLazy.js";
 
 /**
  * renders the content on the client side (csr), which is provided by the "hydrateLazy" function.
  *
  * the content is going to be hydrated "lazily".
  */
-export function MDXClientLazy(props: MDXClientProps): Element {
+export function MDXClientLazy(props: MDXClientProps): React.JSX.Element {
   const { onError: ErrorComponent, ...rest } = props;
 
   const { content, error } = hydrateLazy(rest);

src/csr/index.ts

@@ -26,4 +26,4 @@ export type {
 export { MDXProvider, useMDXComponents } from "@mdx-js/react";
 
 // for who needs to use them without installing the "mdx/types"
-export type { MDXComponents, MDXContent, MDXProps, MDXModule, Element } from "mdx/types";
+export type { MDXComponents, MDXContent, MDXProps, MDXModule } from "mdx/types";

src/csr/types.ts

@@ -7,13 +7,11 @@ import type {
   CompileOptions as OriginalCompileOptions,
   RunOptions as OriginalRunOptions,
 } from "@mdx-js/mdx";
-import type { MDXComponents, Element } from "mdx/types";
+import type { MDXComponents } from "mdx/types";
 import type { Compatible } from "vfile";
 
 import type { VfileDataIntoScope } from "../lib/util.js";
 
-export type { Element } from "mdx/types";
-
 export type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
 export type SerializeProps<TScope extends Record<string, unknown> = Record<string, unknown>> = {
@@ -131,7 +129,7 @@ export type HydrateResult = {
   /**
    * React element that renders the MDX compiled source using the component names mapping object.
    */
-  content: Element;
+  content: React.JSX.Element;
   /**
    * An object which holds any value that is exported from the MDX file.
    */
@@ -157,7 +155,7 @@ export type HydrateAsyncProps = Prettify<
     /**
      * fallback loading component
      */
-    loading?: () => Element;
+    loading?: () => React.JSX.Element;
   }
 >;
 

src/rsc/MDXRemote.tsx

@@ -4,12 +4,12 @@
  */
 
 import { evaluate } from "./evaluate.js";
-import type { MDXRemoteProps, Element } from "./types.js";
+import type { MDXRemoteProps } from "./types.js";
 
 /**
  * renders the content as a react server component (rsc), which is provided by the "evaluate" function
  */
-export async function MDXRemote(props: MDXRemoteProps): Promise<Element> {
+export async function MDXRemote(props: MDXRemoteProps): Promise<React.JSX.Element> {
   const { onError: ErrorComponent, ...rest } = props;
 
   const { content, error } = await evaluate(rest);

src/rsc/index.ts

@@ -15,4 +15,4 @@ export type {
 } from "./types.js";
 
 // for who needs to use them without installing the "mdx/types"
-export type { MDXComponents, MDXContent, MDXProps, MDXModule, Element } from "mdx/types";
+export type { MDXComponents, MDXContent, MDXProps, MDXModule } from "mdx/types";

src/rsc/types.ts

@@ -4,13 +4,11 @@
  */
 
 import type { EvaluateOptions as OriginalEvaluateOptions } from "@mdx-js/mdx";
-import type { MDXComponents, Element } from "mdx/types";
+import type { MDXComponents } from "mdx/types";
 import type { Compatible } from "vfile";
 
 import type { VfileDataIntoScope } from "../lib/util.js";
 
-export type { Element } from "mdx/types";
-
 export type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
 export type EvaluateProps<TScope extends Record<string, unknown> = Record<string, unknown>> = {
@@ -84,7 +82,7 @@ export type EvaluateResult<
   /**
    * React element that renders the MDX source using the component names mapping object.
    */
-  content: Element;
+  content: React.JSX.Element;
   /**
    * An object which holds any value that is exported from the MDX file.
    */

tests/context/components.js

@@ -3,7 +3,7 @@
 import React from "react";
 
 /**
- * @param {Readonly<JSX.IntrinsicElements['span']>} props
+ * @param {Readonly<React.JSX.IntrinsicElements['span']>} props
  *   Props
  * @returns
  *   `span` element.
@@ -13,7 +13,7 @@ export function Pill(props) {
 }
 
 /**
- * @param {Readonly<JSX.IntrinsicElements['div']>} props
+ * @param {Readonly<React.JSX.IntrinsicElements['div']>} props
  *   Props
  * @returns
  *   `div` element.