Add experimentalReactChildren option to React integration (#8082)

* wip: support true react vnodes in renderer

* Add new experimentalReactChildren option to React integration

* Update the test

* Add docs

* Update packages/integrations/react/server.js

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

* Update with a better test

* Update .changeset/yellow-snakes-jam.md

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

* Update packages/integrations/react/README.md

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

* Update packages/integrations/react/README.md

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

---------

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 33 insertions, 3 deletions

diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index d7906fe4a..556062282 100644
--- a/packages/integrations/react/src/index.ts
+++ b/packages/integrations/react/src/index.ts
@@ -1,5 +1,6 @@
 import type { AstroIntegration } from 'astro';
 import { version as ReactVersion } from 'react-dom';
+import type * as vite from 'vite';
 
 function getRenderer() {
 	return {
@@ -36,7 +37,29 @@ function getRenderer() {
 	};
 }
 
-function getViteConfiguration() {
+function optionsPlugin(experimentalReactChildren: boolean): vite.Plugin {
+	const virtualModule = 'astro:react:opts';
+	const virtualModuleId = '\0' + virtualModule; 
+	return 			{
+		name: '@astrojs/react:opts',
+		resolveId(id) {
+			if(id === virtualModule) {
+				return virtualModuleId;
+			}
+		},
+		load(id) {
+			if(id === virtualModuleId) {
+				return {
+					code: `export default {
+						experimentalReactChildren: ${JSON.stringify(experimentalReactChildren)}
+					}`
+				};
+			}
+		}
+	};
+}
+
+function getViteConfiguration(experimentalReactChildren: boolean) {
 	return {
 		optimizeDeps: {
 			include: [
@@ -70,16 +93,23 @@ function getViteConfiguration() {
 				'use-immer',
 			],
 		},
+		plugins: [
+			optionsPlugin(experimentalReactChildren)
+		]
 	};
 }
 
-export default function (): AstroIntegration {
+export type ReactIntegrationOptions = {
+	experimentalReactChildren: boolean;
+}
+
+export default function ({ experimentalReactChildren }: ReactIntegrationOptions = { experimentalReactChildren: false }): AstroIntegration {
 	return {
 		name: '@astrojs/react',
 		hooks: {
 			'astro:config:setup': ({ addRenderer, updateConfig }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration() });
+				updateConfig({ vite: getViteConfiguration(experimentalReactChildren) });
 			},
 		},
 	};