use context for error navigation

site/src/components/Repl/CodeMirror.svelte

@@ -12,9 +12,10 @@
 </script>
 
 <script>
-	import { onMount, beforeUpdate, createEventDispatcher } from 'svelte';
+	import { onMount, beforeUpdate, createEventDispatcher, getContext } from 'svelte';
 
 	const dispatch = createEventDispatcher();
+	const { navigate } = getContext('REPL');
 
 	export let mode;
 	export let code;
@@ -266,7 +267,7 @@
 					{#if error.filename}
 						<span
 							class='filename'
-							on:click="{() => dispatch('navigate', { filename: error.filename })}"
+							on:click="{() => navigate({ filename: error.filename })}"
 						>{error.filename}</span>
 					{/if}
 

site/src/components/Repl/Input/ModuleEditor.svelte

@@ -34,7 +34,6 @@
 			{errorLoc}
 			{warningCount}
 			on:change
-			on:navigate
 		/>
 	{/if}
 </div>

site/src/components/Repl/Input/index.svelte

@@ -14,5 +14,4 @@
 	{errorLoc}
 	{warningCount}
 	on:change
-	on:navigate
 />

site/src/components/Repl/Output/Viewer.svelte

@@ -5,7 +5,7 @@
 	import { decode } from 'sourcemap-codec';
 
 	const dispatch = createEventDispatcher();
-	const { values } = getContext('REPL');
+	const { values, navigate } = getContext('REPL');
 
 	export let bundle;
 	export let dom;
@@ -313,7 +313,7 @@
 			{#if error.loc}
 			<strong>
 				{#if error.filename}
-					<span class="filename" on:click="{() => dispatch('navigate', { filename: error.filename })}">{error.filename}</span>
+					<span class="filename" on:click="{() => navigate({ filename: error.filename })}">{error.filename}</span>
 				{/if}
 
 				({error.loc.line}:{error.loc.column})

site/src/components/Repl/Output/index.svelte

@@ -44,10 +44,6 @@
 		viewer.setProp(prop, value);
 		updateValues(prop, value);
 	}
-
-	function navigate(event) {
-		// TODO handle navigation from error messages
-	}
 </script>
 
 <style>
@@ -134,7 +130,6 @@
 					{props}
 					{sourceError}
 					bind:error={runtimeError}
-					on:navigate={navigate}
 					on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
 				/>
 			{:else}

site/src/components/Repl/index.svelte

@@ -35,7 +35,16 @@
 	setContext('REPL', {
 		components,
 		values,
-		selected
+		selected,
+
+		navigate: filename => {
+			const name = filename.replace(/\.svelte$/, '');
+
+			console.error(`TODO navigate`);
+
+			// if (selected.name === name) return;
+			// selected = components.find(c => c.name === name);
+		}
 	});
 
 	$: {
@@ -134,15 +143,6 @@
 		workers.bundler.postMessage({ type: 'bundle', components: $components });
 	}
 
-	function navigate(filename) {
-		const name = filename.replace(/\.svelte$/, '');
-
-		console.error(`TODO navigate`);
-
-		// if (selected.name === name) return;
-		// selected = components.find(c => c.name === name);
-	}
-
 	$: if (sourceError && $selected) {
 		sourceErrorLoc = sourceError.filename === `${$selected.name}.${$selected.type}`
 			? sourceError.start