Playing with Svelte

src/app.ts

@@ -0,0 +1,6 @@
+import { mount } from 'svelte';
+import App from './components/App.svelte';
+
+const app = document.getElementById('app')!;
+
+mount(App, { target: app });

src/components/App.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Chooser from "./Chooser.svelte";
+  import Editor from "./Editor.svelte";
+
+  let currentFile: string | null = $state(null);
+</script>
+
+{#if currentFile === null}
+    <Chooser bind:file={currentFile}/>
+{:else}
+    <button onclick={() => currentFile = null}>Back</button>
+    <Editor file={currentFile}/>
+{/if}

src/components/Chooser.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    const files = ["foo", "bar", "baz"];
+    let { file = $bindable() } = $props();
+</script>
+
+<style>
+    .file {
+        border: none;
+        background: none;
+        text-align: left;
+        width: 100%;
+    }
+
+    .file:hover {
+        cursor: pointer;
+        background-color: #ddd;
+    }
+</style>
+
+{#each files as availableFile (availableFile)}
+    <button class="file" onclick={() => file = availableFile}>
+        {availableFile}
+        {availableFile === file ? "(*)" : ""}
+    </button>
+{/each}

src/components/Editor.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    const { file } = $props();
+</script>
+
+<p>You are editing {file}.</p>