Merge branch 'main' into next

1 files changed, 42 insertions, 6 deletions

diff --git a/packages/integrations/svelte/server.js b/packages/integrations/svelte/server.js
index 9878d3b59..ac133dced 100644
--- a/packages/integrations/svelte/server.js
+++ b/packages/integrations/svelte/server.js
@@ -1,5 +1,13 @@
+import { createRawSnippet } from 'svelte';
+import { render } from 'svelte/server';
+
 function check(Component) {
-	return Component['render'] && Component['$$render'];
+	if (typeof Component !== 'function') return false;
+	// Svelte 5 generated components always accept a `$$payload` prop.
+	// This assumes that the SSR build does not minify it (which Astro enforces by default).
+	// This isn't the best check, but the only other option otherwise is to try to render the
+	// component, which is taxing. We'll leave it as a last resort for the future for now.
+	return Component.toString().includes('$$payload');
 }
 
 function needsHydration(metadata) {
@@ -9,16 +17,44 @@ function needsHydration(metadata) {
 
 async function renderToStaticMarkup(Component, props, slotted, metadata) {
 	const tagName = needsHydration(metadata) ? 'astro-slot' : 'astro-static-slot';
-	const slots = {};
+
+	let children = undefined;
+	let $$slots = undefined;
+	const renderProps = {};
+
 	for (const [key, value] of Object.entries(slotted)) {
-		slots[key] = () =>
-			`<${tagName}${key === 'default' ? '' : ` name="${key}"`}>${value}</${tagName}>`;
+		// Legacy slot support
+		$$slots ??= {};
+		if (key === 'default') {
+			$$slots.default = true;
+			children = createRawSnippet(() => ({
+				render: () => `<${tagName}>${value}</${tagName}>`,
+			}));
+		} else {
+			$$slots[key] = createRawSnippet(() => ({
+				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 { html } = Component.render(props, { $$slots: slots });
-	return { html };
+
+	const result = render(Component, {
+		props: {
+			...props,
+			children,
+			$$slots,
+			...renderProps,
+		},
+	});
+	return { html: result.body };
 }
 
 export default {
+	name: '@astrojs/svelte',
 	check,
 	renderToStaticMarkup,
 	supportsAstroStaticSlot: true,