From 31b7a52c949359831dbf7d274c980d7629fcf227 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 5 Apr 2024 15:02:28 +0200 Subject: [PATCH] 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 | 2 -- docs/migrating/v3.mdx | 9 +-------- package-lock.json | 7 +++++-- packages/mdx/index.js | 3 --- .../mdx/lib/util/resolve-evaluate-options.js | 11 ++++------- packages/mdx/package.json | 1 - packages/mdx/test/evaluate.js | 17 ++--------------- packages/preact/test/index.jsx | 11 +---------- packages/react/test/index.jsx | 11 +---------- packages/vue/test/index.js | 8 +------- 10 files changed, 15 insertions(+), 65 deletions(-) diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx index 4775168a0..2cef71cf7 100644 --- a/docs/_asset/editor.jsx +++ b/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 }) diff --git a/docs/migrating/v3.mdx b/docs/migrating/v3.mdx index 724d0e66c..b7c249548 100644 --- a/docs/migrating/v3.mdx +++ b/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}) ``` diff --git a/package-lock.json b/package-lock.json index b2a14c9ac..0ddf36a86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6625,6 +6625,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz", "integrity": "sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==", + "dev": true, "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", @@ -6650,12 +6651,14 @@ "node_modules/hast-util-to-jsx-runtime/node_modules/inline-style-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz", - "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==" + "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==", + "dev": true }, "node_modules/hast-util-to-jsx-runtime/node_modules/style-to-object": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz", "integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==", + "dev": true, "dependencies": { "inline-style-parser": "0.2.3" } @@ -28446,7 +28449,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", @@ -28478,6 +28480,7 @@ "license": "MIT", "dependencies": { "@mdx-js/mdx": "^3.0.0", + "source-map": "^0.7.0", "vfile": "^6.0.0" }, "devDependencies": {}, diff --git a/packages/mdx/index.js b/packages/mdx/index.js index 3e35619fe..640a964ea 100644 --- a/packages/mdx/index.js +++ b/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 diff --git a/packages/mdx/lib/util/resolve-evaluate-options.js b/packages/mdx/lib/util/resolve-evaluate-options.js index febfe1bfe..294dbf301 100644 --- a/packages/mdx/lib/util/resolve-evaluate-options.js +++ b/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. diff --git a/packages/mdx/package.json b/packages/mdx/package.json index 290fc84a5..2a73acc2f 100644 --- a/packages/mdx/package.json +++ b/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", diff --git a/packages/mdx/test/evaluate.js b/packages/mdx/test/evaluate.js index 907673402..691f1f892 100644 --- a/packages/mdx/test/evaluate.js +++ b/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 { diff --git a/packages/preact/test/index.jsx b/packages/preact/test/index.jsx index d3e6abc6b..9ef074499 100644 --- a/packages/preact/test/index.jsx +++ b/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(), [ diff --git a/packages/react/test/index.jsx b/packages/react/test/index.jsx index 2405ecc06..3c33ae618 100644 --- a/packages/react/test/index.jsx +++ b/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(), [ diff --git a/packages/vue/test/index.js b/packages/vue/test/index.js index 3c8a73d1c..d04d5b9f4 100644 --- a/packages/vue/test/index.js +++ b/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}}} */