move logic into component

Author: Rich-Harris

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.server.ts

@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit';
 import type { Examples } from '../api/examples/all.json/+server.js';
 
-export async function load({ fetch, params, url }) {
+export async function load({ fetch, params }) {
 	const examples_res = fetch('/playground/api/examples/all.json').then((r) => r.json());
 	const res = await fetch(`/playground/api/${params.id}.json`);
 
@@ -11,10 +11,6 @@ export async function load({ fetch, params, url }) {
 
 	const [gist, examples] = await Promise.all([res.json(), examples_res as Promise<Examples>]);
 
-	let version = url.searchParams.get('version') || 'latest';
-
-	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
-
 	return {
 		gist,
 		examples: examples
@@ -25,8 +21,6 @@ export async function load({ fetch, params, url }) {
 					title: example.title,
 					slug: example.slug
 				}))
-			})),
-		version: url.searchParams.get('version') || 'latest',
-		is_pr_or_commit_version
+			}))
 	};
 }

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -4,7 +4,6 @@
 	import type { Gist } from '$lib/db/types';
 	import { Repl } from '@sveltejs/repl';
 	import { theme } from '@sveltejs/site-kit/stores';
-	import { onMount } from 'svelte';
 	import { mapbox_setup } from '../../../../config.js';
 	import AppControls from './AppControls.svelte';
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
@@ -18,15 +17,17 @@
 	let repl = $state() as ReturnType<typeof Repl>;
 	let name = $state(data.gist.name);
 	let modified = $state(false);
-	let version = data.version;
 	let setting_hash: any = null;
 
+	let version = $page.url.searchParams.get('version') || 'latest';
+	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
+
 	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
 	// don't allow links to escape the sandbox restrictions
 	const can_escape = browser && !$page.url.hash;
 
-	onMount(() => {
-		if (version !== 'local' && !data.is_pr_or_commit_version) {
+	if (version !== 'local' && !is_pr_or_commit_version) {
+		$effect(() => {
 			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
 				.then((pkg) => {
@@ -40,8 +41,8 @@
 						replaceState(url, {});
 					}
 				});
-		}
-	});
+		});
+	}
 
 	afterNavigate(() => {
 		name = data.gist.name;
@@ -151,7 +152,7 @@
 	const svelteUrl =
 		browser && version === 'local'
 			? `${location.origin}/playground/local`
-			: data.is_pr_or_commit_version
+			: is_pr_or_commit_version
 				? version
 				: `https://unpkg.com/svelte@${version}`;
 

packages/repl/src/lib/workers/bundler/index.ts

@@ -93,7 +93,6 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 				const compiler =
 					files?.get('/compiler/index.js')?.() ??
 					(await fetch(`${svelte_url}/compiler/index.js`).then((r) => r.text()));
-				console.log(compiler);
 				(0, eval)(compiler + '\n//# sourceURL=compiler/index.js@' + version);
 			}