move some logic into ComponentSelector

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

@@ -4,7 +4,6 @@
 	import { enter } from '../../../utils/events.js';
 
 	const { components, selected } = getContext('REPL');
-	const dispatch = createEventDispatcher();
 
 	let editing = null;
 
@@ -33,7 +32,18 @@
 
 	function remove(component) {
 		let result = confirm(`Are you sure you want to delete ${component.name}.${component.type}?`);
-		if (result) dispatch('remove');
+
+		if (result) {
+			const index = $components.indexOf(component);
+
+			if (~index) {
+				components.set($components.slice(0, index).concat($components.slice(index + 1)));
+			} else {
+				console.error(`Could not find component! That's... odd`);
+			}
+
+			selected.set($components[index] || $components[$components.length - 1]);
+		}
 	}
 
 	function selectInput(event) {
@@ -183,11 +193,11 @@
 					</div>
 				{:else}
 					{#if component === editing}
-						<span class="input-sizer">{component.name + (/\./.test(component.name) ? '' : `.${component.type}`)}</span>
+						<span class="input-sizer">{editing.name + (/\./.test(editing.name) ? '' : `.${editing.type}`)}</span>
 
 						<input
 							autofocus
-							bind:value={component.name}
+							bind:value={editing.name}
 							on:focus={selectInput}
 							on:blur="{() => closeEdit()}"
 							use:enter="{e => e.target.blur()}"
@@ -211,7 +221,7 @@
 		{/each}
 	</div>
 
-	<button class="add-new" on:click="{addNew}" title="add new component">
+	<button class="add-new" on:click={addNew} title="add new component">
 		<Icon name="plus" />
 	</button>
 </div>

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

@@ -7,12 +7,7 @@
 	export let warningCount;
 </script>
 
-<!-- TODO would be nice if events bubbled -->
+<ComponentSelector/>
-<ComponentSelector
-	on:create
-	on:remove
-	on:select
-/>
 
 <ModuleEditor
 	{error}

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

@@ -18,7 +18,7 @@
 	export let sourceError;
 	export let sourceErrorLoc;
 	export let runtimeError;
-	export let compileOptions;
+	export let compile_options;
 	export let embedded;
 	export let show_props;
 
@@ -194,7 +194,7 @@
 		<section slot="b">
 			<h3>Compiler options</h3>
 
-			<CompilerOptions bind:options={compileOptions}/>
+			<CompilerOptions bind:options={compile_options}/>
 		</section>
 	</SplitPane>
 {/if}

site/src/components/Repl/index.svelte

@@ -59,7 +59,7 @@
 	let sourceErrorLoc;
 	let runtimeErrorLoc;
 
-	let compileOptions = {
+	let compile_options = {
 		generate: 'dom',
 		dev: false,
 		css: false,
@@ -98,23 +98,6 @@
 		};
 	});
 
-	function removeComponent() {
-		if ($selected.name === 'App') {
-			// App.svelte can't be removed
-			$selected.source = '';
-		} else {
-			const index = $components.indexOf($selected);
-
-			if (~index) {
-				components.set($components.slice(0, index).concat($components.slice(index + 1)));
-			} else {
-				console.error(`Could not find component! That's... odd`);
-			}
-
-			selected.set($components[index] || $components[$components.length - 1]);
-		}
-	}
-
 	function compile(component, options) {
 		if (component.type === 'svelte') {
 			workers.compiler.postMessage({
@@ -145,7 +128,7 @@
 		components.update(c => c);
 
 		// recompile selected component
-		compile($selected, compileOptions);
+		compile($selected, compile_options);
 
 		// regenerate bundle (TODO do this in a separate worker?)
 		workers.bundler.postMessage({ type: 'bundle', components: $components });
@@ -177,7 +160,7 @@
 	}
 
 	$: if (workers && $selected) {
-		compile($selected, compileOptions);
+		compile($selected, compile_options);
 	}
 </script>
 
@@ -292,14 +275,13 @@
 					error={sourceError}
 					errorLoc="{sourceErrorLoc || runtimeErrorLoc}"
 					{warningCount}
-					on:remove={removeComponent}
 					on:change="{handleChange}"
 				/>
 			</section>
 
 			<section slot=b style='height: 100%;'>
 				<Output
-					bind:compileOptions
+					bind:compile_options
 					{version}
 					{js}
 					{css}