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

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

1 files changed, 16 insertions, 0 deletions

diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js
index 7a046b5bf..f2cc647a2 100644
--- a/packages/integrations/svelte/client-v5.js
+++ b/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);