From 65f0d192e3d91c50a79182abc4f3d3dcf097f0c4 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Wed, 2 Apr 2025 21:11:44 +0200 Subject: [PATCH] Remove the type casting of JSX runtimes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It used to cause errors. Now it doesn’t anymore. --- docs/migrating/v3.mdx | 4 ---- packages/preact/test/index.jsx | 7 +------ packages/react/test/index.jsx | 7 +------ packages/vue/test/index.js | 18 ++++++------------ 4 files changed, 8 insertions(+), 28 deletions(-) diff --git a/docs/migrating/v3.mdx b/docs/migrating/v3.mdx index 840651421..6b83634e9 100644 --- a/docs/migrating/v3.mdx +++ b/docs/migrating/v3.mdx @@ -52,10 +52,6 @@ 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 * as runtime from 'react/jsx-runtime' diff --git a/packages/preact/test/index.jsx b/packages/preact/test/index.jsx index 226e9f334..6acf16f53 100644 --- a/packages/preact/test/index.jsx +++ b/packages/preact/test/index.jsx @@ -2,7 +2,6 @@ /* @jsxImportSource preact */ /** - * @import {Fragment, Jsx} from '@mdx-js/mdx' * @import {ComponentProps} from 'preact' */ @@ -10,13 +9,9 @@ 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 fa67f0148..683034a4e 100644 --- a/packages/react/test/index.jsx +++ b/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(), [ diff --git a/packages/vue/test/index.js b/packages/vue/test/index.js index 3a6bbdfde..f3e88c619 100644 --- a/packages/vue/test/index.js +++ b/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,18 +7,10 @@ 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 serverRenderer from '@vue/server-renderer' +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}}} */ -const {default: serverRenderer} = await import(name) - test('@mdx-js/vue', async function (t) { await t.test('should expose the public api', async function () { assert.deepEqual(Object.keys(await import('@mdx-js/vue')).sort(), [ @@ -133,7 +124,10 @@ async function evaluate(value) { outputFormat: 'function-body', providerImportSource: '#' }) - return run(file, {...runtime, useMDXComponents}) + return run(file, { + ...runtime, + useMDXComponents + }) } /**