From 6736a87fec09acd10abb8bdc1c3eab9b0c1bffae Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Fri, 23 Jun 2023 23:29:03 +0530
Subject: [PATCH 1/3] Push

---
 packages/repl/package.json                    |   2 +-
 .../src/lib/Input/ComponentSelector.svelte    | 213 +--------
 .../src/lib/Input/OldComponentSelector.svelte | 415 ++++++++++++++++++
 packages/repl/src/lib/Repl.svelte             |  71 ++-
 packages/repl/src/lib/types.d.ts              |   6 +-
 5 files changed, 474 insertions(+), 233 deletions(-)
 create mode 100644 packages/repl/src/lib/Input/OldComponentSelector.svelte

diff --git a/packages/repl/package.json b/packages/repl/package.json
index ac36a29d..d75e2c08 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -39,7 +39,7 @@
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
-		"watch": "svelte-package --watch",
+		"package:watch": "svelte-package --watch",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index c8721966..75d78066 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -1,110 +1,29 @@
 <script>
 	import { get_repl_context } from '$lib/context.js';
 	import { get_full_filename } from '$lib/utils.js';
-	import { createEventDispatcher, tick } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 
-	/** @type {boolean}  */
-	export let show_modified;
+	export let show_modified = false;
 
 	/** @type {ReturnType<typeof createEventDispatcher<{
-	 * remove: { files: import('$lib/types').File[] },
-	 * add: { files: import('$lib/types').File[] },
+	 * remove: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
+	 * add: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
 	 * }>>} */
 	const dispatch = createEventDispatcher();
 
+	/** @type {string | null} */
+	let editing_name = null;
+
 	const {
 		files,
 		handle_select,
 		module_editor,
 		rebundle,
 		selected,
-		selected_index,
+		selected_name,
 		EDITOR_STATE_MAP
 	} = get_repl_context();
 
-	/** @type {number} */
-	let editing_index = -1;
-
-	/** @param {number} index */
-	function select_file(index) {
-		if ($selected_index !== index) {
-			editing_index = -1;
-			handle_select(index);
-		}
-	}
-
-	/** @param {number} index */
-	function edit_tab(index) {
-		if ($selected_index === index) {
-			editing_index = $selected_index;
-		}
-	}
-
-	async function close_edit() {
-		const match = /(.+)\.(svelte|js|json|md|css)$/.exec($selected?.name ?? '');
-
-		const edited_file = $files[editing_index];
-		edited_file.name = match ? match[1] : edited_file.name;
-
-		if (!$selected) return;
-
-		if (is_file_name_used($selected)) {
-			let i = 1;
-			let name = $selected.name;
-
-			do {
-				$files[$selected_index].name = `${name}_${i++}`;
-			} while (is_file_name_used($selected));
-
-			$files[$selected_index] = edited_file;
-		}
-
-		if (match?.[2]) $files[$selected_index].type = match[2];
-
-		editing_index = -1;
-
-		EDITOR_STATE_MAP.delete(get_full_filename($selected));
-
-		// re-select, in case the type changed
-		handle_select($selected_index);
-
-		// focus the editor, but wait a beat (so key events aren't misdirected)
-		await tick();
-
-		$module_editor?.focus();
-
-		rebundle();
-	}
-
-	/**
-	 * @param {number} index
-	 */
-	function remove(index) {
-		let result = confirm(
-			`Are you sure you want to delete ${$files[index].name}.${$files[index].type}?`
-		);
-
-		if (!result) return;
-
-		if (index !== -1) {
-			$files = $files.filter((_, idx) => idx !== index);
-
-			dispatch('remove', { files: $files });
-		} else {
-			console.error(`Could not find component! That's... odd`);
-		}
-
-		EDITOR_STATE_MAP.delete(get_full_filename($files[index]));
-		handle_select(($selected_index = index - 1));
-	}
-
-	/** @param {FocusEvent & { currentTarget: HTMLInputElement }} event */
-	async function select_input(event) {
-		await tick();
-
-		event.currentTarget.select();
-	}
-
 	let uid = 1;
 
 	function add_new() {
@@ -117,123 +36,33 @@
 
 		$files = $files.concat(file);
 
-		editing_index = $files.length - 1;
-
-		handle_select(editing_index);
-
-		dispatch('add', { files: $files });
-	}
-
-	/** @param {import('$lib/types').File} editing */
-	function is_file_name_used(editing) {
-		return $files.find(
-			(file) => JSON.stringify(file) !== JSON.stringify($selected) && file.name === editing.name
-		);
-	}
-
-	// drag and drop
-	/** @type {string | null} */
-	let from = null;
-
-	/** @type {string | null} */
-	let over = null;
-
-	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
-	function dragStart(event) {
-		from = event.currentTarget.id;
-	}
+		editing_name = get_full_filename(file);
 
-	function dragLeave() {
-		over = null;
-	}
+		handle_select(editing_name);
 
