Support Svelte 5 (experimental) (#9098)

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

1 files changed, 42 insertions, 0 deletions

diff --git a/packages/integrations/svelte/server-v5.js b/packages/integrations/svelte/server-v5.js
new file mode 100644
index 000000000..105b843fb
--- /dev/null
+++ b/packages/integrations/svelte/server-v5.js
@@ -0,0 +1,42 @@
+import { render } from 'svelte/server';
+
+function check(Component) {
+	// Svelte 5 generated components always accept these two props
+	const str = Component.toString();
+	return str.includes('$$payload') && str.includes('$$props');
+}
+
+function needsHydration(metadata) {
+	// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
+	return metadata.astroStaticSlot ? !!metadata.hydrate : true;
+}
+
+async function renderToStaticMarkup(Component, props, slotted, metadata) {
+	const tagName = needsHydration(metadata) ? 'astro-slot' : 'astro-static-slot';
+
+	let children = undefined;
+	let $$slots = undefined;
+	for (const [key, value] of Object.entries(slotted)) {
+		if (key === 'default') {
+			children = () => `<${tagName}>${value}</${tagName}>`;
+		} else {
+			$$slots ??= {};
+			$$slots[key] = () => `<${tagName} name="${key}">${value}</${tagName}>`;
+		}
+	}
+
+	const { html } = render(Component, {
+		props: {
+			...props,
+			children,
+			$$slots,
+		},
+	});
+	return { html };
+}
+
+export default {
+	check,
+	renderToStaticMarkup,
+	supportsAstroStaticSlot: true,
+};