astro 2.4.4 → 2.5.0

package/dist/runtime/client/load.js

@@ -1,7 +1,8 @@
-(self.Astro = self.Astro || {}).load = (getHydrateCallback) => {
-  (async () => {
-    let hydrate = await getHydrateCallback();
-    await hydrate();
-  })();
+const loadDirective = async (load) => {
+  const hydrate = await load();
+  await hydrate();
+};
+var load_default = loadDirective;
+export {
+  load_default as default
 };
-window.dispatchEvent(new Event("astro:load"));

package/dist/runtime/client/load.prebuilt.d.ts

@@ -3,5 +3,5 @@
  * Do not edit this directly, but instead edit that file and rerun the prebuild
  * to generate this file.
  */
-declare const _default: "(self.Astro=self.Astro||{}).load=a=>{(async()=>await(await a())())()},window.dispatchEvent(new Event(\"astro:load\"));";
+declare const _default: "(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();";
 export default _default;

package/dist/runtime/client/load.prebuilt.js

@@ -1,4 +1,4 @@
-var load_prebuilt_default = `(self.Astro=self.Astro||{}).load=a=>{(async()=>await(await a())())()},window.dispatchEvent(new Event("astro:load"));`;
+var load_prebuilt_default = `(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();`;
 export {
   load_prebuilt_default as default
 };

package/dist/runtime/client/media.d.ts

@@ -0,0 +1,6 @@
+import type { ClientDirective } from '../../@types/astro';
+/**
+ * Hydrate this component when a matching media query is found
+ */
+declare const mediaDirective: ClientDirective;
+export default mediaDirective;

package/dist/runtime/client/media.js

@@ -1,6 +1,6 @@
-(self.Astro = self.Astro || {}).media = (getHydrateCallback, options) => {
+const mediaDirective = (load, options) => {
   const cb = async () => {
-    let hydrate = await getHydrateCallback();
+    const hydrate = await load();
     await hydrate();
   };
   if (options.value) {
@@ -12,4 +12,7 @@
     }
   }
 };
-window.dispatchEvent(new Event("astro:media"));
+var media_default = mediaDirective;
+export {
+  media_default as default
+};

package/dist/runtime/client/media.prebuilt.d.ts

@@ -3,5 +3,5 @@
  * Do not edit this directly, but instead edit that file and rerun the prebuild
  * to generate this file.
  */
-declare const _default: "(self.Astro=self.Astro||{}).media=(s,a)=>{const t=async()=>{await(await s())()};if(a.value){const e=matchMedia(a.value);e.matches?t():e.addEventListener(\"change\",t,{once:!0})}},window.dispatchEvent(new Event(\"astro:media\"));";
+declare const _default: "(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener(\"change\",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event(\"astro:media\"));})();";
 export default _default;

package/dist/runtime/client/media.prebuilt.js

@@ -1,4 +1,4 @@
-var media_prebuilt_default = `(self.Astro=self.Astro||{}).media=(s,a)=>{const t=async()=>{await(await s())()};if(a.value){const e=matchMedia(a.value);e.matches?t():e.addEventListener("change",t,{once:!0})}},window.dispatchEvent(new Event("astro:media"));`;
+var media_prebuilt_default = `(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener("change",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event("astro:media"));})();`;
 export {
   media_prebuilt_default as default
 };

package/dist/runtime/client/only.d.ts

@@ -0,0 +1,6 @@
+import type { ClientDirective } from '../../@types/astro';
+/**
+ * Hydrate this component only on the client
+ */
+declare const onlyDirective: ClientDirective;
+export default onlyDirective;

package/dist/runtime/client/only.js

@@ -1,7 +1,8 @@
-(self.Astro = self.Astro || {}).only = (getHydrateCallback) => {
-  (async () => {
-    let hydrate = await getHydrateCallback();
-    await hydrate();
-  })();
+const onlyDirective = async (load) => {
+  const hydrate = await load();
+  await hydrate();
+};
+var only_default = onlyDirective;
+export {
+  only_default as default
 };
-window.dispatchEvent(new Event("astro:only"));

package/dist/runtime/client/only.prebuilt.d.ts

@@ -3,5 +3,5 @@
  * Do not edit this directly, but instead edit that file and rerun the prebuild
  * to generate this file.
  */
-declare const _default: "(self.Astro=self.Astro||{}).only=t=>{(async()=>await(await t())())()},window.dispatchEvent(new Event(\"astro:only\"));";
+declare const _default: "(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();";
 export default _default;

package/dist/runtime/client/only.prebuilt.js

@@ -1,4 +1,4 @@
-var only_prebuilt_default = `(self.Astro=self.Astro||{}).only=t=>{(async()=>await(await t())())()},window.dispatchEvent(new Event("astro:only"));`;
+var only_prebuilt_default = `(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();`;
 export {
   only_prebuilt_default as default
 };

package/dist/runtime/client/visible.d.ts

@@ -0,0 +1,8 @@
+import type { ClientDirective } 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`
+ * which doesn't work with IntersectionObserver
+ */
+declare const visibleDirective: ClientDirective;
+export default visibleDirective;

package/dist/runtime/client/visible.js

@@ -1,9 +1,9 @@
-(self.Astro = self.Astro || {}).visible = (getHydrateCallback, _opts, root) => {
+const visibleDirective = (load, _options, el) => {
   const cb = async () => {
-    let hydrate = await getHydrateCallback();
+    const hydrate = await load();
     await hydrate();
   };
-  let io = new IntersectionObserver((entries) => {
+  const io = new IntersectionObserver((entries) => {
     for (const entry of entries) {
       if (!entry.isIntersecting)
         continue;
@@ -12,9 +12,12 @@
       break;
     }
   });
-  for (let i = 0; i < root.children.length; i++) {
-    const child = root.children[i];
+  for (let i = 0; i < el.children.length; i++) {
+    const child = el.children[i];
     io.observe(child);
   }
 };
-window.dispatchEvent(new Event("astro:visible"));
+var visible_default = visibleDirective;
+export {
+  visible_default as default
+};

package/dist/runtime/client/visible.prebuilt.d.ts

@@ -3,5 +3,5 @@
  * Do not edit this directly, but instead edit that file and rerun the prebuild
  * to generate this file.
  */
-declare const _default: "(self.Astro=self.Astro||{}).visible=(s,c,n)=>{const r=async()=>{await(await s())()};let i=new IntersectionObserver(e=>{for(const t of e)if(t.isIntersecting){i.disconnect(),r();break}});for(let e=0;e<n.children.length;e++){const t=n.children[e];i.observe(t)}},window.dispatchEvent(new Event(\"astro:visible\"));";
+declare const _default: "(()=>{var r=(s,c,i)=>{let o=async()=>{await(await s())()},n=new IntersectionObserver(e=>{for(let t of e)if(t.isIntersecting){n.disconnect(),o();break}});for(let e=0;e<i.children.length;e++){let t=i.children[e];n.observe(t)}};(self.Astro||(self.Astro={})).visible=r;window.dispatchEvent(new Event(\"astro:visible\"));})();";
 export default _default;

package/dist/runtime/client/visible.prebuilt.js

@@ -1,4 +1,4 @@
-var visible_prebuilt_default = `(self.Astro=self.Astro||{}).visible=(s,c,n)=>{const r=async()=>{await(await s())()};let i=new IntersectionObserver(e=>{for(const t of e)if(t.isIntersecting){i.disconnect(),r();break}});for(let e=0;e<n.children.length;e++){const t=n.children[e];i.observe(t)}},window.dispatchEvent(new Event("astro:visible"));`;
+var visible_prebuilt_default = `(()=>{var r=(s,c,i)=>{let o=async()=>{await(await s())()},n=new IntersectionObserver(e=>{for(let t of e)if(t.isIntersecting){n.disconnect(),o();break}});for(let e=0;e<i.children.length;e++){let t=i.children[e];n.observe(t)}};(self.Astro||(self.Astro={})).visible=r;window.dispatchEvent(new Event("astro:visible"));})();`;
 export {
   visible_prebuilt_default as default
 };

package/dist/runtime/server/astro-island.prebuilt.d.ts

@@ -3,5 +3,5 @@
  * Do not edit this directly, but instead edit that file and rerun the prebuild
  * to generate this file.
  */
-declare const _default: "var l;{const c={0:t=>t,1:t=>JSON.parse(t,o),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,o)),5:t=>new Set(JSON.parse(t,o)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(JSON.parse(t)),9:t=>new Uint16Array(JSON.parse(t)),10:t=>new Uint32Array(JSON.parse(t))},o=(t,s)=>{if(t===\"\"||!Array.isArray(s))return s;const[e,n]=s;return e in c?c[e](n):void 0};customElements.get(\"astro-island\")||customElements.define(\"astro-island\",(l=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement&&this.parentElement.closest(\"astro-island[ssr]\"))return;const s=this.querySelectorAll(\"astro-slot\"),e={},n=this.querySelectorAll(\"template[data-astro-template]\");for(const r of n){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute(\"data-astro-template\")||\"default\"]=r.innerHTML,r.remove())}for(const r of s){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute(\"name\")||\"default\"]=r.innerHTML)}const a=this.hasAttribute(\"props\")?JSON.parse(this.getAttribute(\"props\"),o):{};this.hydrator(this)(this.Component,a,e,{client:this.getAttribute(\"client\")}),this.removeAttribute(\"ssr\"),window.removeEventListener(\"astro:hydrate\",this.hydrate),window.dispatchEvent(new CustomEvent(\"astro:hydrate\"))}}connectedCallback(){!this.hasAttribute(\"await-children\")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((s,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener(\"astro:hydrate\",this.hydrate);let s=this.getAttribute(\"before-hydration-url\");s&&await import(s),this.start()}start(){const s=JSON.parse(this.getAttribute(\"opts\")),e=this.getAttribute(\"client\");if(Astro[e]===void 0){window.addEventListener(`astro:${e}`,()=>this.start(),{once:!0});return}Astro[e](async()=>{const n=this.getAttribute(\"renderer-url\"),[a,{default:r}]=await Promise.all([import(this.getAttribute(\"component-url\")),n?import(n):()=>()=>{}]),i=this.getAttribute(\"component-export\")||\"default\";if(!i.includes(\".\"))this.Component=a[i];else{this.Component=a;for(const d of i.split(\".\"))this.Component=this.Component[d]}return this.hydrator=r,this.hydrate},s,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},l.observedAttributes=[\"props\"],l))}";
+declare const _default: "(()=>{var l;{let c={0:t=>t,1:t=>JSON.parse(t,o),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,o)),5:t=>new Set(JSON.parse(t,o)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(JSON.parse(t)),9:t=>new Uint16Array(JSON.parse(t)),10:t=>new Uint32Array(JSON.parse(t))},o=(t,s)=>{if(t===\"\"||!Array.isArray(s))return s;let[e,n]=s;return e in c?c[e](n):void 0};customElements.get(\"astro-island\")||customElements.define(\"astro-island\",(l=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement&&this.parentElement.closest(\"astro-island[ssr]\"))return;let s=this.querySelectorAll(\"astro-slot\"),e={},n=this.querySelectorAll(\"template[data-astro-template]\");for(let r of n){let i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute(\"data-astro-template\")||\"default\"]=r.innerHTML,r.remove())}for(let r of s){let i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute(\"name\")||\"default\"]=r.innerHTML)}let a=this.hasAttribute(\"props\")?JSON.parse(this.getAttribute(\"props\"),o):{};this.hydrator(this)(this.Component,a,e,{client:this.getAttribute(\"client\")}),this.removeAttribute(\"ssr\"),window.removeEventListener(\"astro:hydrate\",this.hydrate),window.dispatchEvent(new CustomEvent(\"astro:hydrate\"))}}connectedCallback(){!this.hasAttribute(\"await-children\")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((s,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener(\"astro:hydrate\",this.hydrate);let s=this.getAttribute(\"before-hydration-url\");s&&await import(s),this.start()}start(){let s=JSON.parse(this.getAttribute(\"opts\")),e=this.getAttribute(\"client\");if(Astro[e]===void 0){window.addEventListener(`astro:${e}`,()=>this.start(),{once:!0});return}Astro[e](async()=>{let n=this.getAttribute(\"renderer-url\"),[a,{default:r}]=await Promise.all([import(this.getAttribute(\"component-url\")),n?import(n):()=>()=>{}]),i=this.getAttribute(\"component-export\")||\"default\";if(!i.includes(\".\"))this.Component=a[i];else{this.Component=a;for(let d of i.split(\".\"))this.Component=this.Component[d]}return this.hydrator=r,this.hydrate},s,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},l.observedAttributes=[\"props\"],l))}})();";
 export default _default;

package/dist/runtime/server/astro-island.prebuilt.js

@@ -1,4 +1,4 @@
-var astro_island_prebuilt_default = `var l;{const c={0:t=>t,1:t=>JSON.parse(t,o),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,o)),5:t=>new Set(JSON.parse(t,o)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(JSON.parse(t)),9:t=>new Uint16Array(JSON.parse(t)),10:t=>new Uint32Array(JSON.parse(t))},o=(t,s)=>{if(t===""||!Array.isArray(s))return s;const[e,n]=s;return e in c?c[e](n):void 0};customElements.get("astro-island")||customElements.define("astro-island",(l=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement&&this.parentElement.closest("astro-island[ssr]"))return;const s=this.querySelectorAll("astro-slot"),e={},n=this.querySelectorAll("template[data-astro-template]");for(const r of n){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(const r of s){const i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("name")||"default"]=r.innerHTML)}const a=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),o):{};this.hydrator(this)(this.Component,a,e,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),window.removeEventListener("astro:hydrate",this.hydrate),window.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((s,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener("astro:hydrate",this.hydrate);let s=this.getAttribute("before-hydration-url");s&&await import(s),this.start()}start(){const s=JSON.parse(this.getAttribute("opts")),e=this.getAttribute("client");if(Astro[e]===void 0){window.addEventListener(\`astro:\${e}\`,()=>this.start(),{once:!0});return}Astro[e](async()=>{const n=this.getAttribute("renderer-url"),[a,{default:r}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),i=this.getAttribute("component-export")||"default";if(!i.includes("."))this.Component=a[i];else{this.Component=a;for(const d of i.split("."))this.Component=this.Component[d]}return this.hydrator=r,this.hydrate},s,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},l.observedAttributes=["props"],l))}`;
+var astro_island_prebuilt_default = `(()=>{var l;{let c={0:t=>t,1:t=>JSON.parse(t,o),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,o)),5:t=>new Set(JSON.parse(t,o)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(JSON.parse(t)),9:t=>new Uint16Array(JSON.parse(t)),10:t=>new Uint32Array(JSON.parse(t))},o=(t,s)=>{if(t===""||!Array.isArray(s))return s;let[e,n]=s;return e in c?c[e](n):void 0};customElements.get("astro-island")||customElements.define("astro-island",(l=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=()=>{if(!this.hydrator||this.parentElement&&this.parentElement.closest("astro-island[ssr]"))return;let s=this.querySelectorAll("astro-slot"),e={},n=this.querySelectorAll("template[data-astro-template]");for(let r of n){let i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of s){let i=r.closest(this.tagName);!i||!i.isSameNode(this)||(e[r.getAttribute("name")||"default"]=r.innerHTML)}let a=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),o):{};this.hydrator(this)(this.Component,a,e,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),window.removeEventListener("astro:hydrate",this.hydrate),window.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((s,e)=>{e.disconnect(),this.childrenConnectedCallback()}).observe(this,{childList:!0})}async childrenConnectedCallback(){window.addEventListener("astro:hydrate",this.hydrate);let s=this.getAttribute("before-hydration-url");s&&await import(s),this.start()}start(){let s=JSON.parse(this.getAttribute("opts")),e=this.getAttribute("client");if(Astro[e]===void 0){window.addEventListener(\`astro:\${e}\`,()=>this.start(),{once:!0});return}Astro[e](async()=>{let n=this.getAttribute("renderer-url"),[a,{default:r}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),i=this.getAttribute("component-export")||"default";if(!i.includes("."))this.Component=a[i];else{this.Component=a;for(let d of i.split("."))this.Component=this.Component[d]}return this.hydrator=r,this.hydrate},s,this)}attributeChangedCallback(){this.hydrator&&this.hydrate()}},l.observedAttributes=["props"],l))}})();`;
 export {
   astro_island_prebuilt_default as default
 };

package/dist/runtime/server/endpoint.js

@@ -17,7 +17,7 @@ async function renderEndpoint(mod, context, ssr) {
   const handler = getHandlerFromModule(mod, chosenMethod);
   if (!ssr && ssr === false && chosenMethod && chosenMethod !== "get") {
     console.warn(`
-${chosenMethod} requests are not available when building a static site. Update your config to output: 'server' to handle ${chosenMethod} requests.`);
+${chosenMethod} requests are not available when building a static site. Update your config to \`output: 'server'\` or \`output: 'hybrid'\` with an \`export const prerender = false\` to handle ${chosenMethod} requests.`);
   }
   if (!handler || typeof handler !== "function") {
     let response = new Response(null, {

package/dist/runtime/server/hydration.d.ts

@@ -1,5 +1,4 @@
 import type { AstroComponentMetadata, SSRElement, SSRLoadedRenderer, SSRResult } from '../../@types/astro';
-export declare const HydrationDirectiveProps: Set<string>;
 export interface HydrationMetadata {
     directive: string;
     value: string;
@@ -13,7 +12,7 @@ interface ExtractedProps {
     hydration: HydrationMetadata | null;
     props: Record<string | number | symbol, any>;
 }
-export declare function extractDirectives(displayName: string, inputProps: Record<string | number | symbol, any>): ExtractedProps;
+export declare function extractDirectives(inputProps: Record<string | number | symbol, any>, clientDirectives: SSRResult['_metadata']['clientDirectives']): ExtractedProps;
 interface HydrateScriptOptions {
     renderer: SSRLoadedRenderer;
     result: SSRResult;

package/dist/runtime/server/hydration.js

@@ -2,10 +2,7 @@ import { AstroError, AstroErrorData } from "../../core/errors/index.js";
 import { escapeHTML } from "./escape.js";
 import { serializeProps } from "./serialize.js";
 import { serializeListValue } from "./util.js";
-const HydrationDirectivesRaw = ["load", "idle", "media", "visible", "only"];
-const HydrationDirectives = new Set(HydrationDirectivesRaw);
-const HydrationDirectiveProps = new Set(HydrationDirectivesRaw.map((n) => `client:${n}`));
-function extractDirectives(displayName, inputProps) {
+function extractDirectives(inputProps, clientDirectives) {
   let extracted = {
     isPage: false,
     hydration: null,
@@ -44,11 +41,10 @@ function extractDirectives(displayName, inputProps) {
         default: {
           extracted.hydration.directive = key.split(":")[1];
           extracted.hydration.value = value;
-          if (!HydrationDirectives.has(extracted.hydration.directive)) {
+          if (!clientDirectives.has(extracted.hydration.directive)) {
+            const hydrationMethods = Array.from(clientDirectives.keys()).map((d) => `client:${d}`).join(", ");
             throw new Error(
-              `Error: invalid hydration directive "${key}". Supported hydration methods: ${Array.from(
-                HydrationDirectiveProps
-              ).join(", ")}`
+              `Error: invalid hydration directive "${key}". Supported hydration methods: ${hydrationMethods}`
             );
           }
           if (extracted.hydration.directive === "media" && typeof extracted.hydration.value !== "string") {
@@ -111,7 +107,6 @@ async function generateHydrateScript(scriptOptions, metadata) {
   return island;
 }
 export {
-  HydrationDirectiveProps,
   extractDirectives,
   generateHydrateScript
 };

package/dist/runtime/server/render/astro/instance.js

@@ -1,5 +1,4 @@
 var _a;
-import { HydrationDirectiveProps } from "../../hydration.js";
 import { isPromise } from "../../util.js";
 import { renderChild } from "../any.js";
 import { isAPropagatingComponent } from "./factory.js";
@@ -40,7 +39,7 @@ _a = astroComponentInstanceSym;
 function validateComponentProps(props, displayName) {
   if (props != null) {
     for (const prop of Object.keys(props)) {
-      if (HydrationDirectiveProps.has(prop)) {
+      if (prop.startsWith("client:")) {
         console.warn(
           `You are attempting to render <${displayName} ${prop} />, but ${displayName} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.`
         );

package/dist/runtime/server/render/astro/render-template.d.ts

@@ -7,7 +7,7 @@ export declare class RenderTemplateResult {
     private expressions;
     private error;
     constructor(htmlParts: TemplateStringsArray, expressions: unknown[]);
-    [Symbol.asyncIterator](): AsyncGenerator<any, void, undefined>;
+    [Symbol.asyncIterator](): AsyncGenerator<any, void, unknown>;
 }
 export declare function isRenderTemplateResult(obj: unknown): obj is RenderTemplateResult;
 export declare function renderAstroTemplateResult(component: RenderTemplateResult): AsyncIterable<string | HTMLBytes | RenderInstruction>;

package/dist/runtime/server/render/astro/render-template.js

@@ -2,6 +2,7 @@ var _a;
 import { markHTMLString } from "../../escape.js";
 import { isPromise } from "../../util.js";
 import { renderChild } from "../any.js";
+import { EagerAsyncIterableIterator } from "../util.js";
 const renderTemplateResultSym = Symbol.for("astro.renderTemplateResult");
 class RenderTemplateResult {
   constructor(htmlParts, expressions) {
@@ -22,11 +23,18 @@ class RenderTemplateResult {
   }
   async *[(_a = renderTemplateResultSym, Symbol.asyncIterator)]() {
     const { htmlParts, expressions } = this;
+    let iterables = [];
+    for (let i = 0; i < htmlParts.length; i++) {
+      iterables.push(new EagerAsyncIterableIterator(renderChild(expressions[i])));
+    }
+    setTimeout(() => {
+      iterables.forEach((it) => !it.isStarted() && it.buffer());
+    }, 0);
     for (let i = 0; i < htmlParts.length; i++) {
       const html = htmlParts[i];
-      const expression = expressions[i];
+      const iterable = iterables[i];
       yield markHTMLString(html);
-      yield* renderChild(expression);
+      yield* iterable;
     }
   }
 }

package/dist/runtime/server/render/common.js

@@ -20,7 +20,7 @@ function stringifyChunk(result, chunk) {
         let needsDirectiveScript = hydration && determinesIfNeedsDirectiveScript(result, hydration.directive);
         let prescriptType = needsHydrationScript ? "both" : needsDirectiveScript ? "directive" : null;
         if (prescriptType) {
-          let prescripts = getPrescripts(prescriptType, hydration.directive);
+          let prescripts = getPrescripts(result, prescriptType, hydration.directive);
           return markHTMLString(prescripts);
         } else {
           return "";

package/dist/runtime/server/render/component.js

@@ -43,17 +43,26 @@ function isFragmentComponent(Component) {
 function isHTMLComponent(Component) {
   return Component && typeof Component === "object" && Component["astro:html"];
 }
+const ASTRO_SLOT_EXP = /\<\/?astro-slot\b[^>]*>/g;
+const ASTRO_STATIC_SLOT_EXP = /\<\/?astro-static-slot\b[^>]*>/g;
+function removeStaticAstroSlot(html, supportsAstroStaticSlot) {
+  const exp = supportsAstroStaticSlot ? ASTRO_STATIC_SLOT_EXP : ASTRO_SLOT_EXP;
+  return html.replace(exp, "");
+}
 async function renderFrameworkComponent(result, displayName, Component, _props, slots = {}) {
-  var _a, _b;
+  var _a, _b, _c;
   if (!Component && !_props["client:only"]) {
     throw new Error(
       `Unable to render ${displayName} because it is ${Component}!
 Did you forget to import the component or is it possible there is a typo?`
     );
   }
-  const { renderers } = result._metadata;
-  const metadata = { displayName };
-  const { hydration, isPage, props } = extractDirectives(displayName, _props);
+  const { renderers, clientDirectives } = result._metadata;
+  const metadata = {
+    astroStaticSlot: true,
+    displayName
+  };
+  const { hydration, isPage, props } = extractDirectives(_props, clientDirectives);
   let html = "";
   let attrs = void 0;
   if (hydration) {
@@ -202,13 +211,16 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
   }
   if (!hydration) {
     return async function* () {
+      var _a2;
       if (slotInstructions) {
         yield* slotInstructions;
       }
       if (isPage || (renderer == null ? void 0 : renderer.name) === "astro:jsx") {
         yield html;
       } else if (html && html.length > 0) {
-        yield markHTMLString(html.replace(/\<\/?astro-slot\b[^>]*>/g, ""));
+        yield markHTMLString(
+          removeStaticAstroSlot(html, ((_a2 = renderer == null ? void 0 : renderer.ssr) == null ? void 0 : _a2.supportsAstroStaticSlot) ?? false)
+        );
       } else {
         yield "";
       }
@@ -230,7 +242,9 @@ ${serializeProps(
   if (html) {
     if (Object.keys(children).length > 0) {
       for (const key of Object.keys(children)) {
-        if (!html.includes(key === "default" ? `<astro-slot>` : `<astro-slot name="${key}">`)) {
+        let tagName = ((_c = renderer == null ? void 0 : renderer.ssr) == null ? void 0 : _c.supportsAstroStaticSlot) ? !!metadata.hydrate ? "astro-slot" : "astro-static-slot" : "astro-slot";
+        let expectedHTML = key === "default" ? `<${tagName}>` : `<${tagName} name="${key}">`;
+        if (!html.includes(expectedHTML)) {
           unrenderedSlots.push(key);
         }
       }

package/dist/runtime/server/render/page.js

@@ -116,6 +116,11 @@ async function renderPage(result, componentFactory, props, children, streaming,
                     }
                   }
                 }
+                if (chunk instanceof Response) {
+                  throw new AstroError({
+                    ...AstroErrorData.ResponseSentError
+                  });
+                }
                 const bytes = chunkToByteArray(result, chunk);
                 controller.enqueue(bytes);
                 i++;

package/dist/runtime/server/render/util.d.ts

@@ -6,3 +6,15 @@ export declare function formatList(values: string[]): string;
 export declare function addAttribute(value: any, key: string, shouldEscape?: boolean): any;
 export declare function internalSpreadAttributes(values: Record<any, any>, shouldEscape?: boolean): any;
 export declare function renderElement(name: string, { props: _props, children }: SSRElement, shouldEscape?: boolean): string;
+export declare class EagerAsyncIterableIterator {
+    #private;
+    constructor(iterable: AsyncIterable<any>);
+    /**
+     * Starts to eagerly fetch the inner iterator and cache the results.
+     * Note: This might not be called after next() has been called once, e.g. the iterator is started
+     */
+    buffer(): Promise<void>;
+    next(): Promise<IteratorResult<any, any>>;
+    isStarted(): boolean;
+    [Symbol.asyncIterator](): this;
+}

package/dist/runtime/server/render/util.js

@@ -22,7 +22,10 @@ const toStyleString = (obj) => Object.entries(obj).map(([k, v]) => {
 function defineScriptVars(vars) {
   let output = "";
   for (const [key, value] of Object.entries(vars)) {
-    output += `const ${toIdent(key)} = ${JSON.stringify(value)};
+    output += `const ${toIdent(key)} = ${JSON.stringify(value).replace(
+      /<\/script>/g,
+      "\\x3C/script>"
+    )};
 `;
   }
   return markHTMLString(output);
@@ -92,7 +95,92 @@ function renderElement(name, { props: _props, children = "" }, shouldEscape = tr
   }
   return `<${name}${internalSpreadAttributes(props, shouldEscape)}>${children}</${name}>`;
 }
+class EagerAsyncIterableIterator {
+  #iterable;
+  #queue = new Queue();
+  #error = void 0;
+  #next;
+  /**
+   * Whether the proxy is running in buffering or pass-through mode
+   */
+  #isBuffering = false;
+  #gen = void 0;
+  #isStarted = false;
+  constructor(iterable) {
+    this.#iterable = iterable;
+  }
+  /**
+   * Starts to eagerly fetch the inner iterator and cache the results.
+   * Note: This might not be called after next() has been called once, e.g. the iterator is started
+   */
+  async buffer() {
+    if (this.#gen) {
+      throw new Error("Cannot not switch from non-buffer to buffer mode");
+    }
+    this.#isBuffering = true;
+    this.#isStarted = true;
+    this.#gen = this.#iterable[Symbol.asyncIterator]();
+    let value = void 0;
+    do {
+      this.#next = this.#gen.next();
+      try {
+        value = await this.#next;
+        this.#queue.push(value);
+      } catch (e) {
+        this.#error = e;
+      }
+    } while (value && !value.done);
+  }
+  async next() {
+    if (this.#error) {
+      throw this.#error;
+    }
+    if (!this.#isBuffering) {
+      if (!this.#gen) {
+        this.#isStarted = true;
+        this.#gen = this.#iterable[Symbol.asyncIterator]();
+      }
+      return await this.#gen.next();
+    }
+    if (!this.#queue.isEmpty()) {
+      return this.#queue.shift();
+    }
+    await this.#next;
+    return this.#queue.shift();
+  }
+  isStarted() {
+    return this.#isStarted;
+  }
+  [Symbol.asyncIterator]() {
+    return this;
+  }
+}
+class Queue {
+  constructor() {
+    this.head = void 0;
+    this.tail = void 0;
+  }
+  push(item) {
+    if (this.head === void 0) {
+      this.head = { item };
+      this.tail = this.head;
+    } else {
+      this.tail.next = { item };
+      this.tail = this.tail.next;
+    }
+  }
+  isEmpty() {
+    return this.head === void 0;
+  }
+  shift() {
+    var _a, _b;
+    const val = (_a = this.head) == null ? void 0 : _a.item;
+    this.head = (_b = this.head) == null ? void 0 : _b.next;
+    return val;
+  }
+}
 export {
+  EagerAsyncIterableIterator,
   addAttribute,
   defineScriptVars,
   formatList,

package/dist/runtime/server/scripts.d.ts

@@ -1,6 +1,5 @@
 import type { SSRResult } from '../../@types/astro';
 export declare function determineIfNeedsHydrationScript(result: SSRResult): boolean;
-export declare const hydrationScripts: Record<string, string>;
 export declare function determinesIfNeedsDirectiveScript(result: SSRResult, directive: string): boolean;
 export type PrescriptType = null | 'both' | 'directive';
-export declare function getPrescripts(type: PrescriptType, directive: string): string;
+export declare function getPrescripts(result: SSRResult, type: PrescriptType, directive: string): string;

package/dist/runtime/server/scripts.js

@@ -1,22 +1,11 @@
-import idlePrebuilt from "../client/idle.prebuilt.js";
-import loadPrebuilt from "../client/load.prebuilt.js";
-import mediaPrebuilt from "../client/media.prebuilt.js";
-import onlyPrebuilt from "../client/only.prebuilt.js";
-import visiblePrebuilt from "../client/visible.prebuilt.js";
 import islandScript from "./astro-island.prebuilt.js";
+const ISLAND_STYLES = `<style>astro-island,astro-slot{display:contents}</style>`;
 function determineIfNeedsHydrationScript(result) {
   if (result._metadata.hasHydrationScript) {
     return false;
   }
   return result._metadata.hasHydrationScript = true;
 }
-const hydrationScripts = {
-  idle: idlePrebuilt,
-  load: loadPrebuilt,
-  only: onlyPrebuilt,
-  media: mediaPrebuilt,
-  visible: visiblePrebuilt
-};
 function determinesIfNeedsDirectiveScript(result, directive) {
   if (result._metadata.hasDirectives.has(directive)) {
     return false;
@@ -24,25 +13,28 @@ function determinesIfNeedsDirectiveScript(result, directive) {
   result._metadata.hasDirectives.add(directive);
   return true;
 }
-function getDirectiveScriptText(directive) {
-  if (!(directive in hydrationScripts)) {
+function getDirectiveScriptText(result, directive) {
+  const clientDirectives = result._metadata.clientDirectives;
+  const clientDirective = clientDirectives.get(directive);
+  if (!clientDirective) {
     throw new Error(`Unknown directive: ${directive}`);
   }
-  const directiveScriptText = hydrationScripts[directive];
-  return directiveScriptText;
+  return clientDirective;
 }
-function getPrescripts(type, directive) {
+function getPrescripts(result, type, directive) {
   switch (type) {
     case "both":
-      return `<style>astro-island,astro-slot{display:contents}</style><script>${getDirectiveScriptText(directive) + islandScript}</script>`;
+      return `${ISLAND_STYLES}<script>${getDirectiveScriptText(
+        result,
+        directive
+      )};${islandScript}</script>`;
     case "directive":
-      return `<script>${getDirectiveScriptText(directive)}</script>`;
+      return `<script>${getDirectiveScriptText(result, directive)}</script>`;
   }
   return "";
 }
 export {
   determineIfNeedsHydrationScript,
   determinesIfNeedsDirectiveScript,
-  getPrescripts,
-  hydrationScripts
+  getPrescripts
 };

package/dist/vite-plugin-astro-server/request.js

@@ -4,6 +4,7 @@ import { error } from "../core/logger/core.js";
 import * as msg from "../core/messages.js";
 import { removeTrailingForwardSlash } from "../core/path.js";
 import { eventError, telemetry } from "../events/index.js";
+import { isHybridOutput } from "../prerender/utils.js";
 import { runWithErrorHandling } from "./controller.js";
 import { handle500Response } from "./response.js";
 import { handleRoute, matchRoute } from "./route.js";
@@ -11,7 +12,7 @@ async function handleRequest(env, manifest, controller, req, res) {
   const { settings, loader: moduleLoader } = env;
   const { config } = settings;
   const origin = `${moduleLoader.isHttps() ? "https" : "http"}://${req.headers.host}`;
-  const buildingToSSR = config.output === "server";
+  const buildingToSSR = config.output === "server" || isHybridOutput(config);
   const url = new URL(origin + req.url);
   let pathname;
   if (config.trailingSlash === "never" && !req.url) {