Revert "Consolidate inline hydration scripts into one (withastro#3244)…

…" (withastro#3275)

* Revert "Consolidate inline hydration scripts into one (withastro#3244)"

This reverts commit 48a35e6.

* Fix types

* Adds changeset

src/@types/astro.ts

@@ -1002,7 +1002,6 @@ export interface SSRElement {
 export interface SSRMetadata {
 	renderers: SSRLoadedRenderer[];
 	pathname: string;
-	needsHydrationStyles: boolean;
 }
 
 export interface SSRResult {

src/core/render/result.ts

@@ -201,7 +201,6 @@ ${extra}`
 		_metadata: {
 			renderers,
 			pathname,
-			needsHydrationStyles: false,
 		},
 	};
 

src/runtime/client/hmr.ts

@@ -7,9 +7,9 @@ if (import.meta.hot) {
 		const doc = parser.parseFromString(html, 'text/html');
 
 		// Match incoming islands to current state
-		for (const root of doc.querySelectorAll('astro-island')) {
+		for (const root of doc.querySelectorAll('astro-root')) {
 			const uid = root.getAttribute('uid');
-			const current = document.querySelector(`astro-island[uid="${uid}"]`);
+			const current = document.querySelector(`astro-root[uid="${uid}"]`);
 			if (current) {
 				root.innerHTML = current?.innerHTML;
 			}

src/runtime/client/idle.ts

@@ -5,17 +5,22 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * (or after a short delay, if `requestIdleCallback`) isn't supported
  */
 export default async function onIdle(
-	root: HTMLElement,
+	astroId: string,
 	options: HydrateOptions,
 	getHydrateCallback: GetHydrateCallback
 ) {
 	const cb = async () => {
+		const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
+		if (roots.length === 0) {
+			throw new Error(`Unable to find the root for the component ${options.name}`);
+		}
+
 		let innerHTML: string | null = null;
-		let fragment = root.querySelector(`astro-fragment`);
-		if (fragment == null && root.hasAttribute('tmpl')) {
+		let fragment = roots[0].querySelector(`astro-fragment`);
+		if (fragment == null && roots[0].hasAttribute('tmpl')) {
 			// If there is no child fragment, check to see if there is a template.
 			// This happens if children were passed but the client component did not render any.
-			let template = root.querySelector(`template[data-astro-template]`);
+			let template = roots[0].querySelector(`template[data-astro-template]`);
 			if (template) {
 				innerHTML = template.innerHTML;
 				template.remove();
@@ -24,7 +29,10 @@ export default async function onIdle(
 			innerHTML = fragment.innerHTML;
 		}
 		const hydrate = await getHydrateCallback();
-		hydrate(root, innerHTML);
+
+		for (const root of roots) {
+			hydrate(root, innerHTML);
+		}
 	};
 
 	if ('requestIdleCallback' in window) {

src/runtime/client/load.ts

@@ -4,16 +4,21 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * Hydrate this component immediately
  */
 export default async function onLoad(
-	root: HTMLElement,
+	astroId: string,
 	options: HydrateOptions,
 	getHydrateCallback: GetHydrateCallback
 ) {
+	const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
+	if (roots.length === 0) {
+		throw new Error(`Unable to find the root for the component ${options.name}`);
+	}
+
 	let innerHTML: string | null = null;
-	let fragment = root.querySelector(`astro-fragment`);
-	if (fragment == null && root.hasAttribute('tmpl')) {
+	let fragment = roots[0].querySelector(`astro-fragment`);
+	if (fragment == null && roots[0].hasAttribute('tmpl')) {
 		// If there is no child fragment, check to see if there is a template.
 		// This happens if children were passed but the client component did not render any.
-		let template = root.querySelector(`template[data-astro-template]`);
+		let template = roots[0].querySelector(`template[data-astro-template]`);
 		if (template) {
 			innerHTML = template.innerHTML;
 			template.remove();
@@ -22,7 +27,10 @@ export default async function onLoad(
 		innerHTML = fragment.innerHTML;
 	}
 
-	//const innerHTML = root.querySelector(`astro-fragment`)?.innerHTML ?? null;
+	//const innerHTML = roots[0].querySelector(`astro-fragment`)?.innerHTML ?? null;
 	const hydrate = await getHydrateCallback();
-	hydrate(root, innerHTML);
+
+	for (const root of roots) {
+		hydrate(root, innerHTML);
+	}
 }

src/runtime/client/media.ts

@@ -4,16 +4,21 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * Hydrate this component when a matching media query is found
  */
 export default async function onMedia(
-	root: HTMLElement,
+	astroId: string,
 	options: HydrateOptions,
 	getHydrateCallback: GetHydrateCallback
 ) {
+	const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
+	if (roots.length === 0) {
+		throw new Error(`Unable to find the root for the component ${options.name}`);
+	}
+
 	let innerHTML: string | null = null;
-	let fragment = root.querySelector(`astro-fragment`);
-	if (fragment == null && root.hasAttribute('tmpl')) {
+	let fragment = roots[0].querySelector(`astro-fragment`);
+	if (fragment == null && roots[0].hasAttribute('tmpl')) {
 		// If there is no child fragment, check to see if there is a template.
 		// This happens if children were passed but the client component did not render any.
-		let template = root.querySelector(`template[data-astro-template]`);
+		let template = roots[0].querySelector(`template[data-astro-template]`);
 		if (template) {
 			innerHTML = template.innerHTML;
 			template.remove();
@@ -24,7 +29,9 @@ export default async function onMedia(
 
 	const cb = async () => {
 		const hydrate = await getHydrateCallback();
-		hydrate(root, innerHTML);
+		for (const root of roots) {
+			hydrate(root, innerHTML);
+		}
 	};
 
 	if (options.value) {

src/runtime/client/only.ts

@@ -4,16 +4,21 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * Hydrate this component immediately
  */
 export default async function onLoad(
-	root: HTMLElement,
+	astroId: string,
 	options: HydrateOptions,
 	getHydrateCallback: GetHydrateCallback
 ) {
+	const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
+	if (roots.length === 0) {
+		throw new Error(`Unable to find the root for the component ${options.name}`);
+	}
+
 	let innerHTML: string | null = null;
-	let fragment = root.querySelector(`astro-fragment`);
-	if (fragment == null && root.hasAttribute('tmpl')) {
+	let fragment = roots[0].querySelector(`astro-fragment`);
+	if (fragment == null && roots[0].hasAttribute('tmpl')) {
 		// If there is no child fragment, check to see if there is a template.
 		// This happens if children were passed but the client component did not render any.
-		let template = root.querySelector(`template[data-astro-template]`);
+		let template = roots[0].querySelector(`template[data-astro-template]`);
 		if (template) {
 			innerHTML = template.innerHTML;
 			template.remove();
@@ -22,5 +27,8 @@ export default async function onLoad(
 		innerHTML = fragment.innerHTML;
 	}
 	const hydrate = await getHydrateCallback();
-	hydrate(root, innerHTML);
+
+	for (const root of roots) {
+		hydrate(root, innerHTML);
+	}
 }

src/runtime/client/visible.ts

@@ -2,20 +2,25 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
 
 /**
  * Hydrate this component when one of it's children becomes visible.
- * We target the children because `astro-island` is set to `display: contents`
+ * We target the children because `astro-root` is set to `display: contents`
  * which doesn't work with IntersectionObserver
  */
 export default async function onVisible(
-	root: HTMLElement,
+	astroId: string,
 	options: HydrateOptions,
 	getHydrateCallback: GetHydrateCallback
 ) {
+	const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
+	if (roots.length === 0) {
+		throw new Error(`Unable to find the root for the component ${options.name}`);
+	}
+
 	let innerHTML: string | null = null;
-	let fragment = root.querySelector(`astro-fragment`);
-	if (fragment == null && root.hasAttribute('tmpl')) {
+	let fragment = roots[0].querySelector(`astro-fragment`);
+	if (fragment == null && roots[0].hasAttribute('tmpl')) {
 		// If there is no child fragment, check to see if there is a template.
 		// This happens if children were passed but the client component did not render any.
-		let template = root.querySelector(`template[data-astro-template]`);
+		let template = roots[0].querySelector(`template[data-astro-template]`);
 		if (template) {
 			innerHTML = template.innerHTML;
 			template.remove();
@@ -26,21 +31,25 @@ export default async function onVisible(
 
 	const cb = async () => {
 		const hydrate = await getHydrateCallback();
-		hydrate(root, innerHTML);
+		for (const root of roots) {
+			hydrate(root, innerHTML);
+		}
 	};
 
 	const io = new IntersectionObserver((entries) => {
 		for (const entry of entries) {
 			if (!entry.isIntersecting) continue;
-			// As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island`
+			// As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root`
 			io.disconnect();
 			cb();
 			break; // break loop on first match
 		}
 	});
 
