(fix): show warnings only for the selected file in cm diagnostics (#521)

* (fix): show warnings only for the selected file in cm diagnostics

* add changesets

* clean console.log

* Fix diagnostic getting out of sync

* Minor cleanup

* Reduce lint delay

---------

Co-authored-by: Puru Vijay <devpuruvj@gmail.com>

.changeset/shy-bikes-prove.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/repl': patch
+---
+
+show warnings only for the selected file

packages/repl/src/lib/CodeMirror.svelte

@@ -230,6 +230,7 @@
 			svelte: () => import('@replit/codemirror-lang-svelte').then((m) => m.svelte())
 		},
 		lint: diagnostics,
+		lintOptions: { delay: 200 },
 		autocomplete,
 		extensions: [watcher],
 		instanceStore: cmInstance

packages/repl/src/lib/Input/ModuleEditor.svelte

@@ -24,38 +24,34 @@
 
 	$: filename = $selected?.name + '.' + $selected?.type;
 
-	let error_file = '';
-
 	$: if ($bundle) {
 		error = $bundle?.error;
 		warnings = $bundle?.warnings ?? [];
-		if (error || warnings.length > 1) {
-			error_file = error?.filename ?? warnings[0]?.filename;
-		}
 	}
 
 	async function diagnostics() {
 		await $bundling;
-		return $selected && error_file === get_full_filename($selected)
-			? /** @type {import('@codemirror/lint').Diagnostic[]} */ ([
-					...(error
-						? [
-								{
-									from: error.start.character,
-									to: error.end.character,
-									severity: 'error',
-									message: error.message
-								}
-						  ]
-						: []),
-					...warnings.map((warning) => ({
-						from: warning.start.character,
-						to: warning.end.character,
-						severity: 'warning',
-						message: warning.message
-					}))
-			  ])
-			: [];
+
+		return /** @type {import('@codemirror/lint').Diagnostic[]} */ ([
+			...($selected && error?.filename === get_full_filename($selected)
+				? [
+						{
+							from: error.start.character,
+							to: error.end.character,
+							severity: 'error',
+							message: error.message
+						}
+				  ]
+				: []),
+			...warnings
+				.filter((warning) => $selected && warning.filename === get_full_filename($selected))
+				.map((warning) => ({
+					from: warning.start.character,
+					to: warning.end.character,
+					severity: 'warning',
+					message: warning.message
+				}))
+		]);
 	}
 </script>
 

packages/repl/src/routes/+page.svelte

@@ -13,22 +13,22 @@
 					name: 'App',
 					type: 'svelte',
 					source:
-						`<scr` +
-						`ipt>
-	let name = 'world';
-</scr` +
-						`ipt>
-
-<h1>Hello {name}!</h1>
-
-<input type="button" on:click on:keypress value="press me"/>
-`
+						'<scri' +
+						"pt>\n\timport Timeline from './Timeline.svelte'\n\timport Sequence from './Sequence.svelte'\n\t\n\timport { tweened } from 'svelte/motion';\n</sc" +
+						'ript>\n\n<Timeline>\n\t<Sequence let:fps let:frame>\n\t\t<div style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">\n\t\t\t<h1 style="opacity: {Math.min(1, frame / fps)}; transform: translateY({Math.cos(frame/15) * 10}px);">\n\t\t\t\tHello Svelte\n\t\t\t</h1>\n\t\t\t<p style="opacity: {Math.min(1, frame / fps)}; transform: translateY({Math.cos((frame - 5)/15) * 10}px);">\n\t\t\t\tThis is a test.\n\t\t\t</p>\n\t\t</div>\n\t</Sequence>\n</Timeline>\n'
+				},
+				{
+					name: 'Sequence',
+					type: 'svelte',
+					source:
+						'<scri' +
+						"pt>\n\timport { onMount, onDestroy, getContext } from 'svelte';\n\t\n\tconst timeline = getContext('x:timeline');\n\t\n\t$: ({ width, height, fps } = $timeline);\n\t\n\texport let duration = fps * 10;\n\texport let start = 0;\n\texport let track = 1;\n\t\n\t$: frame = $timeline.frame - start;\n</sc" +
+						'ript>\n\n{#if timeline}\n\t<div class="sequence" style="width: {width}px; height: {height}px; border: 1px solid #ddd;">\n\t\t<slot {width} {height} {fps} {duration} {frame} />\n\t</div>\n{/if}\n'
 				},
 				{
-					name: 'B',
+					name: 'Timeline',
 					type: 'svelte',
-					source: `<input type="button" on:click on:keypress value="press me"/>
-`
+					source: ''
 				}
 			]
 		});