1 files changed, 31 insertions, 35 deletions

diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index d1cd7c4e6..1cc200bc3 100644
--- a/packages/integrations/react/src/index.ts
+++ b/packages/integrations/react/src/index.ts
@@ -1,7 +1,15 @@
 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';
 import type * as vite from 'vite';
 
+export type ReactIntegrationOptions = Pick<ViteReactPluginOptions, 'include' | 'exclude'> & {
+	experimentalReactChildren?: boolean;
+};
+
+const FAST_REFRESH_PREAMBLE = react.preambleCode;
+
 function getRenderer() {
 	return {
 		name: '@astrojs/react',
@@ -11,29 +19,6 @@ 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',
-						}
-					),
-				],
-			};
-		},
 	};
 }
 
@@ -59,7 +44,11 @@ function optionsPlugin(experimentalReactChildren: boolean): vite.Plugin {
 	};
 }
 
-function getViteConfiguration(experimentalReactChildren: boolean) {
+function getViteConfiguration({
+	include,
+	exclude,
+	experimentalReactChildren,
+}: ReactIntegrationOptions = {}) {
 	return {
 		optimizeDeps: {
 			include: [
@@ -77,8 +66,9 @@ function getViteConfiguration(experimentalReactChildren: boolean) {
 					: '@astrojs/react/server-v17.js',
 			],
 		},
+		plugins: [react({ include, exclude }), optionsPlugin(!!experimentalReactChildren)],
 		resolve: {
-			dedupe: ['react', 'react-dom'],
+			dedupe: ['react', 'react-dom', 'react-dom/server'],
 		},
 		ssr: {
 			external: ReactVersion.startsWith('18.')
@@ -93,23 +83,29 @@ function getViteConfiguration(experimentalReactChildren: boolean) {
 				'use-immer',
 			],
 		},
-		plugins: [optionsPlugin(experimentalReactChildren)],
 	};
 }
 
-export type ReactIntegrationOptions = {
-	experimentalReactChildren: boolean;
-};
-
-export default function (
-	{ experimentalReactChildren }: ReactIntegrationOptions = { experimentalReactChildren: false }
-): AstroIntegration {
+export default function ({
+	include,
+	exclude,
+	experimentalReactChildren,
+}: ReactIntegrationOptions = {}): AstroIntegration {
 	return {
 		name: '@astrojs/react',
 		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig }) => {
+			'astro:config:setup': ({ config, command, addRenderer, updateConfig, injectScript }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration(experimentalReactChildren) });
+				updateConfig({
+					vite: getViteConfiguration({ include, exclude, experimentalReactChildren }),
+				});
+				if (command === 'dev') {
+					const preamble = FAST_REFRESH_PREAMBLE.replace(
+						`__BASE__`,
+						appendForwardSlash(config.base)
+					);
+					injectScript('before-hydration', preamble);
+				}
 			},
 		},
 	};