avoid overloading svelteUrl, just use the verison string directly

Author: Rich-Harris

apps/svelte.dev/src/config.js

@@ -1,6 +1,5 @@
 // REPL props
 
-export const svelteUrl = `https://unpkg.com/svelte@4`;
 export const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = '${
 	import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
 }';`;

apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

@@ -24,8 +24,7 @@ export async function create(): Promise<Adapter> {
 
 	bundler = new Bundler({
 		packages_url: 'https://unpkg.com',
-		svelte_url: `https://unpkg.com/svelte`,
-		// svelte_url: `${browser ? location.origin : ''}/svelte`, // TODO think about bringing back main-build for Playground?
+		svelte_version: 'latest',
 		onstatus(val) {
 			if (!done && val === null) {
 				done = true;

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

@@ -19,6 +19,7 @@
 	let modified = $state(false);
 	let setting_hash: any = null;
 
+	// svelte-ignore non_reactive_update
 	let version = $page.url.searchParams.get('version') || 'latest';
 	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
 
@@ -149,13 +150,6 @@
 		}
 	}
 
-	const svelteUrl =
-		browser && version === 'local'
-			? `${location.origin}/playground/local`
-			: is_pr_or_commit_version
-				? version
-				: `https://unpkg.com/svelte@${version}`;
-
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
 </script>
 
@@ -201,7 +195,7 @@
 		<div style="display: contents" onfocusout={update_hash}>
 			<Repl
 				bind:this={repl}
-				{svelteUrl}
+				svelteVersion={version}
 				{relaxed}
 				{can_escape}
 				injectedJS={mapbox_setup}

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

@@ -4,35 +4,34 @@
 	import { theme } from '@sveltejs/site-kit/stores';
 	import { Repl } from '@sveltejs/repl';
 	import { mapbox_setup } from '../../../../../config.js';
-	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
 
 	let { data } = $props();
 
 	let repl = $state() as ReturnType<typeof Repl>;
 
-	onMount(() => {
-		if (data.version !== 'local') {
-			fetch(`https://unpkg.com/svelte@${data.version}/package.json`)
+	// svelte-ignore non_reactive_update
+	let version = $page.url.searchParams.get('version') || 'latest';
+	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
+
+	if (version !== 'local' && !is_pr_or_commit_version) {
+		$effect(() => {
+			fetch(`https://unpkg.com/svelte@${version}/package.json`)
 				.then((r) => r.json())
 				.then((pkg) => {
 					if (pkg.version !== data.version) {
 						replaceState(`/playground/${data.gist.id}/embed?version=${pkg.version}`, {});
 					}
 				});
-		}
-	});
+		});
+	}
 
 	afterNavigate(() => {
 		repl?.set({
 			files: data.gist.components
 		});
 	});
 
-	const svelteUrl =
-		browser && data.version === 'local'
-			? `${location.origin}/playground/local`
-			: `https://unpkg.com/svelte@${data.version}`;
-
 	const relaxed = $derived(data.gist.relaxed || (data.user && data.user.id === data.gist.owner));
 </script>
 
@@ -48,7 +47,7 @@
 	{#if browser}
 		<Repl
 			bind:this={repl}
-			{svelteUrl}
+			svelteVersion={version}
 			{relaxed}
 			can_escape
 			injectedJS={mapbox_setup}

packages/repl/src/lib/Bundler.ts

@@ -15,20 +15,20 @@ export default class Bundler {
 
 	constructor({
 		packages_url,
-		svelte_url,
+		svelte_version,
 		onstatus,
 		onerror
 	}: {
 		packages_url: string;
-		svelte_url: string;
+		svelte_version: string;
 		onstatus: (val: string | null) => void;
 		onerror?: (message: string) => void;
 	}) {
-		this.hash = `${packages_url}:${svelte_url}`;
+		this.hash = `${packages_url}:${svelte_version}`;
 
 		if (!workers.has(this.hash)) {
 			const worker = new Worker();
-			worker.postMessage({ type: 'init', packages_url, svelte_url });
+			worker.postMessage({ type: 'init', packages_url, svelte_version });
 			workers.set(this.hash, worker);
 		}
 

packages/repl/src/lib/Repl.svelte

@@ -12,7 +12,7 @@
 
 	interface Props {
 		packagesUrl?: string;
-		svelteUrl?: any;
+		svelteVersion?: string;
 		embedded?: boolean;
 		orientation?: 'columns' | 'rows';
 		relaxed?: boolean;
@@ -27,7 +27,7 @@
 
 	let {
 		packagesUrl = 'https://unpkg.com',
-		svelteUrl = `${BROWSER ? location.origin : ''}/svelte`,
+		svelteVersion = 'latest',
 		embedded = false,
 		orientation = 'columns',
 		relaxed = false,
@@ -51,10 +51,7 @@
 
 	const workspace = new Workspace([dummy], {
 		initial: 'App.svelte',
-		svelte_version:
-			svelteUrl.startsWith('pr-') || svelteUrl.startsWith('commit-')
-				? svelteUrl
-				: svelteUrl.split('@')[1],
+		svelte_version: svelteVersion,
 		onupdate() {
 			rebundle();
 			onchange?.();
@@ -123,7 +120,7 @@
 	const bundler = BROWSER
 		? new Bundler({
 				packages_url: packagesUrl,
-				svelte_url: svelteUrl,
+				svelte_version: svelteVersion,
 				onstatus: (message) => {
 					if (message) {
 						// show bundler status, but only after time has elapsed, to

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

@@ -40,8 +40,11 @@ let package_json: any;
 self.addEventListener('message', async (event: MessageEvent<BundleMessageData>) => {
 	switch (event.data.type) {
 		case 'init': {
-			({ packages_url, svelte_url } = event.data);
-			const match = /^(pr|commit)-(.+)/.exec(svelte_url);
+			const svelte_version = event.data.svelte_version;
+			packages_url = event.data.packages_url;
+
+			svelte_url = `${packages_url}/svelte@${svelte_version}`;
+			const match = /^(pr|commit)-(.+)/.exec(svelte_version);
 
 			let tarball: FileDescription[] | undefined;
 

packages/repl/src/lib/workers/workers.d.ts

@@ -53,7 +53,7 @@ export type BundleMessageData = {
 	type: 'init' | 'bundle' | 'status' | 'error';
 	message: string;
 	packages_url: string;
-	svelte_url: string;
+	svelte_version: string;
 	files: File[];
 	options: CompileOptions;
 };