move diagnostics logic into workspace, expose workspace.current_compiled

Author: Rich-Harris

packages/editor/src/lib/Editor.svelte

@@ -2,7 +2,6 @@
 	import { BROWSER } from 'esm-env';
 	import { setDiagnostics } from '@codemirror/lint';
 	import { EditorView } from '@codemirror/view';
-	import type { Diagnostic } from '@codemirror/lint';
 	import { Workspace, type File } from './Workspace.svelte.js';
 	import './codemirror.css';
 
@@ -34,50 +33,8 @@
 		};
 	});
 
-	// TODO move into workspace
 	$effect(() => {
-		const diagnostics: Diagnostic[] = [];
-
-		const error = workspace.compiled[workspace.current.name]?.error;
-		const current_warnings = workspace.compiled[workspace.current.name]?.result?.warnings ?? [];
-
-		if (error) {
-			diagnostics.push({
-				severity: 'error',
-				from: error.position![0],
-				to: error.position![1],
-				message: error.message,
-				renderMessage: () => {
-					const span = document.createElement('span');
-					span.innerHTML = `${error.message
-						.replace(/&/g, '&')
-						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${error.code})</strong>`;
-
-					return span;
-				}
-			});
-		}
-
-		for (const warning of current_warnings) {
-			diagnostics.push({
-				severity: 'warning',
-				from: warning.start!.character,
-				to: warning.end!.character,
-				message: warning.message,
-				renderMessage: () => {
-					const span = document.createElement('span');
-					span.innerHTML = `${warning.message
-						.replace(/&/g, '&amp;')
-						.replace(/</g, '&lt;')
-						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${warning.code})</strong>`;
-
-					return span;
-				}
-			});
-		}
-
-		const transaction = setDiagnostics(editor_view.state, diagnostics);
+		const transaction = setDiagnostics(editor_view.state, workspace.diagnostics);
 		editor_view.dispatch(transaction);
 	});
 </script>

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

@@ -13,6 +13,7 @@ import { indentWithTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
 import { theme } from './theme';
 import { untrack } from 'svelte';
+import type { Diagnostic } from '@codemirror/lint';
 
 export interface File {
 	type: 'file';
@@ -102,6 +103,51 @@ export class Workspace {
 	states = new Map<string, EditorState>();
 	#view: EditorView | null = null;
 
+	diagnostics = $derived.by(() => {
+		const diagnostics: Diagnostic[] = [];
+
+		const error = this.current_compiled?.error;
+		const warnings = this.current_compiled?.result?.warnings ?? [];
+
+		if (error) {
+			diagnostics.push({
+				severity: 'error',
+				from: error.position![0],
+				to: error.position![1],
+				message: error.message,
+				renderMessage: () => {
+					const span = document.createElement('span');
+					span.innerHTML = `${error.message
+						.replace(/&/g, '&amp;')
+						.replace(/</g, '&lt;')
+						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${error.code})</strong>`;
+
+					return span;
+				}
+			});
+		}
+
+		for (const warning of warnings) {
+			diagnostics.push({
+				severity: 'warning',
+				from: warning.start!.character,
+				to: warning.end!.character,
+				message: warning.message,
+				renderMessage: () => {
+					const span = document.createElement('span');
+					span.innerHTML = `${warning.message
+						.replace(/&/g, '&amp;')
+						.replace(/</g, '&lt;')
+						.replace(/`(.+?)`/g, `<code>$1</code>`)} <strong>(${warning.code})</strong>`;
+
+					return span;
+				}
+			});
+		}
+
+		return diagnostics;
+	});
+
 	constructor(
 		files: Item[],
 		{
@@ -141,6 +187,14 @@ export class Workspace {
 		return this.#current;
 	}
 
+	get current_compiled() {
+		if (this.#current.name in this.compiled) {
+			return this.compiled[this.#current.name];
+		}
+
+		return null;
+	}
+
 	add(item: Item) {
 		this.#create_directories(item);
 		this.#files = this.#files.concat(item);

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

@@ -61,7 +61,7 @@
 
 	let markdown = $derived(is_markdown ? (marked.parse(workspace.current!.contents) as string) : '');
 
-	let current = $derived(workspace.compiled[workspace.current.name!]);
+	let current = $derived(workspace.current_compiled);
 
 	// TODO this effect is a bit of a code smell
 	$effect(() => {

packages/repl/src/lib/Repl.svelte

@@ -154,10 +154,10 @@
 
 	let runes = $derived(
 		workspace.current.name.endsWith('.svelte.js') ||
-			(workspace.compiled[workspace.current.name!]?.result?.metadata.runes ?? false)
+			(workspace.current_compiled?.result?.metadata.runes ?? false)
 	);
 
-	let migration = $derived(workspace.compiled[workspace.current.name!]?.migration);
+	let migration = $derived(workspace.current_compiled?.migration);
 	let can_migrate = $derived(migration ? migration.code !== workspace.current?.contents : false);
 </script>