-	for (let i = 0; i < root.children.length; i++) {
-		const child = root.children[i];
-		io.observe(child);
+	for (const root of roots) {
+		for (let i = 0; i < root.children.length; i++) {
+			const child = root.children[i];
+			io.observe(child);
+		}
 	}
 }

src/runtime/server/hydration.ts

@@ -1,7 +1,6 @@
 import type { AstroComponentMetadata, SSRLoadedRenderer } from '../../@types/astro';
 import type { SSRElement, SSRResult } from '../../@types/astro';
 import { hydrationSpecifier, serializeListValue } from './util.js';
-import { escapeHTML } from './escape.js';
 import serializeJavaScript from 'serialize-javascript';
 
 // Serializes props passed into a component so that they can be reused during hydration.
@@ -111,31 +110,32 @@ export async function generateHydrateScript(
 		);
 	}
 
-	const island: SSRElement = {
-		children: '',
-		props: {
-			// This is for HMR, probably can avoid it in prod
-			uid: astroId,
-		},
+	let hydrationSource = ``;
+
+	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);
+`
+		: `await import("${await result.resolve(componentUrl)}");
+  return () => {};
+`;
+	// TODO: If we can figure out tree-shaking in the final SSR build, we could safely
+	// use BEFORE_HYDRATION_SCRIPT_ID instead of 'astro:scripts/before-hydration.js'.
+	const hydrationScript = {
+		props: { type: 'module', 'data-astro-component-hydration': true },
+		children: `import setup from '${await result.resolve(hydrationSpecifier(hydrate))}';
+${`import '${await result.resolve('astro:scripts/before-hydration.js')}';`}
+setup("${astroId}", {name:"${metadata.displayName}",${
+			metadata.hydrateArgs ? `value: ${JSON.stringify(metadata.hydrateArgs)}` : ''
+		}}, async () => {
+  ${hydrationSource}
+});
+`,
 	};
 
-	// Add component url
-	island.props['component-url'] = await result.resolve(componentUrl);
-
-	// Add renderer url
-	if (renderer.clientEntrypoint) {
-		island.props['renderer-url'] = await result.resolve(renderer.clientEntrypoint);
-		island.props['props'] = escapeHTML(serializeProps(props));
-	}
-
-	island.props['directive-url'] = await result.resolve(hydrationSpecifier(hydrate));
-	island.props['before-hydration-url'] = await result.resolve('astro:scripts/before-hydration.js');
-	island.props['opts'] = escapeHTML(
-		JSON.stringify({
-			name: metadata.displayName,
-			value: metadata.hydrateArgs || '',
-		})
-	);
-
-	return island;
+	return hydrationScript;
 }