Allow automatic JSX runtime alongside MDX

.changeset/slow-frogs-hope.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/mdx': patch
+---
+
+Allow automatic JSX runtime with MDX

packages/astro/src/jsx/babel.ts

@@ -136,13 +136,21 @@ export default function astroJSX(): PluginObj {
 		visitor: {
 			Program: {
 				enter(path, state) {
+					const { file } = state;
 					if (!(state.file.metadata as PluginMetadata).astro) {
 						(state.file.metadata as PluginMetadata).astro = {
 							clientOnlyComponents: [],
 							hydratedComponents: [],
 							scripts: [],
 						};
 					}
+					if(!file.ast.comments) {
+						file.ast.comments = [];
+					}
+					file.ast.comments?.push({
+						type: 'CommentBlock',
+						value: '* @jsxImportSource astro '
+					});
 					path.node.body.splice(
 						0,
 						0,

packages/astro/src/jsx/renderer.ts

@@ -1,7 +1,6 @@
 const renderer = {
 	name: 'astro:jsx',
 	serverEntrypoint: 'astro/jsx/server.js',
-	jsxImportSource: 'astro',
 	jsxTransformOptions: async () => {
 		const {
 			default: { default: jsx },
@@ -11,7 +10,7 @@ const renderer = {
 		return {
 			plugins: [
 				astroJSX(),
-				jsx({}, { throwIfNamespace: false, runtime: 'automatic', importSource: 'astro' }),
+				jsx({}, { throwIfNamespace: false, runtime: 'automatic' }),
 			],
 		};
 	},

packages/astro/src/vite-plugin-jsx/index.ts

@@ -14,6 +14,7 @@ import { parseNpmName } from '../core/util.js';
 import tagExportsPlugin from './tag.js';
 
 const JSX_RENDERER_CACHE = new WeakMap<AstroConfig, Map<string, AstroRenderer>>();
+const JSX_RENDERER_WITH_AUTO_CACHE = new WeakMap<AstroConfig, AstroRenderer[]>();
 const JSX_EXTENSIONS = new Set(['.jsx', '.tsx', '.mdx']);
 const IMPORT_STATEMENTS: Record<string, string> = {
 	react: "import React from 'react'",
@@ -33,7 +34,7 @@ function getEsbuildLoader(fileExt: string): string {
 }
 
 function collectJSXRenderers(renderers: AstroRenderer[]): Map<string, AstroRenderer> {
-	const renderersWithJSXSupport = renderers.filter((r) => r.jsxImportSource);
+	const renderersWithJSXSupport = renderers.filter((r) => r.jsxImportSource || r.jsxTransformOptions);
 	return new Map(
 		renderersWithJSXSupport.map((r) => [r.jsxImportSource, r] as [string, AstroRenderer])
 	);
@@ -69,6 +70,7 @@ async function transformJSX({
 		babelrc: false,
 		inputSourceMap: options.inputSourceMap,
 	});
+
 	// TODO: Be more strict about bad return values here.
 	// Should we throw an error instead? Should we never return `{code: ""}`?
 	if (!result) return null;
@@ -118,6 +120,7 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 
 			const { mode } = viteConfig;
 			let jsxRenderers = JSX_RENDERER_CACHE.get(config);
+			let jsxAutoRenderers = JSX_RENDERER_WITH_AUTO_CACHE.get(config);
 
 			// load renderers (on first run only)
 			if (!jsxRenderers) {
@@ -136,10 +139,19 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 				}
 				JSX_RENDERER_CACHE.set(config, jsxRenderers);
 			}
+			if(!jsxAutoRenderers) {
+				jsxAutoRenderers = [];
+				for(const [,renderer] of jsxRenderers) {
+					if(renderer.jsxImportSource) {
+						jsxAutoRenderers.push(renderer);
+					}
+				}
+			}
 
 			// Attempt: Single JSX renderer
 			// If we only have one renderer, we can skip a bunch of work!
-			if (jsxRenderers.size === 1) {
+			if (jsxAutoRenderers.length === 1 || jsxRenderers.size === 1) {
+				const renderer = jsxAutoRenderers.length ? jsxAutoRenderers[0] : Array.from(jsxRenderers.values())[0];
 				// downlevel any non-standard syntax, but preserve JSX
 				const { code: jsxCode } = await esbuild.transform(code, {
 					loader: getEsbuildLoader(path.extname(id)) as esbuild.Loader,
@@ -150,7 +162,7 @@ export default function jsx({ config, logging }: AstroPluginJSXOptions): Plugin
 				return transformJSX({
 					code: jsxCode,
 					id,
-					renderer: [...jsxRenderers.values()][0],
+					renderer,
 					mode,
 					ssr,
 				});

packages/astro/src/vite-plugin-jsx/tag.ts

@@ -20,7 +20,7 @@ export default function tagExportsWithRenderer({
 				// Inject `import { __astro_tag_component__ } from 'astro/server/index.js'`
 				enter(path) {
 					path.node.body.splice(
-						0,
+						1,
 						0,
 						t.importDeclaration(
 							[

packages/integrations/mdx/test/fixtures/mdx-plus-react/astro.config.mjs

@@ -0,0 +1,6 @@
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+
+export default {
+	integrations: [react(), mdx()]
+}

packages/integrations/mdx/test/fixtures/mdx-plus-react/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/mdx-plus-react",
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
+    "@astrojs/react": "workspace:*"
+  }
+}

packages/integrations/mdx/test/fixtures/mdx-plus-react/src/components/Component.jsx

@@ -0,0 +1,5 @@
+const Component = () => {
+  return <p>Hello world</p>;
+};
+
+export default Component;

packages/integrations/mdx/test/fixtures/mdx-plus-react/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import Component from "../components/Component.jsx";
+---
+<html>
+	<head>
+		<title>Testing</title>
+	</head>
+	<body>
+		<Component />
+	</body>
+</html>

packages/integrations/mdx/test/mdx-plus-react.test.js

@@ -0,0 +1,25 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX and React', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-plus-react/', import.meta.url),
+		});
+		await fixture.build();
+	});
+
+	it('can be used in the same project', async () => {
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		const p = document.querySelector('p');
+
+		expect(p.textContent).to.equal('Hello world');
+	});
+});

packages/integrations/react/src/index.ts

@@ -12,10 +12,9 @@ function getRenderer() {
 			: '@astrojs/react/server-v17.js',
 		jsxImportSource: 'react',
 		jsxTransformOptions: async () => {
-			const {
-				default: { default: jsx },
-				// @ts-expect-error types not found
-			} = await import('@babel/plugin-transform-react-jsx');
+			// @ts-expect-error types not found
+			const babelPluginTransformReactJsxModule = await import('@babel/plugin-transform-react-jsx');
+			const jsx = babelPluginTransformReactJsxModule?.default?.default ?? babelPluginTransformReactJsxModule?.default;
 			return {
 				plugins: [
 					jsx(