Refactor MDX transformJSX handling (#10688)

Author: bluwy

.changeset/four-pants-juggle.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Marks renderer `jsxImportSource` and `jsxTransformOptions` options as deprecated as they are no longer used since Astro 3.0

packages/astro/src/@types/astro.ts

@@ -2577,9 +2577,9 @@ export interface AstroRenderer {
 	clientEntrypoint?: string;
 	/** Import entrypoint for the server/build/ssr renderer. */
 	serverEntrypoint: string;
-	/** JSX identifier (e.g. 'react' or 'solid-js') */
+	/** @deprecated Vite plugins should transform the JSX instead */
 	jsxImportSource?: string;
-	/** Babel transform options */
+	/** @deprecated Vite plugins should transform the JSX instead */
 	jsxTransformOptions?: JSXTransformFn;
 }
 

packages/astro/src/core/create-vite.ts

@@ -137,7 +137,7 @@ export async function createVite(
 			envVitePlugin({ settings }),
 			markdownVitePlugin({ settings, logger }),
 			htmlVitePlugin(),
-			mdxVitePlugin({ settings, logger }),
+			mdxVitePlugin(),
 			astroPostprocessVitePlugin(),
 			astroIntegrationsContainerPlugin({ settings, logger }),
 			astroScriptsPageSSRPlugin({ settings }),

packages/astro/src/jsx/renderer.ts

@@ -1,19 +1,11 @@
-const renderer = {
+import type { AstroRenderer } from '../@types/astro.js';
+import { jsxTransformOptions } from './transform-options.js';
+
+const renderer: AstroRenderer = {
 	name: 'astro:jsx',
 	serverEntrypoint: 'astro/jsx/server.js',
 	jsxImportSource: 'astro',
-	jsxTransformOptions: async () => {
-		// @ts-expect-error types not found
-		const plugin = await import('@babel/plugin-transform-react-jsx');
-		const jsx = plugin.default?.default ?? plugin.default;
-		const { default: astroJSX } = await import('./babel.js');
-		return {
-			plugins: [
-				astroJSX(),
-				jsx({}, { throwIfNamespace: false, runtime: 'automatic', importSource: 'astro' }),
-			],
-		};
-	},
+	jsxTransformOptions,
 };
 
 export default renderer;

packages/astro/src/jsx/transform-options.ts

@@ -0,0 +1,14 @@
+import type { JSXTransformConfig } from '../@types/astro.js';
+
+export async function jsxTransformOptions(): Promise<JSXTransformConfig> {
+	// @ts-expect-error types not found
+	const plugin = await import('@babel/plugin-transform-react-jsx');
+	const jsx = plugin.default?.default ?? plugin.default;
+	const { default: astroJSX } = await import('./babel.js');
+	return {
+		plugins: [
+			astroJSX(),
+			jsx({}, { throwIfNamespace: false, runtime: 'automatic', importSource: 'astro' }),
+		],
+	};
+}

packages/astro/src/vite-plugin-mdx/README.md

@@ -1,3 +1,3 @@
-# vite-plugin-jsx
+# vite-plugin-mdx
 
-Modifies Vite’s built-in JSX behavior to allow for React, Preact, and Solid.js to coexist and all use `.jsx` and `.tsx` extensions.
+Handles transforming MDX via the `astro:jsx` renderer.

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

@@ -1,99 +1,19 @@
-import type { TransformResult } from 'rollup';
-import { type Plugin, type ResolvedConfig, transformWithEsbuild } from 'vite';
-import type { AstroRenderer, AstroSettings } from '../@types/astro.js';
-import type { Logger } from '../core/logger/core.js';
-import type { PluginMetadata } from '../vite-plugin-astro/types.js';
-
-import babel from '@babel/core';
+import { type Plugin, transformWithEsbuild } from 'vite';
 import { CONTENT_FLAG, PROPAGATED_ASSET_FLAG } from '../content/index.js';
 import { astroEntryPrefix } from '../core/build/plugins/plugin-component-entry.js';
 import { removeQueryString } from '../core/path.js';
-import tagExportsPlugin from './tag.js';
-
-interface TransformJSXOptions {
-	code: string;
-	id: string;
-	mode: string;
-	renderer: AstroRenderer;
-	ssr: boolean;
-	root: URL;
-}
-
-async function transformJSX({
-	code,
-	mode,
-	id,
-	ssr,
-	renderer,
-	root,
-}: TransformJSXOptions): Promise<TransformResult> {
-	const { jsxTransformOptions } = renderer;
-	const options = await jsxTransformOptions!({ mode, ssr });
-	const plugins = [...(options.plugins || [])];
-	if (ssr) {
-		plugins.push(await tagExportsPlugin({ rendererName: renderer.name, root }));
-	}
-	const result = await babel.transformAsync(code, {
-		presets: options.presets,
-		plugins,
-		cwd: process.cwd(),
-		filename: id,
-		ast: false,
-		compact: false,
-		sourceMaps: true,
-		configFile: false,
-		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;
-
-	if (renderer.name === 'astro:jsx') {
-		const { astro } = result.metadata as unknown as PluginMetadata;
-		return {
-			code: result.code || '',
-			map: result.map,
-			meta: {
-				astro,
-				vite: {
-					// Setting this vite metadata to `ts` causes Vite to resolve .js
-					// extensions to .ts files.
-					lang: 'ts',
-				},
-			},
-		};
-	}
-
-	return {
-		code: result.code || '',
-		map: result.map,
-	};
-}
-
-interface AstroPluginJSXOptions {
-	settings: AstroSettings;
-	logger: Logger;
-}
+import { transformJSX } from './transform-jsx.js';
 
 // Format inspired by https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L54
 const SPECIAL_QUERY_REGEX = new RegExp(
 	`[?&](?:worker|sharedworker|raw|url|${CONTENT_FLAG}|${PROPAGATED_ASSET_FLAG})\\b`
 );
 
-/** Use Astro config to allow for alternate or multiple JSX renderers (by default Vite will assume React) */
-export default function mdxVitePlugin({ settings }: AstroPluginJSXOptions): Plugin {
-	let viteConfig: ResolvedConfig;
-	// A reference to Astro's internal JSX renderer.
-	let astroJSXRenderer: AstroRenderer;
-
+// TODO: Move this Vite plugin into `@astrojs/mdx` in Astro 5
+export default function mdxVitePlugin(): Plugin {
 	return {
 		name: 'astro:jsx',
 		enforce: 'pre', // run transforms before other plugins
-		async configResolved(resolvedConfig) {
-			viteConfig = resolvedConfig;
-			astroJSXRenderer = settings.renderers.find((r) => r.jsxImportSource === 'astro')!;
-		},
 		async transform(code, id, opts) {
 			// Skip special queries and astro entries. We skip astro entries here as we know it doesn't contain
 			// JSX code, and also because we can't detect the import source to apply JSX transforms.
@@ -117,14 +37,7 @@ export default function mdxVitePlugin({ settings }: AstroPluginJSXOptions): Plug
 					},
 				},
 			});
-			return transformJSX({
-				code: jsxCode,
-				id,
-				renderer: astroJSXRenderer,
-				mode: viteConfig.mode,
-				ssr: Boolean(opts?.ssr),
-				root: settings.config.root,
-			});
+			return await transformJSX(jsxCode, id, opts?.ssr);
 		},
 	};
 }