chore: add support for Svelte 5 (#11002)

Adds a check for Svelte 5 to use the backwards compatibility from svelte/legacy so it works with SvelteKit without changes to other code

.changeset/nine-seas-decide.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+chore: cleanup

packages/kit/package.json

@@ -11,7 +11,7 @@
 	"homepage": "https://kit.svelte.dev",
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "^2.4.1",
+		"@sveltejs/vite-plugin-svelte": "^2.5.0",
 		"@types/cookie": "^0.5.1",
 		"cookie": "^0.5.0",
 		"devalue": "^4.3.1",
@@ -41,7 +41,7 @@
 		"vitest": "^0.34.5"
 	},
 	"peerDependencies": {
-		"svelte": "^3.54.0 || ^4.0.0-next.0",
+		"svelte": "^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0",
 		"vite": "^4.0.0"
 	},
 	"bin": {

packages/kit/src/core/sync/utils.js

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { VERSION } from 'svelte/compiler';
 import { mkdirp } from '../../utils/filesystem.js';
 
 /** @type {Map<string, string>} */
@@ -68,3 +69,7 @@ export function dedent(strings, ...values) {
 
 	return str;
 }
+
+export function isSvelte5Plus() {
+	return Number(VERSION[0]) >= 5;
+}

packages/kit/src/core/sync/write_client_manifest.js

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import { relative_path, resolve_entry } from '../../utils/filesystem.js';
 import { s } from '../../utils/misc.js';
-import { dedent, write_if_changed } from './utils.js';
+import { dedent, isSvelte5Plus, write_if_changed } from './utils.js';
 import colors from 'kleur';
 
 /**
@@ -143,7 +143,7 @@ export function write_client_manifest(kit, manifest_data, output, metadata) {
 				}(({ error }) => { console.error(error) }),
 			};
 
-			export { default as root } from '../root.svelte';
+			export { default as root } from '../root.${isSvelte5Plus() ? 'js' : 'svelte'}';
 		`
 	);
 

packages/kit/src/core/sync/write_root.js

@@ -1,4 +1,4 @@
-import { dedent, write_if_changed } from './utils.js';
+import { dedent, isSvelte5Plus, write_if_changed } from './utils.js';
 
 /**
  * @param {import('types').ManifestData} manifest_data
@@ -89,4 +89,15 @@ export function write_root(manifest_data, output) {
 			{/if}
 		`
 	);
+
+	if (isSvelte5Plus()) {
+		write_if_changed(
+			`${output}/root.js`,
+			dedent`
+			import { asClassComponent } from 'svelte/legacy';
+			import Root from './root.svelte';
+			export default asClassComponent(Root);
+		`
+		);
+	}
 }

packages/kit/src/core/sync/write_server.js

@@ -4,7 +4,7 @@ import { posixify, resolve_entry } from '../../utils/filesystem.js';
 import { s } from '../../utils/misc.js';
 import { load_error_page, load_template } from '../config/index.js';
 import { runtime_directory } from '../utils.js';
-import { write_if_changed } from './utils.js';
+import { isSvelte5Plus, write_if_changed } from './utils.js';
 import colors from 'kleur';
 
 /**
@@ -25,7 +25,7 @@ const server_template = ({
 	template,
 	error_page
 }) => `
-import root from '../root.svelte';
+import root from '../root.${isSvelte5Plus() ? 'js' : 'svelte'}';
 import { set_building } from '__sveltekit/environment';
 import { set_assets } from '__sveltekit/paths';
 import { set_private_env, set_public_env } from '${runtime_directory}/shared-server.js';

packages/kit/src/exports/vite/index.js

@@ -24,7 +24,7 @@ import prerender from '../../core/postbuild/prerender.js';
 import analyse from '../../core/postbuild/analyse.js';
 import { s } from '../../utils/misc.js';
 import { hash } from '../../runtime/hash.js';
-import { dedent } from '../../core/sync/utils.js';
+import { dedent, isSvelte5Plus } from '../../core/sync/utils.js';
 
 export { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
@@ -136,7 +136,7 @@ export async function sveltekit() {
 		onwarn: svelte_config.onwarn,
 		compilerOptions: {
 			// @ts-expect-error SvelteKit requires hydratable true by default
-			hydratable: true,
+			hydratable: isSvelte5Plus() ? undefined : true,
 			...svelte_config.compilerOptions
 		},
 		...svelte_config.vitePlugin

packages/kit/src/runtime/client/types.d.ts

@@ -90,7 +90,8 @@ export type NavigationFinished = {
 	type: 'loaded';
 	state: NavigationState;
 	props: {
-		components: Array<typeof SvelteComponent>;
+		constructors: Array<typeof SvelteComponent>;
+		components?: Array<SvelteComponent>;
 		page?: Page;
 		form?: Record<string, any> | null;
 		[key: `data_${number}`]: Record<string, any>;