Add support for Svelte 5 @render syntax (#12390)

Co-authored-by: Jonas Robertsson <[email protected]>

.changeset/shaggy-kids-juggle.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+Adds support for Svelte 5's new `@render` syntax while maintaining backward compatibility with traditional slots.

packages/integrations/svelte/client-v5.js

@@ -8,7 +8,11 @@ export default (element) => {
 
 		let children = undefined;
 		let $$slots = undefined;
+		let renderFns = {};
+
+
 		for (const [key, value] of Object.entries(slotted)) {
+			// Legacy slot support
 			$$slots ??= {};
 			if (key === 'default') {
 				$$slots.default = true;
@@ -20,6 +24,16 @@ export default (element) => {
 					render: () => `<astro-slot name="${key}">${value}</astro-slot>`,
 				}));
 			}
+			// @render support for Svelte ^5.0
+      if (key === 'default') {
+        renderFns.children = createRawSnippet(() => ({
+          render: () => `<astro-slot>${value}</astro-slot>`
+        }));
+      } else {
+        renderFns[key] = createRawSnippet(() => ({
+          render: () => `<astro-slot name="${key}">${value}</astro-slot>`
+        }));
+      }
 		}
 
 		const bootstrap = client !== 'only' ? hydrate : mount;
@@ -28,6 +42,7 @@ export default (element) => {
 				...props,
 				children,
 				$$slots,
+				...renderFns
 			});
 		} else {
 			const component = bootstrap(Component, {
@@ -36,6 +51,7 @@ export default (element) => {
 					...props,
 					children,
 					$$slots,
+					...renderFns
 				},
 			});
 			existingApplications.set(element, component);

packages/integrations/svelte/server-v5.js

@@ -17,7 +17,10 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
 
 	let children = undefined;
 	let $$slots = undefined;
+	const renderProps = {};
+
 	for (const [key, value] of Object.entries(slotted)) {
+		// Legacy slot support
 		$$slots ??= {};
 		if (key === 'default') {
 			$$slots.default = true;
@@ -29,13 +32,19 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
 				render: () => `<${tagName} name="${key}">${value}</${tagName}>`,
 			}));
 		}
+		// @render support for Svelte ^5.0
+    const slotName = key === 'default' ? 'children' : key;
+    renderProps[slotName] = createRawSnippet(() => ({
+      render: () => `<${tagName}${key !== 'default' ? ` name="${key}"` : ''}>${value}</${tagName}>`
+    }));
 	}
 
 	const result = render(Component, {
 		props: {
 			...props,
 			children,
 			$$slots,
+			...renderProps
 		},
 	});
 	return { html: result.body };