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

Co-authored-by: Jonas Robertsson <jonas.robertsson@icloud.com>

1 files changed, 9 insertions, 0 deletions

diff --git a/packages/integrations/svelte/server-v5.js b/packages/integrations/svelte/server-v5.js
index acffd10df..932a52b1f 100644
--- a/packages/integrations/svelte/server-v5.js
+++ b/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,6 +32,11 @@ 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, {
@@ -36,6 +44,7 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
 			...props,
 			children,
 			$$slots,
+			...renderProps
 		},
 	});
 	return { html: result.body };