Support Svelte 5 (experimental)

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
+	 */
+	return ($$anchor, _$$props) => {
+		// $$anchor is a comment node for slots in Svelte 5
+		const el = document.createElement('div');
+		el.innerHTML = `<astro-slot${
+			key === 'default' ? '' : ` name="${key}"`
+		}>${children}</astro-slot>`;
+		$$anchor.replaceWith(el.children[0]);
+	};
+}

packages/integrations/svelte/package.json

@@ -24,12 +24,14 @@
     "./editor": "./dist/editor.cjs",
     "./*": "./*",
     "./client.js": "./client.js",
+    "./client-v5.js": "./client-v5.js",
     "./server.js": "./server.js",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "client.js",
+    "client-v5.js",
     "server.js"
   ],
   "scripts": {
@@ -38,7 +40,7 @@
     "dev": "astro-scripts dev \"src/**/*.ts\""
   },
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.5",
+    "@sveltejs/vite-plugin-svelte": "^2.5.2",
     "svelte2tsx": "^0.6.20"
   },
   "devDependencies": {
@@ -49,7 +51,7 @@
   },
   "peerDependencies": {
     "astro": "^3.0.0",
-    "svelte": "^3.55.0 || ^4.0.0"
+    "svelte": "^3.55.0 || ^4.0.0 || ^5.0.0-next.1"
   },
   "engines": {
     "node": ">=18.14.1"

packages/integrations/svelte/server.js

@@ -1,5 +1,13 @@
+import { VERSION } from 'svelte/compiler';
+
+const isSvelte5 = VERSION.startsWith('5');
+
 function check(Component) {
-	return Component['render'] && Component['$$render'];
+	if (isSvelte5) {
+		return Component.toString().includes('$$payload');
+	} else {
+		return Component['render'] && Component['$$render'];
+	}
 }
 
 function needsHydration(metadata) {
@@ -14,7 +22,18 @@ async function renderToStaticMarkup(Component, props, slotted, metadata) {
 		slots[key] = () =>
 			`<${tagName}${key === 'default' ? '' : ` name="${key}"`}>${value}</${tagName}>`;
 	}
-	const { html } = Component.render(props, { $$slots: slots });
+	let html;
+	if (isSvelte5) {
+		const { render } = await import('svelte/server');
+		html = render(Component, {
+			props: {
+				...props,
+				$$slots: slots,
+			},
+		}).html;
+	} else {
+		html = Component.render(props, { $$slots: slots }).html;
+	}
 	return { html };
 }
 

packages/integrations/svelte/src/index.ts

@@ -1,13 +1,16 @@
 import type { Options } from '@sveltejs/vite-plugin-svelte';
 import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { VERSION } from 'svelte/compiler';
 import type { AstroIntegration, AstroRenderer } from 'astro';
 import { fileURLToPath } from 'node:url';
 import type { UserConfig } from 'vite';
 
+const isSvelte5 = VERSION.startsWith('5');
+
 function getRenderer(): AstroRenderer {
 	return {
 		name: '@astrojs/svelte',
-		clientEntrypoint: '@astrojs/svelte/client.js',
+		clientEntrypoint: isSvelte5 ? '@astrojs/svelte/client-v5.js' : '@astrojs/svelte/client.js',
 		serverEntrypoint: '@astrojs/svelte/server.js',
 	};
 }
@@ -37,9 +40,14 @@ async function getViteConfiguration({
 }: ViteConfigurationArgs): Promise<UserConfig> {
 	const defaultOptions: Partial<Options> = {
 		emitCss: true,
-		compilerOptions: { dev: isDev, hydratable: true },
+		compilerOptions: { dev: isDev },
 	};
 
+	if (!isSvelte5) {
+		// @ts-ignore
+		defaultOptions.compilerOptions.hydratable = true;
+	}
+
 	// Disable hot mode during the build
 	if (!isDev) {
 		defaultOptions.hot = false;
@@ -69,7 +77,7 @@ async function getViteConfiguration({
 
 	return {
 		optimizeDeps: {
-			include: ['@astrojs/svelte/client.js'],
+			include: [isSvelte5 ? '@astrojs/svelte/client-v5.js' : '@astrojs/svelte/client.js'],
 			exclude: ['@astrojs/svelte/server.js'],
 		},
 		plugins: [svelte(resolvedOptions)],