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 * as runtime from 'react/jsx-runtime'
 
 const result = await run('# hi', {...runtime, baseUrl: import.meta.url})
 ```

packages/mdx/index.js

@@ -1,7 +1,4 @@
 /**
- * @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,7 +1,4 @@
 /**
- * @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('mdx/types.js').MDXComponents} Components
  * @typedef {import('../compile.js').CompileOptions} CompileOptions
  */
@@ -29,13 +26,13 @@
  *   this option can also be given at compile time in `CompileOptions`;
  *   you should pass this (likely at runtime), as you might get runtime errors
  *   when using `import.meta.url` / `import` / `export … from ` otherwise.
- * @property {Fragment} Fragment
+ * @property {unknown} Fragment
  *   Symbol to use for fragments (**required**).
- * @property {Jsx | null | undefined} [jsx]
+ * @property {unknown} [jsx]
  *   Function to generate an element with static children in production mode.
- * @property {JsxDev | null | undefined} [jsxDEV]
+ * @property {unknown} [jsxDEV]
  *   Function to generate an element in development mode.
- * @property {Jsx | null | undefined} [jsxs]
+ * @property {unknown} [jsxs]
  *   Function to generate an element with dynamic children in production mode.
  * @property {UseMdxComponents | null | undefined} [useMDXComponents]
  *   Function to get components from context.

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,25 +1,12 @@
-/**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
- * @typedef {import('@mdx-js/mdx').JsxDev} JsxDev
- */
-
 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

@@ -1,21 +1,12 @@
 /* @jsxRuntime automatic @jsxImportSource preact */
 
-/**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
- */
-
 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,20 +1,11 @@
-/**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
- */
-
 import assert from 'node:assert/strict'
 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,6 +1,4 @@
 /**
- * @typedef {import('@mdx-js/mdx').Fragment} Fragment
- * @typedef {import('@mdx-js/mdx').Jsx} Jsx
  * @typedef {import('mdx/types.js').MDXModule} MDXModule
  * @typedef {import('vue').Component} AnyComponent
  */
@@ -9,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}}} */