Fix the JSX runtime types in RunOptions

`@types/react` now has types for `react/jsx-runtime` and
`react/jsx-dev-runtime`. These types are not compatible with the types
provided by `hast-util-to-jsx-runtime`, which are used by MDX.

To resolve the issue, all runtime related options have been changed to
`unknown`. Since the user is supposed to pass in whatever JSX runtime
they imported, this should be sufficient.

This fixes several type errors. An outdated workaround has been removed
from the documentation.

Closes #2463

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}}} */