JSX refactor (#7924)

* JSX refactor

* Get preact/compat test to pass

* Use include config

* Remove old astro flavored markdown test

* Move babel dep to preact

* Remove errant debugger

* Update lockfile

* Update the multi-framework example

* Update e2e tests

* Fix nested-in-vue tests

* Add back in astro check

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

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

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

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/integrations/solid/src/index.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/integrations/solid/src/index.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update .changeset/perfect-horses-tell.md

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Move the comment about the include config

* Remove redundant alias config

* Use react's own preamble code

* Use the base for the preamble

* Remove solid redundancy

* Update .changeset/perfect-horses-tell.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update based on review comments

* Oops

---------

Co-authored-by: Fred K. Schott <fkschott@gmail.com>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

2 files changed, 50 insertions, 76 deletions

diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts
index 98a2dd205..153b9e1c3 100644
--- a/packages/integrations/preact/src/index.ts
+++ b/packages/integrations/preact/src/index.ts
@@ -1,94 +1,68 @@
 import type { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';
+import preact, {type PreactPluginOptions as VitePreactPluginOptions} from '@preact/preset-vite';
+import { fileURLToPath } from 'node:url';
+
+const babelCwd = new URL('../', import.meta.url);
 
 function getRenderer(development: boolean): AstroRenderer {
 	return {
 		name: '@astrojs/preact',
 		clientEntrypoint: development ? '@astrojs/preact/client-dev.js' : '@astrojs/preact/client.js',
 		serverEntrypoint: '@astrojs/preact/server.js',
-		jsxImportSource: 'preact',
-		jsxTransformOptions: async () => {
-			// @ts-expect-error types not found
-			const plugin = await import('@babel/plugin-transform-react-jsx');
-			const jsx = plugin.default?.default ?? plugin.default;
-			return {
-				plugins: [jsx({}, { runtime: 'automatic', importSource: 'preact' })],
-			};
-		},
 	};
 }
 
-function getCompatRenderer(development: boolean): AstroRenderer {
+export type Options =Pick<VitePreactPluginOptions, 'include' | 'exclude'> & { compat?: boolean };
+
+export default function ({include, exclude, compat}: Options = {}): AstroIntegration {
 	return {
 		name: '@astrojs/preact',
-		clientEntrypoint: development ? '@astrojs/preact/client-dev.js' : '@astrojs/preact/client.js',
-		serverEntrypoint: '@astrojs/preact/server.js',
-		jsxImportSource: 'react',
-		jsxTransformOptions: async () => {
-			// @ts-expect-error types not found
-			const plugin = await import('@babel/plugin-transform-react-jsx');
-			const jsx = plugin.default?.default ?? plugin.default;
-			return {
-				plugins: [
-					jsx({}, { runtime: 'automatic', importSource: 'preact/compat' }),
-					[
-						'babel-plugin-module-resolver',
-						{
-							alias: {
-								react: 'preact/compat',
-								'react-dom/test-utils': 'preact/test-utils',
-								'react-dom': 'preact/compat',
-								'react/jsx-runtime': 'preact/jsx-runtime',
-							},
-						},
-					],
-				],
-			};
-		},
-	};
-}
+		hooks: {
+			'astro:config:setup': ({ addRenderer, updateConfig, command }) => {
+				const preactPlugin = preact({
+					include,
+					exclude,
+					babel: {
+						cwd: fileURLToPath(babelCwd)
+					}
+				});
 
-function getViteConfiguration(compat?: boolean): ViteUserConfig {
-	const viteConfig: ViteUserConfig = {
-		optimizeDeps: {
-			include: ['@astrojs/preact/client.js', 'preact', 'preact/jsx-runtime'],
-			exclude: ['@astrojs/preact/server.js'],
-		},
-	};
+				const viteConfig: ViteUserConfig = {
+					optimizeDeps: {
+						include: ['@astrojs/preact/client.js', 'preact', 'preact/jsx-runtime'],
+						exclude: ['@astrojs/preact/server.js'],
+					},
+				};
 
-	if (compat) {
-		viteConfig.optimizeDeps!.include!.push(
-			'preact/compat',
-			'preact/test-utils',
-			'preact/compat/jsx-runtime'
-		);
-		viteConfig.resolve = {
-			alias: [
-				{ find: 'react', replacement: 'preact/compat' },
-				{ find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
-				{ find: 'react-dom', replacement: 'preact/compat' },
-				{ find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' },
-			],
-			dedupe: ['preact/compat', 'preact'],
-		};
-		// noExternal React entrypoints to be bundled, resolved, and aliased by Vite
-		viteConfig.ssr = {
-			noExternal: ['react', 'react-dom', 'react-dom/test-utils', 'react/jsx-runtime'],
-		};
-	}
+				// If not compat, delete the plugin that does it
+				if(!compat) {
+					const pIndex = preactPlugin.findIndex(p => p.name == 'preact:config');
+					if (pIndex >= 0) {
+						preactPlugin.splice(pIndex, 1);
+					}
+				} else {
+					viteConfig.optimizeDeps!.include!.push(
+						'preact/compat',
+						'preact/test-utils',
+						'preact/compat/jsx-runtime',
+					);
+					viteConfig.resolve = {
+						alias: [
+							{ find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' },
+						],
+						dedupe: ['preact/compat', 'preact'],
+					};
+					// noExternal React entrypoints to be bundled, resolved, and aliased by Vite
+					viteConfig.ssr = {
+						noExternal: ['react', 'react-dom', 'react-dom/test-utils', 'react/jsx-runtime'],
+					};
+				}
 
-	return viteConfig;
-}
+				viteConfig.plugins = [preactPlugin];
 
-export default function ({ compat }: { compat?: boolean } = {}): AstroIntegration {
-	return {
-		name: '@astrojs/preact',
-		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig, command }) => {
-				const development = command === 'dev';
-				if (compat) addRenderer(getCompatRenderer(development));
-				addRenderer(getRenderer(development));
+				addRenderer(getRenderer(command === 'dev'));
 				updateConfig({
-					vite: getViteConfiguration(compat),
+					vite: viteConfig,
 				});
 			},
 		},
diff --git a/packages/integrations/preact/src/server.ts b/packages/integrations/preact/src/server.ts
index 6a2ceb612..b9d063b62 100644
--- a/packages/integrations/preact/src/server.ts
+++ b/packages/integrations/preact/src/server.ts
@@ -29,8 +29,8 @@ function check(this: RendererContext, Component: any, props: Record<string, any>
 
 			// There are edge cases (SolidJS) where Preact *might* render a string,
 			// but components would be <undefined></undefined>
-
-			return !/\<undefined\>/.test(html);
+			// It also might render an empty sting.
+			return html == '' ? false : !/\<undefined\>/.test(html);
 		} catch (err) {
 			return false;
 		}