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>

1 files changed, 16 insertions, 28 deletions

diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index d7906fe4a..da008a670 100644
--- a/packages/integrations/react/src/index.ts
+++ b/packages/integrations/react/src/index.ts
@@ -1,5 +1,10 @@
 import type { AstroIntegration } from 'astro';
 import { version as ReactVersion } from 'react-dom';
+import react, {type Options as ViteReactPluginOptions} from '@vitejs/plugin-react';
+import { appendForwardSlash } from '@astrojs/internal-helpers/path';
+
+
+const FAST_REFRESH_PREAMBLE = react.preambleCode;
 
 function getRenderer() {
 	return {
@@ -10,33 +15,10 @@ function getRenderer() {
 		serverEntrypoint: ReactVersion.startsWith('18.')
 			? '@astrojs/react/server.js'
 			: '@astrojs/react/server-v17.js',
-		jsxImportSource: 'react',
-		jsxTransformOptions: async () => {
-			// @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(
-						{},
-						{
-							runtime: 'automatic',
-							// This option tells the JSX transform how to construct the "*/jsx-runtime" import.
-							// In React v17, we had to shim this due to an export map issue in React.
-							// In React v18, this issue was fixed and we can import "react/jsx-runtime" directly.
-							// See `./jsx-runtime.js` for more details.
-							importSource: ReactVersion.startsWith('18.') ? 'react' : '@astrojs/react',
-						}
-					),
-				],
-			};
-		},
 	};
 }
 
-function getViteConfiguration() {
+function getViteConfiguration({include, exclude}: Options = {}) {
 	return {
 		optimizeDeps: {
 			include: [
@@ -54,8 +36,9 @@ function getViteConfiguration() {
 					: '@astrojs/react/server-v17.js',
 			],
 		},
+		plugins: [react({include, exclude})],
 		resolve: {
-			dedupe: ['react', 'react-dom'],
+			dedupe: ['react', 'react-dom', 'react-dom/server'],
 		},
 		ssr: {
 			external: ReactVersion.startsWith('18.')
@@ -73,13 +56,18 @@ function getViteConfiguration() {
 	};
 }
 
-export default function (): AstroIntegration {
+export type Options =Pick<ViteReactPluginOptions, 'include' | 'exclude'>;
+export default function ({include, exclude}: Pick<ViteReactPluginOptions, 'include' | 'exclude'> = {}): AstroIntegration {
 	return {
 		name: '@astrojs/react',
 		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig }) => {
+			'astro:config:setup': ({ config, command, addRenderer, updateConfig, injectScript }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration() });
+				updateConfig({ vite: getViteConfiguration({include, exclude}) });
+				if (command === 'dev') {
+					const preamble = FAST_REFRESH_PREAMBLE.replace(`__BASE__`, appendForwardSlash(config.base))
+					injectScript('before-hydration', preamble);
+				}
 			},
 		},
 	};