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

This reverts commit 48a35e6.

packages/astro/src/@types/astro.ts

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

packages/astro/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;
  }

packages/astro/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) {

packages/astro/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);
+ }
 }

packages/astro/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) {

packages/astro/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);
+ }
 }

packages/astro/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);
+ }
  }
 }

packages/astro/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;
 }