show inline diagnostics (#17)

Author: Rich Harris

content/tutorial/common/src/__client.js

@@ -118,4 +118,14 @@ if (import.meta.hot) {
 			'*'
 		);
 	});
+
+	import.meta.hot.on('svelte:warnings', (data) => {
+		parent.postMessage(
+			{
+				type: 'warnings',
+				data
+			},
+			'*'
+		);
+	});
 }

content/tutorial/common/svelte.config.js

@@ -5,6 +5,12 @@ const config = {
 		// Don't do this in your own apps unless you know what you're doing!
 		// See https://kit.svelte.dev/docs/configuration#csrf for more info.
 		csrf: false
+	},
+
+	vitePlugin: {
+		experimental: {
+			sendWarningsToBrowser: true
+		}
 	}
 };
 

package.json

@@ -38,6 +38,7 @@
 		"@codemirror/lang-html": "^6.4.2",
 		"@codemirror/lang-javascript": "^6.1.4",
 		"@codemirror/language": "^6.6.0",
+		"@codemirror/lint": "^6.2.0",
 		"@codemirror/state": "^6.2.0",
 		"@codemirror/view": "^6.9.2",
 		"@fontsource/roboto-mono": "^4.5.10",

pnpm-lock.yaml

@@ -10,10 +10,10 @@
 	import { html } from '@codemirror/lang-html';
 	import { svelte } from '@replit/codemirror-lang-svelte';
 	import { tags } from '@lezer/highlight';
-	import { HighlightStyle } from '@codemirror/language';
-	import { syntaxHighlighting } from '@codemirror/language';
+	import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+	import { setDiagnostics } from '@codemirror/lint';
 	import { afterNavigate } from '$app/navigation';
-	import { files, selected_file, selected_name, update_file } from './state.js';
+	import { files, selected_file, selected_name, update_file, warnings } from './state.js';
 	import './codemirror.css';
 
 	// TODO add more styles (selection ranges, etc)
@@ -40,8 +40,31 @@
 	/** @type {import('@codemirror/view').EditorView} */
 	let editor_view;
 
+	/** @type {import('@codemirror/state').EditorState | undefined} */
+	let current_state;
+
 	$: if (editor_view && $selected_name) {
 		select_state($selected_name);
+
+		const current_warnings = $warnings[$selected_name];
+
+		if (current_warnings) {
+			const diagnostics = current_warnings.map((warning) => {
+				/** @type {import('@codemirror/lint').Diagnostic} */
+				const diagnostic = {
+					from: warning.start.character,
+					to: warning.end.character,
+					severity: 'warning',
+					message: warning.message
+				};
+
+				return diagnostic;
+			});
+
+			const transaction = setDiagnostics(editor_view.state, diagnostics);
+
+			editor_view.dispatch(transaction);
+		}
 	}
 
 	/** @param {string} $selected_name */
@@ -75,6 +98,8 @@
 			editor_states.set(file.name, state);
 		}
 
+		current_state = state;
+
 		if (editor_view) {
 			editor_view.setState(state);
 		}
@@ -114,6 +139,8 @@
 					// keep `editor_states` updated so that undo/redo history is preserved for files independently
 					editor_states.set($selected_file.name, editor_view.state);
 				}
+
+				current_state = editor_view.state;
 			}
 		});
 
@@ -129,6 +156,9 @@
 	afterNavigate(() => {
 		editor_states.clear();
 		select_state($selected_name);
+
+		// clear warnings
+		warnings.set({});
 	});
 </script>
 

src/routes/tutorial/[slug]/Editor.svelte

@@ -5,6 +5,7 @@
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
 	import { base, error, logs, progress, subscribe } from './adapter';
+	import { warnings } from './state';
 
 	/** @type {import('$lib/types').Exercise} */
 	export let exercise;
@@ -61,6 +62,11 @@
 			}, 1000);
 		} else if (e.data.type === 'ping-pause') {
 			clearTimeout(timeout);
+		} else if (e.data.type === 'warnings') {
+			warnings.update(($warnings) => ({
+				...$warnings,
+				[e.data.data.normalizedFilename]: e.data.data.allWarnings
+			}));
 		}
 	}
 

src/routes/tutorial/[slug]/Output.svelte

@@ -49,6 +49,28 @@
 	color: var(--sk-text-2);
 }
 
+.cm-editor .cm-tooltip {
+	border: none;
+	border-radius: 2px;
+	overflow: hidden;
+	margin: 0.4rem 0;
+	filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.1));
+}
+.cm-editor .cm-tooltip-hover {}
+.cm-editor .cm-tooltip-below {}
+.cm-editor .cm-tooltip-lint {}
+.cm-editor .cm-tooltip-section {}
+.cm-editor .cm-diagnostic {
+	border: none;
+	padding: 0.2rem 0.8rem;
+}
+.cm-editor .cm-diagnostic-warning {
+	/* background: hsl(36, 100%, 32%); */
+	background: hsl(39, 100%, 10%);
+}
+.cm-editor .cm-diagnosticText {}
+
+
 @media (prefers-color-scheme: dark) {
 	.cm-editor .cm-activeLineGutter {
 		background-color: var(--sk-back-3);
@@ -57,4 +79,8 @@
 	.cm-editor .cm-activeLine {
 		background-color: var(--sk-back-2);
 	}
+
+	.cm-editor .cm-diagnostic-warning {
+		background: hsl(39, 100%, 20%);
+	}
 }

src/routes/tutorial/[slug]/codemirror.css

@@ -1,13 +1,34 @@
 import { derived, writable } from 'svelte/store';
 import * as adapter from './adapter.js';
 
-/** @type {import('svelte/store').Writable<import('$lib/types').Stub[]>} */
+/**
+ * @template T
+ * @typedef {import('svelte/store').Writable<T>} Writable<T>
+ */
+
+// TODO would be nice if svelte exported this type (maybe it does already?)
+/**
+ * @typedef {{
+ *   code: string;
+ *   start: { line: number, column: number, character: number };
+ *   end: { line: number, column: number, character: number };
+ *   pos: number;
+ *   filename: string;
+ *   frame: string;
+ *   message: string;
+ * }} CompilerWarning
+ */
+
+/** @type {Writable<import('$lib/types').Stub[]>} */
 export const files = writable([]);
 
-/** @type {import('svelte/store').Writable<Record<string, import('$lib/types').Stub>>} */
+/** @type {Writable<Record<string, import('$lib/types').Stub>>} */
 export const solution = writable({});
 
-/** @type {import('svelte/store').Writable<string | null>} */
+/** @type {Writable<Record<string, CompilerWarning[]>>} */
+export const warnings = writable({});
+
+/** @type {Writable<string | null>} */
 export const selected_name = writable(null);
 
 export const selected_file = derived([files, selected_name], ([$files, $selected_name]) => {