Allow Svelte 5 render slots as snippets (#9285)

3 files changed, 17 insertions, 3 deletions

diff --git a/.changeset/big-shirts-travel.md b/.changeset/big-shirts-travel.md
new file mode 100644
index 000000000..2adfa3e4e
--- /dev/null
+++ b/.changeset/big-shirts-travel.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+When using Svelte 5, slots can now be rendered as snippets
diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js
index b3d2e1964..eaa06974c 100644
--- a/packages/integrations/svelte/client-v5.js
+++ b/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,7 +36,7 @@ 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${
@@ -40,4 +44,5 @@ function createSlotDefinition(key, children) {
 		}>${children}</astro-slot>`;
 		parent.insertBefore(el.children[0], $$anchor);
 	};
+	return tagSlotAsSnippet(fn);
 }
diff --git a/packages/integrations/svelte/server-v5.js b/packages/integrations/svelte/server-v5.js
index 105b843fb..e1d246ff4 100644
--- a/packages/integrations/svelte/server-v5.js
+++ b/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}>`);
 		}
 	}