feat: add svelte version selector to REPL (#1319)

* add svelte version selector to REPL

* fix lint

* fix resolving empty version

* revert button css changes

* tweak styles - make all items the same height etc

---------

Co-authored-by: Tee Ming <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 3 people

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

@@ -5,16 +5,20 @@ import type { Adapter } from '$lib/tutorial';
 import type { File, Item } from '@sveltejs/repl/workspace';
 
 let done = false;
+let svelte_version = 'latest';
 
 export const state = new (class RollupState {
 	progress = $state.raw({ value: 0, text: 'initialising' });
 	bundler = new Bundler({
-		svelte_version: 'latest',
+		svelte_version,
 		onstatus: (val) => {
 			if (!done && val === null) {
 				done = true;
 				this.progress = { value: 1, text: 'ready' };
 			}
+		},
+		onversion: (version) => {
+			svelte_version = version;
 		}
 	});
 })();
@@ -33,7 +37,8 @@ export async function create(): Promise<Adapter> {
 				.map((f) => ({ ...f, name: f.name.slice(9) })),
 			{
 				// TODO support Tailwind here?
-				runes: true
+				runes: true,
+				svelte_version
 			}
 		);
 	}

packages/repl/src/lib/Input/ComponentSelector.svelte

@@ -177,6 +177,15 @@
 
 			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
 
+			<label class="option">
+				<span>Svelte version</span>
+				<input
+					value={workspace.svelte_version}
+					placeholder="latest"
+					onchange={(ev) => (workspace.svelte_version = ev.currentTarget.value || 'latest')}
+				/>
+			</label>
+
 			{#if download}
 				<button onclick={download}>Download app</button>
 			{/if}
@@ -278,7 +287,7 @@
 		}
 	}
 
