Improve nested and `client:only` hydration (#3455)

* wip: fix nested islands

* fix: improve hydration for dynamic content

* chore: fix bundle-size script for new files

* chore: allow-list client:* directive files

* fix(#3362): fix client:only behavior for React, Vue, Solid

* test: add client-only e2e test

* chore: update lockfile

* test: fix e2e tests

* test: add framework nesting e2e tests

* Update packages/astro/src/runtime/client/events.ts

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

* chore: add changeset

* fix(preact): ignore hydrate roots

* chore: remove `ssr` check in integrations

* Revert "chore: remove `ssr` check in integrations"

This reverts commit ba27eaae5514701f4b7bb6259f682fe82821a23d.

* chore: add changeset

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

1 files changed, 14 insertions, 0 deletions

diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index fc952522b..2828d2cbe 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -2,13 +2,27 @@ import { createElement } from 'react';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import StaticHtml from './static-html.js';
 
+function isAlreadyHydrated(element) {
+	for (const key in element) {
+		if (key.startsWith('__reactContainer')) {
+			return key;
+		}
+	}
+}
+
 export default (element) =>
 	(Component, props, children, { client }) => {
+		if (!element.hasAttribute('ssr')) return;
 		const componentEl = createElement(
 			Component,
 			props,
 			children != null ? createElement(StaticHtml, { value: children }) : children
 		);
+		const rootKey = isAlreadyHydrated(element);
+		// HACK: delete internal react marker for nested components to suppress agressive warnings
+		if (rootKey) {
+			delete element[rootKey];
+		}
 		if (client === 'only') {
 			return createRoot(element).render(componentEl);
 		}