fix diagnostics

Author: Rich-Harris

sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte

@@ -1,62 +1,49 @@
 <script>
 	import { get_repl_context } from '$lib/context.js';
-	import { get_full_filename } from '$lib/utils.js';
 	import CodeMirror from '../CodeMirror.svelte';
 
 	/** @type {boolean} */
 	export let autocomplete;
 
+	/** @type {any} */ // TODO
+	export let error;
+
+	/** @type {any[]} */ // TODO
+	export let warnings;
+
 	export function focus() {
 		$module_editor?.focus();
 	}
 
-	const { bundle, handle_change, module_editor, selected, bundling } = get_repl_context();
-
-	async function diagnostics() {
-		/** @type {import('@codemirror/lint').Diagnostic[]} */
-		const diagnostics = [];
-
-		if (!$selected || !$bundle) return diagnostics;
-
-		await $bundling;
-
-		const filename = get_full_filename($selected);
-
-		if (
-			$bundle.error &&
-			$bundle.error.filename === filename &&
-			$bundle.error.start &&
-			$bundle.error.end
-		) {
-			diagnostics.push({
-				from: $bundle.error.start.character,
-				to: $bundle.error.end.character,
-				severity: 'error',
-				message: $bundle.error.message
-			});
-		}
-
-		for (const warning of $bundle.warnings) {
-			if (warning.filename === filename) {
-				diagnostics.push({
-					from: warning.start.character,
-					to: warning.end.character,
-					severity: 'warning',
-					message: warning.message
-				});
-			}
-		}
-
-		return diagnostics;
-	}
+	const { handle_change, module_editor } = get_repl_context();
 </script>
 
 <div class="editor-wrapper">
 	<div class="editor notranslate" translate="no">
 		<CodeMirror
 			bind:this={$module_editor}
 			{autocomplete}
-			diagnostics={$selected && $bundle ? diagnostics : () => []}
+			diagnostics={() => {
+				if (error) {
+					return [{
+						severity: 'error',
+						from: error.position[0],
+						to: error.position[1],
+						message: error.message
+					}];
+				}
+
+				if (warnings) {
+					return warnings.map((warning) => ({
+						severity: 'warning',
+						from: warning.start.character,
+						to: warning.end.character,
+						message: warning.message,
+					}));
+				}
+
+				return [];
+			}}
 			on:change={handle_change}
 		/>
 	</div>

sites/svelte-5-preview/src/lib/Repl.svelte

@@ -247,15 +247,21 @@
 	/** @type {import('./workers/workers').CompileMessageData | null} */
 	let compiled = null;
 
-	$: if (compiler && $selected) {
+	/**
+	 * @param {import('./types').File | null} $selected
+	 * @param {import('svelte/compiler').CompileOptions} $compile_options
+	 */
+	async function recompile($selected, $compile_options) {
+		if (!compiler || !$selected) return;
+
 		if ($selected.type === 'svelte' || $selected.type === 'js') {
-			compiler.compile($selected, $compile_options, false).then((data) => {
-				compiled = data;
-				$runes_mode = data.metadata?.runes ?? false;
-			});
+			compiled = await compiler.compile($selected, $compile_options, false);
+			$runes_mode = compiled.metadata?.runes ?? false;
 		}
 	}
 
+	$: recompile($selected, $compile_options);
+
 	$: mobile = width < 540;
 
 	$: $toggleable = mobile && orientation === 'columns';
@@ -319,7 +325,7 @@
 		>
 			<section slot="a">
 				<ComponentSelector show_modified={showModified} on:add on:remove />
-				<ModuleEditor {autocomplete} />
+				<ModuleEditor {autocomplete} error={compiled?.result.error} warnings={compiled?.result.warnings ?? []} />
 			</section>
 
 			<section slot="b" style="height: 100%;">

sites/svelte-5-preview/src/lib/workers/compiler/index.js

@@ -69,9 +69,10 @@ function compile({ id, source, options, return_ast }) {
 				result: {
 					js: js.code,
 					css: css?.code || `/* Add a <sty` + `le> tag to see compiled CSS */`,
-					warnings
-				},
-				metadata
+					error: null,
+					warnings,
+					metadata
+				}
 			};
 		} else if (options.filename.endsWith('.svelte.js')) {
 			const compiled = svelte.compileModule(source, {
@@ -85,9 +86,10 @@ function compile({ id, source, options, return_ast }) {
 					result: {
 						js: compiled.js.code,
 						css,
-						warnings: compiled.warnings
-					},
-					metadata: compiled.metadata
+						error: null,
+						warnings: compiled.warnings,
+						metadata: compiled.metadata
+					}
 				};
 			}
 		}
@@ -96,7 +98,10 @@ function compile({ id, source, options, return_ast }) {
 			id,
 			result: {
 				js: `// Select a component, or a '.svelte.js' module that uses runes, to see compiled output`,
-				css
+				css,
+				error: null,
+				warnings: [],
+				metadata: null
 			}
 		};
 	} catch (err) {
@@ -107,7 +112,13 @@ function compile({ id, source, options, return_ast }) {
 			id,
 			result: {
 				js: message,
-				css: message
+				css: message,
+				error: {
+					message: err.message,
+					position: err.position
+				},
+				warnings: [],
+				metadata: null
 			}
 		};
 	}