-	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
-	function dragOver(event) {
-		over = event.currentTarget.id;
-	}
-
-	function dragEnd() {
-		if (from && over) {
-			const from_index = $files.findIndex((file) => file.name === from);
-			const to_index = $files.findIndex((file) => file.name === over);
-
-			const from_component = $files[from_index];
-
-			$files.splice(from_index, 1);
-
-			$files = $files.slice(0, to_index).concat(from_component).concat($files.slice(to_index));
-		}
-
-		from = over = null;
+		dispatch('add', { files: $files, diff: file });
 	}
 </script>
 
 <div class="component-selector">
 	{#if $files.length}
 		<div class="file-tabs" on:dblclick={add_new}>
-			{#each $files as file, index (file)}
-				<div
-					id={file.name}
+			{#each $files as file, index (file.name)}
+				{@const filename = get_full_filename(file)}
+
+				<button
 					class="button"
-					role="button"
-					tabindex="0"
-					class:active={index === $selected_index}
-					class:draggable={index !== editing_index && index !== 0}
-					class:drag-over={over === file.name}
-					on:click={() => select_file(index)}
-					on:keyup={(e) => e.key === ' ' && select_file(index)}
-					on:dblclick|stopPropagation={() => {}}
-					draggable={index !== editing_index}
-					on:dragstart={dragStart}
-					on:dragover|preventDefault={dragOver}
-					on:dragleave={dragLeave}
-					on:drop|preventDefault={dragEnd}
+					id={filename}
+					class:active={filename === $selected_name}
+					class:draggable={filename !== editing_name && index !== 0}
 				>
 					<i class="drag-handle" />
-					{#if file.name === 'App' && index !== editing_index}
+					{#if file.name === 'App' && filename !== editing_name}
 						<div class="uneditable">
 							App.svelte{#if show_modified && file.modified}*{/if}
 						</div>
-					{:else if index === editing_index}
-						{@const file = $files[editing_index]}
-
-						<span class="input-sizer">
-							{file.name + (/\./.test(file.name) ? '' : `.${file.type}`)}
-						</span>
-
-						<!-- svelte-ignore a11y-autofocus -->
-						<input
-							autofocus
-							spellcheck={false}
-							bind:value={$files[editing_index].name}
-							on:focus={select_input}
-							on:blur={close_edit}
-							on:keydown={(e) =>
-								e.key === 'Enter' && !is_file_name_used(file) && e.currentTarget.blur()}
-							class:duplicate={is_file_name_used(file)}
-						/>
-					{:else}
-						<div
-							class="editable"
-							title="edit component name"
-							on:click={() => edit_tab(index)}
-							on:keyup={(e) => e.key === ' ' && edit_tab(index)}
-						>
-							{file.name}.{file.type}{#if show_modified && file.modified}*{/if}
-						</div>
-
-						<span
-							class="remove"
-							on:click={() => remove(index)}
-							on:keyup={(e) => e.key === ' ' && remove(index)}
-						>
-							<svg width="12" height="12" viewBox="0 0 24 24">
-								<line stroke="#999" x1="18" y1="6" x2="6" y2="18" />
-								<line stroke="#999" x1="6" y1="6" x2="18" y2="18" />
-							</svg>
-						</span>
-					{/if}
-				</div>
+					{:else if filename === editing_name}{/if}
+				</button>
 			{/each}
 
 			<button class="add-new" on:click={add_new} title="add new component">
diff --git a/packages/repl/src/lib/Input/OldComponentSelector.svelte b/packages/repl/src/lib/Input/OldComponentSelector.svelte
new file mode 100644
index 00000000..5477532d
--- /dev/null
+++ b/packages/repl/src/lib/Input/OldComponentSelector.svelte
@@ -0,0 +1,415 @@
+<script>
+	import { get_repl_context } from '$lib/context.js';
+	import { get_full_filename } from '$lib/utils.js';
+	import { createEventDispatcher, tick } from 'svelte';
+
+	/** @type {boolean}  */
+	export let show_modified;
+
+	/** @type {ReturnType<typeof createEventDispatcher<{
+	 * remove: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
+	 * add: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
+	 * }>>} */
+	const dispatch = createEventDispatcher();
+
+	const {
+		files,
+		handle_select,
+		module_editor,
+		rebundle,
+		selected,
+		selected_name,
+		EDITOR_STATE_MAP
+	} = get_repl_context();
+
+	/** @type {string | null} */
+	let editing_name = null;
+
+	let input_value = '';
+
+	/** @param {string} filename */
+	function select_file(filename) {
+		if ($selected_name !== filename) {
+			editing_name = null;
+			handle_select(filename);
+		}
+	}
+
+	/** @param {string} filename */
+	function edit_tab(filename) {
+		if ($selected_name === filename) {
+			editing_name = filename;
+		}
+	}
+
+	async function close_edit() {
+		const match = /(.+)\.(svelte|js|json|md|css)$/.exec($selected?.name ?? '');
+
+		const edited_file = $files.find((val) => get_full_filename(val) === editing_name);
+
+		if (!edited_file) return;
+
+		edited_file.name = match ? match[1] : edited_file.name;
+
+		if (!$selected) return;
+
+		if (is_file_name_used($selected)) {
+			let i = 1;
+			let name = $selected.name;
+
+			do {
+				const file = $files.find((val) => get_full_filename(val) === $selected_name);
+
+				if (!file) break;
+
+				file.name = `${name}_${i++}`;
+			} while (is_file_name_used($selected));
+
+			const idx = $files.findIndex((val) => get_full_filename(val) === $selected_name);
+			$files[idx] = edited_file;
+		}
+
+		const idx = $files.findIndex((val) => get_full_filename(val) === $selected_name);
+
+		if (match?.[2]) $files[idx].type = match[2];
+
+		editing_name = null;
+
+		EDITOR_STATE_MAP.delete(get_full_filename($selected));
+
+		// re-select, in case the type changed
+		handle_select($selected_name);
+
+		$files = $files;
+
+		// focus the editor, but wait a beat (so key events aren't misdirected)
+		await tick();
+
+		$module_editor?.focus();
+
+		rebundle();
+	}
+
+	/**
+	 * @param {string} filename
+	 */
+	function remove(filename) {
+		const file = $files.find((val) => get_full_filename(val) === filename);
+		const idx = $files.findIndex((val) => get_full_filename(val) === filename);
+
+		if (!file) return;
+
+		let result = confirm(`Are you sure you want to delete ${get_full_filename(file)}?`);
+
+		if (!result) return;
+
+		$files = $files.filter((file) => get_full_filename(file) !== filename);
+
+		dispatch('remove', { files: $files, diff: file });
+
+		EDITOR_STATE_MAP.delete(get_full_filename(file));
+		handle_select(($selected_name = idx === 1 ? 'App.svelte' : get_full_filename(file)));
+	}
+
+	/** @param {FocusEvent & { currentTarget: HTMLInputElement }} event */
+	async function select_input(event) {
+		await tick();
+
+		event.currentTarget.select();
+	}
+
+	let uid = 1;
+
+	function add_new() {
+		const file = {
+			name: uid++ ? `Component${uid}` : 'Component1',
+			type: 'svelte',
+			source: '',
+			modified: true
+		};
+
+		$files = $files.concat(file);
+
+		editing_name = get_full_filename(file);
+
+		handle_select(editing_name);
+
+		dispatch('add', { files: $files, diff: file });
+
+		$files = $files;
+	}
+
+	/** @param {import('$lib/types').File} editing */
+	function is_file_name_used(editing) {
+		return $files.find(
+			(file) => JSON.stringify(file) !== JSON.stringify($selected) && file.name === editing.name
+		);
+	}
+
+	// drag and drop
+	/** @type {string | null} */
+	let from = null;
+
+	/** @type {string | null} */
+	let over = null;
+
+	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
+	function dragStart(event) {
+		from = event.currentTarget.id;
+	}
+
+	function dragLeave() {
+		over = null;
+	}
+
+	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
+	function dragOver(event) {
+		over = event.currentTarget.id;
+	}
+
+	function dragEnd() {
+		if (from && over) {
+			const from_index = $files.findIndex((file) => file.name === from);
+			const to_index = $files.findIndex((file) => file.name === over);
+
+			const from_component = $files[from_index];
+
+			$files.splice(from_index, 1);
+
+			$files = $files.slice(0, to_index).concat(from_component).concat($files.slice(to_index));
+		}
+
+		from = over = null;
+	}
+</script>
+
+<div class="component-selector">
+	{#if $files.length}
+		<div class="file-tabs" on:dblclick={add_new}>
+			{#each $files as file, index (file.name)}
+				{@const filename = get_full_filename(file)}
+				<div
+					id={file.name}
+					class="button"
+					role="button"
+					tabindex="0"
+					class:active={filename === $selected_name}
+					class:draggable={filename !== editing_name && index !== 0}
+					class:drag-over={over === file.name}
+					on:click={() => select_file(filename)}
+					on:keyup={(e) => e.key === ' ' && select_file(filename)}
+					on:dblclick|stopPropagation={() => {}}
+					draggable={filename !== editing_name}
+					on:dragstart={dragStart}
+					on:dragover|preventDefault={dragOver}
+					on:dragleave={dragLeave}
+					on:drop|preventDefault={dragEnd}
+				>
+					<i class="drag-handle" />
+					{#if file.name === 'App' && filename !== editing_name}
+						<div class="uneditable">
+							App.svelte{#if show_modified && file.modified}*{/if}
+						</div>
+					{:else if filename === editing_name}
+						{@const editing_file = $files.find((file) => get_full_filename(file) === editing_name)}
+
+						{#if editing_file}
+							<span class="input-sizer">
+								{editing_file.name + (/\./.test(editing_file.name) ? '' : `.${editing_file.type}`)}
+							</span>
+
+							<!-- svelte-ignore a11y-autofocus -->
+							<input
+								autofocus
+								spellcheck={false}
+								bind:value={input_value}
+								on:focus={select_input}
+								on:blur={close_edit}
+								on:keydown={(e) =>
+									e.key === 'Enter' && !is_file_name_used(editing_file) && e.currentTarget.blur()}
+								class:duplicate={is_file_name_used(editing_file)}
+							/>
+						{/if}
+					{:else}
+						<div
+							class="editable"
+							title="edit component name"
+							on:click={() => edit_tab(filename)}
+							on:keyup={(e) => e.key === ' ' && edit_tab(filename)}
+						>
+							{file.name}.{file.type}{#if show_modified && file.modified}*{/if}
+						</div>
+
+						<span
+							class="remove"
+							on:click={() => remove(filename)}
+							on:keyup={(e) => e.key === ' ' && remove(filename)}
+						>
+							<svg width="12" height="12" viewBox="0 0 24 24">
+								<line stroke="#999" x1="18" y1="6" x2="6" y2="18" />
+								<line stroke="#999" x1="6" y1="6" x2="18" y2="18" />
+							</svg>
+						</span>
+					{/if}
+				</div>
+			{/each}
+
+			<button class="add-new" on:click={add_new} title="add new component">
+				<svg width="12" height="12" viewBox="0 0 24 24">
+					<line stroke="#999" x1="12" y1="5" x2="12" y2="19" />
+					<line stroke="#999" x1="5" y1="12" x2="19" y2="12" />
+				</svg>
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.component-selector {
+		position: relative;
+		border-bottom: 1px solid var(--sk-text-4);
+		overflow: hidden;
+	}
+
+	.file-tabs {
+		border: none;
+		margin: 0;
+		white-space: nowrap;
+		overflow-x: auto;
+		overflow-y: hidden;
+		height: 10em;
+	}
+
+	.file-tabs .button,
+	.file-tabs button {
+		position: relative;
+		display: inline-block;
+		font: 400 12px/1.5 var(--sk-font);
+		background: var(--sk-back-1);
+		border: none;
+		border-bottom: 3px solid transparent;
+		padding: 12px 14px 8px 16px;
+		margin: 0;
+		color: var(--sk-text-3);
+		border-radius: 0;
+		cursor: pointer;
+	}
+
+	.file-tabs .button.active {
+		/* color: var(--second); */
+		color: var(--sk-text-2, #333);
+		border-bottom: 3px solid var(--sk-theme-1);
+	}
+
+	.editable,
+	.uneditable,
+	.input-sizer,
+	input {
+		display: inline-block;
+		position: relative;
+		line-height: 1;
+	}
+
+	.input-sizer {
+		color: var(--sk-text-3, #ccc);
+	}
+
+	input {
+		position: absolute;
+		width: 100%;
+		left: 16px;
+		top: 12px;
+		font: 400 12px/1.5 var(--sk-font);
+		border: none;
+		color: var(--sk-theme-3);
+		outline: none;
+		background-color: transparent;
+	}
+
+	.duplicate {
+		color: var(--sk-theme-1);
+	}
+
+	.remove {
+		position: absolute;
+		display: none;
+		right: 1px;
+		top: 4px;
+		width: 16px;
+		text-align: right;
+		padding: 12px 0 12px 5px;
+		font-size: 8px;
+		cursor: pointer;
+	}
+
+	.remove:hover {
+		color: var(--sk-theme-3);
+	}
+
+	.file-tabs .button.active .editable {
+		cursor: text;
+	}
+
+	.file-tabs .button.active .remove {
+		display: block;
+	}
+
+	.file-tabs .button.drag-over {
+		background: #67677814;
+	}
+
+	.file-tabs .button.drag-over {
+		cursor: move;
+	}
+
+	.add-new {
+		position: absolute;
+		left: 0;
+		top: 0;
+		padding: 12px 10px 8px 0 !important;
+		height: 40px;
+		text-align: center;
+		background-color: white;
+	}
+
+	.add-new:hover {
+		color: var(--sk-theme-3) !important;
+	}
+
+	.drag-handle {
+		cursor: move;
+		width: 5px;
+		height: 25px;
+		position: absolute;
+		left: 5px;
+		top: 9px;
+		--drag-handle-color: #dedede;
+		background: linear-gradient(
+			to right,
+			var(--sk-back-4, --drag-handle-color) 1px,
+			var(--sk-back-1, white) 1px,
+			var(--sk-back-1, white) 2px,
+			var(--sk-back-4, --drag-handle-color) 2px,
+			var(--sk-back-4, --drag-handle-color) 3px,
+			var(--sk-back-1, white) 3px,
+			var(--sk-back-1, white) 4px,
+			var(--sk-back-4, --drag-handle-color) 4px
+		);
+	}
+
+	svg {
+		position: relative;
+		overflow: hidden;
+		vertical-align: middle;
+		-o-object-fit: contain;
+		object-fit: contain;
+		-webkit-transform-origin: center center;
+		transform-origin: center center;
+
+		stroke: currentColor;
+		stroke-width: 2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		fill: none;
+	}
+</style>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index f2243c4e..6acdcf3c 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -4,7 +4,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { derived, writable } from 'svelte/store';
 	import Bundler from './Bundler.js';
-	import ComponentSelector from './Input/ComponentSelector.svelte';
+	import ComponentSelector from './Input/OldComponentSelector.svelte';
 	import ModuleEditor from './Input/ModuleEditor.svelte';
 	import InputOutputToggle from './InputOutputToggle.svelte';
 	import Output from './Output/Output.svelte';
@@ -39,7 +39,7 @@
 	 */
 	export async function set(data) {
 		$files = data.files;
-		$selected_index = 0;
+		$selected_name = 'App.svelte';
 
 		rebundle();
 
@@ -58,37 +58,33 @@
 	export function markSaved() {
 		$files = $files.map((val) => ({ ...val, modified: false }));
 
-		if (!$selected) return;
+		// if (!$selected) return;
 
-		$files[$selected_index].modified = false;
+		// const current = $files.find(val => get_full_filename(val) === $selected_name).modified = false;
 	}
 
 	/** @param {{ files: import('./types').File[], css?: string }} data */
 	export function update(data) {
-		if (!$selected) return;
-
-		const { name, type } = $selected;
-
 		$files = data.files;
 
-		const matched_component_index = data.files.findIndex(
-			(file) => file.name === name && file.type === type
-		);
+		const matched_file = data.files.find((file) => get_full_filename(file) === $selected_name);
 
-		$selected_index = matched_component_index === -1 ? 0 : matched_component_index;
+		$selected_name = matched_file ? get_full_filename(matched_file) : 'App.svelte';
 
 		injectedCSS = data.css ?? '';
 
-		if (matched_component_index) {
+		if (matched_file) {
 			$module_editor?.update({
-				code: $files[matched_component_index].source,
-				lang: $files[matched_component_index].type
+				code: matched_file.source,
+				lang: matched_file.type
 			});
 
-			$output?.update?.($files[matched_component_index], $compile_options);
+			$output?.update?.(matched_file, $compile_options);
 
 			$module_editor?.clearEditorState();
 		}
+
+		dispatch('change', { files: $files });
 	}
 
 	/** @type {ReturnType<typeof createEventDispatcher<{ change: { files: import('./types').File[] } }>>} */
@@ -115,12 +111,19 @@
 	/** @type {ReplContext['files']} */
 	const files = writable([]);
 
-	/** @type {ReplContext['selected_index']} */
-	const selected_index = writable(-1);
+	/** @type {ReplContext['selected_name']} */
+	const selected_name = writable('App.svelte');
 
 	/** @type {ReplContext['selected']} */
-	const selected = derived([files, selected_index], ([$files, $selected_index]) => {
-		return $selected_index !== -1 ? $files?.[$selected_index] ?? null : null;
+	const selected = derived([files, selected_name], ([$files, $selected_name]) => {
+		return (
+			$files.find((val) => get_full_filename(val) === $selected_name) ?? {
+				name: '',
+				type: '',
+				source: '',
+				modified: false
+			}
+		);
 	});
 
 	/** @type {ReplContext['bundle']} */
@@ -146,7 +149,7 @@
 
 	set_repl_context({
 		files,
-		selected_index,
+		selected_name,
 		selected,
 		bundle,
 		bundler,
@@ -176,24 +179,24 @@
 	let is_select_changing = false;
 
 	/**
-	 * @param {number} index
+	 * @param {string} filename
 	 */
-	async function handle_select(index) {
+	async function handle_select(filename) {
 		is_select_changing = true;
 
-		$selected_index = index;
+		$selected_name = filename;
 
 		if (!$selected) return;
 
 		await $module_editor?.set({ code: $selected.source, lang: $selected.type });
 
-		if (EDITOR_STATE_MAP.has(get_full_filename($selected))) {
-			$module_editor?.setEditorState(EDITOR_STATE_MAP.get(get_full_filename($selected)));
+		if (EDITOR_STATE_MAP.has(filename)) {
+			$module_editor?.setEditorState(EDITOR_STATE_MAP.get(filename));
 		} else {
 			$module_editor?.clearEditorState();
 		}
 
-		EDITOR_STATE_MAP.set(get_full_filename($selected), $module_editor?.getEditorState());
+		EDITOR_STATE_MAP.set(filename, $module_editor?.getEditorState());
 
 		$output?.set($selected, $compile_options);
 
@@ -212,8 +215,10 @@
 			file.source = event.detail.value;
 			file.modified = true;
 
+			const idx = $files.findIndex((val) => get_full_filename(val) === $selected_name);
+
 			// @ts-ignore
-			$files[$selected_index] = file;
+			$files[idx] = file;
 
 			return $files;
 		});
@@ -233,15 +238,7 @@
 	async function go_to_warning_pos(item) {
 		if (!item) return;
 
-		const match = /^(.+)\.(\w+)$/.exec(item.filename);
-		if (!match) return; // ???
-
-		const [, name, type] = match;
-		const file_index = $files.findIndex((file) => file.name === name && file.type === type);
-
-		if (file_index === -1) return;
-
-		await handle_select(file_index);
+		await handle_select(item.filename);
 
 		$module_editor?.focus();
 		$module_editor?.setCursor(item.start.character);
diff --git a/packages/repl/src/lib/types.d.ts b/packages/repl/src/lib/types.d.ts
index 1ac2a320..456c5dbb 100644
--- a/packages/repl/src/lib/types.d.ts
+++ b/packages/repl/src/lib/types.d.ts
@@ -51,7 +51,7 @@ export type File = {
 
 export type ReplState = {
 	files: File[];
-	selected_index: number;
+	selected_name: string;
 	selected: File | null;
 	bundle: Bundle | null;
 	bundler: import('./Bundler').default | null;
@@ -64,7 +64,7 @@ export type ReplState = {
 
 export type ReplContext = {
 	files: Writable<ReplState['files']>;
-	selected_index: Writable<ReplState['selected_index']>;
+	selected_name: Writable<ReplState['selected_name']>;
 	selected: Readable<ReplState['selected']>;
 	bundle: Writable<ReplState['bundle']>;
 	bundler: Writable<ReplState['bundler']>;
@@ -78,7 +78,7 @@ export type ReplContext = {
 
 	// Methods
 	rebundle(): Promise<void>;
-	handle_select(index: number): Promise<void>;
+	handle_select(filename: string): Promise<void>;
 	handle_change(
 		event: CustomEvent<{
 			value: string;

From 097f212b80ac8f6eb3b3fa6c6729249a9b984004 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 27 Jun 2023 20:48:57 +0200
Subject: [PATCH 2/3] (fix) various issues about tab renaming (#497)

---
 .../src/lib/Input/ComponentSelector.svelte    | 228 +++++++++-
 .../src/lib/Input/OldComponentSelector.svelte | 415 ------------------
 packages/repl/src/lib/Repl.svelte             |   2 +-
 .../repl/src/lib/workers/bundler/index.js     |   5 +-
 4 files changed, 222 insertions(+), 428 deletions(-)
 delete mode 100644 packages/repl/src/lib/Input/OldComponentSelector.svelte

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 75d78066..9501cba1 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -1,9 +1,10 @@
 <script>
 	import { get_repl_context } from '$lib/context.js';
 	import { get_full_filename } from '$lib/utils.js';
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, tick } from 'svelte';
 
-	export let show_modified = false;
+	/** @type {boolean}  */
+	export let show_modified;
 
 	/** @type {ReturnType<typeof createEventDispatcher<{
 	 * remove: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
@@ -11,9 +12,6 @@
 	 * }>>} */
 	const dispatch = createEventDispatcher();
 
-	/** @type {string | null} */
-	let editing_name = null;
-
 	const {
 		files,
 		handle_select,
@@ -24,6 +22,117 @@
 		EDITOR_STATE_MAP
 	} = get_repl_context();
 
+	/** @type {string | null} */
+	let editing_name = null;
+
+	let input_value = '';
+
+	/** @param {string} filename */
+	function select_file(filename) {
+		if ($selected_name !== filename) {
+			editing_name = null;
+			handle_select(filename);
+		}
+	}
+
+	/** @param {import('$lib/types').File} file */
+	function edit_tab(file) {
+		if ($selected_name === get_full_filename(file)) {
+			editing_name = get_full_filename(file);
+			input_value = file.name;
+		}
+	}
+
+	async function close_edit() {
+		const match = /(.+)\.(svelte|js|json|md|css)$/.exec(input_value ?? '');
+
+		const edited_file = $files.find((val) => get_full_filename(val) === editing_name);
+
+		if (!edited_file) return;
+
+		edited_file.name = match ? match[1] : input_value;
+
+		if (!$selected) return;
+
+		if (is_file_name_used($selected)) {
+			let i = 1;
+			let name = $selected.name;
+
+			do {
+				const file = $files.find(
+					(val) =>
+						get_full_filename(val) === get_full_filename(edited_file) &&
+						// @ts-ignore
+						val.source === $selected.source
+				);
+
+				if (!file) break;
+
+				file.name = `${name}_${i++}`;
+			} while (is_file_name_used($selected));
+
+			const idx = $files.findIndex(
+				(val) => get_full_filename(val) === get_full_filename(edited_file)
+			);
+			$files[idx] = edited_file;
+		}
+
+		const idx = $files.findIndex(
+			(val) => get_full_filename(val) === get_full_filename(edited_file)
+		);
+		if (match?.[2]) $files[idx].type = match[2];
+
+		if (editing_name) {
+			const old_state = EDITOR_STATE_MAP.get(editing_name);
+			if (old_state) {
+				EDITOR_STATE_MAP.set(get_full_filename(edited_file), old_state);
+				EDITOR_STATE_MAP.delete(editing_name);
+			}
+		}
+
+		editing_name = null;
+
+		// re-select, in case the type changed
+		handle_select(get_full_filename(edited_file));
+
+		$files = $files;
+
+		// focus the editor, but wait a beat (so key events aren't misdirected)
+		await tick();
+
+		$module_editor?.focus();
+
+		rebundle();
+	}
+
+	/**
+	 * @param {string} filename
+	 */
+	function remove(filename) {
+		const file = $files.find((val) => get_full_filename(val) === filename);
+		const idx = $files.findIndex((val) => get_full_filename(val) === filename);
+
+		if (!file) return;
+
+		let result = confirm(`Are you sure you want to delete ${get_full_filename(file)}?`);
+
+		if (!result) return;
+
+		$files = $files.filter((file) => get_full_filename(file) !== filename);
+
+		dispatch('remove', { files: $files, diff: file });
+
+		EDITOR_STATE_MAP.delete(get_full_filename(file));
+		handle_select(($selected_name = idx === 1 ? 'App.svelte' : get_full_filename(file)));
+	}
+
+	/** @param {FocusEvent & { currentTarget: HTMLInputElement }} event */
+	async function select_input(event) {
+		await tick();
+
+		event.currentTarget.select();
+	}
+
 	let uid = 1;
 
 	function add_new() {
@@ -38,9 +147,58 @@
 
 		editing_name = get_full_filename(file);
 
+		input_value = file.name;
+
 		handle_select(editing_name);
 
+		rebundle();
+
 		dispatch('add', { files: $files, diff: file });
+
+		$files = $files;
+	}
+
+	/** @param {import('$lib/types').File} editing */
+	function is_file_name_used(editing) {
+		return $files.find(
+			(file) => JSON.stringify(file) !== JSON.stringify($selected) && file.name === editing.name
+		);
+	}
+
+	// drag and drop
+	/** @type {string | null} */
+	let from = null;
+
+	/** @type {string | null} */
+	let over = null;
+
+	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
+	function dragStart(event) {
+		from = event.currentTarget.id;
+	}
+
+	function dragLeave() {
+		over = null;
+	}
+
+	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
+	function dragOver(event) {
+		over = event.currentTarget.id;
+	}
+
+	function dragEnd() {
+		if (from && over) {
+			const from_index = $files.findIndex((file) => file.name === from);
+			const to_index = $files.findIndex((file) => file.name === over);
+
+			const from_component = $files[from_index];
+
+			$files.splice(from_index, 1);
+
+			$files = $files.slice(0, to_index).concat(from_component).concat($files.slice(to_index));
+		}
+
+		from = over = null;
 	}
 </script>
 
@@ -49,20 +207,70 @@
 		<div class="file-tabs" on:dblclick={add_new}>
 			{#each $files as file, index (file.name)}
 				{@const filename = get_full_filename(file)}
-
-				<button
+				<div
+					id={file.name}
 					class="button"
-					id={filename}
+					role="button"
+					tabindex="0"
 					class:active={filename === $selected_name}
 					class:draggable={filename !== editing_name && index !== 0}
+					class:drag-over={over === file.name}
+					on:click={() => select_file(filename)}
+					on:keyup={(e) => e.key === ' ' && select_file(filename)}
+					on:dblclick|stopPropagation={() => {}}
+					draggable={filename !== editing_name}
+					on:dragstart={dragStart}
+					on:dragover|preventDefault={dragOver}
+					on:dragleave={dragLeave}
+					on:drop|preventDefault={dragEnd}
 				>
 					<i class="drag-handle" />
 					{#if file.name === 'App' && filename !== editing_name}
 						<div class="uneditable">
 							App.svelte{#if show_modified && file.modified}*{/if}
 						</div>
-					{:else if filename === editing_name}{/if}
-				</button>
+					{:else if filename === editing_name}
+						{@const editing_file = $files.find((file) => get_full_filename(file) === editing_name)}
+
+						{#if editing_file}
+							<span class="input-sizer">
+								{input_value + (/\./.test(input_value) ? '' : `.${editing_file.type}`)}
+							</span>
+
+							<!-- svelte-ignore a11y-autofocus -->
+							<input
+								autofocus
+								spellcheck={false}
+								bind:value={input_value}
+								on:focus={select_input}
+								on:blur={close_edit}
+								on:keydown={(e) =>
+									e.key === 'Enter' && !is_file_name_used(editing_file) && e.currentTarget.blur()}
+								class:duplicate={is_file_name_used(editing_file)}
+							/>
+						{/if}
+					{:else}
+						<div
+							class="editable"
+							title="edit component name"
+							on:click={() => edit_tab(file)}
+							on:keyup={(e) => e.key === ' ' && edit_tab(file)}
+						>
+							{file.name}.{file.type}{#if show_modified && file.modified}*{/if}
+						</div>
+
+						<span
+							class="remove"
+							on:click={() => remove(filename)}
+							on:keyup={(e) => e.key === ' ' && remove(filename)}
+						>
+							<svg width="12" height="12" viewBox="0 0 24 24">
+								<line stroke="#999" x1="18" y1="6" x2="6" y2="18" />
+								<line stroke="#999" x1="6" y1="6" x2="18" y2="18" />
+							</svg>
+						</span>
+					{/if}
+				</div>
 			{/each}
 
 			<button class="add-new" on:click={add_new} title="add new component">
diff --git a/packages/repl/src/lib/Input/OldComponentSelector.svelte b/packages/repl/src/lib/Input/OldComponentSelector.svelte
deleted file mode 100644
index 5477532d..00000000
--- a/packages/repl/src/lib/Input/OldComponentSelector.svelte
+++ /dev/null
@@ -1,415 +0,0 @@
-<script>
-	import { get_repl_context } from '$lib/context.js';
-	import { get_full_filename } from '$lib/utils.js';
-	import { createEventDispatcher, tick } from 'svelte';
-
-	/** @type {boolean}  */
-	export let show_modified;
-
-	/** @type {ReturnType<typeof createEventDispatcher<{
-	 * remove: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
-	 * add: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
-	 * }>>} */
-	const dispatch = createEventDispatcher();
-
-	const {
-		files,
-		handle_select,
-		module_editor,
-		rebundle,
-		selected,
-		selected_name,
-		EDITOR_STATE_MAP
-	} = get_repl_context();
-
-	/** @type {string | null} */
-	let editing_name = null;
-
-	let input_value = '';
-
-	/** @param {string} filename */
-	function select_file(filename) {
-		if ($selected_name !== filename) {
-			editing_name = null;
-			handle_select(filename);
-		}
-	}
-
-	/** @param {string} filename */
-	function edit_tab(filename) {
-		if ($selected_name === filename) {
-			editing_name = filename;
-		}
-	}
-
-	async function close_edit() {
-		const match = /(.+)\.(svelte|js|json|md|css)$/.exec($selected?.name ?? '');
-
-		const edited_file = $files.find((val) => get_full_filename(val) === editing_name);
-
-		if (!edited_file) return;
-
-		edited_file.name = match ? match[1] : edited_file.name;
-
-		if (!$selected) return;
-
-		if (is_file_name_used($selected)) {
-			let i = 1;
-			let name = $selected.name;
-
-			do {
-				const file = $files.find((val) => get_full_filename(val) === $selected_name);
-
-				if (!file) break;
-
-				file.name = `${name}_${i++}`;
-			} while (is_file_name_used($selected));
-
-			const idx = $files.findIndex((val) => get_full_filename(val) === $selected_name);
-			$files[idx] = edited_file;
-		}
-
-		const idx = $files.findIndex((val) => get_full_filename(val) === $selected_name);
-
-		if (match?.[2]) $files[idx].type = match[2];
-
-		editing_name = null;
-
-		EDITOR_STATE_MAP.delete(get_full_filename($selected));
-
-		// re-select, in case the type changed
-		handle_select($selected_name);
-
-		$files = $files;
-
-		// focus the editor, but wait a beat (so key events aren't misdirected)
-		await tick();
-
-		$module_editor?.focus();
-
-		rebundle();
-	}
-
-	/**
-	 * @param {string} filename
-	 */
-	function remove(filename) {
-		const file = $files.find((val) => get_full_filename(val) === filename);
-		const idx = $files.findIndex((val) => get_full_filename(val) === filename);
-
-		if (!file) return;
-
-		let result = confirm(`Are you sure you want to delete ${get_full_filename(file)}?`);
-
-		if (!result) return;
-
-		$files = $files.filter((file) => get_full_filename(file) !== filename);
-
-		dispatch('remove', { files: $files, diff: file });
-
-		EDITOR_STATE_MAP.delete(get_full_filename(file));
-		handle_select(($selected_name = idx === 1 ? 'App.svelte' : get_full_filename(file)));
-	}
-
-	/** @param {FocusEvent & { currentTarget: HTMLInputElement }} event */
-	async function select_input(event) {
-		await tick();
-
-		event.currentTarget.select();
-	}
-
-	let uid = 1;
-
-	function add_new() {
-		const file = {
-			name: uid++ ? `Component${uid}` : 'Component1',
-			type: 'svelte',
-			source: '',
-			modified: true
-		};
-
-		$files = $files.concat(file);
-
-		editing_name = get_full_filename(file);
-
-		handle_select(editing_name);
-
-		dispatch('add', { files: $files, diff: file });
-
-		$files = $files;
-	}
-
-	/** @param {import('$lib/types').File} editing */
-	function is_file_name_used(editing) {
-		return $files.find(
-			(file) => JSON.stringify(file) !== JSON.stringify($selected) && file.name === editing.name
-		);
-	}
-
-	// drag and drop
-	/** @type {string | null} */
-	let from = null;
-
-	/** @type {string | null} */
-	let over = null;
-
-	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
-	function dragStart(event) {
-		from = event.currentTarget.id;
-	}
-
-	function dragLeave() {
-		over = null;
-	}
-
-	/** @param {DragEvent & { currentTarget: HTMLDivElement }} event */
-	function dragOver(event) {
-		over = event.currentTarget.id;
-	}
-
-	function dragEnd() {
-		if (from && over) {
-			const from_index = $files.findIndex((file) => file.name === from);
-			const to_index = $files.findIndex((file) => file.name === over);
-
-			const from_component = $files[from_index];
-
-			$files.splice(from_index, 1);
-
-			$files = $files.slice(0, to_index).concat(from_component).concat($files.slice(to_index));
-		}
-
-		from = over = null;
-	}
-</script>
-
-<div class="component-selector">
-	{#if $files.length}
-		<div class="file-tabs" on:dblclick={add_new}>
-			{#each $files as file, index (file.name)}
-				{@const filename = get_full_filename(file)}
-				<div
-					id={file.name}
-					class="button"
-					role="button"
-					tabindex="0"
-					class:active={filename === $selected_name}
-					class:draggable={filename !== editing_name && index !== 0}
-					class:drag-over={over === file.name}
-					on:click={() => select_file(filename)}
-					on:keyup={(e) => e.key === ' ' && select_file(filename)}
-					on:dblclick|stopPropagation={() => {}}
-					draggable={filename !== editing_name}
-					on:dragstart={dragStart}
-					on:dragover|preventDefault={dragOver}
-					on:dragleave={dragLeave}
-					on:drop|preventDefault={dragEnd}
-				>
-					<i class="drag-handle" />
-					{#if file.name === 'App' && filename !== editing_name}
-						<div class="uneditable">
-							App.svelte{#if show_modified && file.modified}*{/if}
-						</div>
-					{:else if filename === editing_name}
-						{@const editing_file = $files.find((file) => get_full_filename(file) === editing_name)}
-
-						{#if editing_file}
-							<span class="input-sizer">
-								{editing_file.name + (/\./.test(editing_file.name) ? '' : `.${editing_file.type}`)}
-							</span>
-
-							<!-- svelte-ignore a11y-autofocus -->
-							<input
-								autofocus
-								spellcheck={false}
-								bind:value={input_value}
-								on:focus={select_input}
-								on:blur={close_edit}
-								on:keydown={(e) =>
-									e.key === 'Enter' && !is_file_name_used(editing_file) && e.currentTarget.blur()}
-								class:duplicate={is_file_name_used(editing_file)}
-							/>
-						{/if}
-					{:else}
-						<div
-							class="editable"
-							title="edit component name"
-							on:click={() => edit_tab(filename)}
-							on:keyup={(e) => e.key === ' ' && edit_tab(filename)}
-						>
-							{file.name}.{file.type}{#if show_modified && file.modified}*{/if}
-						</div>
-
-						<span
-							class="remove"
-							on:click={() => remove(filename)}
-							on:keyup={(e) => e.key === ' ' && remove(filename)}
-						>
-							<svg width="12" height="12" viewBox="0 0 24 24">
-								<line stroke="#999" x1="18" y1="6" x2="6" y2="18" />
-								<line stroke="#999" x1="6" y1="6" x2="18" y2="18" />
-							</svg>
-						</span>
-					{/if}
-				</div>
-			{/each}
-
-			<button class="add-new" on:click={add_new} title="add new component">
-				<svg width="12" height="12" viewBox="0 0 24 24">
-					<line stroke="#999" x1="12" y1="5" x2="12" y2="19" />
-					<line stroke="#999" x1="5" y1="12" x2="19" y2="12" />
-				</svg>
-			</button>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.component-selector {
-		position: relative;
-		border-bottom: 1px solid var(--sk-text-4);
-		overflow: hidden;
-	}
-
-	.file-tabs {
-		border: none;
-		margin: 0;
-		white-space: nowrap;
-		overflow-x: auto;
-		overflow-y: hidden;
-		height: 10em;
-	}
-
-	.file-tabs .button,
-	.file-tabs button {
-		position: relative;
-		display: inline-block;
-		font: 400 12px/1.5 var(--sk-font);
-		background: var(--sk-back-1);
-		border: none;
-		border-bottom: 3px solid transparent;
-		padding: 12px 14px 8px 16px;
-		margin: 0;
-		color: var(--sk-text-3);
-		border-radius: 0;
-		cursor: pointer;
-	}
-
-	.file-tabs .button.active {
-		/* color: var(--second); */
-		color: var(--sk-text-2, #333);
-		border-bottom: 3px solid var(--sk-theme-1);
-	}
-
-	.editable,
-	.uneditable,
-	.input-sizer,
-	input {
-		display: inline-block;
-		position: relative;
-		line-height: 1;
-	}
-
-	.input-sizer {
-		color: var(--sk-text-3, #ccc);
-	}
-
-	input {
-		position: absolute;
-		width: 100%;
-		left: 16px;
-		top: 12px;
-		font: 400 12px/1.5 var(--sk-font);
-		border: none;
-		color: var(--sk-theme-3);
-		outline: none;
-		background-color: transparent;
-	}
-
-	.duplicate {
-		color: var(--sk-theme-1);
-	}
-
-	.remove {
-		position: absolute;
-		display: none;
-		right: 1px;
-		top: 4px;
-		width: 16px;
-		text-align: right;
-		padding: 12px 0 12px 5px;
-		font-size: 8px;
-		cursor: pointer;
-	}
-
-	.remove:hover {
-		color: var(--sk-theme-3);
-	}
-
-	.file-tabs .button.active .editable {
-		cursor: text;
-	}
-
-	.file-tabs .button.active .remove {
-		display: block;
-	}
-
-	.file-tabs .button.drag-over {
-		background: #67677814;
-	}
-
-	.file-tabs .button.drag-over {
-		cursor: move;
-	}
-
-	.add-new {
-		position: absolute;
-		left: 0;
-		top: 0;
-		padding: 12px 10px 8px 0 !important;
-		height: 40px;
-		text-align: center;
-		background-color: white;
-	}
-
-	.add-new:hover {
-		color: var(--sk-theme-3) !important;
-	}
-
-	.drag-handle {
-		cursor: move;
-		width: 5px;
-		height: 25px;
-		position: absolute;
-		left: 5px;
-		top: 9px;
-		--drag-handle-color: #dedede;
-		background: linear-gradient(
-			to right,
-			var(--sk-back-4, --drag-handle-color) 1px,
-			var(--sk-back-1, white) 1px,
-			var(--sk-back-1, white) 2px,
-			var(--sk-back-4, --drag-handle-color) 2px,
-			var(--sk-back-4, --drag-handle-color) 3px,
-			var(--sk-back-1, white) 3px,
-			var(--sk-back-1, white) 4px,
-			var(--sk-back-4, --drag-handle-color) 4px
-		);
-	}
-
-	svg {
-		position: relative;
-		overflow: hidden;
-		vertical-align: middle;
-		-o-object-fit: contain;
-		object-fit: contain;
-		-webkit-transform-origin: center center;
-		transform-origin: center center;
-
-		stroke: currentColor;
-		stroke-width: 2;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		fill: none;
-	}
-</style>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 6acdcf3c..1b5a9b60 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -4,7 +4,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { derived, writable } from 'svelte/store';
 	import Bundler from './Bundler.js';
-	import ComponentSelector from './Input/OldComponentSelector.svelte';
+	import ComponentSelector from './Input/ComponentSelector.svelte';
 	import ModuleEditor from './Input/ModuleEditor.svelte';
 	import InputOutputToggle from './InputOutputToggle.svelte';
 	import Output from './Output/Output.svelte';
diff --git a/packages/repl/src/lib/workers/bundler/index.js b/packages/repl/src/lib/workers/bundler/index.js
index 45447752..1c556091 100644
--- a/packages/repl/src/lib/workers/bundler/index.js
+++ b/packages/repl/src/lib/workers/bundler/index.js
@@ -275,7 +275,8 @@ async function get_bundle(uid, mode, cache, local_files_lookup) {
 				if (importer && local_files_lookup.has(importer)) {
 					// relative import in a REPL file
 					// should've matched above otherwise importee doesn't exist
-					throw new Error(`Cannot find file "${importee}" imported by "${importer}" in the REPL`);
+					console.error(`Cannot find file "${importee}" imported by "${importer}" in the REPL`);
+					return;
 				} else {
 					// relative import in an external file
 					const url = new URL(importee, importer).href;
@@ -289,7 +290,7 @@ async function get_bundle(uid, mode, cache, local_files_lookup) {
 
 				const match = /^((?:@[^/]+\/)?[^/]+)(\/.+)?$/.exec(importee);
 				if (!match) {
-					throw new Error(`Invalid import "${importee}"`);
+					return console.error(`Invalid import "${importee}"`);
 				}
 
 				const pkg_name = match[1];

From 0b2970e8a2cab73213ef3b53182d561be100c31a Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Wed, 28 Jun 2023 00:23:53 +0530
Subject: [PATCH 3/3] Add changeset

---
 .changeset/bright-shoes-boil.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/bright-shoes-boil.md

diff --git a/.changeset/bright-shoes-boil.md b/.changeset/bright-shoes-boil.md
new file mode 100644
index 00000000..30412975
--- /dev/null
+++ b/.changeset/bright-shoes-boil.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/repl': patch
+---
+
+Fix ComponentSelector