From 65f0d192e3d91c50a79182abc4f3d3dcf097f0c4 Mon Sep 17 00:00:00 2001
From: Remco Haszing <remcohaszing@gmail.com>
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
+  })
 }
 
 /**