9 files changed, 554 insertions, 0 deletions
diff --git a/packages/integrations/react/src/client-v17.ts b/packages/integrations/react/src/client-v17.ts
new file mode 100644
index 000000000..4ba4bcf60
--- /dev/null
+++ b/packages/integrations/react/src/client-v17.ts
@@ -0,0 +1,27 @@
+import { createElement } from 'react';
+import { hydrate, render, unmountComponentAtNode } from 'react-dom';
+import StaticHtml from './static-html.js';
+
+export default (element: HTMLElement) =>
+	(
+		Component: any,
+		props: Record<string, any>,
+		{ default: children, ...slotted }: Record<string, any>,
+		{ client }: Record<string, string>,
+	) => {
+		for (const [key, value] of Object.entries(slotted)) {
+			props[key] = createElement(StaticHtml, { value, name: key });
+		}
+		const componentEl = createElement(
+			Component,
+			props,
+			children != null ? createElement(StaticHtml, { value: children }) : children,
+		);
+
+		const isHydrate = client !== 'only';
+		const bootstrap = isHydrate ? hydrate : render;
+		bootstrap(componentEl, element);
+		element.addEventListener('astro:unmount', () => unmountComponentAtNode(element), {
+			once: true,
+		});
+	};
diff --git a/packages/integrations/react/src/client.ts b/packages/integrations/react/src/client.ts
new file mode 100644
index 000000000..ea187a1a1
--- /dev/null
+++ b/packages/integrations/react/src/client.ts
@@ -0,0 +1,121 @@
+import { createElement, startTransition } from 'react';
+import { type Root, createRoot, hydrateRoot } from 'react-dom/client';
+import StaticHtml from './static-html.js';
+
+function isAlreadyHydrated(element: HTMLElement) {
+	for (const key in element) {
+		if (key.startsWith('__reactContainer')) {
+			return key as keyof HTMLElement;
+		}
+	}
+}
+
+function createReactElementFromDOMElement(element: any): any {
+	let attrs: Record<string, string> = {};
+	for (const attr of element.attributes) {
+		attrs[attr.name] = attr.value;
+	}
+	// If the element has no children, we can create a simple React element
+	if (element.firstChild === null) {
+		return createElement(element.localName, attrs);
+	}
+
+	return createElement(
+		element.localName,
+		attrs,
+		Array.from(element.childNodes)
+			.map((c: any) => {
+				if (c.nodeType === Node.TEXT_NODE) {
+					return c.data;
+				} else if (c.nodeType === Node.ELEMENT_NODE) {
+					return createReactElementFromDOMElement(c);
+				} else {
+					return undefined;
+				}
+			})
+			.filter((a) => !!a),
+	);
+}
+
+function getChildren(childString: string, experimentalReactChildren: boolean) {
+	if (experimentalReactChildren && childString) {
+		let children = [];
+		let template = document.createElement('template');
+		template.innerHTML = childString;
+		for (let child of template.content.children) {
+			children.push(createReactElementFromDOMElement(child));
+		}
+		return children;
+	} else if (childString) {
+		return createElement(StaticHtml, { value: childString });
+	} else {
+		return undefined;
+	}
+}
+
+// Keep a map of roots so we can reuse them on re-renders
+let rootMap = new WeakMap<HTMLElement, Root>();
+const getOrCreateRoot = (element: HTMLElement, creator: () => Root) => {
+	let root = rootMap.get(element);
+	if (!root) {
+		root = creator();
+		rootMap.set(element, root);
+	}
+	return root;
+};
+
+export default (element: HTMLElement) =>
+	(
+		Component: any,
+		props: Record<string, any>,
+		{ default: children, ...slotted }: Record<string, any>,
+		{ client }: Record<string, string>,
+	) => {
+		if (!element.hasAttribute('ssr')) return;
+
+		const actionKey = element.getAttribute('data-action-key');
+		const actionName = element.getAttribute('data-action-name');
+		const stringifiedActionResult = element.getAttribute('data-action-result');
+
+		const formState =
+			actionKey && actionName && stringifiedActionResult
+				? [JSON.parse(stringifiedActionResult), actionKey, actionName]
+				: undefined;
+
+		const renderOptions = {
+			identifierPrefix: element.getAttribute('prefix'),
+			formState,
+		};
+		for (const [key, value] of Object.entries(slotted)) {
+			props[key] = createElement(StaticHtml, { value, name: key });
+		}
+
+		const componentEl = createElement(
+			Component,
+			props,
+			getChildren(children, element.hasAttribute('data-react-children')),
+		);
+		const rootKey = isAlreadyHydrated(element);
+		// HACK: delete internal react marker for nested components to suppress aggressive warnings
+		if (rootKey) {
+			delete element[rootKey];
+		}
+		if (client === 'only') {
+			return startTransition(() => {
+				const root = getOrCreateRoot(element, () => {
+					const r = createRoot(element);
+					element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
+					return r;
+				});
+				root.render(componentEl);
+			});
+		}
+		startTransition(() => {
+			const root = getOrCreateRoot(element, () => {
+				const r = hydrateRoot(element, componentEl, renderOptions as any);
+				element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
+				return r;
+			});
+			root.render(componentEl);
+		});
+	};
diff --git a/packages/integrations/react/src/context.ts b/packages/integrations/react/src/context.ts
new file mode 100644
index 000000000..953c35c6a
--- /dev/null
+++ b/packages/integrations/react/src/context.ts
@@ -0,0 +1,26 @@
+import type { SSRResult } from 'astro';
+
+const contexts = new WeakMap<SSRResult, { currentIndex: number; readonly id: string }>();
+
+const ID_PREFIX = 'r';
+
+function getContext(rendererContextResult: SSRResult) {
+	if (contexts.has(rendererContextResult)) {
+		return contexts.get(rendererContextResult);
+	}
+	const ctx = {
+		currentIndex: 0,
+		get id() {
+			return ID_PREFIX + this.currentIndex.toString();
+		},
+	};
+	contexts.set(rendererContextResult, ctx);
+	return ctx;
+}
+
+export function incrementId(rendererContextResult: SSRResult) {
+	const ctx = getContext(rendererContextResult)!;
+	const id = ctx.id;
+	ctx.currentIndex++;
+	return id;
+}
diff --git a/packages/integrations/react/src/jsx-runtime.ts b/packages/integrations/react/src/jsx-runtime.ts
new file mode 100644
index 000000000..3f0e51c65
--- /dev/null
+++ b/packages/integrations/react/src/jsx-runtime.ts
@@ -0,0 +1,8 @@
+// This module is a simple wrapper around react/jsx-runtime so that
+// it can run in Node ESM. 'react' doesn't declare this module as an export map
+// So we have to use the .js. The .js is not added via the babel automatic JSX transform
+// hence this module as a workaround.
+import jsxr from 'react/jsx-runtime';
+const { jsx, jsxs, Fragment } = jsxr;
+
+export { jsx, jsxs, Fragment };
diff --git a/packages/integrations/react/src/server-v17.ts b/packages/integrations/react/src/server-v17.ts
new file mode 100644
index 000000000..a91b6e6d5
--- /dev/null
+++ b/packages/integrations/react/src/server-v17.ts
@@ -0,0 +1,79 @@
+import type { AstroComponentMetadata } from 'astro';
+import React from 'react';
+import ReactDOM from 'react-dom/server';
+import StaticHtml from './static-html.js';
+
+const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+const reactTypeof = Symbol.for('react.element');
+
+function check(Component: any, props: Record<string, any>, children: any) {
+	// Note: there are packages that do some unholy things to create "components".
+	// Checking the $$typeof property catches most of these patterns.
+	if (typeof Component === 'object') {
+		return Component['$$typeof']?.toString().slice('Symbol('.length).startsWith('react');
+	}
+	if (typeof Component !== 'function') return false;
+	if (Component.name === 'QwikComponent') return false;
+
+	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
+		return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);
+	}
+
+	let isReactComponent = false;
+	function Tester(...args: Array<any>) {
+		try {
+			const vnode = Component(...args);
+			if (vnode && vnode['$$typeof'] === reactTypeof) {
+				isReactComponent = true;
+			}
+		} catch {}
+
+		return React.createElement('div');
+	}
+
+	renderToStaticMarkup(Tester, props, children, {} as any);
+
+	return isReactComponent;
+}
+
+function renderToStaticMarkup(
+	Component: any,
+	props: Record<string, any>,
+	{ default: children, ...slotted }: Record<string, any>,
+	metadata: AstroComponentMetadata,
+) {
+	delete props['class'];
+	const slots: Record<string, any> = {};
+	for (const [key, value] of Object.entries(slotted)) {
+		const name = slotName(key);
+		slots[name] = React.createElement(StaticHtml, { value, name });
+	}
+	// Note: create newProps to avoid mutating `props` before they are serialized
+	const newProps = {
+		...props,
+		...slots,
+	};
+	const newChildren = children ?? props.children;
+	if (newChildren != null) {
+		newProps.children = React.createElement(StaticHtml, {
+			// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+			hydrate: metadata.astroStaticSlot ? !!metadata.hydrate : true,
+			value: newChildren,
+		});
+	}
+	const vnode = React.createElement(Component, newProps);
+	let html;
+	if (metadata?.hydrate) {
+		html = ReactDOM.renderToString(vnode);
+	} else {
+		html = ReactDOM.renderToStaticMarkup(vnode);
+	}
+	return { html };
+}
+
+export default {
+	name: '@astrojs/react',
+	check,
+	renderToStaticMarkup,
+	supportsAstroStaticSlot: true,
+};
diff --git a/packages/integrations/react/src/server.ts b/packages/integrations/react/src/server.ts
new file mode 100644
index 000000000..5581a95db
--- /dev/null
+++ b/packages/integrations/react/src/server.ts
@@ -0,0 +1,227 @@
+import opts from 'astro:react:opts';
+import type { AstroComponentMetadata } from 'astro';
+import React from 'react';
+import ReactDOM from 'react-dom/server';
+import { incrementId } from './context.js';
+import StaticHtml from './static-html.js';
+import type { RendererContext } from './types.js';
+
+const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
+const reactTypeof = Symbol.for('react.element');
+const reactTransitionalTypeof = Symbol.for('react.transitional.element');
+
+async function check(
+	this: RendererContext,
+	Component: any,
+	props: Record<string, any>,
+	children: any,
+) {
+	// Note: there are packages that do some unholy things to create "components".
+	// Checking the $$typeof property catches most of these patterns.
+	if (typeof Component === 'object') {
+		return Component['$$typeof'].toString().slice('Symbol('.length).startsWith('react');
+	}
+	if (typeof Component !== 'function') return false;
+	if (Component.name === 'QwikComponent') return false;
+
+	// Preact forwarded-ref components can be functions, which React does not support
+	if (typeof Component === 'function' && Component['$$typeof'] === Symbol.for('react.forward_ref'))
+		return false;
+
+	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
+		return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);
+	}
+
+	let isReactComponent = false;
+	function Tester(...args: Array<any>) {
+		try {
+			const vnode = Component(...args);
+			if (
+				vnode &&
+				(vnode['$$typeof'] === reactTypeof || vnode['$$typeof'] === reactTransitionalTypeof)
+			) {
+				isReactComponent = true;
+			}
+		} catch {}
+
+		return React.createElement('div');
+	}
+
+	await renderToStaticMarkup.call(this, Tester, props, children, {} as any);
+
+	return isReactComponent;
+}
+
+async function getNodeWritable(): Promise<typeof import('node:stream').Writable> {
+	let nodeStreamBuiltinModuleName = 'node:stream';
+	let { Writable } = await import(/* @vite-ignore */ nodeStreamBuiltinModuleName);
+	return Writable;
+}
+
+function needsHydration(metadata: AstroComponentMetadata) {
+	// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+	return metadata.astroStaticSlot ? !!metadata.hydrate : true;
+}
+
+async function renderToStaticMarkup(
+	this: RendererContext,
+	Component: any,
+	props: Record<string, any>,
+	{ default: children, ...slotted }: Record<string, any>,
+	metadata: AstroComponentMetadata,
+) {
+	let prefix;
+	if (this && this.result) {
+		prefix = incrementId(this.result);
+	}
+	const attrs: Record<string, any> = { prefix };
+
+	delete props['class'];
+	const slots: Record<string, any> = {};
+	for (const [key, value] of Object.entries(slotted)) {
+		const name = slotName(key);
+		slots[name] = React.createElement(StaticHtml, {
+			hydrate: needsHydration(metadata),
+			value,
+			name,
+		});
+	}
+	// Note: create newProps to avoid mutating `props` before they are serialized
+	const newProps = {
+		...props,
+		...slots,
+	};
+	const newChildren = children ?? props.children;
+	if (children && opts.experimentalReactChildren) {
+		attrs['data-react-children'] = true;
+		const convert = await import('./vnode-children.js').then((mod) => mod.default);
+		newProps.children = convert(children);
+	} else if (newChildren != null) {
+		newProps.children = React.createElement(StaticHtml, {
+			hydrate: needsHydration(metadata),
+			value: newChildren,
+		});
+	}
+	const formState = this ? await getFormState(this) : undefined;
+	if (formState) {
+		attrs['data-action-result'] = JSON.stringify(formState[0]);
+		attrs['data-action-key'] = formState[1];
+		attrs['data-action-name'] = formState[2];
+	}
+	const vnode = React.createElement(Component, newProps);
+	const renderOptions = {
+		identifierPrefix: prefix,
+		formState,
+	};
+	let html;
+	if (opts.experimentalDisableStreaming) {
+		html = ReactDOM.renderToString(vnode);
+	} else if ('renderToReadableStream' in ReactDOM) {
+		html = await renderToReadableStreamAsync(vnode, renderOptions);
+	} else {
+		html = await renderToPipeableStreamAsync(vnode, renderOptions);
+	}
+	return { html, attrs };
+}
+
+async function getFormState({
+	result,
+}: RendererContext): Promise<
+	[actionResult: any, actionKey: string, actionName: string] | undefined
+> {
+	const { request, actionResult } = result;
+
+	if (!actionResult) return undefined;
+	if (!isFormRequest(request.headers.get('content-type'))) return undefined;
+
+	const { searchParams } = new URL(request.url);
+	const formData = await request.clone().formData();
+	/**
+	 * The key generated by React to identify each `useActionState()` call.
+	 * @example "k511f74df5a35d32e7cf266450d85cb6c"
+	 */
+	const actionKey = formData.get('$ACTION_KEY')?.toString();
+	/**
+	 * The action name returned by an action's `toString()` property.
+	 * This matches the endpoint path.
+	 * @example "/_actions/blog.like"
+	 */
+	const actionName = searchParams.get('_action');
+
+	if (!actionKey || !actionName) return undefined;
+
+	return [actionResult, actionKey, actionName];
+}
+
+async function renderToPipeableStreamAsync(vnode: any, options: Record<string, any>) {
+	const Writable = await getNodeWritable();
+	let html = '';
+	return new Promise((resolve, reject) => {
+		let error = undefined;
+		let stream = ReactDOM.renderToPipeableStream(vnode, {
+			...options,
+			onError(err) {
+				error = err;
+				reject(error);
+			},
+			onAllReady() {
+				stream.pipe(
+					new Writable({
+						write(chunk, _encoding, callback) {
+							html += chunk.toString('utf-8');
+							callback();
+						},
+						destroy() {
+							resolve(html);
+						},
+					}),
+				);
+			},
+		});
+	});
+}
+
+/**
+ * Use a while loop instead of "for await" due to cloudflare and Vercel Edge issues
+ * See https://github.com/facebook/react/issues/24169
+ */
+async function readResult(stream: ReactDOM.ReactDOMServerReadableStream) {
+	const reader = stream.getReader();
+	let result = '';
+	const decoder = new TextDecoder('utf-8');
+	while (true) {
+		const { done, value } = await reader.read();
+		if (done) {
+			if (value) {
+				result += decoder.decode(value);
+			} else {
+				// This closes the decoder
+				decoder.decode(new Uint8Array());
+			}
+
+			return result;
+		}
+		result += decoder.decode(value, { stream: true });
+	}
+}
+
+async function renderToReadableStreamAsync(vnode: any, options: Record<string, any>) {
+	return await readResult(await ReactDOM.renderToReadableStream(vnode, options));
+}
+
+const formContentTypes = ['application/x-www-form-urlencoded', 'multipart/form-data'];
+
+function isFormRequest(contentType: string | null) {
+	// Split off parameters like charset or boundary
+	// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type#content-type_in_html_forms
+	const type = contentType?.split(';')[0].toLowerCase();
+
+	return formContentTypes.some((t) => type === t);
+}
+
+export default {
+	name: '@astrojs/react',
+	check,
+	renderToStaticMarkup,
+	supportsAstroStaticSlot: true,
+};
diff --git a/packages/integrations/react/src/static-html.ts b/packages/integrations/react/src/static-html.ts
new file mode 100644
index 000000000..010896196
--- /dev/null
+++ b/packages/integrations/react/src/static-html.ts
@@ -0,0 +1,33 @@
+import { createElement as h } from 'react';
+
+/**
+ * Astro passes `children` as a string of HTML, so we need
+ * a wrapper `div` to render that content as VNodes.
+ *
+ * As a bonus, we can signal to React that this subtree is
+ * entirely static and will never change via `shouldComponentUpdate`.
+ */
+const StaticHtml = ({
+	value,
+	name,
+	hydrate = true,
+}: { value: string | null; name?: string; hydrate?: boolean }) => {
+	if (!value) return null;
+	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
+	return h(tagName, {
+		name,
+		suppressHydrationWarning: true,
+		dangerouslySetInnerHTML: { __html: value },
+	});
+};
+
+/**
+ * This tells React to opt-out of re-rendering this subtree,
+ * In addition to being a performance optimization,
+ * this also allows other frameworks to attach to `children`.
+ *
+ * See https://preactjs.com/guide/v8/external-dom-mutations
+ */
+StaticHtml.shouldComponentUpdate = () => false;
+
+export default StaticHtml;
diff --git a/packages/integrations/react/src/types.ts b/packages/integrations/react/src/types.ts
new file mode 100644
index 000000000..5dff5b0b4
--- /dev/null
+++ b/packages/integrations/react/src/types.ts
@@ -0,0 +1,4 @@
+import type { SSRResult } from 'astro';
+export type RendererContext = {
+	result: SSRResult;
+};
diff --git a/packages/integrations/react/src/vnode-children.ts b/packages/integrations/react/src/vnode-children.ts
new file mode 100644
index 000000000..6aa9724c6
--- /dev/null
+++ b/packages/integrations/react/src/vnode-children.ts
@@ -0,0 +1,29 @@
+import { Fragment, createElement } from 'react';
+import { DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE, parse } from 'ultrahtml';
+
+let ids = 0;
+export default function convert(children: any) {
+	let doc = parse(children.toString().trim());
+	let id = ids++;
+	let key = 0;
+
+	function createReactElementFromNode(node: any) {
+		const childVnodes =
+			Array.isArray(node.children) && node.children.length
+				? node.children.map((child: any) => createReactElementFromNode(child)).filter(Boolean)
+				: undefined;
+
+		if (node.type === DOCUMENT_NODE) {
+			return createElement(Fragment, {}, childVnodes);
+		} else if (node.type === ELEMENT_NODE) {
+			const { class: className, ...props } = node.attributes;
+			return createElement(node.name, { ...props, className, key: `${id}-${key++}` }, childVnodes);
+		} else if (node.type === TEXT_NODE) {
+			// 0-length text gets omitted in JSX
+			return node.value.trim() ? node.value : undefined;
+		}
+	}
+
+	const root = createReactElementFromNode(doc);
+	return root.props.children;
+}