Allow Svelte 5 render slots as snippets (#9285)

.changeset/big-shirts-travel.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+When using Svelte 5, slots can now be rendered as snippets

packages/integrations/svelte/client-v5.js

@@ -1,4 +1,8 @@
 import { mount } from 'svelte';
+import { add_snippet_symbol } from 'svelte/internal';
+
+// Allow a slot to be rendered as a snippet (dev validation only)
+const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s;
 
 export default (element) => {
 	return async (Component, props, slotted) => {
@@ -32,12 +36,13 @@ function createSlotDefinition(key, children) {
 	/**
 	 * @param {Comment} $$anchor A comment node for slots in Svelte 5
 	 */
-	return ($$anchor, _$$slotProps) => {
+	const fn = ($$anchor, _$$slotProps) => {
 		const parent = $$anchor.parentNode;
 		const el = document.createElement('div');
 		el.innerHTML = `<astro-slot${
 			key === 'default' ? '' : ` name="${key}"`
 		}>${children}</astro-slot>`;
 		parent.insertBefore(el.children[0], $$anchor);
 	};
+	return tagSlotAsSnippet(fn);
 }

packages/integrations/svelte/server-v5.js

@@ -1,4 +1,8 @@
 import { render } from 'svelte/server';
+import { add_snippet_symbol } from 'svelte/internal';
+
+// Allow a slot to be rendered as a snippet (dev validation only)
+const tagSlotAsSnippet = import.meta.env.DEV ? add_snippet_symbol : (s) => s;
 
 function check(Component) {
 	// Svelte 5 generated components always accept these two props
@@ -18,10 +22,10 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
 	let $$slots = undefined;
 	for (const [key, value] of Object.entries(slotted)) {
 		if (key === 'default') {
-			children = () => `<${tagName}>${value}</${tagName}>`;
+			children = tagSlotAsSnippet(() => `<${tagName}>${value}</${tagName}>`);
 		} else {
 			$$slots ??= {};
-			$$slots[key] = () => `<${tagName} name="${key}">${value}</${tagName}>`;
+			$$slots[key] = tagSlotAsSnippet(() => `<${tagName} name="${key}">${value}</${tagName}>`);
 		}
 	}