(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 <[email protected]>

.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: ''
  }
  ]
  });