fix: attribute deletion (#513)

* Working but not cool

* Fix it properly

* add changesets

* remove unused variable

* update changesets

* neocodemirror 0.0.15

---------

Co-authored-by: Puru Vijay <[email protected]>

Author: paoloricciuti

.changeset/sweet-pianos-sniff.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/repl': patch
+---
+
+manage diagnostics asyncronously with linter

packages/repl/package.json

@@ -73,7 +73,7 @@
 		"@codemirror/view": "^6.14.0",
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@lezer/highlight": "^1.1.6",
-		"@neocodemirror/svelte": "0.0.14",
+		"@neocodemirror/svelte": "0.0.15",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@rich_harris/svelte-split-pane": "^1.1.1",
 		"@rollup/browser": "^3.25.3",

packages/repl/src/lib/CodeMirror.svelte

@@ -4,7 +4,6 @@
 
 <script>
 	import { historyField } from '@codemirror/commands';
-	import { codeFolding } from '@codemirror/language';
 	import { EditorState, Range, StateEffect, StateEffectType, StateField } from '@codemirror/state';
 	import { Decoration, EditorView } from '@codemirror/view';
 	import { codemirror, withCodemirrorInstance } from '@neocodemirror/svelte';
@@ -16,8 +15,8 @@
 	/** @type {import('./types').StartOrEnd | null} */
 	export let errorLoc = null;
 
-	/** @type {import('@codemirror/lint').Diagnostic[]} */
-	export let diagnostics = [];
+	/** @type {import('@codemirror/lint').LintSource>} */
+	export let diagnostics;
 
 	export let readonly = false;
 	export let tab = true;
@@ -230,9 +229,9 @@
 			css: () => import('@codemirror/lang-css').then((m) => m.css()),
 			svelte: () => import('@replit/codemirror-lang-svelte').then((m) => m.svelte())
 		},
+		lint: diagnostics,
 		autocomplete,
-		extensions: [codeFolding(), watcher],
-		diagnostics,
+		extensions: [watcher],
 		instanceStore: cmInstance
 	}}
 	on:codemirror:textChange={({ detail: value }) => {

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

@@ -14,7 +14,7 @@
 		$module_editor?.focus();
 	}
 
-	const { bundle, handle_change, module_editor, selected } = get_repl_context();
+	const { bundle, handle_change, module_editor, selected, bundling } = get_repl_context();
 
 	/** @type {import('$lib/types').Error | null | undefined} */
 	let error = null;
@@ -29,14 +29,14 @@
 	$: if ($bundle) {
 		error = $bundle?.error;
 		warnings = $bundle?.warnings ?? [];
-
 		if (error || warnings.length > 1) {
 			error_file = error?.filename ?? warnings[0]?.filename;
 		}
 	}
 
-	$: diagnostics =
-		$selected && error_file === get_full_filename($selected)
+	async function diagnostics() {
+		await $bundling;
+		return $selected && error_file === get_full_filename($selected)
 			? /** @type {import('@codemirror/lint').Diagnostic[]} */ ([
 					...(error
 						? [
@@ -56,6 +56,7 @@
 					}))
 			  ])
 			: [];
+	}
 </script>
 
 <div class="editor-wrapper">

packages/repl/src/lib/Repl.svelte

@@ -150,12 +150,16 @@
 	/** @type {ReplContext['bundler']} */
 	const bundler = writable(null);
 
+	/** @type {ReplContext['bundling']} */
+	const bundling = writable(new Promise(() => {}));
+
 	set_repl_context({
 		files,
 		selected_name,
 		selected,
 		bundle,
 		bundler,
+		bundling,
 		compile_options,
 		cursor_pos,
 		module_editor,
@@ -175,8 +179,13 @@
 	let current_token;
 	async function rebundle() {
 		const token = (current_token = Symbol());
+		let resolver = () => {};
+		$bundling = new Promise((resolve) => {
+			resolver = resolve;
+		});
 		const result = await $bundler?.bundle($files);
 		if (result && token === current_token) $bundle = result;
+		resolver();
 	}
 
 	let is_select_changing = false;

packages/repl/src/lib/types.d.ts

@@ -54,6 +54,7 @@ export type ReplState = {
 	selected_name: string;
 	selected: File | null;
 	bundle: Bundle | null;
+	bundling: Promise<void>;
 	bundler: import('./Bundler').default | null;
 	compile_options: CompileOptions;
 	cursor_pos: number;
@@ -67,6 +68,7 @@ export type ReplContext = {
 	selected_name: Writable<ReplState['selected_name']>;
 	selected: Readable<ReplState['selected']>;
 	bundle: Writable<ReplState['bundle']>;
+	bundling: Writable<ReplState['bundling']>;
 	bundler: Writable<ReplState['bundler']>;
 	compile_options: Writable<ReplState['compile_options']>;
 	cursor_pos: Writable<ReplState['cursor_pos']>;

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

@@ -15,17 +15,20 @@
 					source:
 						`<scr` +
 						`ipt>
-    import B from './B.svelte';
 	let name = 'world';
 </scr` +
 						`ipt>
 
-<h1>Hello {name}!</h1>`
+<h1>Hello {name}!</h1>
+
+<input type="button" on:click on:keypress value="press me"/>
+`
 				},
 				{
 					name: 'B',
 					type: 'svelte',
-					source: `B`
+					source: `<input type="button" on:click on:keypress value="press me"/>
+`
 				}
 			]
 		});