Merge branch 'main' into next

3 files changed, 30 insertions, 0 deletions

diff --git a/packages/integrations/svelte/CHANGELOG.md b/packages/integrations/svelte/CHANGELOG.md
index 074bf2f60..2033e3653 100644
--- a/packages/integrations/svelte/CHANGELOG.md
+++ b/packages/integrations/svelte/CHANGELOG.md
@@ -19,6 +19,12 @@
 - Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]:
   - astro@5.0.0-alpha.0
 
+## 5.7.3
+
+### Patch Changes
+
+- [#12390](https://github.com/withastro/astro/pull/12390) [`6fd3d59`](https://github.com/withastro/astro/commit/6fd3d5960f5ab16591bfdb94d1f9b9a9b72006cf) Thanks [@bluwy](https://github.com/bluwy)! - Adds support for Svelte 5's new `@render` syntax while maintaining backward compatibility with traditional slots.
+
 ## 5.7.2
 
 ### Patch Changes
diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js
index 7a046b5bf..123e544f6 100644
--- a/packages/integrations/svelte/client-v5.js
+++ b/packages/integrations/svelte/client-v5.js
@@ -8,7 +8,10 @@ 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 +23,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 +41,7 @@ export default (element) => {
 				...props,
 				children,
 				$$slots,
+				...renderFns,
 			});
 		} else {
 			const component = bootstrap(Component, {
@@ -36,6 +50,7 @@ export default (element) => {
 					...props,
 					children,
 					$$slots,
+					...renderFns,
 				},
 			});
 			existingApplications.set(element, component);
diff --git a/packages/integrations/svelte/server-v5.js b/packages/integrations/svelte/server-v5.js
index acffd10df..a38d38260 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 };