chore: allow REPL users to react to compiler/runtime errors (sveltejs#1518)

Author: dummdidumm

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

@@ -270,6 +270,7 @@
 				error = null;
 			}
 		} catch (e) {
+			console.error(e); // make it show up in the console, too, not just the UI
 			// @ts-ignore
 			show_error(e);
 		}

packages/repl/src/lib/Repl.svelte

@@ -25,6 +25,10 @@
 		onversion?: (version: string) => void;
 		onchange?: () => void;
 		download?: () => void;
+		/**
+		 * Invoked whenever there's a bundler or runtime error
+		 */
+		onerror?: (error: Error) => void;
 	}
 
 	let {
@@ -40,7 +44,8 @@
 		previewTheme = 'light',
 		onversion,
 		onchange = () => {},
-		download
+		download,
+		onerror
 	}: Props = $props();
 
 	// TODO pass in real data
@@ -185,6 +190,18 @@
 		$toggleable = mobile && orientation === 'columns' && embedded !== 'output-only';
 	});
 
+	$effect(() => {
+		if (runtime_error) {
+			onerror?.(runtime_error);
+		}
+	});
+
+	$effect(() => {
+		if (bundler.result?.error) {
+			onerror?.(bundler.result.error as Error);
+		}
+	});
+
 	let runes = $derived(
 		workspace.current.name.endsWith('.svelte.js') ||
 			(workspace.current_compiled?.result?.metadata.runes ?? false)
@@ -235,7 +252,7 @@
 						{injectedCSS}
 						{previewTheme}
 						{workspace}
-						runtimeError={runtime_error}
+						bind:runtimeError={runtime_error}
 					/>
 				</section>
 			{/snippet}

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

@@ -1,4 +1,5 @@
 import type { OutputChunk, RollupError } from '@rollup/browser';
+import type { CompileError } from 'svelte/compiler';
 
 export interface BundleResult {
 	uid: number;

packages/repl/src/routes/v0.svelte

@@ -13,7 +13,14 @@
 </script>
 
 <main>
-	<Repl bind:this={repl} embedded="output-only" />
+	<Repl
+		bind:this={repl}
+		embedded="output-only"
+		onerror={(error) => {
+			// @ts-expect-error so that v0 can react to REPL errors
+			window.__svelte_repl_onerror?.(error);
+		}}
+	/>
 </main>
 
 <style>