-	input {
+	.file-tabs input {
 		position: absolute;
 		width: calc(100% - var(--padding-left) - var(--padding-right));
 		border: none;
@@ -318,6 +327,24 @@
 		justify-content: flex-end;
 	}
 
+	.option {
+		height: 3.6rem;
+
+		input {
+			background: transparent;
+			border: none;
+			border-radius: var(--sk-border-radius);
+			color: currentColor;
+			width: 0;
+			flex: 1;
+			padding: 0.2rem 0.6rem;
+			height: 3.2rem;
+			font: var(--sk-font-ui-medium);
+			margin: -0.5rem -0.6rem -0.5rem 1rem;
+			text-align: right;
+		}
+	}
+
 	svg {
 		position: relative;
 		overflow: hidden;

packages/repl/src/lib/Output/PaneWithPanel.svelte

@@ -137,6 +137,7 @@
 	}
 
 	section {
+		position: relative;
 		overflow: hidden;
 	}
 </style>

packages/repl/src/lib/Output/Viewer.svelte

@@ -370,9 +370,15 @@
 		srcdoc={BROWSER ? srcdoc : ''}
 	></iframe>
 
-	{#if bundle?.error}
-		<ErrorOverlay error={bundle.error} />
-	{/if}
+	<div class="overlay">
+		{#if bundle?.error}
+			<ErrorOverlay error={bundle.error} />
+		{:else if error}
+			<Message kind="error" details={error} />
+		{:else if status || !bundle}
+			<Message kind="info" truncate>{status || 'loading Svelte compiler...'}</Message>
+		{/if}
+	</div>
 {/snippet}
 
 <div class="iframe-container">
@@ -401,14 +407,6 @@
 	{:else}
 		{@render main()}
 	{/if}
-
-	<div class="overlay">
-		{#if error}
-			<Message kind="error" details={error} />
-		{:else if status || !bundle}
-			<Message kind="info" truncate>{status || 'loading Svelte compiler...'}</Message>
-		{/if}
-	</div>
 </div>
 
 <style>

packages/repl/src/lib/Repl.svelte

@@ -108,6 +108,7 @@
 
 	function rebundle() {
 		return bundler!.bundle(workspace.files as File[], {
+			svelte_version: workspace.svelte_version,
 			tailwind: workspace.tailwind,
 			fragments: workspace.compiler_options.fragments,
 			aliases: workspace.aliases
@@ -135,7 +136,10 @@
 	const bundler = BROWSER
 		? new Bundler({
 				svelte_version: svelteVersion,
-				onversion,
+				onversion: (version) => {
+					workspace.svelte_version = version;
+					onversion?.(version);
+				},
 				onstatus: (message) => {
 					if (message) {
 						// show bundler status, but only after time has elapsed, to
@@ -231,7 +235,7 @@
 						{injectedCSS}
 						{previewTheme}
 						{workspace}
-						runtimeError={status_visible ? runtime_error : null}
+						runtimeError={runtime_error}
 					/>
 				</section>
 			{/snippet}
@@ -256,13 +260,13 @@
 			height: 100%;
 		}
 
-		:global {
-			section {
-				position: relative;
-				padding: var(--sk-pane-controls-height) 0 0 0;
-				height: 100%;
-				box-sizing: border-box;
+		section {
+			position: relative;
+			padding: var(--sk-pane-controls-height) 0 0 0;
+			height: 100%;
+			box-sizing: border-box;
 
+			:global {
 				& > :first-child {
 					position: absolute;
 					top: 0;
@@ -277,11 +281,11 @@
 					height: 100%;
 				}
 			}
+		}
 
-			[data-pane='main'] > svelte-split-pane-divider::after {
-				height: calc(100% - var(--sk-pane-controls-height));
-				top: var(--sk-pane-controls-height);
-			}
+		:global [data-pane='main'] > svelte-split-pane-divider::after {
+			height: calc(100% - var(--sk-pane-controls-height));
+			top: var(--sk-pane-controls-height);
 		}
 	}
 

packages/repl/src/lib/Workspace.svelte.ts

@@ -112,7 +112,7 @@ export class Workspace {
 	});
 	compiled = $state<Record<string, Compiled>>({});
 
-	#svelte_version: string;
+	#svelte_version = $state('');
 	#readonly = false; // TODO do we need workspaces for readonly stuff?
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
@@ -503,6 +503,16 @@ export class Workspace {
 		this.#onupdate(this.#current);
 	}
 
+	get svelte_version() {
+		return this.#svelte_version;
+	}
+
+	set svelte_version(value) {
+		this.#svelte_version = value;
+		this.#update_file(this.#current);
+		this.#reset_diagnostics();
+	}
+
 	get vim() {
 		return this.#vim;
 	}

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

@@ -44,25 +44,21 @@ const ESM_ENV = '__esm-env.js';
 
 let current_id: number;
 
-let ready: ReturnType<typeof load_svelte>;
-
 self.addEventListener('message', async (event: MessageEvent<BundleMessageData>) => {
 	switch (event.data.type) {
 		case 'init': {
-			ready = load_svelte(event.data.svelte_version, (version) => {
-				self.postMessage({
-					type: 'version',
-					message: version
-				});
-			});
-
+			get_svelte(event.data.svelte_version);
 			break;
 		}
 
 		case 'bundle': {
 			try {
-				const { svelte, version: svelte_version, can_use_experimental_async } = await ready;
 				const { uid, files, options } = event.data;
+				const {
+					svelte,
+					version: svelte_version,
+					can_use_experimental_async
+				} = await get_svelte(options.svelte_version);
 
 				current_id = uid;
 
@@ -96,6 +92,25 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 	}
 });
 
+let ready: ReturnType<typeof load_svelte>;
+let ready_version: string;
+
+function get_svelte(svelte_version: string) {
+	if (ready_version === svelte_version) return ready;
+
+	self.postMessage({ type: 'status', message: `fetching svelte@${svelte_version}` });
+	ready_version = svelte_version;
+	ready = load_svelte(svelte_version || 'latest');
+	ready.then(({ version }) => {
+		ready_version = version;
+		self.postMessage({
+			type: 'version',
+			message: version
+		});
+	});
+	return ready;
+}
+
 const ABORT = { aborted: true };
 
 let previous: {

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

@@ -13,13 +13,17 @@ const packages = new Map<string, Promise<Package>>();
 
 const pkg_pr_new_regex = /^(pr|commit|branch)-(.+)/;
 
-export async function load_svelte(version: string, onresolve?: (resolved: string) => void) {
+export async function load_svelte(version: string) {
 	if (version === 'local') {
 		await import(/* @vite-ignore */ `${location.origin}/svelte/compiler/index.js`);
 	} else {
 		if (!pkg_pr_new_regex.test(version)) {
-			version = await resolve_version('svelte', version);
-			onresolve?.(version);
+			const resolved_version = await resolve_version('svelte', version);
+			if (resolved_version) {
+				version = resolved_version;
+			} else {
+				throw new Error(`Failed to resolve svelte@${version}`);
+			}
 		}
 
 		const pkg = await fetch_package('svelte', version);

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

@@ -50,6 +50,7 @@ export interface MigrateOutput {
 }
 
 export interface BundleOptions {
+	svelte_version: string;
 	tailwind?: boolean;
 	runes?: boolean;
 	fragments?: 'html' | 'tree';

packages/site-kit/src/lib/components/Checkbox.svelte

@@ -19,7 +19,6 @@
 		-webkit-appearance: none;
 		appearance: none;
 		border: transparent;
-		margin: 0 0.6em 0 0;
 	}
 
 	input[type='checkbox']::before {