Prevent removal of nested slots within islands (#7093)

* Prevent removal of nested slots within islands

* Fix build errors

2 files changed, 28 insertions, 7 deletions

diff --git a/packages/integrations/preact/src/server.ts b/packages/integrations/preact/src/server.ts
index 212e183cf..57e08c945 100644
--- a/packages/integrations/preact/src/server.ts
+++ b/packages/integrations/preact/src/server.ts
@@ -1,3 +1,4 @@
+import type { AstroComponentMetadata } from 'astro';
 import { Component as BaseComponent, h } from 'preact';
 import render from 'preact-render-to-string';
 import { getContext } from './context.js';
@@ -10,7 +11,7 @@ const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w
 let originalConsoleError: typeof console.error;
 let consoleFilterRefs = 0;
 
-function check(this: RendererContext, Component: any, props: Record<string, any>, children: any) {
+function check(this: RendererContext, Component: any, props: Record<string, any>, children: any, ) {
 	if (typeof Component !== 'function') return false;
 
 	if (Component.prototype != null && typeof Component.prototype.render === 'function') {
@@ -21,7 +22,7 @@ function check(this: RendererContext, Component: any, props: Record<string, any>
 
 	try {
 		try {
-			const { html } = renderToStaticMarkup.call(this, Component, props, children);
+			const { html } = renderToStaticMarkup.call(this, Component, props, children, undefined);
 			if (typeof html !== 'string') {
 				return false;
 			}
@@ -38,18 +39,28 @@ function check(this: RendererContext, Component: any, props: Record<string, any>
 	}
 }
 
+function shouldHydrate(metadata: AstroComponentMetadata | undefined) {
+	// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+	return metadata?.astroStaticSlot ? !!metadata.hydrate : true;
+}
+
 function renderToStaticMarkup(
 	this: RendererContext,
 	Component: any,
 	props: Record<string, any>,
-	{ default: children, ...slotted }: Record<string, any>
+	{ default: children, ...slotted }: Record<string, any>,
+	metadata: AstroComponentMetadata | undefined,
 ) {
 	const ctx = getContext(this.result);
 
 	const slots: Record<string, ReturnType<typeof h>> = {};
 	for (const [key, value] of Object.entries(slotted)) {
 		const name = slotName(key);
-		slots[name] = h(StaticHtml, { value, name });
+		slots[name] = h(StaticHtml, {
+			hydrate: shouldHydrate(metadata),
+			value,
+			name
+		});
 	}
 
 	// Restore signals back onto props so that they will be passed as-is to components
@@ -61,7 +72,9 @@ function renderToStaticMarkup(
 	serializeSignals(ctx, props, attrs, propsMap);
 
 	const html = render(
-		h(Component, newProps, children != null ? h(StaticHtml, { value: children }) : children)
+		h(Component, newProps, children != null ? h(StaticHtml, {
+			hydrate: shouldHydrate(metadata),
+			value: children}) : children)
 	);
 	return {
 		attrs,
@@ -127,4 +140,5 @@ function filteredConsoleError(msg: string, ...rest: any[]) {
 export default {
 	check,
 	renderToStaticMarkup,
+	supportsAstroStaticSlot: true,
 };
diff --git a/packages/integrations/preact/src/static-html.ts b/packages/integrations/preact/src/static-html.ts
index e1127d226..c1e44515f 100644
--- a/packages/integrations/preact/src/static-html.ts
+++ b/packages/integrations/preact/src/static-html.ts
@@ -1,5 +1,11 @@
 import { h } from 'preact';
 
+type Props = {
+	value: string;
+	name?: string;
+	hydrate?: boolean;
+}
+
 /**
  * Astro passes `children` as a string of HTML, so we need
  * a wrapper `div` to render that content as VNodes.
@@ -7,9 +13,10 @@ import { h } from 'preact';
  * As a bonus, we can signal to Preact that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value, name }: { value: string; name?: string }) => {
+const StaticHtml = ({ value, name, hydrate }: Props) => {
 	if (!value) return null;
-	return h('astro-slot', { name, dangerouslySetInnerHTML: { __html: value } });
+	const tagName = hydrate === false ? 'astro-static-slot' : 'astro-slot';
+	return h(tagName, { name, dangerouslySetInnerHTML: { __html: value } });
 };
 
 /**