refactor message stuff

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

@@ -1,6 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
 	import CodeMirror from '../CodeMirror.svelte';
+	import Message from '../Message.svelte';
 
 	const { selected, handle_change, navigate } = getContext('REPL');
 
@@ -36,42 +37,6 @@
 		flex: 1;
 	}
 
-	.info p {
-		position: relative;
-		color: white;
-		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
-		font: 400 1.2rem/1.7 var(--font);
-		margin: 0;
-		border-top: 1px solid white;
-	}
-
-	.navigable {
-		cursor: pointer;
-	}
-
-	.info p::before {
-		content: '!';
-		position: absolute;
-		left: 1.2rem;
-		top: 1.1rem;
-		width: 1rem;
-		height: 1rem;
-		text-align: center;
-		line-height: 1;
-		padding: .4rem;
-		border-radius: 50%;
-		color: white;
-		border: .2rem solid white;
-	}
-
-	.error {
-		background-color: #da106e;
-	}
-
-	.warning {
-		background-color: #e47e0a;
-	}
-
 	@media (min-width: 600px) {
 		.editor-wrapper.columns {
 			/* make it easier to interact with scrollbar */
@@ -96,18 +61,10 @@
 
 	<div class="info">
 		{#if error}
-			<p
+			<Message kind="error" details={error} filename="{$selected.name}.{$selected.type}"/>
-				class="error"
-				class:navigable={error.filename}
-				on:click="{() => navigate(error)}"
-			>{error.message}</p>
 		{:else if warnings.length > 0}
 			{#each warnings as warning}
-				<p
+				<Message kind="warning" details={warning} filename="{$selected.name}.{$selected.type}"/>
-					class="warning"
-					class:navigable={warning.filename}
-					on:click="{() => navigate(warning)}"
-				>{message(warning)}</p>
 			{/each}
 		{/if}
 	</div>

site/src/components/Repl/Message.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const { navigate } = getContext('REPL');
+
+	export let kind;
+	export let details;
+	export let filename;
+
+	function message(details) {
+		let str = details.message || '[missing message]';
+
+		let loc = [];
+
+		if (details.filename && details.filename !== filename) {
+			loc.push(details.filename);
+		}
+
+		if (details.start) loc.push(details.start.line, details.start.column);
+
+		return str + (loc.length ? ` (${loc.join(':')})` : ``);
+	};
+</script>
+
+<style>
+	.message {
+		position: relative;
+		color: white;
+		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
+		font: 400 1.2rem/1.7 var(--font);
+		margin: 0;
+		border-top: 1px solid white;
+	}
+
+	.navigable {
+		cursor: pointer;
+	}
+
+	.message::before {
+		content: '!';
+		position: absolute;
+		left: 1.2rem;
+		top: 1.1rem;
+		width: 1rem;
+		height: 1rem;
+		text-align: center;
+		line-height: 1;
+		padding: .4rem;
+		border-radius: 50%;
+		color: white;
+		border: .2rem solid white;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	.info {
+		background-color: var(--second);
+	}
+
+	.error {
+		background-color: #da106e;
+	}
+
+	.warning {
+		background-color: #e47e0a;
+	}
+</style>
+
+<div class="message {kind}">
+	{#if details}
+		<p
+			class:navigable={details.filename}
+			on:click="{() => navigate(details)}"
+		>{message(details)}</p>
+	{:else}
+		<slot></slot>
+	{/if}
+</div>

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

@@ -2,6 +2,7 @@
 	import { onMount, createEventDispatcher, getContext } from 'svelte';
 	import getLocationFromStack from './getLocationFromStack.js';
 	import ReplProxy from './replProxy.js';
+	import Message from '../Message.svelte';
 	import { decode } from 'sourcemap-codec';
 
 	const dispatch = createEventDispatcher();
@@ -100,7 +101,7 @@
 						const loc = getLocationFromStack(e.stack, $bundle.ssr.map);
 						if (loc) {
 							e.filename = loc.source;
-							e.loc = { line: loc.line, column: loc.column };
+							e.start = { line: loc.line, column: loc.column };
 						}
 
 						error = e;
@@ -197,8 +198,10 @@
 
 <style>
 	.iframe-container {
+		position: absolute;
 		background-color: white;
 		border: none;
+		width: 100%;
 		height: 100%;
 	}
 
@@ -217,11 +220,8 @@
 
 	.overlay {
 		position: absolute;
-		top: 0;
+		bottom: 0;
 		width: 100%;
-		height: 100%;
-		padding: 1em;
-		pointer-events: none;
 	}
 
 	.overlay p {
@@ -258,29 +258,15 @@
 			</body>
 		</html>
 	'></iframe>
-</div>
 
-<div class="overlay">
+	<div class="overlay">
-	{#if error}
+		{#if error}
-		<p class="error message">
+			<Message kind="error" details={error}/>
-			{#if error.loc}
+		{:else if !$bundle}
-			<strong>
+			<Message kind="info">loading Svelte compiler...</Message>
-				{#if error.filename}
+		{:else if pendingImports}
-					<span class="filename" on:click="{() => navigate({ filename: error.filename })}">{error.filename}</span>
+			<Message kind="info">loading {pendingImports} {pendingImports === 1 ? 'dependency' : 'dependencies'} from
-				{/if}
+			https://bundle.run</Message>
-
+		{/if}
-				({error.loc.line}:{error.loc.column})
+	</div>
-			</strong>
-			{/if}
-
-			{error.message}
-		</p>
-	{:else if pending}
-		<div class="pending" on:click={run}>
-			<button class="bg-second white">Click to run</button>
-		</div>
-	{:else if pendingImports}
-		<p class="info message">loading {pendingImports} {pendingImports === 1 ? 'dependency' : 'dependencies'} from
-		https://bundle.run</p>
-	{/if}
 </div>

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

@@ -116,17 +116,12 @@
 {#if view === 'result'}
 	<SplitPane type="vertical" pos={67} fixed={!show_props} fixed_pos={100}>
 		<div slot="a">
-			{#if $bundle}
+			<Viewer
-				<Viewer
+				bind:this={viewer}
-					bind:this={viewer}
+				{props}
-					{props}
+				bind:error={runtimeError}
-					bind:error={runtimeError}
+				on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
-					on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
+			/>
-				/>
-			{:else}
-				<!-- TODO componentise this -->
-				<p class="loading message">loading Svelte compiler...</p>
-			{/if}
 		</div>
 
 		<section slot="b">

site/src/components/Repl/SplitPane.svelte

@@ -71,6 +71,7 @@
 	}
 
 	.pane {
+		position: relative;
 		float: left;
 		width: 100%;
 		height: 100%;

site/src/components/Repl/index.svelte

@@ -207,48 +207,6 @@
 		height: 100%;
 	}
 
-	.repl-inner :global(.message) {
-		position: relative;
-		border-radius: var(--border-r);
-		margin: 0;
-		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
-		vertical-align: middle;
-		font: 400 1.2rem/1.7 var(--font);
-		color: white;
-	}
-
-	.repl-inner :global(.message::before) {
-		content: '!';
-		position: absolute;
-		left: 1.2rem;
-		top: 1.1rem;
-		width: 1rem;
-		height: 1rem;
-		text-align: center;
-		line-height: 1;
-		padding: .4rem;
-		border-radius: 50%;
-		color: white;
-		border: .2rem solid white;
-	}
-
-	.repl-inner :global(.error.message) {
-		background-color: #da106e;
-	}
-
-	.repl-inner :global(.warning.message) {
-		background-color: #e47e0a;
-	}
-
-	.repl-inner :global(.info.message) {
-		background-color: var(--second);
-		animation: fade-in .4s .2s both;
-	}
-
-	.repl-inner :global(.error) :global(.filename) {
-		cursor: pointer;
-	}
-
 	.offset {
 		transform: translate(-50%,0);
 	}