fix: correct display for warnings (sveltejs#376)

fixes sveltejs#322

Author: tomoam

content/tutorial/common/src/__client.js

@@ -97,8 +97,4 @@ if (import.meta.hot) {
 	import.meta.hot.on('vite:beforeUpdate', (event) => {
 		post({ type: 'hmr', data: event.updates });
 	});
-
-	import.meta.hot.on('svelte:warnings', (data) => {
-		post({ type: 'warnings', data });
-	});
 }

content/tutorial/common/svelte.config.js

@@ -8,10 +8,11 @@ const config = {
 	},
 
 	vitePlugin: {
-		experimental: {
-			// This feature enables compile-time warnings to be
-			// visible in the learn.svelte.dev editor
-			sendWarningsToBrowser: true
+		// This enables compile-time warnings to be
+		// visible in the learn.svelte.dev editor
+		onwarn: (warning, defaultHandler) => {
+			console.log('svelte:warnings:%s', JSON.stringify(warning));
+			defaultHandler(warning);
 		}
 	}
 };

src/lib/client/adapters/webcontainer/index.js

@@ -5,6 +5,10 @@ import * as yootils from 'yootils';
 import { escape_html, get_depth } from '../../../utils.js';
 import { ready } from '../common/index.js';
 
+/**
+ * @typedef {import("../../../../routes/tutorial/[slug]/state.js").CompilerWarning} CompilerWarning
+ */
+
 const converter = new AnsiToHtml({
 	fg: 'var(--sk-text-3)'
 });
@@ -17,9 +21,10 @@ let vm;
  * @param {import('svelte/store').Writable<Error | null>} error
  * @param {import('svelte/store').Writable<{ value: number, text: string }>} progress
  * @param {import('svelte/store').Writable<string[]>} logs
+ * @param {import('svelte/store').Writable<Record<string, CompilerWarning[]>>} warnings
  * @returns {Promise<import('$lib/types').Adapter>}
  */
-export async function create(base, error, progress, logs) {
+export async function create(base, error, progress, logs, warnings) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
@@ -45,12 +50,40 @@ export async function create(base, error, progress, logs) {
 		}
 	});
 
+	/** @type {Record<string, CompilerWarning[]>} */
+	let $warnings;
+	warnings.subscribe((value) => $warnings = value);
+
+	/** @type {any} */
+	let timeout;
+
+	/** @param {number} msec */
+	function schedule_to_update_warning(msec) {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => warnings.set($warnings), msec);
+	}
+
 	const log_stream = () =>
 		new WritableStream({
 			write(chunk) {
 				if (chunk === '\x1B[1;1H') {
 					// clear screen
 					logs.set([]);
+
+				} else if (chunk?.startsWith('svelte:warnings:')) {
+					/** @type {CompilerWarning} */
+					const warn = JSON.parse(chunk.slice(16));
+					const current = $warnings[warn.filename];
+
+					if (!current) {
+						$warnings[warn.filename] = [warn];
+					// the exact same warning may be given multiple times in a row
+					} else if (!current.some((s) => (s.code === warn.code && s.pos === warn.pos))) {
+						current.push(warn);
+					}
+
+					schedule_to_update_warning(100);
+
 				} else {
 					const log = converter.toHtml(escape_html(chunk)).replace(/\n/g, '<br>');
 					logs.update(($logs) => [...$logs, log]);
@@ -154,6 +187,17 @@ export async function create(base, error, progress, logs) {
 					...force_delete
 				];
 
+				// initialize warnings of written files
+				to_write
+					.filter((stub) => stub.type === 'file' && $warnings[stub.name])
+					.forEach((stub) => $warnings[stub.name] = []);
+				// remove warnings of deleted files
+				to_delete
+					.filter((stubname) => $warnings[stubname])
+					.forEach((stubname) => delete $warnings[stubname]);
+
+				warnings.set($warnings);
+
 				current_stubs = stubs_to_map(stubs);
 
 				// For some reason, server-ready is fired again when the vite dev server is restarted.
@@ -221,6 +265,10 @@ export async function create(base, error, progress, logs) {
 
 				tree[basename] = to_file(file);
 
+				// initialize warnings of this file
+				$warnings[file.name] = [];
+				schedule_to_update_warning(100);
+
 				await vm.mount(root);
 
 				current_stubs.set(file.name, file);

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

@@ -15,7 +15,8 @@
 	import { HighlightStyle } from '@codemirror/language';
 	import { syntaxHighlighting } from '@codemirror/language';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
-	import { files, selected_file, selected_name, update_file, warnings } from './state.js';
+	import { files, selected_file, selected_name, update_file } from './state.js';
+	import { warnings } from './adapter.js';
 	import './codemirror.css';
 
 	/** @type {HTMLDivElement} */

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

@@ -5,7 +5,6 @@
 	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;
@@ -63,11 +62,6 @@
 			}, 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]/adapter.js

@@ -15,14 +15,17 @@ export const error = writable(null);
 /** @type {import('svelte/store').Writable<string[]>} */
 export const logs = writable([]);
 
+/** @type {import('svelte/store').Writable<Record<string, import('./state').CompilerWarning[]>>} */
+export const warnings = writable({});
+
 /** @type {Promise<import('$lib/types').Adapter>} */
 let ready = new Promise(() => {});
 
 if (browser) {
 	ready = new Promise(async (fulfil, reject) => {
 		try {
 			const module = await import('$lib/client/adapters/webcontainer/index.js');
-			const adapter = await module.create(base, error, progress, logs);
+			const adapter = await module.create(base, error, progress, logs, warnings);
 
 			fulfil(adapter);
 		} catch (error) {

src/routes/tutorial/[slug]/state.js

@@ -25,9 +25,6 @@ export const files = writable([]);
 /** @type {Writable<Record<string, import('$lib/types').Stub>>} */
 export const solution = writable({});
 
-/** @type {Writable<Record<string, CompilerWarning[]>>} */
-export const warnings = writable({});
-
 /** @type {Writable<{ parent: string, type: 'file' | 'directory' } | null>} */
 export const creating = writable(null);