Consolidate inline hydration scripts into one (#3244)

* Consolidate inline hydration scripts into one

* Adds changeset

* Update custom element test

* Provide a better name for tracking if we have added a hydration script

.changeset/eleven-toes-attack.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Consolidates hydration scripts into one

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

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

packages/astro/src/core/render/result.ts

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

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-root')) {
+ for (const root of doc.querySelectorAll('astro-island')) {
  const uid = root.getAttribute('uid');
- const current = document.querySelector(`astro-root[uid="${uid}"]`);
+ const current = document.querySelector(`astro-island[uid="${uid}"]`);
  if (current) {
  root.innerHTML = current?.innerHTML;
  }

packages/astro/src/runtime/client/idle.ts

@@ -5,22 +5,17 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * (or after a short delay, if `requestIdleCallback`) isn't supported
  */
 export default async function onIdle(
- astroId: string,
+ root: HTMLElement,
  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 = roots[0].querySelector(`astro-fragment`);
- if (fragment == null && roots[0].hasAttribute('tmpl')) {
+ let fragment = root.querySelector(`astro-fragment`);
+ if (fragment == null && root.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 = roots[0].querySelector(`template[data-astro-template]`);
+ let template = root.querySelector(`template[data-astro-template]`);
  if (template) {
  innerHTML = template.innerHTML;
  template.remove();
@@ -29,10 +24,7 @@ export default async function onIdle(
  innerHTML = fragment.innerHTML;
  }
  const hydrate = await getHydrateCallback();
-
- for (const root of roots) {
- hydrate(root, innerHTML);
- }
+ hydrate(root, innerHTML);
  };
 
  if ('requestIdleCallback' in window) {

packages/astro/src/runtime/client/load.ts

@@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * Hydrate this component immediately
  */
 export default async function onLoad(
- astroId: string,
+ root: HTMLElement,
  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 = roots[0].querySelector(`astro-fragment`);
- if (fragment == null && roots[0].hasAttribute('tmpl')) {
+ let fragment = root.querySelector(`astro-fragment`);
+ if (fragment == null && root.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 = roots[0].querySelector(`template[data-astro-template]`);
+ let template = root.querySelector(`template[data-astro-template]`);
  if (template) {
  innerHTML = template.innerHTML;
  template.remove();
@@ -27,10 +22,7 @@ export default async function onLoad(
  innerHTML = fragment.innerHTML;
  }
 
- //const innerHTML = roots[0].querySelector(`astro-fragment`)?.innerHTML ?? null;
+ //const innerHTML = root.querySelector(`astro-fragment`)?.innerHTML ?? null;
  const hydrate = await getHydrateCallback();
-
- for (const root of roots) {
- hydrate(root, innerHTML);
- }
+ hydrate(root, innerHTML);
 }

packages/astro/src/runtime/client/media.ts

@@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * Hydrate this component when a matching media query is found
  */
 export default async function onMedia(
- astroId: string,
+ root: HTMLElement,
  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 = roots[0].querySelector(`astro-fragment`);
- if (fragment == null && roots[0].hasAttribute('tmpl')) {
+ let fragment = root.querySelector(`astro-fragment`);
+ if (fragment == null && root.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 = roots[0].querySelector(`template[data-astro-template]`);
+ let template = root.querySelector(`template[data-astro-template]`);
  if (template) {
  innerHTML = template.innerHTML;
  template.remove();
@@ -29,9 +24,7 @@ export default async function onMedia(
 
  const cb = async () => {
  const hydrate = await getHydrateCallback();
- for (const root of roots) {
- hydrate(root, innerHTML);
- }
+ hydrate(root, innerHTML);
  };
 
  if (options.value) {

packages/astro/src/runtime/client/only.ts

@@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
  * Hydrate this component immediately
  */
 export default async function onLoad(
- astroId: string,
+ root: HTMLElement,
  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 = roots[0].querySelector(`astro-fragment`);
- if (fragment == null && roots[0].hasAttribute('tmpl')) {
+ let fragment = root.querySelector(`astro-fragment`);
+ if (fragment == null && root.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 = roots[0].querySelector(`template[data-astro-template]`);
+ let template = root.querySelector(`template[data-astro-template]`);
  if (template) {
  innerHTML = template.innerHTML;
  template.remove();
@@ -27,8 +22,5 @@ export default async function onLoad(
  innerHTML = fragment.innerHTML;
  }
  const hydrate = await getHydrateCallback();
-
- for (const root of roots) {
- hydrate(root, innerHTML);
- }
+ hydrate(root, innerHTML);
 }

packages/astro/src/runtime/client/visible.ts

@@ -2,25 +2,20 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
 
 /**
  * Hydrate this component when one of it's children becomes visible.
- * We target the children because `astro-root` is set to `display: contents`
+ * We target the children because `astro-island` is set to `display: contents`
  * which doesn't work with IntersectionObserver
  */
 export default async function onVisible(
- astroId: string,
+ root: HTMLElement,
  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 = roots[0].querySelector(`astro-fragment`);
- if (fragment == null && roots[0].hasAttribute('tmpl')) {
+ let fragment = root.querySelector(`astro-fragment`);
+ if (fragment == null && root.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 = roots[0].querySelector(`template[data-astro-template]`);
+ let template = root.querySelector(`template[data-astro-template]`);
  if (template) {
  innerHTML = template.innerHTML;
  template.remove();
@@ -31,25 +26,21 @@ export default async function onVisible(
 
  const cb = async () => {
  const hydrate = await getHydrateCallback();
- for (const root of roots) {
- hydrate(root, innerHTML);
- }
+ 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-root`
+ // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island`
  io.disconnect();
  cb();
  break; // break loop on first match
  }
  });
 
- for (const root of roots) {
- for (let i = 0; i < root.children.length; i++) {
- const child = root.children[i];
- io.observe(child);
- }
+ for (let i = 0; i < root.children.length; i++) {
+ const child = root.children[i];
+ io.observe(child);
  }
 }

packages/astro/src/runtime/server/astro-island.ts

@@ -0,0 +1,35 @@
+/*
+customElements.define('astro-island', class extends HTMLElement {
+ async connectedCallback(){
+ const [ { default: setup } ] = await Promise.all([
+ import(this.getAttribute('directive-url')),
+ import(this.getAttribute('before-hydration-url'))
+ ]);
+
+ const opts = JSON.parse(this.getAttribute('opts'));
+ setup(this, opts, async () => {
+ const propsStr = this.getAttribute('props');
+ const props = propsStr ? JSON.parse(propsStr) : {};
+ const rendererUrl = this.getAttribute('renderer-url');
+ const [
+ { default: Component },
+ { default: hydrate }
+ ] = await Promise.all([
+ import(this.getAttribute('component-url')),
+ rendererUrl ? import(rendererUrl) : () => () => {}
+ ]);
+
+ return (el, children) => hydrate(el)(Component, props, children);
+ });
+ }
+});
+*/
+
+/**
+ * This is a minified version of the above. If you modify the above you need to
+ * copy/paste it into a .js file and then run:
+ * > node_modules/.bin/terser --mangle --compress -- file.js
+ * 
+ * And copy/paste the result below
+ */
+export const islandScript = `customElements.define("astro-island",class extends HTMLElement{async connectedCallback(){const[{default:t}]=await Promise.all([import(this.getAttribute("directive-url")),import(this.getAttribute("before-hydration-url"))]);const e=JSON.parse(this.getAttribute("opts"));t(this,e,(async()=>{const t=this.getAttribute("props");const e=t?JSON.parse(t):{};const r=this.getAttribute("renderer-url");const[{default:s},{default:i}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]);return(t,r)=>i(t)(s,e,r)}))}});`;

packages/astro/src/runtime/server/hydration.ts

@@ -1,8 +1,10 @@
 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.
 // The value is any
 export function serializeProps(value: any) {
@@ -110,32 +112,29 @@ export async function generateHydrateScript(
  );
  }
 
- 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}
-});
-`,
+ const island: SSRElement = {
+ children: '',
+ props: {
+ // This is for HMR, probably can avoid it in prod
+ uid: astroId
+ }
  };
 
- return hydrationScript;
+ // 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;
 }