WIP sourcemap stuff

Author: Rich-Harris

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

@@ -302,19 +302,23 @@ export class Workspace {
 	}
 
 	onhover(fn: (pos: number) => void) {
-		this.#handlers.hover.add(fn);
+		$effect(() => {
+			this.#handlers.hover.add(fn);
 
-		return () => {
-			this.#handlers.hover.delete(fn);
-		};
+			return () => {
+				this.#handlers.hover.delete(fn);
+			};
+		});
 	}
 
 	onselect(fn: (from: number, to: number) => void) {
-		this.#handlers.select.add(fn);
+		$effect(() => {
+			this.#handlers.select.add(fn);
 
-		return () => {
-			this.#handlers.select.delete(fn);
-		};
+			return () => {
+				this.#handlers.select.delete(fn);
+			};
+		});
 	}
 
 	remove(item: Item) {

packages/repl/src/lib/Output/AstNode.svelte

@@ -10,12 +10,12 @@
 		key?: string;
 		value: Ast;
 		path_nodes?: Ast[];
-		autoscroll?: boolean;
+		active?: boolean;
 		depth?: number;
 		onhover: (node: { type: string; start: number; end: number } | null) => void;
 	}
 
-	let { key = '', value, path_nodes = [], autoscroll = true, onhover, depth = 0 }: Props = $props();
+	let { key = '', value, path_nodes = [], active = true, onhover, depth = 0 }: Props = $props();
 
 	const { toggleable, workspace } = get_repl_context();
 
@@ -32,8 +32,8 @@
 	let key_text = $derived(key ? `${key}:` : '');
 
 	$effect(() => {
-		if (typeof value === 'object' && value !== null) {
-			const offselect = workspace.onselect((from, to) => {
+		if (active && typeof value === 'object' && value !== null) {
+			workspace.onselect((from, to) => {
 				const nodes = value.type === 'Fragment' ? value.nodes : is_array ? value : [value];
 
 				const start = nodes[0]?.start;
@@ -51,10 +51,6 @@
 					});
 				}
 			});
-
-			return () => {
-				offselect();
-			};
 		}
 	});
 </script>
@@ -107,7 +103,7 @@
 						key={is_array ? undefined : k}
 						value={v}
 						{path_nodes}
-						{autoscroll}
+						{active}
 						{onhover}
 						depth={depth + 1}
 					/>

packages/repl/src/lib/Output/AstView.svelte

@@ -10,10 +10,10 @@
 	interface Props {
 		workspace: Workspace;
 		ast: Ast;
-		autoscroll?: boolean;
+		active?: boolean;
 	}
 
-	let { workspace, ast, autoscroll = true }: Props = $props();
+	let { workspace, ast, active = true }: Props = $props();
 
 	let cursor = $state(0);
 
@@ -43,14 +43,8 @@
 		}
 	}
 
-	$effect(() => {
-		const offhover = workspace.onhover((pos) => {
-			cursor = pos;
-		});
-
-		return () => {
-			offhover();
-		};
+	workspace.onhover((pos) => {
+		cursor = pos;
 	});
 </script>
 
@@ -62,7 +56,7 @@
 					<AstNode
 						value={ast}
 						{path_nodes}
-						{autoscroll}
+						{active}
 						onhover={(node) => {
 							if (
 								node === null ||

packages/repl/src/lib/Output/Output.svelte

@@ -6,6 +6,7 @@
 	import Viewer from './Viewer.svelte';
 	import { Editor, Workspace, type File } from 'editor';
 	import { untrack } from 'svelte';
+	import { decode } from '@jridgewell/sourcemap-codec';
 
 	interface Props {
 		status: string | null;
@@ -81,6 +82,26 @@
 			css_workspace.update_file(css);
 		});
 	});
+
+	$effect(() => {
+		if (!markdown && view === 'js') {
+			workspace.onhover((pos) => {
+				if (!current.result.js.map) return;
+
+				const lines = decode(current.result.js.map.mappings);
+
+				// TODO find the `line`/`column` corresponding to `pos`
+
+				for (const segments of lines) {
+					// TODO find the segment that corresponds to `line`/`column`
+				}
+			});
+
+			js_workspace.onhover((pos) => {
+				// TODO same in reverse
+			});
+		}
+	});
 </script>
 
 <div class="view-toggle">
@@ -132,7 +153,7 @@
 <!-- ast output -->
 {#if current?.result}
 	<div class="tab-content" class:visible={!is_markdown && view === 'ast'}>
-		<AstView {workspace} ast={current.result.ast} autoscroll={!is_markdown && view === 'ast'} />
+		<AstView {workspace} ast={current.result.ast} active={!is_markdown && view === 'ast'} />
 	</div>
 {/if}