Fix the JSX runtime types in RunOptions

docs/_asset/editor.jsx

@@ -204,9 +204,7 @@ function Playground() {
           /** @type {MDXModule} */
           const result = await run(String(file), {
             Fragment,
-            // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
             jsx,
-            // @ts-expect-error: to do: fix in `hast-util-to-jsx-runtime`.
             jsxs,
             baseUrl: window.location.href
           })

docs/migrating/v3.mdx

@@ -52,16 +52,9 @@ You will get a runtime error if these features are used in MDX without
 If you passed the `useDynamicImport` option before, remove it, the behavior
 is now the default.
 
-If you use `react/jsx-runtime`, you might get a TypeScript error (such as
-`Property 'Fragment' is missing in type`), because it is typed incorrectly.
-To remediate this, do:
-
 ```tsx
-import {type Fragment, type Jsx, run} from '@mdx-js/mdx'
-import * as runtime_ from 'react/jsx-runtime'
-
-// @ts-expect-error: the automatic react runtime is untyped.
-const runtime: {Fragment: Fragment; jsx: Jsx; jsxs: Jsx} = runtime_
+import {run} from '@mdx-js/mdx'
+import * as runtime from 'react/jsx-runtime'
 
 const result = await run('# hi', {...runtime, baseUrl: import.meta.url})
 ```

packages/mdx/index.js

@@ -1,7 +1,7 @@
 /**
- * @typedef {import('hast-util-to-jsx-runtime').Fragment} Fragment
- * @typedef {import('hast-util-to-jsx-runtime').Jsx} Jsx
- * @typedef {import('hast-util-to-jsx-runtime').JsxDev} JsxDev
+ * @typedef {import('./lib/util/resolve-evaluate-options.js').Fragment} Fragment
+ * @typedef {import('./lib/util/resolve-evaluate-options.js').Jsx} Jsx
+ * @typedef {import('./lib/util/resolve-evaluate-options.js').JsxDev} JsxDev
  * @typedef {import('./lib/util/resolve-evaluate-options.js').UseMdxComponents} UseMdxComponents
  * @typedef {import('./lib/compile.js').CompileOptions} CompileOptions
  * @typedef {import('./lib/core.js').ProcessorOptions} ProcessorOptions

packages/mdx/lib/util/resolve-evaluate-options.js

@@ -1,9 +1,29 @@
 /**
- * @import {Fragment, Jsx, JsxDev} from 'hast-util-to-jsx-runtime'
  * @import {MDXComponents} from 'mdx/types.js'
  * @import {CompileOptions} from '../compile.js'
  */
 
+/**
+ * @typedef {unknown} Fragment
+ */
+
+/**
+ * @callback Jsx
+ * @param {any} type
+ * @param {object} props
+ * @param {any} [key]
+ */
+
+/**
+ * @callback JsxDev
+ * @param {any} type
+ * @param {object} props
+ * @param {any} key
+ * @param {boolean} isStatic
+ * @param {object} [source]
+ * @param {object} [self]
+ */
+
 /**
  * @typedef {EvaluateProcessorOptions & RunOptions} EvaluateOptions
  *   Configuration for `evaluate`.

packages/mdx/package.json

@@ -54,7 +54,6 @@
     "estree-util-to-js": "^2.0.0",
     "estree-walker": "^3.0.0",
     "hast-util-to-estree": "^3.0.0",
-    "hast-util-to-jsx-runtime": "^2.0.0",
     "markdown-extensions": "^2.0.0",
     "periscopic": "^3.0.0",
     "remark-mdx": "^3.0.0",

packages/mdx/test/evaluate.js

@@ -1,23 +1,12 @@
-/**
- * @import {Fragment, Jsx, JsxDev} from '@mdx-js/mdx'
- */
-
 import assert from 'node:assert/strict'
 import {test} from 'node:test'
 import {evaluate, evaluateSync, compile} from '@mdx-js/mdx'
 import * as provider from '@mdx-js/react'
 import {renderToStaticMarkup} from 'react-dom/server'
-import * as runtime_ from 'react/jsx-runtime'
-import * as devRuntime_ from 'react/jsx-dev-runtime'
+import * as runtime from 'react/jsx-runtime'
+import * as developmentRuntime from 'react/jsx-dev-runtime'
 import React from 'react'
 
-/** @type {{Fragment: Fragment, jsx: Jsx, jsxs: Jsx}} */
-// @ts-expect-error: the automatic react runtime is untyped.
-const runtime = runtime_
-/** @type {{Fragment: Fragment, jsxDEV: JsxDev}} */
-// @ts-expect-error: the automatic dev react runtime is untyped.
-const developmentRuntime = devRuntime_
-
 test('@mdx-js/mdx: evaluate', async function (t) {
   await t.test('should throw on missing `Fragment`', async function () {
     try {

packages/preact/test/index.jsx

@@ -2,21 +2,16 @@
 /* @jsxImportSource preact */
 
 /**
- * @import {Fragment, Jsx} from '@mdx-js/mdx'
  * @import {ComponentProps} from 'preact'
  */
 
 import assert from 'node:assert/strict'
 import {test} from 'node:test'
 import {evaluate} from '@mdx-js/mdx'
 import {MDXProvider, useMDXComponents} from '@mdx-js/preact'
-import * as runtime_ from 'preact/jsx-runtime'
+import * as runtime from 'preact/jsx-runtime'
 import {render} from 'preact-render-to-string'
 
-const runtime = /** @type {{Fragment: Fragment, jsx: Jsx, jsxs: Jsx}} */ (
-  runtime_
-)
-
 test('@mdx-js/preact', async function (t) {
   await t.test('should expose the public api', async function () {
     assert.deepEqual(Object.keys(await import('@mdx-js/preact')).sort(), [

packages/react/test/index.jsx

@@ -1,5 +1,4 @@
 /**
- * @import {Fragment, Jsx} from '@mdx-js/mdx'
  * @import {ComponentProps} from 'react'
  */
 
@@ -8,13 +7,9 @@ import {test} from 'node:test'
 import {evaluate} from '@mdx-js/mdx'
 import {MDXProvider, useMDXComponents} from '@mdx-js/react'
 import React from 'react'
-import * as runtime_ from 'react/jsx-runtime'
+import * as runtime from 'react/jsx-runtime'
 import {renderToString} from 'react-dom/server'
 
-const runtime = /** @type {{Fragment: Fragment, jsx: Jsx, jsxs: Jsx}} */ (
-  /** @type {unknown} */ (runtime_)
-)
-
 test('@mdx-js/react', async function (t) {
   await t.test('should expose the public api', async function () {
     assert.deepEqual(Object.keys(await import('@mdx-js/preact')).sort(), [

packages/vue/test/index.js

@@ -1,5 +1,4 @@
 /**
- * @import {Fragment, Jsx} from '@mdx-js/mdx'
  * @import {MDXModule} from 'mdx/types.js'
  * @import {Component} from 'vue'
  */
@@ -8,13 +7,9 @@ import assert from 'node:assert/strict'
 import test from 'node:test'
 import {compile, run} from '@mdx-js/mdx'
 import {MDXProvider, useMDXComponents} from '@mdx-js/vue'
-import * as runtime_ from 'vue/jsx-runtime'
+import * as runtime from 'vue/jsx-runtime'
 import * as vue from 'vue'
 
-const runtime = /** @type {{Fragment: Fragment, jsx: Jsx, jsxs: Jsx}} */ (
-  /** @type {unknown} */ (runtime_)
-)
-
 // Note: a regular import would be nice but that completely messes up the JSX types.
 const name = '@vue/server-renderer'
 /** @type {{default: {renderToString(node: unknown): string}}} */