From 678c2b7523c7f10cfdf2eb5a73aa2bbb7e5cbc07 Mon Sep 17 00:00:00 2001
From: Ben Holmes <hey@bholmes.dev>
Date: Thu, 12 May 2022 10:05:55 -0600
Subject: [PATCH] Fix: React - Use "createRoot" instead of "hydrateRoot" for
 `client:only` (#3337)

* feat: pass "client" directive to clientEntrypoints

* refactor: remove hydration warning suppression react 17

* feat: remove hydration warning suppression react 18

* chore: changeset

* fix: change metadata to options bag
---
 .changeset/small-maps-cough.md                |  6 ++++++
 .../astro/src/runtime/server/hydration.ts     |  8 +++----
 packages/integrations/react/client-v17.js     | 21 +++++++++++--------
 packages/integrations/react/client.js         | 21 +++++++++++--------
 4 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/small-maps-cough.md

diff --git a/.changeset/small-maps-cough.md b/.changeset/small-maps-cough.md
new file mode 100644
index 000000000000..aadc443d29fc
--- /dev/null
+++ b/.changeset/small-maps-cough.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/react': patch
+---
+
+Fix: remove hydration failures on React v18 by exposing the "client" directive from Astro core.
diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts
index e7267fe16e3c..4d8ab48f0b68 100644
--- a/packages/astro/src/runtime/server/hydration.ts
+++ b/packages/astro/src/runtime/server/hydration.ts
@@ -110,15 +110,15 @@ export async function generateHydrateScript(
 		);
 	}
 
-	let hydrationSource = ``;
-
-	hydrationSource += renderer.clientEntrypoint
+	const hydrationSource = renderer.clientEntrypoint
 		? `const [{ ${
 				componentExport.value
 		  }: Component }, { default: hydrate }] = await Promise.all([import("${await result.resolve(
 				componentUrl
 		  )}"), import("${await result.resolve(renderer.clientEntrypoint)}")]);
-  return (el, children) => hydrate(el)(Component, ${serializeProps(props)}, children);
+  return (el, children) => hydrate(el)(Component, ${serializeProps(
+		props
+	)}, children, ${JSON.stringify({ client: hydrate })});
 `
 		: `await import("${await result.resolve(componentUrl)}");
   return () => {};
diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js
index 64284a0b0190..32ba875586cc 100644
--- a/packages/integrations/react/client-v17.js
+++ b/packages/integrations/react/client-v17.js
@@ -1,15 +1,18 @@
 import { createElement } from 'react';
-import { hydrate } from 'react-dom';
+import { render, hydrate } from 'react-dom';
 import StaticHtml from './static-html.js';
 
-export default (element) => (Component, props, children) =>
-	hydrate(
-		createElement(
+export default (element) => (Component, props, children, { client }) =>
+	{
+		const componentEl = createElement(
 			Component,
-			{ ...props, suppressHydrationWarning: true },
+			props,
 			children != null
-				? createElement(StaticHtml, { value: children, suppressHydrationWarning: true })
+				? createElement(StaticHtml, { value: children })
 				: children
-		),
-		element
-	);
+		);
+		if (client === 'only') {
+			return render(componentEl, element);
+		}
+		return hydrate(componentEl, element);
+	};
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index 7eba8984c4d8..0579f4a08d3c 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -1,15 +1,18 @@
 import { createElement } from 'react';
-import { hydrateRoot } from 'react-dom/client';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import StaticHtml from './static-html.js';
 
-export default (element) => (Component, props, children) =>
-	hydrateRoot(
-		element,
-		createElement(
+export default (element) => (Component, props, children, { client }) =>
+	{
+		const componentEl = createElement(
 			Component,
-			{ ...props, suppressHydrationWarning: true },
+			props,
 			children != null
-				? createElement(StaticHtml, { value: children, suppressHydrationWarning: true })
+				? createElement(StaticHtml, { value: children })
 				: children
-		)
-	);
+		);
+		if (client === 'only') {
+			return createRoot(element).render(componentEl);
+		}
+		return hydrateRoot(element, componentEl);
+	};