chore: use Svelte 5 for preview site (#10731)

* chore: use Svelte 5 for preview site

* use server route to load Svelte compiler, enables this to work on windows locally, and avoids loading all our test files

* cache for 10 seconds

* make it thirty

* prerender

Author: dummdidumm

pnpm-lock.yaml

@@ -14,8 +14,8 @@
   "devDependencies": {
     "@fontsource/fira-mono": "^5.0.8",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/adapter-vercel": "^4.0.0",
-    "@sveltejs/kit": "^2.4.3",
+    "@sveltejs/adapter-vercel": "^5.0.0",
+    "@sveltejs/kit": "^2.5.0",
     "@sveltejs/site-kit": "6.0.0-next.59",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/marked": "^6.0.0",
@@ -24,7 +24,7 @@
     "publint": "^0.2.7",
     "shiki": "^0.14.7",
     "shiki-twoslash": "^3.1.2",
-    "svelte": "^4.2.0",
+    "svelte": "workspace:^",
     "svelte-check": "^3.6.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",

sites/svelte-5-preview/package.json

@@ -25,9 +25,16 @@
 	{/if}
 
 	{#if log.level === 'trace' || log.level === 'assert'}
-		<button class="arrow" class:expand={!log.collapsed} on:click={toggle_group_collapse}>
+		<span
+			class="arrow"
+			role="button"
+			tabindex="0"
+			class:expand={!log.collapsed}
+			on:keyup={toggle_group_collapse}
+			on:click={toggle_group_collapse}
+		>
 			▶
-		</button>
+		</span>
 	{/if}
 
 	{#if log.level === 'assert'}

sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte

@@ -0,0 +1,32 @@
+import compiler_cjs from '../../../../../../packages/svelte/compiler.cjs?url';
+import package_json from '../../../../../../packages/svelte/package.json?url';
+import { read } from '$app/server';
+
+const files = import.meta.glob('../../../../../../packages/svelte/src/**/*.js', {
+	eager: true,
+	as: 'url'
+});
+
+const prefix = '../../../../../../packages/svelte/';
+
+export const prerender = true;
+
+export function entries() {
+	const entries = Object.keys(files).map((path) => ({ path: path.replace(prefix, '') }));
+	entries.push({ path: 'compiler.cjs' }, { path: 'package.json' });
+	return entries;
+}
+
+// service worker requests files under this path to load the compiler and runtime
+export async function GET({ params }) {
+	let url = '';
+	if (params.path === 'compiler.cjs') {
+		url = compiler_cjs;
+	} else if (params.path === 'package.json') {
+		url = package_json;
+	} else {
+		url = files[prefix + params.path];
+	}
+
+	return read(url);
+}

sites/svelte-5-preview/src/routes/svelte/[...path]/+server.js

@@ -2,6 +2,12 @@ import adapter from '@sveltejs/adapter-vercel';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
+	compilerOptions: {
+		legacy: {
+			// site-kit manually instantiates components inside an action
+			componentApi: true
+		}
+	},
 	kit: {
 		adapter: adapter({
 			runtime: 'nodejs18.x'