fixed type errors about JSX namespace and PluggableList in unified

README.md

@@ -1543,6 +1543,7 @@ In addition, the package exports the types from `mdx/types` so that developers d
 - `MDXContent`
 - `MDXProps`
 - `MDXModule`
+- `Element`
 
 ## Compatibility
 

package.json

@@ -83,6 +83,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/babel__code-frame": "^7.0.6",
+    "@types/eslint-config-prettier": "^6.11.3",
     "@types/node": "^22.10.5",
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
@@ -106,11 +107,12 @@
     "type-coverage": "^2.29.7",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.19.1",
+    "unified": "^11.0.5",
     "vitest": "^3.0.0-beta.4"
   },
   "peerDependencies": {
-    "react": ">= 19.0.0",
-    "react-dom": ">= 19.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "engines": {
     "node": ">=18.18.0"

src/csr/MDXClient.tsx

@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { type MDXClientProps } from "./types.js";
+import type { MDXClientProps, Element } 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): JSX.Element {
+export function MDXClient(props: MDXClientProps): 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 } from "./types.js";
+import type { MDXClientAsyncProps, Element } 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): JSX.Element {
+export function MDXClientAsync(props: MDXClientAsyncProps): 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 } from "./types.js";
+import type { MDXClientProps, Element } 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): JSX.Element {
+export function MDXClientLazy(props: MDXClientProps): Element {
   const { onError: ErrorComponent, ...rest } = props;
 
   const { content, error } = hydrateLazy(rest);

src/csr/hydrateAsync.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { MDXProvider, useMDXComponents } from "@mdx-js/react";
 
 import { runAsync } from "../lib/run.js";
-import { type RunResult } from "../lib/types.js";
+import type { RunResult } from "../lib/types.js";
 
 import type { HydrateAsyncProps, HydrateResult } from "./types.js";
 

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 } from "mdx/types";
+export type { MDXComponents, MDXContent, MDXProps, MDXModule, Element } from "mdx/types";

src/csr/serialize.ts

@@ -5,7 +5,7 @@
 
 import { serializeError } from "serialize-error";
 
-import { type CompileMdxOptions } from "../lib/types.js";
+import type { CompileMdxOptions } from "../lib/types.js";
 import { passVfileDataIntoScope } from "../lib/util.js";
 import { prepare } from "../lib/prepare.js";
 import { compile } from "../lib/compile.js";

src/csr/types.ts

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

src/lib/compile.ts

@@ -4,8 +4,8 @@
  */
 
 import { compile as compileMDX, type CompileOptions as CompileMDXOptions } from "@mdx-js/mdx";
-import { VFile } from "vfile";
-import { type PluggableList } from "@mdx-js/mdx/lib/core";
+import type { VFile } from "vfile";
+import type { PluggableList } from "unified";
 import remarkMdxRemoveEsm, { clsx } from "remark-mdx-remove-esm";
 
 import type { CompileOptions, CompileResult } from "./types.js";

src/lib/prepare.ts

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { Compatible, VFile } from "vfile";
+import { type Compatible, VFile } from "vfile";
 import { matter } from "vfile-matter";
 
-import { type PrepareResult } from "./types";
+import type { PrepareResult } from "./types.js";
 
 /**
  * turns the source into vfile, gets the fronmatter, strips it out from the vfile

src/lib/run.ts

@@ -5,7 +5,7 @@
 
 import * as jsxRuntime from "react/jsx-runtime";
 import * as jsxDevRuntime from "react/jsx-dev-runtime";
-import type { MDXModule } from "mdx/types.js";
+import type { MDXModule } from "mdx/types";
 import type { Fragment, Jsx, JsxDev } from "@mdx-js/mdx";
 
 import type { RunOptions, RunResult } from "./types.js";

src/lib/types.ts

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import {
-  type CompileOptions as OriginalCompileOptions,
-  type RunOptions as OriginalRunOptions,
+import type {
+  CompileOptions as OriginalCompileOptions,
+  RunOptions as OriginalRunOptions,
 } from "@mdx-js/mdx";
-import { type MDXContent } from "mdx/types";
-import { Compatible, type VFile } from "vfile";
+import type { MDXContent } from "mdx/types";
+import type { Compatible, VFile } from "vfile";
 
 export type PrepareProps = {
   /**

src/lib/util.ts

@@ -114,14 +114,18 @@ export function passVfileDataIntoScope(
       if (typeof field === "string") {
         scope[field] = data[field];
       } else if (
+        // type-coverage:ignore-next-line
         Object.prototype.hasOwnProperty.call(field, "name") &&
+        // type-coverage:ignore-next-line
         Object.prototype.hasOwnProperty.call(field, "as")
       ) {
         scope[field.as] = data[field.name];
       }
     });
   } else if (
+    // type-coverage:ignore-next-line
     Object.prototype.hasOwnProperty.call(vfileDataIntoScope, "name") &&
+    // type-coverage:ignore-next-line
     Object.prototype.hasOwnProperty.call(vfileDataIntoScope, "as")
   ) {
     scope[vfileDataIntoScope.as] = data[vfileDataIntoScope.name];

src/rsc/MDXRemote.tsx

@@ -4,12 +4,12 @@
  */
 
 import { evaluate } from "./evaluate.js";
-import { type MDXRemoteProps } from "./types.js";
+import type { MDXRemoteProps, Element } 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<JSX.Element> {
+export async function MDXRemote(props: MDXRemoteProps): Promise<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 } from "mdx/types";
+export type { MDXComponents, MDXContent, MDXProps, MDXModule, Element } from "mdx/types";

src/rsc/types.ts

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

tests/test.MDXProvider.spec.tsx

@@ -36,13 +36,15 @@ describe("MDXProvider", () => {
 
     if ("error" in mdxSource) throw new Error("shouldn't have any MDX syntax error");
 
+    const CustomWrapper: React.FC<React.PropsWithChildren> = (properties) => {
+      return <div id="layout" {...properties} />;
+    };
+
     expect(
       ReactDOMServer.renderToStaticMarkup(
         <MDXProvider
           components={{
-            wrapper(properties: JSX.IntrinsicElements["div"]) {
-              return <div id="layout" {...properties} />;
-            },
+            wrapper: CustomWrapper,
           }}
         >
           <MDXClient {...mdxSource} />