fix: migrate button, repl type and upgrade to ^5.0.0 (#474)

* fix: migrate button, repl type and upgrade to ^5.0.0

* chore: upgrade to 5 allover

* chore run dedupe

* fix: untrack current in `link`

* fix: update state correctly

---------

Co-authored-by: Rich Harris <[email protected]>

Author: paoloricciuti

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -15,7 +15,7 @@
 	interface Props {
 		examples: Array<{ title: string; examples: any[] }>;
 		user: User | null;
-		repl: any; // TODO
+		repl: ReturnType<typeof Repl>;
 		gist: Gist;
 		name: string;
 		modified: boolean;
@@ -39,7 +39,7 @@
 	let saving = $state(false);
 	let justSaved = $state(false);
 	let justForked = $state(false);
-	let select: any; // TODO why can't i do `select: SelectIcon`?
+	let select: ReturnType<typeof SelectIcon>;
 
 	function wait(ms: number) {
 		return new Promise((f) => setTimeout(f, ms));

packages/editor/src/lib/Workspace.svelte.ts

@@ -12,6 +12,7 @@ import { acceptCompletion } from '@codemirror/autocomplete';
 import { indentWithTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
 import { theme } from './theme';
+import { untrack } from 'svelte';
 
 export interface File {
 	type: 'file';
@@ -157,7 +158,7 @@ export class Workspace {
 		if (this.#view) throw new Error('view is already linked');
 		this.#view = view;
 
-		view.setState(this.#get_state(this.#current));
+		view.setState(this.#get_state(untrack(() => this.#current)));
 	}
 
 	move(from: Item, to: Item) {
@@ -195,7 +196,7 @@ export class Workspace {
 			return true;
 		});
 
-		this.#current = next;
+		this.#select(next);
 
 		this.#onreset?.(this.#files);
 	}
@@ -274,10 +275,9 @@ export class Workspace {
 			if (!file) {
 				throw new Error(`Invalid selection ${selected}`);
 			}
-
-			this.#current = file as File;
+			this.#select(file as File);
 		} else {
-			this.#current = first;
+			this.#select(first);
 		}
 
 		this.#files = files;
@@ -302,11 +302,7 @@ export class Workspace {
 
 	update_file(file: File) {
 		if (file.name === this.#current.name) {
-			// TODO this line causes the editor to keep losign
-			// focus and I have no idea why. It seems important,
-			// but it also doesn't appear to break anything
-			// if we comment it out?
-			// this.#current = file;
+			this.#current = file;
 		}
 
 		this.#files = this.#files.map((old) => {
@@ -455,11 +451,17 @@ export class Workspace {
 		const existing = state.doc.toString();
 
 		if (file.contents !== existing) {
+			const current_cursor_position = this.#view?.state.selection.ranges[0].from!;
+
 			const transaction = state.update({
 				changes: {
 					from: 0,
 					to: existing.length,
 					insert: file.contents
+				},
+				selection: {
+					anchor: current_cursor_position,
+					head: current_cursor_position
 				}
 			});