Support Svelte 5 (experimental) (#9098)

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

1 files changed, 43 insertions, 0 deletions

diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js
new file mode 100644
index 000000000..b3d2e1964
--- /dev/null
+++ b/packages/integrations/svelte/client-v5.js
@@ -0,0 +1,43 @@
+import { mount } from 'svelte';
+
+export default (element) => {
+	return async (Component, props, slotted) => {
+		if (!element.hasAttribute('ssr')) return;
+
+		let children = undefined;
+		let $$slots = undefined;
+		for (const [key, value] of Object.entries(slotted)) {
+			if (key === 'default') {
+				children = createSlotDefinition(key, value);
+			} else {
+				$$slots ??= {};
+				$$slots[key] = createSlotDefinition(key, value);
+			}
+		}
+
+		const [, destroy] = mount(Component, {
+			target: element,
+			props: {
+				...props,
+				children,
+				$$slots,
+			},
+		});
+
+		element.addEventListener('astro:unmount', () => destroy(), { once: true });
+	};
+};
+
+function createSlotDefinition(key, children) {
+	/**
+	 * @param {Comment} $$anchor A comment node for slots in Svelte 5
+	 */
+	return ($$anchor, _$$slotProps) => {
+		const parent = $$anchor.parentNode;
+		const el = document.createElement('div');
+		el.innerHTML = `<astro-slot${
+			key === 'default' ? '' : ` name="${key}"`
+		}>${children}</astro-slot>`;
+		parent.insertBefore(el.children[0], $$anchor);
+	};
+}