Ensure astro-island scripts render when using Astro.slots.render (#5326)

* Ensure astro-island scripts render when using Astro.slots.render

* Adding a changeset

.changeset/chilly-ladybugs-leave.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix omitted island hydration scripts in slots

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

@@ -10,7 +10,7 @@ import type {
  SSRLoadedRenderer,
  SSRResult,
 } from '../../@types/astro';
-import { renderSlot } from '../../runtime/server/index.js';
+import { renderSlot, stringifyChunk } from '../../runtime/server/index.js';
 import { renderJSX } from '../../runtime/server/jsx.js';
 import { AstroCookies } from '../cookies/index.js';
 import { LogOptions, warn } from '../logger/core.js';
@@ -118,11 +118,11 @@ class Slots {
  }
  }
  }
- const content = await renderSlot(this.#result, this.#slots[name]).then((res) =>
-  res != null ? String(res) : res
- );
- if (cacheable) this.#cache.set(name, content);
- return content;
+ const content = await renderSlot(this.#result, this.#slots[name]);
+ const outHTML = stringifyChunk(this.#result, content);
+
+ if (cacheable) this.#cache.set(name, outHTML);
+ return outHTML;
  }
 }
 

packages/astro/src/runtime/server/render/common.ts

@@ -8,6 +8,7 @@ import {
  getPrescripts,
  PrescriptType,
 } from '../scripts.js';
+import { isSlotString, type SlotString } from './slot.js';
 
 export const Fragment = Symbol.for('astro:fragment');
 export const Renderer = Symbol.for('astro:renderer');
@@ -18,7 +19,7 @@ export const decoder = new TextDecoder();
 // Rendering produces either marked strings of HTML or instructions for hydration.
 // These directive instructions bubble all the way up to renderPage so that we
 // can ensure they are added only once, and as soon as possible.
-export function stringifyChunk(result: SSRResult, chunk: string | RenderInstruction) {
+export function stringifyChunk(result: SSRResult, chunk: string | SlotString | RenderInstruction) {
  switch ((chunk as any).type) {
  case 'directive': {
  const { hydration } = chunk as RenderInstruction;
@@ -39,6 +40,18 @@ export function stringifyChunk(result: SSRResult, chunk: string | RenderInstruct
  }
  }
  default: {
+ if(isSlotString(chunk as string)) {
+ let out = '';
+ const c = (chunk as SlotString);
+ if(c.instructions) {
+ for(const instr of c.instructions) {
+ out += stringifyChunk(result, instr);
+ }
+ }
+ out += chunk.toString();
+ return out;
+ }
+
  return chunk.toString();
  }
  }

packages/astro/src/runtime/server/render/slot.ts

@@ -4,14 +4,22 @@ import type { RenderInstruction } from './types.js';
 import { HTMLString, markHTMLString } from '../escape.js';
 import { renderChild } from './any.js';
 
+const slotString = Symbol.for('astro:slot-string');
+
 export class SlotString extends HTMLString {
  public instructions: null | RenderInstruction[];
+ public [slotString]: boolean;
  constructor(content: string, instructions: null | RenderInstruction[]) {
  super(content);
  this.instructions = instructions;
+ this[slotString] = true;
  }
 }
 
+export function isSlotString(str: string): str is any {
+ return !!(str as any)[slotString];
+}
+
 export async function renderSlot(_result: any, slotted: string, fallback?: any): Promise<string> {
  if (slotted) {
  let iterator = renderChild(slotted);

packages/astro/test/astro-slots-nested.test.js

@@ -17,4 +17,10 @@ describe('Nested Slots', () => {
  const scriptInTemplate = $($('template')[0].children[0]).find('script');
  expect(scriptInTemplate).to.have.a.lengthOf(0, 'script defined outside of the inner template');
  });
+
+ it('Slots rendered via Astro.slots.render have the hydration script', async () => {
+ const html = await fixture.readFile('/component-slot/index.html');
+ const $ = cheerio.load(html);
+ expect($('script')).to.have.a.lengthOf(1, 'script rendered');
+ });
 });

packages/astro/test/fixtures/astro-slots-nested/src/components/SlotRender.astro

@@ -0,0 +1,4 @@
+---
+const content = await Astro.slots.render('default');
+---
+<Fragment set:html={content} />

packages/astro/test/fixtures/astro-slots-nested/src/pages/component-slot.astro

@@ -0,0 +1,17 @@
+---
+import SlotRender from '../components/SlotRender.astro'
+import Inner from '../components/Inner'
+---
+
+<html lang="en">
+ <head>
+ <title>Testing</title>
+ </head>
+ <body>
+ <main>
+ <SlotRender>
+ <Inner client:load />
+ </SlotRender>
+ </main>
+ </body>
+</html>